Foundations
A quiet, consistent base for the admin experience.
Shared values, thoughtful defaults, and room to build.
Color
The neutral palette
White workspaces, soft layers, and a near-black frame.
White
#ffffffNeutral 50
#f7f7f8Neutral 100
#f1f1f2Neutral 200
#e5e5e7Neutral 500
#707079Neutral 800
#29292dNeutral 950
#0b0b0dsurfacecanvasinkinverseSuccess
Successful outcomesInformation
Helpful contextWarning
Needs attentionDanger
Errors & destructive actionsUse semantic roles in components. Pair status colors with a clear label or message.
Typography
Satoshi
Locally served variable type, with a stable fallback.
Clarity, at every scale.
Clarity, at every scale.
Clarity, at every scale.
Clarity, at every scale.
Clarity, at every scale.
Clarity, at every scale.
Clarity, at every scale.
deployment_01 / 128 MB / 99.9%Body: 14px / 1.5. Sizes use rem units and scale with browser text settings. No external font requests.
Spacing
Space creates hierarchy
Small gaps connect. Larger gaps separate.
space-1space-2space-3space-4space-5space-6space-8space-10space-12space-16Radius & elevation
Radius
Match the curve to the scale of the surface.
sm6pxcontrol8pxpanel12pxworkspace24pxpillFullElevation
Borders define. Shadows lift.
subtleraisedoverlaySubtle borders separate surfaces. Interactive boundaries use the stronger control token.
Focus
Visible by default
A 2px outline with a 3px offset.
Blue on light surfaces. White on dark.
Use Tab to try the links.
Focus rings are drawn here for illustration; keyboard focus follows the same tokens. Never rely on color alone.
Motion
From the trigger
A short approach and scale 0.95 → 1, anchored to the trigger.
Changes stay close to their source.
Preview an anchored surface.
Details follow
Rows arrive 30ms apart. Badges trail by 50ms.
- API workspaceReady
- Account settingsReady
- DeploymentsReady
A little feedback
The surface presses in. The label stays sharp.
Save, then confirm
A steady loading ring. A brief confirmation.
Follow the hand
Direct tracking. 12% stretch. Softer resistance past the edge.
One object, two places
Stable identity. A 32px arc between destinations.
Reveal through a mask
Clip the incoming layer. Keep the base in place.
Change color in place
A circular mask carries the new color across.
Finite, user-triggered motion. No springs or bounce. Motion recipes supply animation; production widgets still need their own complete interaction behavior.
Layout primitives
sm · max 640px<Container size="sm" gutter={4}>
<Stack gap={4}>…</Stack>
</Container>Icons
Lucide, together
55 symbols in one local SVG sprite. Shared paths, consistent strokes.
archivesendarrow-leftchevron-leftchevron-rightarrow-down-leftarrow-downarrow-uparrow-up-downarrow-left-rightarrow-up-rightboxactivitybelldatabasefilesfoldergaugeglobehouseinboxlandmarklayersmenuminuspanel-leftshare-2taguser-roundcheckclock-3corner-down-leftchevron-downcirclecircle-alertcircle-checkcircle-xeyeeye-offinfoimagelayout-gridlistlist-filterloader-circlemailpluspencilrotate-cwsavesearchsettingstrash-2uploadx
<Icon name="save" size={16} />
<Icon name="circle-check" label="Completed" />Lucide 1.70.0 · 24 × 24 viewBox · currentColor · 2px stroke by default. Browse Lucide