Design Systems & Storybooks

A Portfolio Built the Way I Build Products

Isn’t It Chironic is a design system first and a website second. Every color, space, component and rule lives in a Storybook anyone can open, and automatic checks keep the site honest. This page tells the story of why, and how it works.

Open Storybook →
The overview page of the Isn’t It Chironic Storybook: a sidebar of foundations such as color, typography and spacing, and the counts of primitive colors, semantic color tokens, type sizes and spacing steps.

Why a System

A Brand Is a Trust Signal, So I Made Mine Checkable

A portfolio asks a visitor to trust that the person behind it can do the work. Most ask for that trust on a promise. I wanted to show it, so this site is built the way I build products: from shared parts, with written rules and checks that run before anything ships.

That is also why the Storybook is public. A recruiter, a head of product or another designer can open it, read a rule, and then see that rule at work on the page they just came from.

  • 39Named color primitives
  • 104Semantic color tokens built from them
  • 2Modes, Morning and Night, from the same tokens
  • 47Storybook entries, each showing its states

The Storybook

Every Token, Component and Rule, in One Place

The Storybook is the system as it actually is. Every value on its pages is read from the same code that builds this site, so what it shows is what ships. It lists each color with its contrast, each component with its states, and the rule for using them.

Open Storybook →
The overview page of the Isn’t It Chironic Storybook: a sidebar of foundations such as color, typography and spacing, and the counts of primitive colors, semantic color tokens, type sizes and spacing steps.

The Name and the Mark

Where the Name Comes From

The longer version lives on About Me. Here is the short one, because the whole system grew out of it.

Chiron · The Centaur

The Wounded Healer in Our Sky

In Greek myth, Chiron was the centaur unlike the others: wise, steady, famous for his knowledge of medicine. He taught Asclepius, Achilles and Jason. A poisoned arrow, loosed by accident, left him with a wound he couldn’t heal, and he kept teaching anyway. Jung later named the pattern “the wounded healer”: the hurt is part of what lets you help.

Designers are in Chiron’s position right now. AI arrived like that arrow, and we are also the people best placed to design the way through it.

“Ironic” · The Song

The Song My Mom Talked Me Through

In middle school my mom, who loved Alanis Morissette, sat me down with “Ironic.” Life isn’t fair, she said. It will knock you down. But listen to how the song ends: with the surprise that life can also turn out to be on your side.

That’s how I feel about AI. The technology behind so much of this moment’s ache is the same one that gives me the most hope.

Chiron + “Ironic” = Isn’t It Chironic.
A wound, a way through, and the chronic irony I can see.

The Mark

A Comet, Facing Left on Purpose

It crosses the sky instead of heading at the viewer. That is how I think about AI: not a strike from outside, but a new force that entered our sky and settled into orbit, close enough that we are in a relationship with it, far enough that it doesn’t destroy us. The lettering is cut out of the comet’s grain, so the mark takes on whatever is behind it. It comes in three treatments: gradient (the one used across this site), dark for light surfaces and white for dark ones.

In the Sky Twice

2060 Chiron

In 1977, astronomer Charles Kowal found an icy body orbiting between Saturn and Uranus and named it Chiron. In 1989 it grew a comet’s glowing cloud and was reclassified as a comet. The wounded healer is a constellation and a comet.

How It Is Layered

Tokens, Components, Rules and Checks

Four layers, each one resting on the one before it. A change at the bottom shows up everywhere above it, and nothing at the top is allowed to invent its own value.

  1. Tokens

    Named paint colors feed color tokens that are named for their job, such as text, border and action. Spacing, type, radius and elevation each come from one scale. Night is the same tokens in a second mode.

  2. Components

    Each part of the design is one component, and each has a story in the Storybook that shows its states and names the Figma frame it came from.

  3. Rules

    Links, eyebrows, glass, elevation, motion and clouds each have a written rule, shown in the Storybook beside the part it governs.

  4. Checks

    Before anything is published, a check tests every color pair against WCAG AA in both modes, builds the whole site and scans every page for broken links, missing image descriptions and leftover placeholders.

How It Is Made

Directed by a Designer, Built With AI

The site is coded with Claude Code, from a brief I wrote. The brief is a set of plain files the model reads before every task: the tokens, the voice guide, the component list and the rules above. The system, not the model’s taste, decides what ships.

The work is mostly judgment: deciding what to build, reading the result and sending it back until it is right. AI helps me do the job better. It does not replace the job.

The Stack

What It Is Made Of

  • Designed in Figma on variables and modes, with no template
  • Built with Astro and plain CSS, with no CSS framework
  • Coded with Claude Code, from a brief I wrote
  • Illustrations from a charter: rules for makers and models
  • Hosted on Cloudflare

Open It

See Every Token, Component and Rule

The Storybook reads live from the same code that builds this site, so what you see there is what ships here.

Open Storybook →

Read the whole story of the name on About Me →