design system / v0
Build on a system that holds its shape.
Every token, surface, and control below is generated from the design language, not hand-tuned per page.
color
Four surfaces, one accent family.
Surface
canvas
#ffffff
canvas-soft
#fafafa
canvas-soft-2
#f5f5f5
hairline
#ebebeb
hairline-strong
#a1a1a1
ink
#171717
Text
Deploy.
ink
#171717
Deploy.
body
#4d4d4d
Deploy.
mute
#888888
Semantic
link
link-deep
link-bg-soft
warning
warning-soft
warning-deep
error
error-soft
error-deep
Gradient pairs
Hero scale only. Never miniaturised to an icon, never reduced to a single stop.
develop
#007cf0 → #00dfd8
preview
#7928ca → #ff0080
ship
#ff4d4d → #f9cb28
typography
Negative tracking is the voice.
- display-xl48 / 600 / -0.05em
- Build and deploy on the AI Cloud.
- display-lg32 / 600 / -0.04em
- Build and deploy on the AI Cloud.
- display-md24 / 600 / -0.04em
- Build and deploy on the AI Cloud.
- display-sm20 / 600 / -0.03em
- Build and deploy on the AI Cloud.
- body-lg18 / 400
- Build and deploy on the AI Cloud.
- body-md16 / 400
- Build and deploy on the AI Cloud.
- body-sm14 / 400 / -0.02em
- Build and deploy on the AI Cloud.
- caption12 / 400
- Build and deploy on the AI Cloud.
- code13 / 400 / mono
npx levelerpro deploy --prod
controls
Two shape scales, kept apart.
Marketing pill, 100px radius
Nav scale, 6px radius, 28px tall
surfaces
Stacked shadows, never a single drop.
card
8px radius, 24px padding, soft stack. The default.
card-lg
12px radius, 32px padding, float stack.
card-soft
Tinted sibling for cluster groups.
card-tight
Denser grid card with a 16:9 cap.
card-invert
The polarity flip. Depth without shadow.
~ levelerpro deploy
✓ Building… 2.4s
✓ Uploading assets
Ready at https://levelerpro.com
Level 1 (inset hairline)
Level 2 (subtle drop)
Level 3 (soft stack)
Level 4 (float stack)
Level 5 (modal)
forms
Three heights, one border.
inline
Badges, links, eyebrows.
ship
A compute model for all workloads.
The dark band is the depth cue, so no shadow is required.