Installation

The Cascade is the adoption contract of record. This page is the quick setup path; the four binding requirements every consumer must satisfy — layer order, mode switches, importing tokens.css, and zero token redefinitions — live there. Read the adoption contract before wiring a new consumer.

Install the package

npm install @brikdesigns/bds

pnpm add @brikdesigns/bds

bun add @brikdesigns/bds

Wire the token cascade

In your global stylesheet (globals.css, app.css, etc.) import in this order:

@import '@brikdesigns/bds/tokens.css';
@import './styles/theme-{client}.css'; /* your client's theme overrides */
@import '@brikdesigns/bds/styles.css';

Why this order, what each file contains, and the rule against redefining BDS tokens: The Cascade.

Theme + mode switches

Set switches on <html> (or use <ThemeProvider> in React apps which manages them automatically):

<html data-theme="dark" data-mode-borderwidth="bold">
  <body class="theme-brand-brik">
    <!-- ... -->
  </body>
</html>

Switch	Values	Effect
`<body class="theme-brand-brik">`	—	Loads Brik's brand colors / fonts. Replace with your own client theme class if applicable.
`<html data-theme>`	`light` (default) / `dark`	Color mode
`<html data-mode-borderwidth>`	`thin` / `bold` (omit for Standard)	Borderwidth mode

See The Cascade for the full switch table including audience scope binding for multi-brand sites.

Optional — atmosphere overlay

Atmospheres add ambient decoration (vignettes, grain, orbs, spotlights) without overriding theme tokens. Import one after tokens.css:

@import '@brikdesigns/bds/tokens.css';
@import './styles/theme-{client}.css';
@import '@brikdesigns/bds/atmospheres/minimal-clinical.css'; /* optional */
@import '@brikdesigns/bds/styles.css';

Atmospheres are decoration-only — surface color comes from the theme layer. See Atmospheres.

Import a component

import { Button } from '@brikdesigns/bds';

export function Example() {
  return <Button variant="primary">Save</Button>;
}

That's it. No provider required for components — they read tokens from the cascade above.

The Cascade — two-tier × four-layer × modes architecture and the full <html> switch table.
Framework Guides — Next.js + Astro scaffolds with real working code.