Design System / Dark

Midnight precision, made actionable.

Near-black surfaces, hairline geometry and one acid-lime signal keep product work clear without visual noise.

Explore componentsDownload spec

Foundation

Color tokens

Void and neutral grays carry the interface. Acid Lime is the sole chromatic action.

Void
#08090a
Carbon
#0f1011
Graphite
#23252a
Mist
#d0d6e0
Paper
#ffffff
Acid Lime
#e4f222
Pulse Green
#27a644
Iris Violet
#6366f1

Typography

Type scale

LinearDisplay / 72 / 510
Built for focus.Heading / 48 / 510
The smallest clear next step.Subheading / 24 / 400
Product decisions should be easy to scan.Body / 15 / 400

Metrics

Spacing & shape

Spacing

44px
88px
1616px
2424px
4848px
9696px

Radius

2px
small
6px
controls
12px
cards

Elevation

Shadows

sm
0 2px 4px
subtle
1px inset
xl
0 4px 32px

Components

Component library

Actions

Only the primary action receives Acid Lime.

Product frame

ENG-2703Refine onboarding sequence

Product screenshot frames stay Carbon with a subtle inset edge.

Guidelines

Use with restraint

Do

  • Use Acid Lime once per view.
  • Separate surfaces with Graphite hairlines.
  • Reserve Berkeley Mono for technical metadata.

Avoid

  • Do not use display weights above 590.
  • Do not add chromatic actions beyond Acid Lime.
  • Do not use outer shadows as general card elevation.
tokens.jsonvariables.csstheme.css