Foundations

The tokens, type, spacing, motion, looks and texture every Beamline component is built from, each one live.

• Colour: Surfaces, ink, lines, accent, semantic, trading, data series and effect hues. Every one is derived from --pui-brand or sits on the neutral hue-260 ladder.
• Brand engine: Seven lightness and six chroma steps worked out from the one brand colour, so a rebrand is one change.
• Meaning: Severity as colour + shape + word, and the hatched state for data that was never collected.
• Data ramps: Encodings, not brand: a rebrand does not move them. Nine stops as tokens (bg-ramp-heat-0 … 8); the continuous forms are heat(t), cool(t) and delta(t) in ui/lib/ramp.ts.
• Type: Families, the dense product size scale, weights, tracking, wrapping and reading measure.
• Spacing: The 4px scale (identical to Tailwind's), the named spacing containers already use, control heights and icon sizes.
• Looks: Nine looks (prism, the default, then soft, blueprint, glass, metal, glow, pop, mono, ink): one style over every element's core, chosen per app, region or element like a theme.
• Shape & depth: Radii, shadow stacks and the double bezel.
• Layers: One stacking order for every overlay.
• Motion: The ruled 90 / 180 ms pair, durations, every easing curve drawn from the live tokens, and the CSS-only motion utilities.
• Morph: Matter that answers: selections travel, layers open out of their trigger, bars show how much changed, actions trace their consequences. Each look decides the material.
• Interaction: Hover and press timing, focus rings, keyboard mode and 24px hit targets.
• Texture: Film grain and frosted glass: static, and only where they belong.