Designer.
Designed to mirror what engineers ship. Every component anatomy on the site is the same data the lib renders, so design and code stay in lock-step — no separate Figma source of truth that drifts.
The three-tier system: base palette (hex primitives), product semantic (light/dark pairs), marketing aliases.
- Color — 13 base hex tokens · 14 product semantic (light + dark) · 10 marketing aliases. Every token has a literal hex value.
- Typography — PP Supply Mono (display / labels / data) · Bai Jamjuree (body / UI). 10-step scale, 8 semantic classes. Font delivery URLs included.
- Spacing — 4 px-base scale (4 / 8 / 12 / 16 / 20 / 24 / 32 / 40 / 48 / 56 / 64).
- Radius · Elevation · Motion · Data viz · Currency · Accessibility — the other foundations.
60 components across 7 categories. Each one has a live preview + structured anatomy.
- All 60 components grouped by category — Inputs · Display · Feedback · Navigation · Layout · Data · Chrome.
- Each component page has tabs: Preview (live render) · Code (paste-ready snippet) · Docs (PropsTable) · Anatomy (dimensions, tokens, composition, non-features, porting checklist) · Accessibility · Changelog.
- The Anatomy tab is the authoritative spec. Design to those exact values. If you find drift, file an issue in FunnelDash/core (internal).
Page-level recipes — the screens we build over and over. 17 patterns across Shells · Data · Forms · Confirmation · States · Layout · Architecture.
- All 17 patterns — start here. Each one names what it composes from, when to use it, and what alternatives exist.
- The Shells category is highest-leverage for new product surfaces: Protected app shell, Auth split-screen, Sub-section header with tabs.
- Architecture patterns (route groups, URL-as-state dialog) are non-visual but worth knowing — they're how the product app is structured.
The brand voice is part of the design system. Copy decisions are design decisions.
- Voice + tone — confident, direct, sentence case. No exclamation marks. No emoji. Numerals not spelled-out. Includes good/bad examples + before/after rewrites.
- When drafting copy with claude.ai (Dashbook Connector enabled), Claude reads the voice rules automatically. Just describe the surface and the copy aligns.
Mirrors the live system — tokens as variables, components as variants, styles as text styles.
Status at /developers/figma (internal). Library handoff doc + Code Connect templates documented; the actual Figma authoring happens in a parallel session bound to the dashfi-team account.
The right loop: check the catalogue, find the closest existing component or pattern, design to its anatomy.
- Check /components first — odds are the thing already exists.
- If composing multiple components, check /patterns for a matching recipe.
- If genuinely new — design to the existing tokens. New tokens are a system-level decision; new compositions of existing tokens are not.
- If the design REQUIRES a new component, file an RFC issue at FunnelDash/core (internal). We add components deliberately — the catalogue stays maintainable when it grows on need, not on whim.