Principles

Break these and it stops looking — or behaving — like Alchemy. Two sets: how the brand looks, and how the code stays maintainable.

Brand rules

A heading and its serif-italic accent word are ALWAYS the same colour. Never mix violet + ink in one heading.

Don't

Flat brand colours only. No random linear/radial gradients as decoration.

Sections and panels use --section-round / --radius-lg. Nothing sharp-cornered.

Tiempos italic is an accent inside a body-font heading — never full paragraphs.

The nine engineering rules every component follows. Full detail lives in the EmDash design-system standards.

01

Never use raw values

Every colour, size, space and shadow comes from a token. No hex, no px font sizes in component styles.
02

Semantic token names

Components use --fg-accent, never a raw palette var. Intent over implementation.
03

Use shared components

If Button, Section or Eyebrow exists, import it. Never re-style a button inside a block.
04

Compose, don’t duplicate

Blocks assemble shared components. Catch yourself writing button CSS → import Button instead.
05

Thread tone

Dark sections pass tone to children; children adjust their own colour. Don’t hardcode white per block.
06

Variant props, not classes

Typed variants ('primary' | 'secondary'), not open class strings. Keeps every state visible and testable.
07

Typography scale discipline

Only .t-* classes / --fs-* tokens. Never invent a font size. If Figma needs one, add it to tokens first.
08

Standard hover states

Buttons lift 1px, linked cards lift 4px, static elements don’t hover. Always reset on :active.
09

Every heading token clamps

If any --fs-* heading clamps, they all do — a half-responsive scale inverts the hierarchy on mobile.