Design Systems

Two design systems, each built inside the product it served.

Fittra’s runs a live app on iOS and Android. COCA’s runs a responsive provider directory. In both, components came from real screens as the product needed them, and both were checked against WCAG 2.1 AA.

Featured Case Study

Fittra Wellness · 2026

Fittra: a shipped design system on iOS & Android

Zero-to-one component library for a live wellness app, built alongside the product in Figma and carried through to shipped code. Designed and built solo with AI-assisted tooling, shipped to iOS and Android via Capacitor, on a tokenized foundation covering color, typography, spacing, dark mode, and WCAG 2.1 AA accessibility patterns.

  • Angular
  • Capacitor
  • Tokens
  • Dark Mode
  • WCAG 2.1 AA
  • iOS
  • Android
Fittra onboarding screen built on the design system

Brief

Fittra needed a design system that could support a full wellness product shipping to iOS and Android on day one, without the team ever stopping to refactor color or spacing later. Visual consistency and dark-mode support were table stakes; handoff speed and accessibility were the real goals.

Approach

Built a three-tier token architecture; primitives, semantic, component that were consolidated into a single source of truth fittra-design-system.css, with a thin theme-refined.css layer that re-maps the semantic set to shift the product's entire surface without touching a component. Components were designed in Figma and implemented in Angular alongside the product, so every component earned its place by solving a real screen need first.

What shipped

27 reusable components powering 23 screens across iOS and Android, backed by 833 design tokens and a dedicated WCAG 2.1 AA accessibility layer (focus-visible indicators, reduced-motion support). Dark mode is its own mapped token set.

27 Reusable components
833 Design tokens
23 Screens built on the system

The token count reflects a tiered structure rather than a flat list: primitive tokens define the raw values, semantic tokens map them to intent, and component tokens bind intent to specific components. That layering is what makes dark mode and cross-platform theming a change in one place instead of twenty-four.

Accessibility

WCAG 2.1 AA, checked on the shipped build

Fittra ships with a dedicated wcag-focus.css layer for enhanced focus indicators, and animation across the app respects prefers-reduced-motion. 20 of its 27 shared components carry explicit ARIA attributes and 13 use semantic role= values. An axe audit of the shipped build across 15 production routes, in both light and dark mode, returns zero WCAG 2.1 A/AA violations; the same build was walked by keyboard and with VoiceOver.

Excerpt from Fittra's wcag-focus.css stylesheet showing focus indicators and accessibility utilities
From wcag-focus.css · enhanced focus indicators & a11y utilities

Prior Systems

  • Central Ohio Counseling Association · 2021

    COCA Component Library

    Role · Lead designer

    Accessible, warm component library for a responsive healthcare web directory. WCAG 2.1 AA throughout, with an approachable non-clinical visual language.

    • Figma
    • WCAG 2.1 AA
    • Responsive
    • Healthcare
    • Responsive Web

Token Architecture

Real tokens from fittra-design-system.css

Tier 1 · Primitive

Raw values consolidated into a single source of truth. Never used directly in components.

  • --blue-500 = #3b82f6
  • --green-500 = #14b8a6
  • --amber-500 = #f59e0b
  • --neutral-900 = #171717

Tier 2 · Semantic

Named by purpose, not value. Components consume these. This is what makes Fittra's dark mode a mapped token set rather than overrides.

  • --text-primary → neutral-900
  • --bg-subtle → neutral-50
  • --brand-primary → blue-500
  • --success → green-500

Tier 3 · Component

Scoped to specific components. Built from semantic tokens so component-level theming stays surgical.

  • --bg-brand → brand-primary
  • --surface-primary → bg-subtle
  • --focus-ring → brand-primary
  • --bg-warning → amber-500

The systems are easier to judge in the products they built.

Every system on this page exists because a product needed it. The Fittra and COCA case studies show what the tokens and components made possible: two platforms from one person, and an accessible directory that replaced a Word document.

See the products