◆ Colors · Surfaces · v1.0
Surface ladder
Six-step near-black ladder
void → obsidian → surface → elevated
01SURFACE LADDER · 6 steps
always step up in lightness
L0
VOID
★ PAGE
#05060A
Body bgmarketing · auth
L1
OBSIDIAN
★ BAND
#0A0C12
Sectionfooter · sidebar
L2
SUB-CARD
★ NESTED
#0C0E15
Nested cardweb app side
L3
SURFACE
★ CARD
#10131A
Default cardpanels
L4
RAISED
★ POPOVER
#14171F
Modal · menutooltip
L5
ELEVATED
★ HOVER
#181C26
Hover stateactive row
02ELEVATION · stacking visualizes the ladder
each step ≈ +3% L*
L0VOID
L1OBSIDIAN
L2SUB-CARD
L3SURFACE
L4RAISED
L5ELEVATED
03USE PATTERNS · 6 surface roles
where each level lives
L0 · PAGE

Void

The deepest base. Marketing pages, dashboard root, auth screens. Never put text directly on void — always step up to L3+ for cards.

VOID#05060A
L1 · BAND

Obsidian

Section dividers that need separation without contrast. Footer, alternating bands, dashboard sidebar. Mostly visual rhythm.

BAND#0A0C12
L3 · CARD

Surface

The workhorse. Every default card sits at L3. Pricing tiles, dashboard widgets, list items. Border #1E2230.

CARD#10131A
L5 · HOVER

Elevated

Hover and active states. Cards lift from L3 → L5; sidebar items light up here. Brand-glow ring is optional, used for primary affordances.

HOVER#181C26
L4 · MODAL

Raised

Popovers, dropdowns, command palette, modals. Always paired with shadow-modal (0 16px 64px rgba(0,0,0,.6)).

MODAL#14171F
SPECIAL · GLASS

Frosted

The signature glass treatment — sticky navbar after scroll, command palette, overlays. Never on content. Reserved for chrome.

GLASSrgba+blur(20)
04BORDERS · 4 sanctioned strokes
never raise contrast with fills alone
#1E2230
SUBTLE · dividers
#2A2F3B
DEFAULT · cards · inputs
#2A2F3B · DASHED
SECTION · in-card divider
rgba(B6FF1F,.4)
★ BRAND · hover · focus
05CONTRAST · text on each surface
all AAA at body sizes
Headline
Body copy stays #A8B0C0 across the ladder.
18.7 : 1
Headline
Body copy stays #A8B0C0 across the ladder.
18.1 : 1
Headline
Body copy stays #A8B0C0 across the ladder.
17.5 : 1
Headline
Body copy stays #A8B0C0 across the ladder.
15.8 : 1
Headline
Body copy stays #A8B0C0 across the ladder.
14.2 : 1
Headline
Body copy stays #A8B0C0 across the ladder.
12.6 : 1
06TOKEN REFERENCE
--md-* custom properties
L0 · VOIDpage--md-void · #05060A
L1 · OBSIDIANband--md-obsidian · #0A0C12
L2 · SUB-CARDnested--md-surface-1 · #0C0E15
L3 · SURFACEcard--md-surface · #10131A
L4 · RAISEDmodal--md-surface-2 · #14171F
L5 · ELEVATEDhover--md-elevated · #181C26
BORDER · SUBTLEdivider#1E2230
BORDER · DEFAULTcard#2A2F3B
BORDER · BRANDhoverrgba(B6FF1F,.40)
GLASS · OPAQUEchromebackdrop-blur(20px)
STEP · ΔLperceptual~+3% L*
CONTRAST · BODYmin≥ 12.6 : 1 (AAA)