Getting Started
How BDS is organized and where to find each tenet.
BDS ships four Tenets on a single npm package — Foundation (tokens), Theming (per-client brand), Motion (animation), and Content (voice + vocabulary) — plus the components that render them.
Consumers import from @brikdesigns/bds. There is no submodule, no copy-paste — components and tokens stay in lockstep across products.
Start here
Read these pages in order to wire a new consumer end to end:
- Token Anatomy — the six-concept vocabulary (Anatomy, Tier, Library, Layer, Mode, Tenet) every other page builds on.
- Installation — install the package and render your first component.
- Framework guides — the Next.js and Astro scaffolds with working code.
- The cascade — the adoption contract every consumer wires the same way.
- Library architecture — where tokens come from (Foundations vs Brand Kit).
- React composition layer — referencing tokens from TSX without inline
var()strings.
Building or contributing to the docs themselves? See Documentation system (where knowledge lives) and Page templates (the shape every page follows).
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.
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.