Brand system · unlisted

Primitives.

Small enough that most of them are a class string rather than a component. They live in components/home/shared.ts so a section can import an idiom instead of retyping it and drifting.

Hairline

component

An edge-fading horizontal divider, quieter than a full-width border. Used between landing sections and above the footer.

ThemeToggle

client

Both icons ship and CSS picks one, rather than a mounted flag picking it in JS: no hydration mismatch, no first-paint flash, and no reflow in the nav row. D flips the theme from anywhere.

.label

class

The micro-label: mono, 11px, 0.18em tracking, uppercase, muted. It labels every section on the site, and on plugin pages it carries the structural name so the heading beside it can say something specific instead.

Why it exists39 factoryread from 05a5d67

Card surfaces

class

Depth is a 1px border and a translucent fill, never a shadow. The hover state brightens the border and lifts the card a single pixel.

cardSurface

Hover me. Border brightens, card lifts 1px.

.card-surface

The CSS twin, for markup that is not a Tailwind call site.

Entrance

reveal · stagger

A light fade and rise, motion-safe only, with a 120ms top-to-bottom stagger. Reload the page to see it again.

stagger(0)

stagger(1)

stagger(2)

stagger(3)