How My Approach to Design Systems Evolved

Ictinus began as a way to unify a fragmented language, and matured into a disciplined token architecture.

I joined Orfium as the first designer. The system started out serving dense music-rights tooling, then grew with the company into the broader entertainment industry. Over years of iteration, theming and consistency became automatic rather than manual.

A system's power lives in its token architecture, not its component count.

291

Tokens, four tiers

139

Global, raw values

31

Dimension, spatial aliases

87

Semantic, theming engine

34

Component, element tokens

Global holds raw, immutable values. Dimension aliases spatial scales. Semantic is the context-aware color layer, the theming engine itself. Component tokens bind it all to specific elements. One change cascades everywhere.

Theming happens by token swap, not by inversion. Dark mode shifts scale positions to keep perceived weight. Accessibility is a constraint, not a final check: every text and background pair is validated to WCAG AA with the Stark plugin, and if a token cannot pass 4.5:1 on its surface, it does not ship. The 291 tokens are the result of relentless subtraction, not addition.

Pounce was built for a dark-first SIEM, where density and severity are not optional.

Every token was shaped by the operational reality of security work: late-night triage, split-second decisions, dense log data. Building it taught me that a system has to fit its domain.

Domain-specific systems outperform generic ones.

50+

Tokens

14

Spacing steps

6

Color categories

11

Type sizes

7

Component sizes

5

Severity levels

Severity is a first-class token category: Success, Warning, Error, Info, Critical, each with a foreground and a background. It is the backbone that lets analysts scan a dashboard and know where to look.

Spacing was tuned for tables of 10,000+ rows, with virtualization in mind and minimal animation. Text tokens hold 4.5:1 on their surface, and the cyan focus ring (border/focus, #38BDF8) stays visible in both themes. Type is DM Sans across a 10 to 40px scale. Beyond standard UI, Pounce carries domain components: a JSON Tree for nested log schemas, an embedded Python editor for detection rules, and a syntax-highlighted JSON preview.

I built Pounce. Years later I came back to rescue it.

I was full-time at Panther from 2020 to 2024, and a contractor since. In 2025, with the design team tiny and me part-time, the company brought in an external firm to tokenize, revamp, and add a light theme, work I could not staff at the time. It failed on several levels. The clearest was theming: a transparency, alpha-based color scale that could not hold across light and dark, because a token's effective contrast depended on the surface behind it. Flipping themes broke legibility and introduced real accessibility issues. That, plus years of accumulated tech debt, pulled me back in. I rebuilt the system accessible and correct in both themes, working iteratively with the front-end engineers to find and replace old code and broken components, with AI tooling doing the heavy lifting.

A color scale that looked fine in one theme broke the moment you flipped it.

Lungo is engineered so AI can implement it correctly.

As Principal Designer I lead Lungo, Dialectica's token-driven, multi-theme system. It grew out of an earlier system called Smoothie, but the refactor became a ground-up rebuild. I work in close partnership with the engineer who owns implementation, and together we built the toolchain around the system. Custom Figma plugins export tokens in a Style-Dictionary shape, keep version history and diffs so an LLM implements only what changed, and emit component specs as both YAML and Markdown. On top of that I authored AI skills and rules for Claude and Cursor that enforce the system's components, constrain building to approved tokens, surface implementation gaps, and audit work against the system.

The design source of truth and the code that ships stay in lockstep.

# AI skill, Claude / Cursor
- Build UI only with approved Lungo components. Never hand-roll equivalents.
- Use only tokens from the export. No raw hex or arbitrary values.
- Flag any gap where the system lacks a needed component or token.
- Audit the diff against the system and report violations before finishing.

A full migration from stock shadcn to a themed system, done mostly with AI.

A platform for food scientists. I took full ownership of moving from a base shadcn/ui setup to a more advanced, themed system with custom components and variants. I executed it primarily with AI assistance, following the front-end engineering chapter's best-practice guidelines so the output stayed aligned with their standards.

Stock baseline in, a themed and extensible system out.