Component & design-token showcase

Colors

Every surface/border/text color in the app should read from one of these — never a hardcoded hex. Toggle the theme switch in the top bar; every swatch below is live.

Sourced from zeyo-ui/tokens.css — the single :root/.dark block every app (dashboard, admin, marketing, ui) imports, rather than a per-app copy. A separate shadcn-style token set (--background, --primary, …) also exists per-app for a couple of Tailwind/shadcn utility classes — it's legacy and not shown here.

Surface

--bg

Page background, card fill

#ffffff #0a0a0a
--sf

Subtle raised surface, hover fill

#fafafa #141414
--sfh

Header/footer surface, one step up from sf

#f4f2f0 #1c1c1c
--tertiary

Warm accent surface (rare)

#faf7f0 #161311

Border

--bd

Default border

#e8e6e3 #282828
--bds

Subtle border (table rules)

#f4f2f0 #1c1c1c

Text

--tx

Primary text

#1e1d26 #ffffff
--txs

Secondary / muted text

#6b7280 #aaaaaa
--txt

Tertiary text, placeholders

#9ca3af #666666

Status

--ok

Success

#2f6e3d #22c55e
--w

Warning

#b45309 #eab308
--err

Error / destructive

#9b3838 #ef4444
--inf

Informational

#1e1d26 #3b82f6
--acc

Accent — dots, focus rings

#1e1d26 #ffffff