Style guide
Design tokens and shared primitives. Switch themes with the toggle — every token below is semantic, so both themes come from one set of utilities.
Semantic colour
What components actually reference. These resolve differently per theme; nothing in a component should ever name a hex value.
Jewel accents
Emerald is the primary interactive colour — it ties to the logo's bird and leaves. Ruby is held back for rare emphasis; sapphire and amethyst are section accents.
Type scale
One typeface throughout. Hierarchy is carried by weight and size alone.
Hummingbird
Teaching a model to see
The boring frames mattered
Standfirst copy that introduces an article, set slightly larger than body and in the muted tone.
Body copy at its real reading size. The first useful thing I learned was that the model did not care about my photography — it cared about consistency: the same feeder, the same angle, the same harsh afternoon light.
2 August 2026 · Artificial Intelligence
Buttons
Primary, secondary, ghost — three sizes each.
Tags
Category and topic labels, tinted from the accent tokens.
Section header
This component, rendering itself. Supports an optional action link.
With an action
The action link sits on the baseline of the title on wide screens and wraps beneath on narrow ones.
Focus states
Tab through this page. Every interactive element takes a 2px emerald ring, offset so it never crowds the element.