Foundations · Color

Neutral ramp

The cool neutral primitive (--p-neutral-0 … 950). Note the ordering — 0 is darkest, 950 is lightest, the reverse of Tailwind's default gray. These theme-independent stops feed every surface, border and text tier in the dark skin.

Full scale · 0 (darkest) → 950 (lightest)

--p-neutral-0 · #080a0e--p-neutral-950 · #f1f4f6

Stops · with the semantic roles they map to

--p-neutral-0

#080a0e

--p-neutral-50

#0c0e13

--bg

--p-neutral-100

#12151a

--surface

--p-neutral-150

#191c22

--surface-2

--p-neutral-200

#21242b

--surface-3

--p-neutral-250

#2a2e35

--p-neutral-300

#373b42

--p-neutral-400

#4f5359

--p-neutral-500

#71747c

--faint

--p-neutral-600

#8e929a

--p-neutral-700

#adb1b9

--muted

--p-neutral-800

#d1d4da

--p-neutral-900

#e2e5e9

--text

--p-neutral-950

#f1f4f6

Hover any tile to lift it, or Tab in for the focus ring — --p-neutral-500 is pinned to :hover via .is-hover so the state reads without a pointer.

reversed ordering

0 is the darkest stop and 950 the lightest — the opposite of Tailwind's gray. Chosen so the near-black dark skin builds up from stop 0.

surfaces

bg = neutral-50, surface = neutral-100, surface-2 = neutral-150, surface-3 = neutral-200 — a tight near-black stack giving subtle elevation without shadow.

text

text = neutral-900, muted = neutral-700, faint = neutral-500. Each step down is one legibility tier quieter.

theme-independent

These are primitives — identical in light and dark. The semantic layer re-points onto them per skin; the ramp itself never moves.

gray-* alias

The DS remaps Tailwind's gray-50…950 onto these REVERSED (gray-50 = neutral-950 = lightest), so legacy gray utilities stay on-palette.