01. Foundations

Chapter 01·Raw materials
Color, space, radius, elevation. Everything else inherits from these. All values are exposed as CSS custom properties in tokens.css.

The core seven.

These are the only colors you should reach for without thinking. Obsidian is our ground. Gold is our single warm signal. Nebula carries cool information. Everything else is a derivative.

Obsidian
#09090b
App background · primary surface
Obsidian 2
#111113
Cards · raised surface
Nebula 700
#1e3a5f
Cool accent · data
Nebula 300
#a8caec
Beams · info signals
Gold 700
#b88a1c
Accent on light
Gold 500
#eab308
Primary accent · conviction
Gold 200
#fde047
Shimmer · emphasis

Full ramps.

Extended scales for when you need more than the core seven. Never invent outside these — if a ramp feels short, add a step to the existing scale, don't start a new one. Gold is 9 steps; Nebula and Obsidian are 10.

Obsidian — ground

10 steps · surface ladder
50
100
200
300
400
500
600
700
800
900

Gold — conviction

9 steps · single accent
100
200
300
400
500 ★
600
700
900

Nebula — cool signal

7 steps · beams & info
900
700
500
400
300
200
100

Signal colors.

Four states: success, warning, error, info. We use them sparingly, never for decoration. A pill or a border — rarely a fill. Never place signal colors where they'll compete with Gold for attention.

Success
#22c55e
Form submitted · Live badge
Warning
#f59e0b
Soft alert · attention
Error
#ef4444
Failed submission
Info
#a8caec
Neutral notice · Beta

Spacing scale.

An 8-point grid with two friendlier low steps (4, 12) and a monument tier (192) for the breathing room between sections. When in doubt, choose the next step up — Luminocity likes air.

Radius + elevation.

Radius is soft but never playful. Elevation is rare — we use glow more often than shadow, because the brand lives in the dark and things should emit light, not cast it.

Radius

r-xs
4px · pills in text
r-sm
8px · inputs, small cards
r-md
12px · dropdowns, popovers
r-lg
16px · product cards
r-xl
24px · hero containers
r-full
9999px · buttons, badges

Elevation & glow

shadow-sm
inline hover
shadow-md
dropdowns
shadow-lg
modals
glow-gold
hover on primary
glow-gold-lg
hero core
glow-nebula
info surfaces

Surface rules.

Four surfaces, stacked from deepest to highest. Borders step in lockstep — deeper surfaces have fainter borders. Never stack more than three levels; if you need more hierarchy, reach for type or glow, not another panel.

surface-sunken · #050506
bg · #09090b
surface · #111113
surface-raised · #1a1a1f