FOUNDATIONS

Color & themes

Every color in the product resolves through a custom property. A theme is a file that redefines them — 44 to 84 declarations, no component changes. That is the whole mechanism.

TOKENS DECLARED: 130
THEMED: 34
FIXED: 27
UNDOCUMENTED: 0

The token contract

Components never reference a hex value or a Tailwind palette color. They reference a role. This is what makes twelve themes cost one file each instead of twelve component trees.

HOW TO CHOOSE

Log a checkpoint / log a review? --action. Nothing else earns this color — the two writes that drive the product loop keep it exclusive on purpose.
Any other button? --primary for the emphasis case, --secondary for the quieter alternative, --destructive for delete flows.
A warning, not a delete? --validation-fail. --destructive is reserved for actions a user is initiating on their own data.
Text hierarchy? --foreground for body, --muted-foreground for labels and captions, --tertiary-text for column headers and table metadata. Three tiers, no more.
A hyperlink inside a paragraph? --link. Splitting it from --actionmeans a paragraph with a link doesn't compete with a nearby CTA.

SURFACES

The stacking order of backgrounds, from page to popover.

--background

Page background — the lowest surface.

--foreground

Default text color, on --background.

--card

A raised surface above the page — list items, panels, most bordered content blocks.

--card-foreground

Text on --card.

--popover

Floating surfaces — menus, tooltips, comboboxes. One step above --card in most themes.

--popover-foreground

Text on --popover.

--muted

Deemphasized surface — disabled fields, hover backgrounds, skeletons.

--muted-foreground

Secondary text — labels, timestamps, hint copy, most subheader use.

INTERACTIVE

Primary actions, secondary surfaces and destructive states.

--primary

Default button color. Not necessarily the CTA — see --action for the two writes that drive the product.

--primary-foreground

Text on --primary.

--secondary

A quieter alternative to --primary. Pairs with muted surfaces.

--secondary-foreground

Text on --secondary.

--accent

Hover / focus emphasis on interactive elements.

--accent-foreground

Text on --accent.

--destructive

Delete flows and unsafe actions. Never overload for a warning — see --validation-fail below.

--destructive-foreground

Text on --destructive.

ACTION

Checkpoints' own emphasis color, distinct from --primary. Used for the CTAs that drive the core loop: log a checkpoint, log a review.

--action

Reserved for the two writes that make Checkpoints Checkpoints. Log-checkpoint, log-review, and nothing else — the whole system loses meaning if it starts landing on secondary buttons.

--action-foreground

Text on --action.

--background-accent

A subtle tint of the action color for hovers on action-adjacent controls.

--link

Inline hyperlinks in body copy. Distinct from --action so a paragraph with a link doesn't compete with a nearby CTA.

LINES & INPUTS

Borders, dividers, focus rings and field surfaces.

--border

Default hairline — cards, container borders, top and bottom rules.

--input

Border color for text inputs and selects. Usually the same value as --border, split so a theme can make fields stand out.

--input-bg

Field background. Often --background on dark themes, one step lighter on light ones.

--divider

Row separators inside dense lists. Weaker than --border.

--ring

Focus outline color. Used at ring-2 with an offset.

--placeholder

Placeholder text in inputs.

--tertiary-text

Third-tier prose — column headers, table metadata, small captions. Weaker than --muted-foreground; sits at roughly 40% of the foreground.

SEMANTIC

Score bands and validation feedback. Fixed meanings across themes.

--score-high

Rating 7+ / anything the product wants to celebrate.

--score-medium

Ratings 4–6.

--score-low

Ratings 1–3.

--validation-pass

Non-destructive success — form saved, sync complete.

--validation-fail

Recoverable warning or error. Distinct from --destructive, which is for user-initiated deletes.

--os-green

Terminal-style up-state indicator. Used in the connection / status lights.

--os-red

Terminal-style down-state indicator.

Fixed colors

Not every color is themed, and the exceptions are deliberate. These are declared at :root or in @theme rather than in a theme file — which is the mechanism that makes them fixed, not a convention anyone has to remember.

MEDIA CHROME

Chrome that sits on top of a video still, cover art or a user-chosen tier color. The backdrop is arbitrary, so a themed foreground would invert with the theme and disappear — these two are fixed on purpose.

--scrim

The dark wash placed over media. Use with an opacity: bg-scrim/70.

--on-media

Foreground on media or on a scrim. Also the right choice over an arbitrary user-chosen color.

TIERS

Tier-list ranks S through F. Fixed rather than per-theme — an S tier is blue under every skin, the way a gold medal is gold. S is a distinct blue; A through F run teal → green → gold → orange → red so the ranking reads as a cool-to-hot scale. Reach for bg-tier-s … bg-tier-f.

--tier-s

S rank. Distinct blue, off the teal-to-red scale that follows.

--tier-a

A rank. Teal — the cool end of the A–F scale.

--tier-b

B rank. Green.

--tier-c

C rank. Gold. Mid-scale, dark enough for white labels.

--tier-d

D rank. Orange.

--tier-f

F rank. Red — the hot end of the scale.

MEDALS

Achievement tiers. A gold medal is gold under every theme, so these do not participate in theming. Reach for MILESTONE_TIER_STYLES rather than the raw tokens — it maps a tier to its border, background and label classes in one place.

--ms-bronze

--ms-silver

--ms-gold

--ms-platinum

--ms-ruby

--ms-emerald

--ms-diamond

--ms-amethyst

Gradient-only. The legendary ramp needs a sixth hue; no medal uses it alone.

BRAND PALETTE

The neon ramp the default identity is built from, kept as a raw scale. Product code should reach for a role token instead — this is here so a theme author can see what the house color actually is.

--color-neon-50

--color-neon-100

--color-neon-200

--color-neon-300

--color-neon-400

--color-neon-500

The brand green, #00FF40. Mirrored in lib/og-palette.ts for Satori.

--color-neon-600

--color-neon-700

--color-neon-800

--color-neon-900

--color-neon-950

Depth & CRT effects

Shadows and an opacity rather than colors, so they get no swatch — but they are themed, and a theme that ignores them reads flat next to one that doesn't.

--glow-sm

Tight halo for small emphasis — active chips, focused pixel controls.

--glow-md

Two-stop glow for buttons and cards that need to read as lit.

--glow-lg

Widest bloom. Hero and ceremony moments only.

--scanline-opacity

Strength of the CRT scanline overlay. Themes that aren't CRT set it to 0.

Twelve themes

Rendered inline, each scoped to its own data-theme island. These are not screenshots — they are the same live components as everywhere else on this site.

TERMINAL

Phosphor green on near-black. Dense, grid-locked, character-bordered.

AMBER

TERMINAL

80s amber CRT. Warm phosphor on black, like a vintage terminal.

MONOCHROME

TERMINAL

Pure black and white. No color, no compromise.

NEBULA

DEFAULT

Cosmic violet & cyan on deep navy. Soft sans-serif, eye-friendly.

SUPER NES

DEFAULT

North American Super Nintendo. Cool gray with tonal purple.

SUPER FAMICOM

DEFAULT

Japanese Super Famicom. Warm gray with red, yellow, blue, and green accents.

PHOSPHOR

DEFAULT

Classic CRT monitor. The original Checkpoints look.

RPG

DEFAULT

Parchment & gold. For the adventurer in you.

PLAYSTATION

DEFAULT

PS3 XrossMediaBar aesthetic.

XBOX 360

DEFAULT

NXE dashboard. Bright, white, with that signature green pop.

WII

DEFAULT

Wii System Menu channels. Clean white with cool blue light.

MS-DOS

DEFAULT

Classic MS-DOS blue screen aesthetic.

Per-theme token values

The raw declarations parsed out of each theme file at build time. Useful for spotting a theme that forgot to override something.

TERMINAL49 TOKENS

--background

hsl(0 0% 4%)

Page background — the lowest surface.

--foreground

#00FF40

Default text color, on --background.

--card

hsl(0 0% 4%)

A raised surface above the page — list items, panels, most bordered content blocks.

--card-foreground

#00FF40

Text on --card.

--popover

hsl(0 0% 6%)

Floating surfaces — menus, tooltips, comboboxes. One step above --card in most themes.

--popover-foreground

#00FF40

Text on --popover.

--muted

hsl(0 0% 9%)

Deemphasized surface — disabled fields, hover backgrounds, skeletons.

--muted-foreground

#029727

Secondary text — labels, timestamps, hint copy, most subheader use.

--action

hsl(135 100% 50%)

Reserved for the two writes that make Checkpoints Checkpoints. Log-checkpoint, log-review, and nothing else — the whole system loses meaning if it starts landing on secondary buttons.

--action-foreground

#000000

Text on --action.

--background-accent

hsl(135 100% 40%)

A subtle tint of the action color for hovers on action-adjacent controls.

--link

hsl(135 100% 60%)

Inline hyperlinks in body copy. Distinct from --action so a paragraph with a link doesn't compete with a nearby CTA.

AMBER49 TOKENS

--background

hsl(30 20% 4%)

Page background — the lowest surface.

--foreground

#FFA100

Default text color, on --background.

--card

hsl(30 20% 4%)

A raised surface above the page — list items, panels, most bordered content blocks.

--card-foreground

#FFA100

Text on --card.

--popover

hsl(30 15% 6%)

Floating surfaces — menus, tooltips, comboboxes. One step above --card in most themes.

--popover-foreground

#FFA100

Text on --popover.

--muted

hsl(30 10% 9%)

Deemphasized surface — disabled fields, hover backgrounds, skeletons.

--muted-foreground

#805100

Secondary text — labels, timestamps, hint copy, most subheader use.

--action

hsl(38 100% 50%)

Reserved for the two writes that make Checkpoints Checkpoints. Log-checkpoint, log-review, and nothing else — the whole system loses meaning if it starts landing on secondary buttons.

--action-foreground

#000000

Text on --action.

--background-accent

hsl(38 100% 40%)

A subtle tint of the action color for hovers on action-adjacent controls.

--link

hsl(38 100% 60%)

Inline hyperlinks in body copy. Distinct from --action so a paragraph with a link doesn't compete with a nearby CTA.

MONOCHROME49 TOKENS

--background

hsl(0 0% 0%)

Page background — the lowest surface.

--foreground

hsl(0 0% 85%)

Default text color, on --background.

--card

hsl(0 0% 0%)

A raised surface above the page — list items, panels, most bordered content blocks.

--card-foreground

hsl(0 0% 85%)

Text on --card.

--popover

hsl(0 0% 5%)

Floating surfaces — menus, tooltips, comboboxes. One step above --card in most themes.

--popover-foreground

hsl(0 0% 85%)

Text on --popover.

--muted

hsl(0 0% 9%)

Deemphasized surface — disabled fields, hover backgrounds, skeletons.

--muted-foreground

hsl(0 0% 45%)

Secondary text — labels, timestamps, hint copy, most subheader use.

--action

hsl(0 0% 100%)

Reserved for the two writes that make Checkpoints Checkpoints. Log-checkpoint, log-review, and nothing else — the whole system loses meaning if it starts landing on secondary buttons.

--action-foreground

#000000

Text on --action.

--background-accent

hsl(0 0% 80%)

A subtle tint of the action color for hovers on action-adjacent controls.

--link

hsl(0 0% 80%)

Inline hyperlinks in body copy. Distinct from --action so a paragraph with a link doesn't compete with a nearby CTA.

NEBULA84 TOKENS

--background

hsl(230 45% 7%)

Page background — the lowest surface.

--foreground

hsl(220 25% 96%)

Default text color, on --background.

--card

hsl(230 35% 11%)

A raised surface above the page — list items, panels, most bordered content blocks.

--card-foreground

hsl(220 25% 96%)

Text on --card.

--popover

hsl(230 32% 13%)

Floating surfaces — menus, tooltips, comboboxes. One step above --card in most themes.

--popover-foreground

hsl(220 25% 96%)

Text on --popover.

--muted

hsl(235 30% 13%)

Deemphasized surface — disabled fields, hover backgrounds, skeletons.

--muted-foreground

hsl(225 15% 60%)

Secondary text — labels, timestamps, hint copy, most subheader use.

--action

hsl(280 85% 68%)

Reserved for the two writes that make Checkpoints Checkpoints. Log-checkpoint, log-review, and nothing else — the whole system loses meaning if it starts landing on secondary buttons.

--action-foreground

#000000

Text on --action.

--background-accent

hsl(280 85% 68%)

A subtle tint of the action color for hovers on action-adjacent controls.

--link

hsl(190 90% 60%)

Inline hyperlinks in body copy. Distinct from --action so a paragraph with a link doesn't compete with a nearby CTA.

SUPER NES44 TOKENS

--background

#d8d3df

Page background — the lowest surface.

--foreground

#3e3289

Default text color, on --background.

--card

#e3dfe8

A raised surface above the page — list items, panels, most bordered content blocks.

--card-foreground

#3e3289

Text on --card.

--popover

#ece9f0

Floating surfaces — menus, tooltips, comboboxes. One step above --card in most themes.

--popover-foreground

#3e3289

Text on --popover.

--muted

#c5c0d0

Deemphasized surface — disabled fields, hover backgrounds, skeletons.

--muted-foreground

#6e5cae

Secondary text — labels, timestamps, hint copy, most subheader use.

--action

#3e3289

Reserved for the two writes that make Checkpoints Checkpoints. Log-checkpoint, log-review, and nothing else — the whole system loses meaning if it starts landing on secondary buttons.

--action-foreground

#ffffff

Text on --action.

--background-accent

#6e5cae

A subtle tint of the action color for hovers on action-adjacent controls.

--link

#3e3289

Inline hyperlinks in body copy. Distinct from --action so a paragraph with a link doesn't compete with a nearby CTA.

SUPER FAMICOM44 TOKENS

--background

#d9d4c4

Page background — the lowest surface.

--foreground

#11243a

Default text color, on --background.

--card

#e4dfd0

A raised surface above the page — list items, panels, most bordered content blocks.

--card-foreground

#11243a

Text on --card.

--popover

#ede9dc

Floating surfaces — menus, tooltips, comboboxes. One step above --card in most themes.

--popover-foreground

#11243a

Text on --popover.

--muted

#c4c0b2

Deemphasized surface — disabled fields, hover backgrounds, skeletons.

--muted-foreground

#4d5256

Secondary text — labels, timestamps, hint copy, most subheader use.

--action

#1c70be

Reserved for the two writes that make Checkpoints Checkpoints. Log-checkpoint, log-review, and nothing else — the whole system loses meaning if it starts landing on secondary buttons.

--action-foreground

#ffffff

Text on --action.

--background-accent

#1c70be

A subtle tint of the action color for hovers on action-adjacent controls.

--link

#155794

Inline hyperlinks in body copy. Distinct from --action so a paragraph with a link doesn't compete with a nearby CTA.

PHOSPHOR44 TOKENS

--background

hsl(0 0% 2%)

Page background — the lowest surface.

--foreground

hsl(0 0% 96%)

Default text color, on --background.

--card

hsl(0 0% 4%)

A raised surface above the page — list items, panels, most bordered content blocks.

--card-foreground

hsl(0 0% 96%)

Text on --card.

--popover

hsl(0 0% 6%)

Floating surfaces — menus, tooltips, comboboxes. One step above --card in most themes.

--popover-foreground

hsl(0 0% 96%)

Text on --popover.

--muted

hsl(0 0% 8%)

Deemphasized surface — disabled fields, hover backgrounds, skeletons.

--muted-foreground

hsl(0 0% 62%)

Secondary text — labels, timestamps, hint copy, most subheader use.

--action

hsl(120 100% 50%)

Reserved for the two writes that make Checkpoints Checkpoints. Log-checkpoint, log-review, and nothing else — the whole system loses meaning if it starts landing on secondary buttons.

--action-foreground

#000000

Text on --action.

--background-accent

hsl(120 100% 40%)

A subtle tint of the action color for hovers on action-adjacent controls.

--link

hsl(120 100% 70%)

Inline hyperlinks in body copy. Distinct from --action so a paragraph with a link doesn't compete with a nearby CTA.

RPG51 TOKENS

--background

hsl(28 35% 8%)

Page background — the lowest surface.

--foreground

hsl(43 70% 84%)

Default text color, on --background.

--card

hsl(28 35% 12%)

A raised surface above the page — list items, panels, most bordered content blocks.

--card-foreground

hsl(43 70% 84%)

Text on --card.

--popover

hsl(28 35% 10%)

Floating surfaces — menus, tooltips, comboboxes. One step above --card in most themes.

--popover-foreground

hsl(43 70% 84%)

Text on --popover.

--muted

hsl(25 40% 13%)

Deemphasized surface — disabled fields, hover backgrounds, skeletons.

--muted-foreground

hsl(35 35% 52%)

Secondary text — labels, timestamps, hint copy, most subheader use.

--action

hsl(46 80% 58%)

Reserved for the two writes that make Checkpoints Checkpoints. Log-checkpoint, log-review, and nothing else — the whole system loses meaning if it starts landing on secondary buttons.

--action-foreground

hsl(28 60% 8%)

Text on --action.

--background-accent

hsl(46 80% 50%)

A subtle tint of the action color for hovers on action-adjacent controls.

--link

hsl(46 66% 60%)

Inline hyperlinks in body copy. Distinct from --action so a paragraph with a link doesn't compete with a nearby CTA.

PLAYSTATION49 TOKENS

--background

hsl(216 80% 6%)

Page background — the lowest surface.

--foreground

hsl(0 0% 100%)

Default text color, on --background.

--card

hsl(216 60% 10%)

A raised surface above the page — list items, panels, most bordered content blocks.

--card-foreground

hsl(0 0% 100%)

Text on --card.

--popover

hsl(216 60% 12%)

Floating surfaces — menus, tooltips, comboboxes. One step above --card in most themes.

--popover-foreground

hsl(0 0% 100%)

Text on --popover.

--muted

hsl(216 40% 14%)

Deemphasized surface — disabled fields, hover backgrounds, skeletons.

--muted-foreground

hsl(216 18% 68%)

Secondary text — labels, timestamps, hint copy, most subheader use.

--action

hsl(207 100% 50%)

Reserved for the two writes that make Checkpoints Checkpoints. Log-checkpoint, log-review, and nothing else — the whole system loses meaning if it starts landing on secondary buttons.

--action-foreground

hsl(0 0% 100%)

Text on --action.

--background-accent

hsl(207 100% 42%)

A subtle tint of the action color for hovers on action-adjacent controls.

--link

hsl(207 100% 65%)

Inline hyperlinks in body copy. Distinct from --action so a paragraph with a link doesn't compete with a nearby CTA.

XBOX 36049 TOKENS

--background

hsl(75 8% 95%)

Page background — the lowest surface.

--foreground

hsl(120 8% 10%)

Default text color, on --background.

--card

hsl(0 0% 100%)

A raised surface above the page — list items, panels, most bordered content blocks.

--card-foreground

hsl(120 8% 10%)

Text on --card.

--popover

hsl(0 0% 100%)

Floating surfaces — menus, tooltips, comboboxes. One step above --card in most themes.

--popover-foreground

hsl(120 8% 10%)

Text on --popover.

--muted

hsl(75 10% 92%)

Deemphasized surface — disabled fields, hover backgrounds, skeletons.

--muted-foreground

hsl(120 6% 38%)

Secondary text — labels, timestamps, hint copy, most subheader use.

--action

hsl(98 70% 42%)

Reserved for the two writes that make Checkpoints Checkpoints. Log-checkpoint, log-review, and nothing else — the whole system loses meaning if it starts landing on secondary buttons.

--action-foreground

hsl(0 0% 100%)

Text on --action.

--background-accent

hsl(98 70% 35%)

A subtle tint of the action color for hovers on action-adjacent controls.

--link

hsl(98 70% 35%)

Inline hyperlinks in body copy. Distinct from --action so a paragraph with a link doesn't compete with a nearby CTA.

WII49 TOKENS

--background

hsl(205 25% 94%)

Page background — the lowest surface.

--foreground

hsl(210 12% 14%)

Default text color, on --background.

--card

hsl(0 0% 100%)

A raised surface above the page — list items, panels, most bordered content blocks.

--card-foreground

hsl(210 12% 14%)

Text on --card.

--popover

hsl(0 0% 100%)

Floating surfaces — menus, tooltips, comboboxes. One step above --card in most themes.

--popover-foreground

hsl(210 12% 14%)

Text on --popover.

--muted

hsl(205 20% 92%)

Deemphasized surface — disabled fields, hover backgrounds, skeletons.

--muted-foreground

hsl(210 8% 42%)

Secondary text — labels, timestamps, hint copy, most subheader use.

--action

hsl(205 78% 48%)

Reserved for the two writes that make Checkpoints Checkpoints. Log-checkpoint, log-review, and nothing else — the whole system loses meaning if it starts landing on secondary buttons.

--action-foreground

hsl(0 0% 100%)

Text on --action.

--background-accent

hsl(205 78% 42%)

A subtle tint of the action color for hovers on action-adjacent controls.

--link

hsl(205 78% 40%)

Inline hyperlinks in body copy. Distinct from --action so a paragraph with a link doesn't compete with a nearby CTA.

MS-DOS49 TOKENS

--background

hsl(240 100% 33%)

Page background — the lowest surface.

--foreground

hsl(0 0% 67%)

Default text color, on --background.

--card

hsl(240 100% 28%)

A raised surface above the page — list items, panels, most bordered content blocks.

--card-foreground

hsl(0 0% 67%)

Text on --card.

--popover

hsl(240 100% 28%)

Floating surfaces — menus, tooltips, comboboxes. One step above --card in most themes.

--popover-foreground

hsl(0 0% 100%)

Text on --popover.

--muted

hsl(240 70% 38%)

Deemphasized surface — disabled fields, hover backgrounds, skeletons.

--muted-foreground

hsl(0 0% 80%)

Secondary text — labels, timestamps, hint copy, most subheader use.

--action

hsl(0 0% 100%)

Reserved for the two writes that make Checkpoints Checkpoints. Log-checkpoint, log-review, and nothing else — the whole system loses meaning if it starts landing on secondary buttons.

--action-foreground

hsl(240 100% 33%)

Text on --action.

--background-accent

hsl(60 100% 50%)

A subtle tint of the action color for hovers on action-adjacent controls.

--link

hsl(60 100% 75%)

Inline hyperlinks in body copy. Distinct from --action so a paragraph with a link doesn't compete with a nearby CTA.