breakstuff

Design System

Theme:

The tokens, primitives, and rules that build every surface. Switch themes to preview.

Semantic Colors

--bg

#08080D

ref: {base.color.ink.950}

--surface

#11111A

ref: {base.color.ink.850}

--surface-raised

#1D1D28

ref: {base.color.ink.750}

--on-bg

#F0F0F8

ref: {base.color.ink.50}

--on-bg-muted

#8888A0

ref: {base.color.ink.300}

--on-bg-subtle

#44445A

ref: {base.color.ink.500}

--on-surface

#F0F0F8

ref: {base.color.ink.50}

--on-surface-muted

#8888A0

ref: {base.color.ink.300}

--on-surface-subtle

#44445A

ref: {base.color.ink.500}

--accent

#FF5500

ref: {base.color.orange.500}

--accent-hover

#FF7733

ref: {base.color.orange.400}

--accent-press

#CC4400

ref: {base.color.orange.600}

--accent-muted

rgba(255, 85, 0, 0.12)

ref: {base.color.orange.dim}

--on-accent

#FFFFFF

--border

rgba(255, 255, 255, 0.08)

--border-strong

rgba(255, 255, 255, 0.16)

--focus-ring

#FF5500

ref: {base.color.orange.500}

--success

#00E5A0

ref: {base.state.success}

--success-muted

rgba(0, 229, 160, 0.12)

ref: {base.state.success-dim}

--on-success

#001A0D

ref: {base.state.on-success}

--warning

#FFB800

ref: {base.state.warning}

--warning-muted

rgba(255, 184, 0, 0.12)

ref: {base.state.warning-dim}

--on-warning

#1A1200

ref: {base.state.on-warning}

--error

#FF4D6D

ref: {base.state.error}

--error-muted

rgba(255, 77, 109, 0.12)

ref: {base.state.error-dim}

--on-error

#1A0008

ref: {base.state.on-error}

--info

#6366FF

ref: {base.state.info}

--info-muted

rgba(99, 102, 255, 0.12)

ref: {base.state.info-dim}

--on-info

#FFFFFF

ref: {base.state.on-info}

--chart-1

#FF5500

ref: {base.color.orange.500}

--chart-2

#6366FF

ref: {base.state.info}

--chart-3

#00E5A0

ref: {base.state.success}

--chart-4

#FFB800

ref: {base.color.gold.500}

--chart-5

#FF4D6D

ref: {base.state.error}

Spacing

--1

4px

--2

8px

--3

12px

--4

16px

--5

20px

--6

24px

--8

32px

--10

40px

--12

48px

--16

64px

--20

80px

Radius

base-radius-none 0px

base-radius-sm 4px

base-radius-md 6px

base-radius-lg 8px

base-radius-xl 12px

base-radius-full 9999px

Typography

base-size-xs The quick brown fox 11px

base-size-sm The quick brown fox 13px

base-size-md The quick brown fox 15px

base-size-lg The quick brown fox 18px

base-size-xl The quick brown fox 22px

base-size-2xl The quick brown fox 28px

base-size-3xl The quick brown fox 36px

base-size-4xl The quick brown fox 48px

base-size-5xl The quick brown fox 64px

Motion

base-dur-fast · base-ease-out

base-dur-fast · base-ease-inOut

base-dur-base · base-ease-out

base-dur-base · base-ease-inOut

base-dur-slow · base-ease-out

base-dur-slow · base-ease-inOut

Rules for consumers

@breakstuff/tokens

# @breakstuff/tokens — consumer rule

You are editing code that depends on `@breakstuff/tokens`. Follow these rules.

## Setup

Import the stylesheet **exactly once** at the app root:

```ts
import '@breakstuff/tokens/tokens.css';
```

Apply the `.ds-app` class to the top-level container (usually the `<body>` or its first child) so the reset and base typography apply.

## Tokens you may use

Only **semantic** tokens. Every one is a CSS custom property starting with one of:

- `--bg`, `--surface`, `--surface-raised`
- `--on-bg`, `--on-bg-muted`, `--on-bg-subtle`
- `--on-surface`, `--on-surface-muted`, `--on-surface-subtle`
- `--accent`, `--accent-hover`, `--accent-press`, `--accent-muted`, `--on-accent`
- `--border`, `--border-strong`, `--focus-ring`
- `--success`, `--success-muted`, `--on-success` (same shape for `warning`, `error`, `info`)
- `--chart-1`..`--chart-5`
- `--sp-1`..`--sp-20`, `--page-padding`, `--section-gap`, `--component-gap`, `--item-gap`, `--inset-sm`, `--inset-md`, `--inset-lg`
- `--radius-badge`, `--radius-input`, `--radius-card`, `--radius-modal`, `--radius-pill`
- `--font`, `--text-micro`..`--text-giant`, `--weight-*`, `--leading-*`, `--tracking-*`
- `--ease`, `--ease-io`, `--dur-fast`, `--dur-base`, `--dur-slow`

## Tokens you must NOT use

- Anything starting with `--base-*`. These are the raw palette layer. Referencing them bypasses theming and will break when themes change.

## Themes

- Default theme is `dark-orange`. No attribute needed.
- Switch themes by setting `data-theme="dadbod"` on `<html>` (or any ancestor of the subtree you want themed).
- Adding a theme is a change to `@breakstuff/tokens`, not a consumer concern.

## Focus

- Rely on `:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }`. The `.ds-app` class sets this globally. Do not override it.

## Hard-coded colors

- Do not use hex / rgb / hsl values in application CSS. If you need a value that has no semantic token, stop and add a token to `@breakstuff/tokens` first.

@breakstuff/primitives-react

# @breakstuff/primitives-react — consumer rule

You are editing code that depends on `@breakstuff/primitives-react`. Follow these rules.

## Setup (one-time, at the app root)

```ts
import '@breakstuff/tokens/tokens.css';
import '@breakstuff/primitives-react/styles.css';
```

Both imports must happen exactly once each, and **tokens.css must come first**.

## Primitives available

- `Button` (single component). Props: `variant: "primary" | "secondary" | "ghost"`, `size: "sm" | "md" | "lg"`, `tone: "accent" | "neutral" | "danger"`, `asChild`, plus native `<button>` attributes.
- `Dialog` (compound): `Dialog.Root`, `Dialog.Trigger`, `Dialog.Content` (requires `title: string`, optional `description`), `Dialog.Footer`, `Dialog.Close`.
- `Tabs` (compound): `Tabs.Root`, `Tabs.List`, `Tabs.Trigger`, `Tabs.Panel`.

Always use the primitive from this package in preference to raw `@radix-ui/*` or hand-rolled HTML controls. If something is missing, **add it to this package** — do not one-off it in an app.

## Composition

- Use the **compound API** (`Dialog.Trigger`, `Tabs.Panel`). Never import sub-pieces by name from `@radix-ui/*` directly.
- `asChild` is the only supported way to change the rendered element:

  ```tsx
  <Button asChild>
    <a href="/go">Go</a>
  </Button>
  ```

  Never add an `as` prop.
- Disabled state uses the native `disabled` attribute. Never set `aria-disabled` manually.

## className

`className` is a **layout escape hatch only** — use it for margin, grid placement, or positional tweaks. Never use it to:
- Re-skin colors, backgrounds, borders, or text styles of the primitive.
- Change padding or font-size of the primitive.

If you need to restyle a primitive visually, add a new variant / tone / size to the primitive in this package.

## Focus

Focus styling is handled by the `.ds-app` class from `@breakstuff/tokens`. Do not add component-level focus styles.