Button
Six variants (primary, secondary, accent, neutral, ghost, outline), three sizes, default and pill shapes.
Tokens
--primary--secondary--accent--radius-md--radius-full--font-primaryVariants
Sizes
Shape
State
The platform’s own brand-OS. Scarce yellow accent, ink on paper, mono as data.
Workhorse
The platform’s own brand-OS. Scarce yellow accent, ink on paper, mono as data.
The brand operating system Workhorse uses on itself. Tokens, voice, components, and page archetypes live as one source on disk and feed every surface (this site, the platform UI, and the agents on stack). Documentary register, Maison Neue throughout, ledger over grid.
Color
Named brand buckets layered over a semantic system. Product UI leans on the semantic layer. Marketing leans on the buckets directly.
Typography
The type families this brand uses, the scale it ships with, and the weights it relies on.
Spacing
The brand's spacing scale and container widths. Mono-keyed for scan, not for memorization.
Radius
Corner-radius tokens. Small UI sharp. Large surfaces soft. Pills and avatars full.
Motion
Durations and easings. Conservative product-UI motion. Quick hovers, gentle transitions, no theatrics.
Component library
A token-driven component set. Every component reads from the brand scope above. Swap the brand and the same components reskin without code changes.
Six variants (primary, secondary, accent, neutral, ghost, outline), three sizes, default and pill shapes.
--primary--secondary--accent--radius-md--radius-full--font-primaryText input, textarea, and label. Standard size scale with hover and focus states tied to the primary token.
--primary--base-300--background--foreground--radius-mdDefault, soft, and outlined surfaces. Composable header, body, and footer regions.
--background--base-100--base-200--base-300--radius-lgStatus indicators and chips. Pulls from brand and status tokens for semantic meaning.
--primary--accent--success--warning--danger--radius-fullImage or initials, four sizes, optional brand tone for placeholder fills.
--primary--secondary--accent--neutral--radius-fullUnderline and pill variants. Active tab uses the primary token; inactive tabs sit at 60 percent foreground.
--primary--foreground--base-100--base-300Composed patterns
Pattern assemblies for Workhorse land in the next phase. The Foundations and Components above are the ingredients. Patterns combine them into navigation, account, and dashboard surfaces specific to this brand. Today this view shows the engagement fixtures only.
Real screens
Production-shaped screens for Workhorse land in the next phase. The brand book at /brand/workhorse already carries the editorial side: heritage, voice, applied work, page archetypes. Screens here will be the rendered counterparts.