# Foundations

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

- [Colour](https://beamline.io/components/foundations/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](https://beamline.io/components/foundations/brand): Seven lightness and six chroma steps worked out from the one brand colour, so a rebrand is one change.
- [Meaning](https://beamline.io/components/foundations/meaning): Severity as colour + shape + word, and the hatched state for data that was never collected.
- [Data ramps](https://beamline.io/components/foundations/data): 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](https://beamline.io/components/foundations/type): Families, the dense product size scale, weights, tracking, wrapping and reading measure.
- [Spacing](https://beamline.io/components/foundations/spacing): The 4px scale (identical to Tailwind's), the named spacing containers already use, control heights and icon sizes.
- [Looks](https://beamline.io/components/foundations/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](https://beamline.io/components/foundations/shape): Radii, shadow stacks and the double bezel.
- [Layers](https://beamline.io/components/foundations/layers): One stacking order for every overlay.
- [Motion](https://beamline.io/components/foundations/motion): The ruled 90 / 180 ms pair, durations, every easing curve drawn from the live tokens, and the CSS-only motion utilities.
- [Morph](https://beamline.io/components/foundations/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](https://beamline.io/components/foundations/interaction): Hover and press timing, focus rings, keyboard mode and 24px hit targets.
- [Texture](https://beamline.io/components/foundations/texture): Film grain and frosted glass: static, and only where they belong.