Foundations

Layered greys, one accent

Every colour is a token, named for what it does. Surfaces step up from a charcoal ground; the accent is the only saturated colour on a screen, and it belongs to the city.

How colours are carried

Each role is an H S% L% triplet on a custom property, so every utility keeps Tailwind’s opacity modifier: bg-surface/60, border-primary/40. Dark is the default on :root; .light swaps the values and .dark or .on-dark puts a dark island back inside a light page.

Never a hex in a component

A raw hex cannot follow the theme, the accent, or the light mode. Reach for the role; if no role fits, the role is missing — add it to the tokens package, not to the component.

The accent

Painted per city. Apps write only --primary, --primary-foreground and --primary-hover, together; ring and brand derive from --primary where they are used. Change the city in the toolbar — this row follows.

primary

--primary

bg-primary

The accent.

primary-foreground

--primary-foreground

text-primary-foreground

Black or white, whichever reads on the accent.

primary-hover

--primary-hover

bg-primary-hover

Ten lightness points down.

brand

--brand-text

text-brand

Accent text. A light theme may set a darker --brand-text.

ring

--ring

ring-ring

Focus rings follow the accent.

Surfaces

The FAST greys. A page reads in layers — ink, then band, then surface — never as a flat black.

ink

--ink

bg-ink

dark225 12.5% 6.3%

light220 20% 97%

The page ground. A charcoal, never pure black.

band

--band

bg-band

dark220 13% 9%

light220 16% 94%

The band a section fades through; sidebars.

surface

--surface

bg-surface

dark222.9 11.9% 11.6%

light0 0% 100%

What a card or panel sits on.

surface-raised

--surface-raised

bg-surface-raised

dark220 11.4% 15.5%

light0 0% 100%

A panel on a panel.

line

--line

border-line

dark223.6 11.1% 19.4%

light220 14% 88%

Hairlines and borders.

line-border

--line-border

border-line-border

dark222.9 10.1% 86.5%

light220 13% 78%

The corner ticks.

shadcn roles

The standard set, kept so every shadcn class in the hub and the game keeps working. They map onto the FAST greys.

background

--background

bg-background

dark225 12.5% 6.3%

light220 20% 97%

foreground

--foreground

text-foreground

dark220 17.6% 96.7%

light222 20% 11%

card

--card

bg-card

dark222.9 11.9% 11.6%

light0 0% 100%

popover

--popover

bg-popover

dark220 13% 9%

light0 0% 100%

secondary

--secondary

bg-secondary

dark223.6 11.1% 19.4%

light220 16% 94%

muted

--muted

bg-muted

dark222.9 11.9% 11.6%

light220 16% 95%

muted-foreground

--muted-foreground

text-muted-foreground

dark222 8% 62%

light220 9% 42%

accent

--accent

bg-accent

dark223.6 11.1% 19.4%

light220 16% 92%

shadcn’s hover grey — not the city accent.

border

--border

border-border

dark223.6 11.1% 19.4%

light220 14% 88%

input

--input

border-input

dark223.6 11.1% 19.4%

light220 14% 85%

Status

success

--success

bg-success

dark144.5 74.8% 59.6%

light130 72% 48%

success-text

--success-text

text-success-text

dark144.5 74.8% 59.6%

light130 80% 24%

Readable on the theme ground.

danger

--danger

bg-danger

dark356.8 95% 60.8%

light0 84.2% 60.2%

danger-text

--danger-text

text-danger-text

dark0 95% 59%

light0 75% 38%

Readable on the theme ground.

warning

--warning

bg-warning

dark25.8 100% 59.8%

light25.8 100% 59.8%

A city under maintenance.

info

--info

bg-info

dark202.8 100% 62.4%

light202.8 100% 62.4%

destructive

--destructive

bg-destructive

dark356.8 95% 60.8%

light0 84.2% 60.2%

shadcn’s name for danger.

Charts

chart-1

--chart-1

bg-chart-1

dark39 95.2% 58.8%

light12 76% 61%

chart-2

--chart-2

bg-chart-2

dark144.5 74.8% 59.6%

light173 58% 39%

chart-3

--chart-3

bg-chart-3

dark202.8 100% 62.4%

light197 37% 24%

chart-4

--chart-4

bg-chart-4

dark356.8 95% 60.8%

light43 74% 66%

chart-5

--chart-5

bg-chart-5

dark260.5 100% 74.1%

light27 87% 67%

Tiers and partners

Brand constants, the same in every theme, as --fast-*.

Partner

--fast-partner

bg-partner

Premium

--fast-premium

bg-premium

Silver

--fast-silver

bg-silver

Bronze

--fast-bronze

bg-bronze

Pazar

--fast-pazar

bg-pazar

Primitives

The raw palette. Components never use it directly; the roles above name what each value is for. Exported as primitives and in tokens.json.

yellow

#FAB432

yellowHover

#D29625

red

#FA3C46

green

#4BE58A

orange

#FF8A32

info

#3FB6FF

pink

#FF4F9A

teal

#2EE6C5

purple

#A87BFF

cyan

#3FD3F5

ink

#0E0F12

band

#14161A

surface

#1A1C21

surfaceRaised

#23262C

line

#2C2F37

tick

#D9DBE0

white

#F5F6F8

black

#08090B

partner

#3D6DFA

premium

#F9EF8C

silver

#E2E2E2

bronze

#685732

pazar

#10B981