Barton Design System

Tokens

Color is signal, not decoration. Every value below is a semantic CSS variable in src/design-system/barton/theme.css and a Tailwind class. Components never use raw color utilities.

You are hereTokens30kBranchVerifiedsource: src/design-system/barton/theme.cssnext: apply in components

Surfaces and borders

hairlines do the work

background

page canvas

surface

panels, cards, tables

panel

table headers, inset areas

panel-strong

pressed / nested inset

rail

navigation rail, hub card

accent-soft

selected row / hover

Borders

line / line-strong

border-line · default hairline
border-line-strong · inputs, dividers under pressure
border-dashed border-gap · unproven / placeholder

Focus

Focus ring

Global :focus-visible ring uses --color-ring at 2px with 2px offset. Tab into the button.

Text hierarchy

fixed scale, never viewport-scaled

foreground — primary copy

muted-foreground — secondary copy

subtle-foreground — provenance, meta

accent — actions and links

ds-eyebrow · 10px mono, wide tracking

Page title · 20px semibold

Section title · 16px

Body · 13–14px, line-height 1.45

ds-mono · IDs, altitudes, percentages, metrics

State colors

8 states, no improvisation

  • Verifiedtext-verified · bg-verified-soft · border-verifiedVerified
  • Livetext-live · bg-live-soft · border-liveLive
  • Buildtext-build · bg-build-soft · border-buildBuild
  • Drafttext-draft · bg-draft-soft · border-draftDraft
  • Blockedtext-blocked · bg-blocked-soft · border-blockedBlocked
  • Warningtext-warning · bg-warning-soft · border-warningWarning
  • Repairtext-repair · bg-repair-soft · border-repairRepair
  • Gaptext-gap · bg-gap-soft · border-gapGap — no verified source; dashed treatment

Altitude tokens

CTB tiers

50kWhole tree30kBranch10kOperating cluster5kExecution leaf

Density and grid

8-point grid

Spacing

spacing-d1 … d6

  • d14pxicon gaps
  • d28pxcontrol padding
  • d316pxpanel padding
  • d424pxpage gutters
  • d532pxsection rhythm
  • d648pxpage tail

Radii + table rows

Small radius only

rounded-sm 3px
rounded-md 5px
rounded-lg 6px
rounded-xl 8px
  • py-row-compact · 6px
  • py-row-default · 10px
  • py-row-relaxed · 14px

Domain skins

retint only, never restructure

Preview · data-skin="core"

Barton core — neutral internal operations

Sample metric

Verified

42rows

src: sample data

Coverage

Warning

61%

src: sample data

Unsourced claims

Gap

7

src: gap — no source

Rail sampleaccent retints, structure does not move

Applying a skin

// One attribute on any subtree. No component changes required.
<div data-skin="clep">
  <FractalShell productName="CLEP Study" nav={nav}>…</FractalShell>
</div>