Skip to content

Theme lab

Theme lab / six expressions

Change the values. Keep the meaning.

Three color families each support light and dark mode. Every selection remaps the same semantic roles, so the portfolio, résumé, and design-system specimens change together without component-level theme code.

01

Choose an expression

Apply any pairing here, then move through the rest of the site. Your selection and the lab controls follow you until you exit.

02

One component contract

A component asks for surface, ink, body, muted, rule, accent, or cool. It never asks whether the current theme is Paper, Sonoran, or Blueprint.

Surface roles
Base / raised / sunken
Text roles
Ink / body / muted
Signal roles
Accent / cool / focus

The same specimen, live

Ready to inspect

Semantic roles make the swap ordinary.

This panel is not a screenshot of a theme. It is the same border, surface, type, and action vocabulary used everywhere else in the portfolio.

Explore selected work

03

Seamless by design

The small details make the change feel like one system rather than six skins.

  1. 01

    Correct on first paint

    Stored choices are applied in the document head, before React hydrates, so reloads do not flash the default palette.

  2. 02

    One document transition

    Supported browsers crossfade the page as the custom properties change; reduced-motion preferences remove the transition.

  3. 03

    Portable across pages

    The document is the source of truth, local storage restores it, and storage events keep open tabs in sync.

  4. 04

    Print stays paper

    Every family returns to the canonical light résumé palette for print and generated PDF output.