Design Tokens

Architecture

Be Partner DS uses a two-level token system:

Level	Pattern	Set by	Rule
Client surface	`--bp-primary`, `--bp-radius`	You	Two variables that drive everything
Semantic	`--bp-color-{role}`	DS (override in dark mode)	Referenced by all components
Component-private	`--_{name}`	Never	Internal only — Lea Verou pattern

Client customization

Set these two tokens on :root to brand the entire system:

:root {
  --bp-primary: #5fcb9f; /* your brand color */
  --bp-radius: 0.625rem; /* base border-radius */
}

Everything else — hover states, subtle tints, focus rings, radius scale — derives automatically via oklch(from …) relative colors (with color-mix() as fallback).

Color tokens

Primary

—bp-primary
#5fcb9f

—bp-primary-hover
derived

—bp-primary-subtle
derived

—bp-primary-fg
text on primary

Surface

—bp-color-bg
#f8f6f2 / #16140f

—bp-color-bg-subtle
#f2efe9 / #1e1c17

—bp-color-bg-elevated
#ffffff / #242118

Text & border

—bp-color-text
#181715 / #f2eee6

—bp-color-text-muted
#6b6760 / #9e9a93

—bp-color-text-inverse
#f2eee6 / #181715

—bp-color-border
#e5e0d8 / #2d3b30

Feedback

—bp-color-success
#2e9e72 / #4dc896

—bp-color-warning
#c97a3d / #e2a06a

—bp-color-error
#b14a3a / #e07f6e

—bp-color-info
#3b82f6 / #60a5fa

Typography

--bp-font-sans: system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
--bp-font-mono: "JetBrains Mono", "Fira Code", ui-monospace, monospace;

/* Fluid type scale (360px → 1200px viewport) */
--bp-text-xs   --bp-text-sm   --bp-text-base  --bp-text-lg
--bp-text-xl   --bp-text-2xl  --bp-text-3xl   --bp-text-4xl  --bp-text-5xl

Spacing

Base unit: 4px.

--bp-space-1: 0.25rem /*  4px */ --bp-space-8: 2rem /* 32px */ --bp-space-2: 0.5rem /*  8px */
  --bp-space-10: 2.5rem /* 40px */ --bp-space-3: 0.75rem /* 12px */ --bp-space-12: 3rem /* 48px */
  --bp-space-4: 1rem /* 16px */ --bp-space-16: 4rem /* 64px */ --bp-space-6: 1.5rem /* 24px */
  --bp-space-24: 6rem /* 96px */;

Radius

Derived from --bp-radius (default 0.625rem):

--bp-radius-sm: calc(var(--bp-radius) * 0.5) --bp-radius-md: var(--bp-radius)
  --bp-radius-lg: calc(var(--bp-radius) * 1.5) --bp-radius-xl: calc(var(--bp-radius) * 2)
  --bp-radius-full: 9999px;

Other

/* Shadows */
--bp-shadow-sm / md / lg / xl

/* Motion */
--bp-duration-fast: 120ms   --bp-ease:        cubic-bezier(0.4, 0, 0.2, 1)
--bp-duration-normal: 220ms  --bp-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1)
--bp-duration-slow: 380ms

/* Focus */
--bp-focus-ring: 0 0 0 3px color-mix(in srgb, var(--bp-primary) 40%, transparent)

Theme system

Dark mode via OS preference (prefers-color-scheme) or manual data-theme="light|dark" on <html>.

<html data-theme="dark">
  …
</html>