Getting Started
How BDS is organized and where to find each tenet.
BDS ships three things on a single npm package: tokens (the design language), components (React building blocks), and theming + content vocabulary (atmospheres, layout archetypes, blueprints, industry packs, voices).
Consumers import from @brikdesigns/bds. There is no submodule, no copy-paste — components and tokens stay in lockstep across products.
How this site is organized
BDS has four Tenets: Foundation, Theming, Motion, Content. Each gets its own section here:
- Primitives (Foundation) — universal token canon: color foundations (
--page-*,--surface-*,--background-*,--text-*,--border-*), typography, spacing, radius, shadow, sizing. Start with Token Anatomy for the six-concept vocabulary every other page builds on. - Theming — composing per-client brand identity across four Theming Dimensions: Tokens (brand overrides via
theme-{client}.cssin@layer client-theme), Atmospheres (decoration overlays), Layout Archetypes (nav + footer), Blueprints (section composition). - Motion — animation tokens + behaviors (CSS reveals, GSAP, premium effects).
- Content System — industry packs, voice definitions, the BCS vocabulary that selects theming defaults.
- Components — React building blocks every product surface composes from.
- Documentation system — how BDS is documented (read before contributing docs changes).
- Page templates — the standard shape every docs page follows.
New to the token system? Read Token Anatomy and Library Architecture first — they lock the vocabulary every other section uses.
How this site relates to Storybook
| Surface | Job |
|---|---|
| This site | When-to-use, anatomy, do/don't, accessibility, design rationale |
| Storybook | Live prop exploration, every visual variant, copy-paste code |
If you can answer your question with "what does this look like with size=lg," go to Storybook. If you're asking "should I use Button or LinkButton here," stay here.