Design system

Color tokens

Every color the app paints, read live from the @theme block in global.css. 26 tokens across 6 groups. The Inventory groups shadow Tailwind defaults at their exact values: scan for near-duplicates, collapse them into the named brand and neutral tokens, then delete the stragglers.

Brand 4

brand-orange

rgb(253, 130, 3)

brand-orange-light

rgb(251, 146, 60)

brand-orange-pale

#efb086

dividers, soft accents, tinted panels

brand-orange-dark

#ea580c

hover/active shade (= gradient-orange-3)

Surfaces & neutrals (warm ramp, tuned to the cream background) 6

background

#f9f7f6

page surface (warm cream)

ink

#2a2522

primary text, headings, titles

body

#57514b

body copy, nav links

muted

#8c847c

secondary, meta, captions

border

#e7e1da

hairlines, dividers

disabled

#756c64

disabled UI, e.g. sold-out button

Temperature indicators (hot-yoga heat levels) 3

temp-75

#788a78

temp-90

var(--color-brand-orange)

90° reads as the brand hue

temp-95

#ef4444

Orange gradient stops, used in hero / menu / CTA gradients 5

gradient-orange-1

#fb923c

gradient-orange-2

#f97316

gradient-orange-3

var(--color-brand-orange-dark)

gradient-orange-4

#fd9745

gradient-orange-5

#9a3412

Functional colors (semantic roles, lower priority) 4

blue-500

oklch(62.3% 0.214 259.815)

24 → info / link

red-100

oklch(93.6% 0.032 17.717)

4 → danger bg

red-300

oklch(80.8% 0.114 19.571)

4 → danger border

red-700

oklch(50.5% 0.213 27.518)

4 → danger text

External: MTA subway line colors (not part of the brand system) 4

mta-blue

#0039a6

A / C

mta-g

#6cbe45

mta-red

#ee352e

2 / 3

mta-green

#00933c

4 / 5