LP

Low-Poly 3D

Faceted geometry. Flat-shaded surfaces. A crystalline design language inspired by triangulated meshes, early 3D rendering, and modern geometric illustration.

01

Color Palette

Each face of a low-poly mesh catches light at a different angle, producing a stepped gradient of values rather than smooth shading. This palette captures that progression from deep shadow to bright peak, complemented by warm accent hues that recall the glow of a virtual sun.

Facet Progression

Facet Dark
#1a1e2e
Shadow faces, deep valleys
Facet Mid
#2a3150
Angled surfaces, default fill
Facet Light
#3d4a72
Lit surfaces, mid-elevation
Facet Highlight
#5c6ea0
Direct light faces, highlights
Facet Peak
#8193c4
Peak illumination, specular

Hot Geometry Accents

Amber
#e8943a
Warm highlights, CTA secondary
Flame
#d4533b
Error, destructive, hot edges
Gold
#f2c94c
Warning, premium, sun glint
Cyan
#45c8dc
Primary accent, links, focus
Mint
#4dd9a0
Success, positive, growth

Surface & Text

Background
#0e1118
Base canvas
Card Surface
#1a1e2e
Panels, cards, containers
Elevated
#252c44
Dropdowns, tooltips, popovers
Text Primary
#e4e8f4
Headings, body text
02

Typography

Geometric sans-serifs echo the polygonal construction of low-poly meshes. Exo 2 brings angular character shapes for display text, while Rajdhani provides clean readability at body sizes. Space Mono handles data and code with precision.

Display / Exo 2 800
Triangulated Terrain
Exo 2 ExtraBold, 48px, -1px tracking, uppercase
Heading / Exo 2 700
Faceted Geometry
Exo 2 Bold, 32px, 0.5px tracking, uppercase
Subheading / Exo 2 600
Crystalline Surfaces
Exo 2 SemiBold, 22px, uppercase
Body / Rajdhani 400
Low-poly 3D art reduces complex surfaces into flat triangular faces, each shaded independently to create a faceted, crystalline appearance. This technique emerged from the limitations of early real-time 3D rendering, where polygon counts were severely limited. Today it is embraced as a deliberate aesthetic choice, blending nostalgia with modern minimalism.
Rajdhani Regular, 17px, 1.7 line-height
Caption / Rajdhani 300
Vertex Count: 2,048 · Triangle Count: 4,096 · Flat Shaded
Rajdhani Light, 13px, uppercase, 1px tracking
Monospace / Space Mono 400
mesh.subdivide(iterations: 3)
Space Mono Regular, 14px, code and data

Type Scale

3.5rem Aa
2rem Aa
1.4rem Aa
1.05rem The quick brown fox
0.75rem LABEL
03

Spacing

An 8px base grid keeps geometry aligned, like vertices snapping to a coordinate grid. Each step doubles or halves the previous, creating a predictable rhythm.

--space-xs
4px
--space-sm
8px
--space-md
16px
--space-lg
24px
--space-xl
32px
--space-2xl
48px
--space-3xl
64px
--space-4xl
96px
04

Buttons

Buttons are cut with angular clip-paths, echoing the faceted edges of low-poly geometry. Sharp corners are clipped away to reveal the crystalline silhouette beneath.

Variants

Sizes

With Labels

05

Forms

Form controls use subtle angular clip-paths on their edges. Diamond checkboxes and hexagonal radio buttons reinforce the geometric vocabulary of the system.

Alphanumeric and underscores only
06

Cards & Panels

Cards are clipped into faceted silhouettes. Their visuals use layered linear gradients to simulate the flat-shaded faces of a triangulated surface.

Feature Cards

Terrain
Mountain Range Generator

Procedurally generate low-poly mountain terrain with configurable peak height, ridge density, and erosion parameters.

Character
Poly Animal Kit

A library of 24 low-poly animal meshes optimized for real-time rendering with hand-painted vertex colors.

Water
Crystal Lake Shader

Animated low-poly water surface with vertex displacement, refraction, and flat-shaded wave crests.

Stat Cards

4,096
Triangles
2,048
Vertices
60
FPS
128
Draw Calls

Compact Cards

Utility
Mesh Decimator

Reduce polygon count while preserving silhouette edges and UV islands.

Utility
Normal Recalculator

Recompute face normals for consistent flat shading across merged meshes.

Utility
UV Unwrapper

Automatic UV unwrapping optimized for low-poly models with minimal stretching.

07

Alerts & Notifications

Alert icons use triangular clip-paths as warning beacons. A bold left border provides the color signal while the message area stays readable against the card surface.

i
Mesh Imported
terrain_01.obj loaded successfully with 2,048 vertices and 4,096 faces. All normals are consistent.
+
Export Complete
Low-poly scene exported as glTF 2.0. File size: 1.2 MB. All textures embedded.
!
High Poly Count
Current mesh exceeds 10,000 triangles. Consider running the decimator to maintain the low-poly aesthetic.
x
Render Failed
GPU memory exceeded. Reduce texture resolution or split the mesh into smaller chunks.
08

Badges & Tags

Compact indicators clipped into angular silhouettes. Used for status, categories, and metadata tagging throughout the interface.

Translucent

Terrain Character Vegetation Particle Premium

Solid

New Stable Beta Deprecated
09

Design Principles

The core philosophy behind this design system, drawn from the geometry and rendering techniques of low-poly 3D art.

F
Flat Over Smooth

Embrace discrete faces over smooth gradients. Each surface should read as an independent plane catching light at its own angle, never blurred.

E
Economy of Form

Every polygon must earn its place. Reduce complexity until only the essential silhouette remains. Fewer faces, more impact.

A
Angular Rhythm

Corners are never rounded. Edges are sharp, deliberate, and geometric. The rhythm of angles creates visual energy across the layout.

D
Depth Through Value

Use stepped value changes rather than drop shadows to convey depth. Light and dark faces on the same element create a sense of volume.

10

Code Blocks

Preformatted code uses the monospace font with syntax highlighting drawn from the facet palette. Blocks are subtly clipped at the corners.

// Generate a low-poly icosphere const mesh = new Icosphere({ subdivisions: 2, radius: 5.0, shading: 'flat', jitter: 0.15 }); // Assign face colors by normal angle mesh.faces.forEach(face => { const angle = face.normal.dot(Vec3.UP); face.color = lerpColor( '#1a1e2e', // shadow '#8193c4', // peak angle ); });

Inline code uses a tinted background: mesh.triangulate() or --facet-dark: #1a1e2e.