Brand system · unlisted

Tokens.

Parsed out of globals.css when the page is built, so these values cannot drift from the stylesheet. Swatches render the live custom property, so they follow whichever theme you are in; the printed values are the dark-theme declarations.

30 declared in .dark

Surfaces

6 tokens

Hierarchy comes from alpha, not hue. Every surface sits on the same 107 hue at near-zero chroma, so nothing reads tinted.

--backgroundoklch(0.146 0.002 107)

--cardoklch(0.176 0.002 107)

--popoveroklch(0.176 0.002 107)

--mutedoklch(0.21 0.002 107)

--secondaryoklch(0.22 0.002 107)

--accentoklch(0.22 0.002 107)

Lines and borders

7 tokens

Depth is a border, never a shadow. Card borders are alpha over the ground so they work on either theme.

--borderoklch(1 0 0 / 10%)

--border-strongoklch(1 0 0 / 18%)

--card-borderoklch(1 0 0 / 6%)

--card-border-hoveroklch(1 0 0 / 10%)

--hairlineoklch(1 0 0 / 6%)

--inputoklch(1 0 0 / 13%)

--ringoklch(0.6 0.004 107)

Text

5 tokens

Two weights of text and their inverses. Body copy is muted; headings take the full foreground.

--foregroundoklch(0.937 0.003 107)

--muted-foregroundoklch(0.63 0.004 107)

--primaryoklch(0.937 0.003 107)

--primary-foregroundoklch(0.155 0.002 107)

--card-foregroundoklch(0.937 0.003 107)

Accents

5 tokens

Punctuation, never fills. Each instrument owns exactly one and spends it inside its own mark; violet belongs to the collection.

--accent-roseoklch(0.7 0.15 15)

--accent-blueoklch(0.68 0.15 259)

--accent-amberoklch(0.83 0.12 80)

--accent-violetoklch(0.75 0.11 295)

--accent-greenoklch(0.71 0.11 152)

Marks

2 tokens

The two greys PixelRack paints under itself: the panel that shows through the gaps between pixels, and the recessed screen behind the carved device face.

--mark-paneloklch(1 0 0 / 4%)

--mark-screenoklch(1 0 0 / 8%)

Radius

derived

One --radius drives the whole scale. Cards get their own larger --radius-card.

2xl

3xl