Wombie — Product UI

The UI kit. One source, every surface.

Everything below renders from EventasaurusWeb.DesignTokens — the same source that generates the Tailwind config and CSS variables. If a value drifts here, the build drifts with it.

01 — Color

Warm oat, one signal.

Signal Orange
#FD4F00 · bg-brand
AA ✗ text · ✓ large / UI
Signal Orange (strong)
#C93F00 · text-brand-strong
AA ✓ text & buttons
Heritage Plum
#6C5CE7 · secondary accent
Oat neutral scale — all 11
50
100
200
300
400
500
600
700
800
900
950
Semantic tokens — light / dark
--surface #FCFCF9 → #34332E
--bg #F5F4EF → #232322
--border #EBEAE3 → #42413A
--text #232322 → #FCFCF9
--text-muted #6F6E5F → #B4B3A3
--accent #FD4F00
--accent-strong #C93F00
--accent-text #FFFFFF
02 — Typography

The ramp.

Display XL
instrument · 64px/68px · -0.01em
marketing hero
Display
familjen · 48px/48px · -0.04em
oat headings
Title
familjen · 32px/36px · -0.02em
section titles
Body
sans · 16px/24px · normal
default copy
Body sm
sans · 14px/20px · normal
secondary copy
Label
mono · 12px/16px · 0.08em
kickers / labels (uppercase)
Wordmark
wordmark · —/— · normal
logo only — never UI text
03 — Space · Radius · Elevation
Spacing (px)
2
4
8
12
16
24
32
48
64
Radius
sm · 8px
md · 12px
lg · 16px
xl · 24px
pill · 9999px
Elevation
e0 · flat
—
e1 · card
ring-1 ring-oat-950/10
e2 · pop
shadow-xl
04 — Components

States, not screenshots.

Buttons — hover, then focus with the keyboard (Tab)

Focus ring is the one web convention: focus-visible:ring-2 ring-brand ring-offset-2 ring-offset-oat-50.

05 — Dark mode

One contract.

Toggle this page. The mechanism: darkMode: 'class' + the oat-theme localStorage key + a pre-paint init (no flash) + forced_color_mode for "theme wins" surfaces.
06 — Motion
Duration
  • duration-fast · 150ms
  • duration-base · 200ms
  • duration-slow · 400ms
Easing
  • --ease-standard · cubic-bezier(0.2, 0, 0, 1)
  • --ease-in · cubic-bezier(0.4, 0, 1, 1)
  • --ease-out · cubic-bezier(0, 0, 0.2, 1)

Reduced-motion policy: the universal theme cross-fade is neutralized under @media (prefers-reduced-motion: reduce). Set your OS to "reduce motion" and the toggle above switches instantly.

07 — Icons
heroicons · <.icon name="hero-*">
<.wombie_mark> · the brand mark
<.brand_icon> · third-party (mind usage rules)
08 — Platform map

Color, gradients, and semantic statuses cross platforms; typography does not (SF Pro on iOS, Inter/Instrument/Familjen on web).

Web token iOS DS.*
brandDS.Colors.brand / AccentColor
oat 50…950DS.Colors surface / label
--surface / --textDS.Colors.background / .text
wombie-sunrise/ember/nightfallgradient stop arrays (Phase 4)
radius / motionDS.Radius / DS.Animation