Light is the structure of the interface.

A design system that builds hierarchy the way a prism builds a spectrum — bending one beam of light into order. Focused surfaces glow, a single caustic line carries the rhythm, and only the sharpest edges disperse into colour.


refractive interface system · n 1.52 · 589 nm
The optics

Three behaviours of light, mapped to interface.

Caustic doesn't decorate with glass — it borrows three real properties of light and lets them do the work of borders, fills, and dividers.

Caustics carry hierarchy

The brighter a surface catches the light, the more it matters. Focus is a glow on the edge, not a heavier box or a louder colour.

One beam sets the rhythm

A single spectral light-line runs through the page in place of rules and section breaks — refraction, not horizontal lines.

Dispersion marks emphasis

Only the highest-contrast edges split into a thin rainbow fringe. Spend the spectrum sparingly and it always reads as a signal.


How it bends

One material, every component.

Every pane is a lens. It stays clear and translucent; the system only changes how light moves across it.

  • 1
    Panes never get opaque fills or borders
    depth comes from the caustic rim and a faint inner highlight
  • 2
    Focus and active states glow, they don't darken
    a spectral light-line lands on the top edge of the lit surface
  • 3
    Radii commit to 16, 24, and full pills
    one coherent optical geometry, nothing in between
Three accents

The whole palette is one split beam.

Cyan, rose, and amber are the system's three highlighters — the same light, dispersed. Each owns a register; together they never muddy.

589 nm · primary

Cyan leads

Focus, primary action, live transmission. The first thing the eye should catch.

528 nm · accent

Rose disperses

Emphasis and secondary action — the fringe that marks a sharp, high-contrast edge.

486 nm · warm

Amber warms

Caution and warmth, held to the edges so it never overpowers the cool field.

Build an interface out of light.

Tokens, components, and the refractive material — everything you need to make hierarchy from caustics instead of boxes.