A 3-tier tokenized design system — 288 Figma Variables, 179 governed components, published as a real React library and consumed by a working banking dashboard, with Figma↔code mappings authored in Code Connect and WCAG-AA tokens. Designed, engineered and governed end-to-end, by one person.
A self-initiated reference system — built to demonstrate the end-to-end design-system work that client NDAs usually keep private. "Meridian Bank" is a realistic stand-in, not a real client; every artifact here (the Figma file, the published React library, the Code Connect mappings) is real, working, and public.
BUILT FROM THE SAME TOKENS AS THE PRODUCT
Most "design systems" are sticker sheets. Meridian is a single source of truth that drives both the Figma files and a running product — I built it end-to-end to prove I can operate one, not just draw one.
The component library, rendered from the shipped React code. Flip the mode and all 81 semantic tokens re-theme together — light to dark in a single move.
LIVE REACT COMPONENTS · THE DEMO'S AI RUNS A DETERMINISTIC MOCK; THE REAL OPENAI 4-AGENT PATH SHIPS IN THE CODE.
The source of truth: a structured Figma file with multi-mode Variables, variant sets, component properties and an icon library. Foundations and the Button set, straight from the file:
Every component in that file is rebuilt as real React code — the full library, all 35+ components and their variants, is in the design-system section above with a working dark-mode toggle.
The hard part of a design system isn't the components — it's the discipline that keeps design and code one thing as the product grows.
Every color, radius and space binds to a variable. Change a token once and both Figma and the live app move together.
In Figma, screens contain only instances. In code, pages import only library components. No hand-built blocks on either side.
Code Connect maps each Figma component to its real code component, so Dev Mode shows the exact import + props.
Primitives (118) → Semantic (81, Light/Dark modes) → Component (89). 288 Figma Variables across 3 collections mirror exactly to CSS variables + a Tailwind preset in code. Flip the Semantic mode and the entire product re-themes.
179 components/sets in Figma. The product consumes a focused set, each a real export in @jestaz/design-system.
Top bar, sidebar nav, page-header cards, page states, stat groups — all components, never loose frames. Screens assemble from instances only.
A Meridian Bank treasury dashboard — 10 screens, a detailed simulated user, and a 4-agent AI layer (Analyst · Risk · Forecaster · Advisor). The app imports 100% of its UI from the library; the page files are pure composition.
A component never references a raw color. Every value resolves Primitive → Semantic (mode-aware) → Component — so a brand change or a theme flip is one edit, not a migration.
Naming is color/category/role-state — color/button/primary-bg-hover, color/text/secondary, color/border/default. Components alias Semantic; Semantic aliases Primitive; a primitive never appears in a component. Flip the Semantic collection's mode and all 81 tokens re-resolve at once — that's the dark-mode toggle in the live library above.
This is where the design-system craft lives: variables with modes, real component sets, component properties, an instance-swapped icon library, and Code Connect.
Primitives (118) → Semantic (81, Light/Dark) → Component (89). One mode toggle re-themes the whole product — tokens, not styles.
Button = 15 variants (Variant × Size). Badge 6 tones, Input 4 states, KPICard Up/Down — authored as proper variant sets.
Button exposes Leading/Trailing icon (BOOLEAN) and icon source (INSTANCE_SWAP); NavItem swaps its own icon. No baked-in glyphs.
A dedicated Icon/ library, instance-swapped into buttons, nav and inputs — referenced across the system, never re-drawn.
179 masters across 9 pages (Foundations, Primitives, Components, Patterns, States, Data Table, Auth, Dashboard). If it can appear twice, it's a component.
Each maps to its React export with variant→prop translation — engineering copies a working component, not a redraw. (Publish to Dev Mode is gated to Org/Enterprise plans; mappings are committed and publish-ready.)
Code Connect maps each Figma component to its React export and translates variant props to code props, so Dev Mode shows the real snippet for that node — handoff with zero re-draw. Status, plainly: 27 components are mapped and committed (code-connect/*.figma.jsx — the real file is shown below) — every component the code library implements, each bound to its Figma node with variant→prop maps. The remaining Figma components are screen-level compositions, not standalone code exports, so there is nothing to bind. Going live in Dev Mode is gated to Figma's Organization / Enterprise plan — I verified this directly against Figma's publish API on my Full seat: the mappings validate, the plan tier is the only gate. The repo ships publish-ready — one command, npx figma connect publish, the day the file sits on an Org plan. I left it un-published rather than overstate it.
↓ ON LOOP — ONE COMPONENT RESOLVING: VARIANT → CODE PROP → THE TOKENS IT BINDS.
<Button variant="primary">Label</Button>
Real contrast ratios from the shipped semantic tokens (computed, not estimated):
| Pair | Ratio | Level |
|---|---|---|
| text/primary on bg/surface | 17.5 : 1 | AAA |
| text/secondary on bg/surface | 7.1 : 1 | AAA |
| text/on-brand on bg/brand-bold | 5.5 : 1 | AA |
| brand/fg on brand/subtle | 7.4 : 1 | AAA |
| success/fg on success/bg | 5.1 : 1 | AA |
| danger/fg on danger/bg | 5.3 : 1 | AA |
| text on surface · dark mode | 16.4 : 1 | AAA |
Status is never color-only — every badge and trend pairs an icon + label with the color. Interactive components carry a brand focus ring (Button, Input, Tabs, nav).
If a piece of UI can appear twice, it's a component — never a hand-drawn frame. Figma screens and code pages are composed only of instances / imports. Tokens are never hard-coded.
The rules live in a committed governance skill (jestaz-ds-governance) so every future change — by me or an agent — stays component-driven, token-bound and instances-only.
Three of the ten screens, in action — read what each does, then watch it happen.
Ask in plain English; the question routes to the right specialists and the Advisor answers — with the agents it used shown as tags.
Search, filter and page through activity across accounts — every cell built from library components.
A four-step stepper, a transfer-details form, and a Review card that recomputes live.
The full set — all ten, every one pure composition over the library:
Chose: one component set; dark is a mode on the Semantic collection. Cost: every component must bind to semantic tokens — discipline upfront. Win: theming is one toggle, zero duplication, 81 tokens re-resolve at once.
Chose: Button = Variant × Size (15). Ruled out: separate Primary/Secondary components — the matrix would sprawl. Guardrail: icons are instance-swap + boolean props, not new variants, so the matrix stays small.
Chose: a dedicated Icon library, swapped into buttons / nav / inputs. Ruled out: baked-in glyphs (un-swappable, duplicated). Cost: more components; win: one source, referenced everywhere.
Chose: the dashboard consumes @jestaz/design-system; pages are pure composition. Cost: a real package boundary to maintain. Win: proves the system is consumable, not just drawable.