Reference

Design tokens

Browse runtime CSS variables and consume source-derived token data from JavaScript, JSON, or TypeScript.

Reference guideCSS + code exportsv0.7.0 current

Reference

Design tokens

All framework decisions are exposed as CSS custom properties. Color tokens may be remapped by a theme; typography, spacing, radius, elevation, container, and motion tokens are shared. Compare every palette and resolved color value in the complete theme color reference.

Override semantic tokens

Theme a subtree by redefining public semantic variables on its boundary. Components inside consume the new values automatically.

Customized

Semantic override

The button and badge inherit the local primary color.

HTML · Scoped token override

<section class="campaign" style="--bs-color-primary: #7c3aed; --bs-color-primary-hover: #8b5cf6;">
  <span class="bs-badge bs-badge-primary">Customized</span>
  <button class="bs-btn bs-btn-primary" type="button">Continue</button>
</section>

Semantic first

Prefer --bs-color-primary and other semantic variables over raw palette tokens when customizing components.

Scope

Override on :root for the whole application, a theme attribute for one palette, or a component ancestor for a local treatment.

Fallbacks

Keep every required state token—default, hover, active, focus, border, and text—legible in both light and dark contexts.

Use tokens in build tools and design tools

Boobstrap v0.5 generates JavaScript, JSON, and TypeScript declarations from the same CSS source used by the framework. Import the ES module when application or build code needs named tokens and modes collections; import JSON when a tool consumes data without executing a module.

JavaScript · Token exports

import tokenArtifact, { modes, tokens } from "@boobstrap/boobstrap/tokens";
import tokenJson from "@boobstrap/boobstrap/tokens.json" with { type: "json" };

const primary = tokens.color.primary.$value;
const lightOverrides = modes['[data-bs-theme="light"]'];

console.log(tokenArtifact.tokens === tokens); // true
console.log(tokenJson.tokens.color.primary.$value);

Token artifact contract

Export	Shape	Use it for
`default`	`{ tokens, modes }`	Passing the complete source-derived artifact to another tool.
`tokens`	Grouped token records with `$value` and `$extensions`	Reading base values and their originating `--bs-*` CSS variable names.
`modes`	CSS-selector keys mapped to variable overrides	Inspecting light mode, palette, and radius remaps without resolving CSS in a browser.
`tokens.json`	`$schema` and `$description` metadata plus `tokens` and `modes`	Design-token pipelines, documentation generators, and non-JavaScript consumers that need the complete generated envelope.

Source of truth: keep styling in CSS custom properties. The code artifacts are generated interoperability data and must not be edited. Exact var() aliases become DTCG-style references such as {brand.500}; CSS-native expressions such as gradients, shadows, clamp(), and font stacks remain lossless strings. See TypeScript for the exported declaration shape.

Browse runtime CSS variables

The searchable inventory below is generated from the exact framework stylesheet installed by this site. It is the authoritative runtime API for theming in the browser.

Filter tokens

Palette10

--bs-white

#ffffff

--bs-brand-300

#f28abb

--bs-brand-400

#ea5a9f

--bs-brand-500

#d83c87

--bs-brand-600

#b92f72

--bs-brand-700

#922257

--bs-plum-700

#452040

--bs-plum-800

#32172f

--bs-plum-900

#211021

--bs-plum-950

#140a15

Semantic colors19

--bs-color-background

var(--bs-plum-950)

--bs-color-surface

var(--bs-plum-900)

--bs-color-surface-raised

#2b1529

--bs-color-surface-hover

var(--bs-plum-800)

--bs-color-text

#fff9fc

--bs-color-text-muted

#c4b5bf

--bs-color-text-subtle

#95858f

--bs-color-primary

var(--bs-brand-500)

--bs-color-primary-hover

var(--bs-brand-400)

--bs-color-primary-active

var(--bs-brand-600)

--bs-color-primary-contrast

var(--bs-white)

--bs-color-focus-ring

rgb(234 90 159 / 42%)

--bs-color-success

#36b37e

--bs-color-warning

#e6a23c

--bs-color-danger

#e05268

--bs-color-info

#618ee8

--bs-color-border

rgb(255 255 255 / 10%)

--bs-color-border-strong

rgb(216 60 135 / 38%)

--bs-color-control-background

rgb(12 5 14 / 42%)

Typography17

--bs-font-sans

Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif

--bs-font-display

"Plus Jakarta Sans", Inter, ui-sans-serif, system-ui, sans-serif

--bs-font-mono

"JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace

--bs-font-size-xs

0.75rem

--bs-font-size-sm

0.875rem

--bs-font-size-md

1rem

--bs-font-size-lg

1.125rem

--bs-font-size-xl

1.25rem

--bs-font-size-2xl

1.5rem

--bs-font-size-3xl

2rem

--bs-font-size-4xl

2.75rem

--bs-font-size-5xl

4rem

--bs-font-size-6xl

clamp(4rem, 8vw, 7rem)

--bs-line-height-tight

1.05

--bs-line-height-heading

1.2

--bs-line-height-body

1.6

--bs-line-height-code

1.7

Spacing14

--bs-space-0

--bs-space-1

0.25rem

--bs-space-2

0.5rem

--bs-space-3

0.75rem

--bs-space-4

1rem

--bs-space-5

1.25rem

--bs-space-6

1.5rem

--bs-space-8

2rem

--bs-space-10

2.5rem

--bs-space-12

3rem

--bs-space-16

4rem

--bs-space-20

5rem

--bs-space-24

6rem

--bs-space-32

8rem

Radius7

--bs-radius-xs

0.25rem

--bs-radius-sm

0.5rem

--bs-radius-md

0.75rem

--bs-radius-lg

1rem

--bs-radius-xl

1.5rem

--bs-radius-2xl

2rem

--bs-radius-pill

9999px

Effects5

--bs-shadow-sm

0 2px 8px rgb(8 2 9 / 18%)

--bs-shadow-md

0 12px 30px rgb(8 2 9 / 28%)

--bs-shadow-lg

0 24px 70px rgb(8 2 9 / 42%)

--bs-shadow-brand

0 10px 34px rgb(216 60 135 / 22%)

--bs-gradient-brand

linear-gradient(135deg, var(--bs-brand-400), var(--bs-brand-500) 48%, var(--bs-brand-600))

Containers5

--bs-container-sm

40rem

--bs-container-md

48rem

--bs-container-lg

64rem

--bs-container-xl

76rem

--bs-container-2xl

90rem

Breakpoints5

--bs-breakpoint-sm

40rem

--bs-breakpoint-md

48rem

--bs-breakpoint-lg

64rem

--bs-breakpoint-xl

76rem

--bs-breakpoint-2xl

90rem

Z-index10

--bs-z-dropdown

1000

--bs-z-sticky

1020

--bs-z-fixed

1030

--bs-z-navbar-backdrop

1040

--bs-z-navbar

1050

--bs-z-popover

1060

--bs-z-tooltip

1070

--bs-z-toast

1080

--bs-z-dialog-backdrop

1090

--bs-z-dialog

1100

Control sizes4

--bs-control-size-sm

2.25rem

--bs-control-size-md

2.75rem

--bs-control-size-lg

3.25rem

--bs-control-size-xl

3.5rem

Button sizes3

--bs-btn-size-sm

var(--bs-control-size-sm)

--bs-btn-size-md

var(--bs-control-size-md)

--bs-btn-size-lg

var(--bs-control-size-xl)

Component customization0

Overlay1

--bs-overlay-backdrop

rgb(5 2 6 / 68%)

Motion5

--bs-duration-fast

120ms

--bs-duration-normal

200ms

--bs-duration-slow

360ms

--bs-ease-standard

cubic-bezier(0.2, 0, 0, 1)

--bs-ease-emphasized

cubic-bezier(0.2, 0.8, 0.2, 1)

Scrollbars4

--bs-scrollbar-size

0.75rem

--bs-scrollbar-track

transparent

--bs-scrollbar-thumb

color-mix(in srgb, var(--bs-color-text-subtle) 58%, transparent)

--bs-scrollbar-thumb-hover

color-mix(in srgb, var(--bs-color-primary) 72%, var(--bs-color-text-subtle))