One design system. Every product I build next.

After designing CareJourney at AI Fest 2.0, I looked at how I start every product: I duplicate an old design system and adapt it. That meant rebuilding a design system for every product.

So I audited the two systems I already had, to decide what every new product should start from.

Neither system could be the master. I built a new one: Web App's architecture and Odin's coverage, rebuilt on clean tokens.

I wrote ten non-negotiables before the first token. These five shaped the system most.

1. Audit before merging. Nothing came across from an old system until I'd measured it.
2. Semantic tokens before components. Components only use meaning-based tokens like color/action/primary/default, never raw colours.
3. Accessibility is architecture. Contrast, text size and target size are set in the tokens, so every component starts compliant.
4. Shared intent, platform-specific execution. One component, three platforms: a Top Bar is 56px on web, 44pt on iOS and 64dp on Android.
5. No false validation claims. Results are labelled Measured, Inspected or Specified. Design-stage work isn't called tested.

The other five: no blind copying, one source of truth, no unexplained hard-coded values, approval before changes, and documentation ships with the system.

Every value lives in one of five layers, and each layer only points to the one below it. Components never hold a raw colour.

Swap the Brand layer, and every button, tab and focus ring follows.

One name everywhere: color/text/primary in Figma is var(--color-text-primary) in CSS and colorTextPrimary on iOS and Android. Every variable has explicit scopes and code syntax for three platforms, and semantic tokens are always aliases.

Each of the 49 components covers its full set of states, works in Light and Dark, and ships with a documentation frame: purpose, anatomy, content, states and accessibility notes.

• Selected never relies on colour alone. Every selected state also has a check, an indicator, a filled icon or a brand border.
• Focus you can see. An offset ring: a 2px gap, then 2px of brand colour. 5.7:1 in Light, 7.3:1 in Dark.
• Slots, not detached copies. Cards take any content through a body slot, so nobody needs to detach an instance.

I didn't stretch a web design onto phones. Each platform gets its own sizes and conventions from the same tokens, and a platform variant measures correctly wherever it's placed.

Icon rule: Lucide for web apps and dashboards; Phosphor for mobile apps and marketing sites, with the Fill weight for the selected tab. Icon names stay family-neutral (icon/<name>), so a product can switch family without renaming anything.

At AI Fest, I learned that passing contrast isn't the same as readable. So this audit checks text size and colour-only states, not just contrast ratios.

Minimums: body text 16, compact web secondary text 14, and 12 as a floor that never carries essential information.

• 288 colour pairs measured from every variant, in Light and Dark.
• All 250 pairs held to a threshold pass. Lowest text 4.81:1, lowest icon 3.58:1, lowest control border 3.08:1.
• 38 disabled pairs are exempt under WCAG; 9 borders are decorative.
• All 16 interactive component types have a Focus state.

This is a design-stage audit. Keyboard, screen reader and zoom behaviour are specified for the build and will be tested once code exists, followed by axe and Lighthouse checks, VoiceOver and TalkBack passes, and testing with older and low-vision users.

The tokens leave Figma ready to use. I exported every variable as DTCG JSON, then built CSS variables, a Tailwind preset and resolved theme files with Style Dictionary.

Style Dictionary built all 12 themes, 429 tokens each, with 0 unresolved references. Broken references are set to fail the build.

<button class="bg-action-primary-default rounded-control h-control-md">Book visit</button>

I used Claude connected to Figma, and treated it like a fast, careful team member: I set the rules, it built in the file, and nothing moved forward without my approval.

1. Rules first. I wrote my design-system process as reusable skills: setup steps, naming rules and the accessibility audit.
2. Audit before building. Claude measured both old systems; I decided what to keep, rebuild and drop.
3. Approval gates. Every stage was proposed, reviewed and approved by me before it changed the file.
4. Measure, don't trust. Audits caught raw values where tokens should be, and they were rebound to semantic tokens.
5. Log everything. Every change went into the Changelog with a version number.

Foundations to v1.0.0 took one working day, 20 October 2026. The speed came from the AI; the quality came from the rules and the gates.

Three things the build taught me:

• A shadow-based focus ring didn't render until the frame clipped its content and had a fill.
• One text property on a component set overwrote every variant's sample copy, so every alert read “Title”. Some components now deliberately skip text properties.
• One icon-swap property forced the same icon onto every badge tone, so each tone got its own fixed icon.

Every product I start now begins as a copy of this file, starting with CareJourney. Data tables, date pickers and form patterns will arrive when a real product needs them, not before.

A few values stay fixed on purpose, like 1px dividers, avatar presence dots and the tooltip arrow. Each one is listed in the file with its reason.