Design system

Nine tokens, three themes. Every swatch is painted with a real bg-* utility that resolves to a live var(). There isn't a hard-coded hex on this page. Switch themes and the swatch and its value change together.

Five brand accents sit alongside the core nine in styles.css: --accent-primer, --accent-butcherbox, --accent-nara, --accent-blueapron, --accent-grapevine. Each one is the fill its project card animates to on hover. They belong to a single project apiece, so they're named here rather than shown as part of the shared palette.

Six heading sizes, then the body scale. All Libre Franklin, all rendered with real text-* utilities bridged to the tokens, each carrying its own line-height. Rows marked fluid scale with the viewport via clamp, 375 to 1440px. Each body size is paired with its font-semibold (600) twin. The headings already carry their own weight, so they have no separate variant.

The site sits on a fixed lattice: 1px lines every 32px, painted at --grid-line at 5% ink, inverted per theme so it reads on light and dark alike. It's position: fixed with pointer-events: none at z-index: 0. Content scrolls, the grid holds still. A --plaster-to-transparent fade keeps the header clear, and on desktop the cursor lights the nearest lines in ember.

One scale on a 4px base (--spacing: 0.25rem), with an 8px rhythm carrying most gaps and padding. Tailwind's p-*, gap-*, and m-* all step in 4px units, so gap-4 is 16px. Each bar below is drawn at calc(var(--spacing) * n), so you're measuring the live token, not a picture of it.

Four radii carry the system, bridged as rounded-* utilities. The larger the radius, the softer and more prominent the surface reads. Swatches use the real utilities wherever they exist.

Shadows are dark-on-light, reserved for surfaces that lift off the page. shadow-card-hover handles the card lift; the heavier shadow-media and shadow-video sit under hero imagery. Shown here on a light surface, which is where they're built to sit. Flip the theme above to see the shadows.

Every icon is a 24×24 inline SVG that paints with currentColor, so it inherits the text color and flips to ember on hover without a second asset. Two families share the frame: solid brand marks (fill) and line UI icons (2px stroke, round caps). Hover a tile to see the currentColor swap.

One treatment for every image caption on the site: text-caption at text-flint, centred, capped at 720px, and sitting 8px below the media. The 8px is the rule — it is the gap on the container that holds the image and caption (.cs2-figure, .cs2-media, .cs-image-caption-group, .cs2-hero-image-card), or a matching margin-top on .article-caption.

typetext-caption · 400 — see Type scale

A caption sits under media. It is the smallest reading size.

colorvar(--flint)

Flint, never pitch — a caption is a signpost, not a destination.

measuremax-width 720px, centred

Capped at 720px and centred under the media, whatever the media’s own width.

gap8px below the media

8px sits between the image and this caption.

The metadata pill. bg-plaster chip, border-shale hairline, rounded-tag (4px), px-2 py-1, text-body-sm (16px). Container is flex flex-wrap gap-4. Built twice, real .project-tag vs utilities. They match.

The interactive text and button atoms, built from the real classes. They share one hover language: the accent shifts to ember over a quick 0.2s ease. Hover each to see it.

Read the case study for the full story.

Text link.text-linkThe convention for any link inside body copy: a 1px underline in the text’s own colour, both going ember on hover.

A link in muted copy inherits flint instead.

Text link, inherited.text-linkThe colour is inherit, not a fixed token — so the same class reads pitch in a body paragraph and flint in a muted one, and the underline rides along.

Longer rides like the STPSeattle to Portland bike ride, July 2025. are worth a photo.

Photo note.photo-noteAn inline term that reveals a captioned photo. Built on the .project-card box — same fill, stroke, 32px radius and padding — but with a square image and a caption instead of a title and tags. The trigger is a <button> with a dotted underline rather than the solid one .text-link uses: it reveals something in place instead of navigating, and the two affordances should not look alike. Hover on pointer devices, tap to toggle on touch; Escape or a click outside dismisses. JS keeps the card inside the viewport and flips it below the line when there is no room above.

View tradeoffs & iterations

Panel link.panel-linkUnderline wipes ember in from the right; the arrow bounces once on hover.

See all work

Button.projects-cta-btnChalk fill, shale border → ember border + ember text on hover.

The project card component, built twice, class-for-class. Real styles.css left, Tailwind utilities right. Title is text-h6, body is text-body, both bridged to the same tokens as the Original, so they render identically.

Originalstyles.css

Nara

Designed Nara's pregnancy and baby tracker from first concept forward. It holds a 4.9-star App Store rating across more than 23,000 reviews and 1 million + users.

iOS & Android apps

Tailwindutilities + gradient-stroke component

Nara

Designed Nara's pregnancy and baby tracker from first concept forward. It holds a 4.9-star App Store rating across more than 23,000 reviews and 1 million + users.

iOS & Android apps

The writing-index card. Same gradient-stroke border and rounded-card radius as the project card (unified, no drift). The image well sits desaturated at brightness-[0.62] and snaps to full color on card hover via group-hover:brightness-100.

Originalstyles.css

Generate, Evaluate, Refine: Design Judgment in AI-Assisted Product Design

AI can generate more design options faster than any designer working alone. What it can't do is know which options belong in your product.

Tailwindutilities

Generate, Evaluate, Refine: Design Judgment in AI-Assisted Product Design

AI can generate more design options faster than any designer working alone. What it can't do is know which options belong in your product.

The rule of thumb: the smaller the change, the faster it resolves. A color swap lands in 0.2s, the nav sheet takes 0.32s. Most of the site runs on plain ease. The nav is the deliberate exception — opening uses cubic-bezier(.16, 1, .3, 1), a fast-out, long-settle curve shared by the sheet and the hamburger so the two read as a single gesture. Closing runs a shorter ease-in instead: arriving can take its time, leaving should get out of the way. Hover any stage below to run it.

transition: transform .3s ease, box-shadow .3s ease;
:hover { transform: translateY(-4px);
         box-shadow: var(--shadow-card-hover); }

::after { right: 0; width: 0; height: 2px;
          background: var(--ember);
          transition: width .25s ease; }
:hover::after { width: 100%; left: 0; right: auto; }

.fade-in { opacity: 0; transform: translateY(16px); }
.fade-in.visible { opacity: 1; transform: none; }
/* js/case-study.js adds .visible on scroll */

/* closed */ transform: translateY(-100%);
             transition: transform .22s cubic-bezier(.4, 0, 1, 1);
/* open   */ transform: none;
             transition: transform .32s cubic-bezier(.16, 1, .3, 1);

.bar { height: 3px; width: 24px; top: 0 / 6.5px / 13px; }
transition: transform .3s cubic-bezier(.16, 1, .3, 1),
            top .3s cubic-bezier(.16, 1, .3, 1),
            opacity .16s ease;
[aria-expanded="true"] .bar:nth-child(1) { top: 6.5px; transform: rotate(45deg); }
[aria-expanded="true"] .bar:nth-child(2) { opacity: 0; }
[aria-expanded="true"] .bar:nth-child(3) { top: 6.5px; transform: rotate(-45deg); }

svg { transition: transform .6s ease; }
:hover svg { transform: rotate(360deg); }

transition: color .2s ease, border-color .2s ease;
:hover { color: var(--ember);
         border-color: var(--ember); }