Component gallery

Color tokens

OKLCH variables, retinted live by the theme switcher above.

Surfaces

background

--background

card

--card

popover

--popover

muted

--muted

Brand & interactive

primary

--primary

secondary

--secondary

finite-accent

--finite-accent

finite-accent-hover

--finite-accent-hover

accent (muted hover)

--accent

Status

destructive

--destructive

status-error

--status-error

status-warning

--status-warning

status-info

--status-info

status-success

--status-success

Lines

border

--border

input

--input

ring

--ring

Typography

Geist Sans, Geist Mono, and JetBrains Mono.

The quick brown fox

Body text — browser-native CAD for mechanical design.

font-mono — extrude(profile, distance: 50mm)

Micro label · uppercase · tracked

Buttons

All variants × sizes. The accent variant is the brand action. Every button springs by default — hover or tap any of them.

← MotionButton is now an alias — every Button springs by default

Form controls

Part name

Feature

Show construction geometry Snap to grid

Extrude distance

Feedback & data

defaultsecondarydestructiveoutlineJD

Heads up

This part has unsaved changes.

DFM warning

Wall thickness below 0.8mm in 2 regions.

Tabs, tooltip & cards

Tabbed sections re-theme with the active tokens.

Bracket v2

Aluminum 6061 · 3 features

A card surface using --card / --card-foreground.

Duotone icons

Grouped by domain. Two-tone via currentColor + --icon-accent — use the picker to preview the accent in any color.

Icon accenttheme default

Modeling operations

16 icons

Extrude

ExtrudeIcon

Revolve

RevolveIcon

Fillet

FilletIcon

Sweep

SweepIcon

Loft

LoftIcon

Boolean

BooleanIcon

Shell

ShellIcon

Mirror

MirrorIcon

Split

SplitIcon

Offset Plane

OffsetPlaneIcon

Circular Pattern

CircularPatternIcon

Linear Pattern

LinearPatternIcon

Draft

DraftIcon

Chamfer

ChamferIcon

Delete Body

DeleteBodyIcon

Delete Face

DeleteFaceIcon

Sketch tools

13 icons

Sketch Line

SketchLineIcon

Corner Rectangle

CornerRectangleIcon

Center Rectangle

CenterRectangleIcon

Sketch Circle

SketchCircleIcon

Arc

ArcIcon

Offset

OffsetIcon

Dimension

DimensionIcon

Slot

SlotIcon

Sketch Fillet

SketchFilletIcon

Sketch Use

SketchUseIcon

Tangent Arc

TangentArcIcon

Point

PointIcon

Construction Mode

ConstructionModeIcon

Constraints

2 icons

Coincident

CoincidentIcon

Concentric

ConcentricIcon

Rendered from the design system · see src/lib/gallery.ts for the machine-readable manifest.