Brik Design System
Tokens, components, theming, motion, and content vocabulary — one versioned package.
BDS is four tenets in one repository, shipped as a single versioned package. Each tenet is an independent vocabulary the portal, mockup generators, and client sites consume to ship work that looks and reads like Brik without anyone having to re-decide the basics every project.
This site is the guidance layer. For live prop exploration and visual variants, Storybook stays the playground.
The four tenets
| Tenet | Answers | Ships |
|---|---|---|
| Foundation | "What color, size, type?" | Design tokens, scales, primitives |
| Theming | "What brand, mood, shape?" | Tokens + atmospheres + layout archetypes + blueprints |
| Motion | "How does it feel to move?" | Three-tier animation system — CSS reveals → GSAP scroll → premium effects |
| Content | "What does it say, for whom?" | Industry packs, voice patterns, locked vocabularies |
Each tenet evolves on its own cadence but cross-links at the edges. An industry pack declares a default atmosphere and navigation archetype, so the Content tenet drives defaults for the Theming tenet that the client brand then optionally overrides.
Where to start
Getting Started
Install BDS, wire the cascade, pick your framework.
Foundation
Design tokens — color, type, spacing, radius, shadow.
Theming
Atmospheres, archetypes, blueprints — the multi-tenant instrument.
Motion
Three-tier system — Lightweight, GSAP, Premium.
Content System
Industries, voices, vocabularies — the vocabulary peer to tokens.
Components
React product surface. One job each, composable, themeable.
Web Elements
HTML/CSS components, sections, and email modules for websites.
React Reference
Hooks, patterns, and utilities for product apps.