Primitives
Tokens — the design language every BDS component reads from.
BDS primitives are a flat token vocabulary covering color, typography, spacing, motion, radius, shadow, and border. They're authored in Figma, exported via Tokens Studio, transformed by Style Dictionary, and shipped as @brikdesigns/bds/tokens.css.
Each page below explains one primitive group: what tokens exist, what they mean semantically, and the rules for using them outside their category (don't).
Token source of truth lives in Figma. This site documents what's available and how to use it. To add a new token, edit Figma first — don't add it to CSS directly.
Foundations
Color
Semantic color roles + interaction states + status + the primitive palettes.
Typography
Font families, the type scale, weights, line heights, and the semantic role rule.
Spacing
The 4-point grid, semantic padding and gap tokens, the primitive space scale.
Size
Container sizes, breakpoints, hero constraints, and the element-size scale.
Border radius
Corner rounding from sharp (0) to pill (999) to fully circular.
Border width
Line thickness for borders, dividers, and outlines.
Shadow
Elevation tokens — composed semantic shadows + primitive blur/spread scales.
Motion
Duration, easing, keyframes, and the three-tier motion system.
Still in Storybook
These foundation pages haven't been migrated yet. Until they land here, view them in Storybook and treat the contents as canonical.
| Page | Where |
|---|---|
| Motion (full) | Storybook → Motion — overview, tiers, effects, vocabulary |
| Naming Conventions | Storybook → Naming Conventions |
| Design Tokens overview | Storybook → Design Tokens |
How tokens flow into your app
Figma Variables
↓
design-tokens/tokens-studio.json (build input)
↓
Style Dictionary
↓
tokens/figma-tokens.css (auto-generated)
tokens/figma-tokens-dark.css (auto-generated, dark mode)
tokens/gap-fills.css (manual, interaction states)
↓
Consumer projects:
@import '@brikdesigns/bds/tokens.css';
@import './styles/theme-{client}.css';
@import '@brikdesigns/bds/styles.css';See the cascade rules for how the three layers interact.