Design system · v0.1.0
Beam
Acuity’s multi-brand design system. One brand-agnostic stylesheet, one small kit per brand, and a clear line between what AXD owns and what Cantina owns.
The layered model
1 · Global
beam.css
Tokens, foundations, compositions and utilities. The same file for every brand. With no kit it renders as a grayscale wireframe.
2 · Kit
brandkit.<id>.css
Picks the brand’s modes — accent, neutrals, density, typeface, shape, depth — plus fonts and assets. About 10 KB.
3 · App
Your product
Cantina controls plus your own blocks, written with tokens only.
@layer beam.tokens, beam.kit, beam.foundations, beam.compositions, beam.utilities, beam.blocks;Principles
- Semantic first. Product code uses tokens named for their job (
--beam-text-neutral-primary), never raw values. - Composition before components. Layout comes from a small set of composition classes; components don’t carry layout.
- Modes, not forks. Brand, theme and density are switches on the same CSS, not separate stylesheets per app.
- Generated, not hand-edited. Figma variables → JSON →
beam.css. Docs on this site are generated from the same build.
Who owns what
| Concern | Owner | Lives at |
|---|---|---|
| Tokens, foundations, utilities | AXD | beam.css · this site |
| Patterns, layouts, grids, compositions | AXD | This site |
| Brand kits | AXD + brand teams | This site |
| Standard UI controls (React) | Cantina (front-end team) | Cantina |
Agent instructions (beam.skill) | AXD | This site + repo |
Cantina consumes beam.css; it does not define tokens.
Explore
- Get started
Link two files and start composing.
- Compositions
Layout primitives with live examples.
- Color
Primitives, scales and semantic colour by mode, with contrast.
- Typography
Type roles, ramp and live samples.
- Spacing & density
Spacing scale, stack/inline/inset/region, density modes.
- Radius & shape
Semantic radii across the five shape modes.
- Depth
Elevation stacks, rings and glows.
- Motion
Durations, easings, stagger; reduced-motion values.
- Layout & breakpoints
Widths, containers and viewport breakpoints.
- Utilities
Every utility class and the property it sets.