Colors

Background levels, foreground, and accent -- all OKLCH with configurable chroma and hue.

0Page base, primary button text

1Body background, panels, header

2Sheets, code blocks, inputs, default buttons

3Table headers, subtle fills

4Hover background

5Active/pressed background

6Separators, inset hover

7Stronger borders, inset active

8Border color

fgPrimary text, primary button bg

mutedSecondary text, labels, captions

accentAccent button, brand color

Contrast

WCAG contrast ratios for foreground/background combinations. AA requires 4.5:1, AAA requires 7:1.

	0	1	2	4	fg	accent
Foreground	Aa	Aa	Aa	Aa	Aa	Aa
Muted	Aa	Aa	Aa	Aa	Aa	Aa
Level 0	Aa	Aa	Aa	Aa	Aa	Aa

Typography

sm — 12px / 18pxThe quick brown fox jumps over the lazy dog

md — 14px / 20pxThe quick brown fox jumps over the lazy dog

lg — 16px / 24pxThe quick brown fox jumps over the lazy dog

Heading 1 — 32px

Heading 2 — 24px

Heading 3 — 20px

Heading 4 — 18px

Spacing

Three height tiers drive all vertical rhythm. Every container -- cells, buttons, inputs -- uses the same sm/md/lg scale.

28px

Small — compact buttons, tab triggers, tags, chips
padding: 4px 8px (gap 8px)

36px

Medium — default buttons, nav links, toolbar items, compact rows
padding: 8px 12px (gap 12px)

44px

Large — inputs, table rows, accordion items, content rows
padding: 12px 16px (gap 16px)

Cell

The core layout primitive. Every row-like element — buttons, list items, menu items, nav links — is a cell. Three optional slots: lead (icon), content (text), trail (action).

Sizes

Small — 28px

Medium — 36px

Large — 44px

Modifiers

Truncate — this text is too long and gets clipped with an ellipsis

Centered

<!-- Cell with all three slots -->
<button class="cell cell--interactive">
  <span class="cell__lead"><svg>...</svg></span>
  <span class="cell__content">Label</span>
  <span class="cell__trail"><svg>...</svg></span>
</button>

<!-- Sizes: sm (default), md, lg -->
<div class="cell">...</div>
<div class="cell cell--md">...</div>
<div class="cell cell--lg">...</div>

<!-- Modifiers -->
<button class="cell cell--interactive">             <!-- hoverable -->
<button class="cell cell--interactive cell--active"> <!-- shows aria-selected state -->
<button class="cell cell--interactive cell--muted">  <!-- dimmed, reveals on hover -->
<div class="cell cell--truncate">                    <!-- clips overflow -->
<div class="cell cell--centered">                    <!-- centers content -->
<button class="cell" aria-disabled="true">           <!-- non-interactive -->

Lists

The stack class groups cells into lists with 2px gap spacing. Add stack--tight for 0 gap, stack--padded for 8px padding, stack--nested for indented sub-groups with a connector line.

Navigation

Toolbar

Tree

<!-- Navigation list -->
<div class="stack stack--vertical">
  <button class="cell cell--interactive">
    <span class="cell__lead"><svg>...</svg></span>
    <span class="cell__content">General</span>
  </button>
</div>

<!-- Toolbar -->
<div class="stack stack--horizontal">
  <button class="btn btn--ghost cell cell--interactive">
    <span class="cell__content">Edit</span>
  </button>
</div>

<!-- Menu -->
<div class="stack stack--vertical stack--padded">
  <button class="cell cell--interactive">
    <span class="cell__content">Profile</span>
  </button>
</div>

<!-- Tree -->
<div class="stack stack--vertical">
  <div class="cell">Parent</div>
  <div class="stack stack--vertical stack--nested">
    <div class="cell">Child</div>
  </div>
</div>

Buttons

A button is a cell with visual weight added on top. The btn class adds background, border, radius, and font-weight 500. The cell inside provides the layout — lead, content, trail slots.

Variants at each size

With icons at each size

Icon-only at each size

Disabled

Button group

<!-- Small (28px) -->
<button class="btn btn--primary cell">
  <span class="cell__content">Save</span>
</button>

<!-- Medium (36px) -->
<button class="btn btn--primary cell cell--md">
  <span class="cell__content">Save</span>
</button>

<!-- Large (44px) -->
<button class="btn btn--primary cell cell--lg">
  <span class="cell__content">Save</span>
</button>

<!-- Icon-only: sm=28 md=36 lg=44 -->
<button class="btn btn--icon" aria-label="Edit">...</button>
<button class="btn btn--icon-md" aria-label="Edit">...</button>
<button class="btn btn--icon-lg" aria-label="Edit">...</button>

Sheet

Container surface for cards, panels, and dropdowns. Background level-2, 0.5px inset border, 8px radius. Contains stacks of cells.

Settings panel

Settings

<div class="sheet">
  <div class="cell cell--lg">
    <span class="cell__content">Settings</span>
    <span class="cell__trail">
      <button class="btn btn--icon btn--ghost" aria-label="Close">
        <svg>...</svg>
      </button>
    </span>
  </div>
  <div class="stack stack--vertical">
    <button class="cell cell--lg cell--interactive">
      <span class="cell__lead"><svg>...</svg></span>
      <span class="cell__content">General</span>
      <span class="cell__trail"><svg>...</svg></span>
    </button>
  </div>
  <div class="cell cell--lg">
    <span class="cell__content">
      <div class="stack stack--horizontal">
        <button class="btn btn--ghost cell">
          <span class="cell__content">Cancel</span>
        </button>
        <button class="btn btn--primary cell">
          <span class="cell__content">Save</span>
        </button>
      </div>
    </span>
  </div>
</div>

Compositions

Real-world UIs composed from cell, stack, sheet, and btn. Every element on this page is built from the same four primitives.

App sidebar

Workspace

General

Account

Notification

Changes saved

Your settings have been updated successfully.

Comment thread

Alice2m ago

Looks good to me, ship it!

Bob1m ago

Thanks! Merging now.

Card with actions

Deploy preview

Build completed in 12s. All checks passed. Ready to merge into production.

<!-- App sidebar -->
<div class="sheet">
  <div class="cell cell--lg">
    <span class="cell__lead"><svg>...</svg></span>
    <span class="cell__content">Workspace</span>
  </div>
  <div class="stack stack--vertical">
    <div class="cell cell--muted">
      <span class="cell__content--sm">Section</span>
    </div>
    <button class="cell cell--interactive cell--active active">
      <span class="cell__lead"><svg>...</svg></span>
      <span class="cell__content">Dashboard</span>
    </button>
  </div>
</div>

<!-- Notification -->
<div class="sheet">
  <div class="cell cell--lg">
    <span class="cell__lead"><svg>...</svg></span>
    <span class="cell__content">Changes saved</span>
    <span class="cell__trail">
      <button class="btn btn--icon btn--ghost" aria-label="Dismiss">
        <svg>...</svg>
      </button>
    </span>
  </div>
</div>

<!-- Card with actions -->
<div class="sheet">
  <div class="cell cell--lg">
    <span class="cell__content">Title</span>
  </div>
  <div class="cell cell--lg">
    <span class="cell__content">Body text</span>
  </div>
  <div class="cell cell--lg">
    <span class="cell__content">
      <div class="stack stack--horizontal">
        <button class="btn btn--ghost cell">
          <span class="cell__content">Cancel</span>
        </button>
        <button class="btn btn--accent cell">
          <span class="cell__content">Confirm</span>
        </button>
      </div>
    </span>
  </div>
</div>

Components

Interactive components powered by the monochrome library.

Accordion

Tabs

Monochrome is a tiny, accessible UI component library using event delegation.

Collapsible

Tailwind Mapping

Reference for mapping BEM classes to Tailwind equivalents.

BEM Class	Tailwind
`cell`	`flex items-start gap-2 px-2 py-1 w-full text-left`
`cell--lg`	`px-4 py-3 gap-4`
`cell--interactive`	`rounded hover:bg-gray-100 active:bg-gray-200`
`cell--active`	`aria-selected:bg-gray-200 aria-expanded:bg-gray-200`
`cell--muted`	`text-gray-500 hover:text-gray-900`
`cell--truncate`	`[&_.cell\_\_content]:truncate`
`cell--centered`	`justify-center [&_.cell\_\_content]:grow-0`
`cell__lead`	`h-5 flex shrink-0 items-center [&_svg]:size-3`
`cell__content`	`grow text-sm leading-5`
`cell__content--sm`	`grow text-xs leading-5 font-medium`
`cell__trail`	`h-5 flex shrink-0 items-center [&_svg]:size-3`
`stack`	`flex gap-0.5`
`stack--vertical`	`flex-col`
`stack--horizontal`	`inline-flex flex-row [&_.cell]:w-auto`
`stack--tight`	`gap-0`
`stack--padded`	`p-2`
`stack--nested`	`ml-2 pl-2 border-l`
`btn`	`font-medium rounded bg-gray-100 shadow-[inset_0_0_0_0.5px_theme(colors.gray.300)]`
`btn btn--primary`	`bg-gray-900 text-white hover:opacity-85 active:opacity-75`
`btn btn--ghost`	`bg-transparent shadow-none`
`btn btn--icon`	`size-7 inline-flex items-center justify-center`
`sheet`	`bg-gray-100 shadow-[inset_0_0_0_0.5px_theme(colors.gray.300)] rounded-lg`