Patterns

Card

Base interaction affordance shared by SummaryCard and SpotlightCard. Provides the surface hover fill, active-press opacity, and removes default link/button styling. The hover fill is a default, not a guarantee — SummaryCard overrides it back to transparent and carries its hover as an underline instead, for the reasons documented in its own styles.

Cursor Affordance

Pointer-following label on hover, with a static fallback on touch where a component needs one. Provides interaction hints without cluttering the resting state.

View project

Dithered Field

A continuous quantity rendered through a fixed Bayer 8×8 distribution on a 2px grid. SkyBand distributes ground, shadow, body and light through one cumulative rank; Nav's veil distributes ground and transparency. The Colour foundation exposes the daily palette and a sparse boundary in AtmosphereSpecimen.

Prose

Renders markdown-to-HTML content with consistent treatment — ink-secondary dash list markers, inline link hovers, paragraph spacing. Applied via the `.prose` class on any `set:html` container.

Design systems are living documents — they evolve with the product. This paragraph demonstrates the prose pattern: consistent typography, inline links with hover states, and structured spacing between elements.

  • Ink-secondary dash markers
  • Paragraph spacing via gap
  • Inherits parent type scale

Scroll Reveal

Scroll-triggered entrance animation. Elements start invisible and translated down by half a cell, then fade and slide in over 0.45s when they enter the viewport. The stagger advances children in 0.05s increments. Respects prefers-reduced-motion. On the home flow the reveal is per block — each passage, figure, divider and byline carries it — rather than per group or per paragraph.