Reference

Tokens

Tokens come in two layers. Primitives are raw values and only appear inside the token file. Roles are the names component code uses. So a component writes var(--bx-ink-subtle), never var(--bx-n-600).

boxy.css design-tokens.json contrast ratios below are computed live against the light theme

01 / Color primitives

Most of every page comes from this gray ramp

A cool gray in 13 steps. The surfaces, borders and text on a Boxy page all use it.

n-0

#ffffff

n-50

#f6f7f8

n-100

#eceef0

n-200

#dde1e4

n-300

#c7ccd1

n-400

#a6aeb5

n-500

#7f8993

n-600

#616b75

n-700

#4a535b

n-800

#343b41

n-900

#23282d

n-950

#16191c

n-1000

#0b0d0f

Accent: for interaction only, under 5% of the screen

a-50

#edf5ff

a-100

#d0e2ff

a-200

#a6c8ff

a-300

#78a9ff

a-400

#4589ff

a-500

#0f62fe

a-600

#0043ce

a-700

#002d9c

a-800

#001d6c

a-900

#001141

Semantic: always shown with an icon or a word, never by color alone

red-50

#fff1f1

red-500

#da1e28

red-600

#a2191f

yel-50

#fcf4d6

yel-500

#f1c21b

yel-700

#8e6a00

grn-50

#defbe6

grn-500

#24a148

grn-600

#198038

02 / Color roles

The color names components are allowed to use

Your browser computes the contrast ratios against the light-theme background. Switch the theme in the header and the swatches update.

Ink

Token	Sample	On canvas
--bx-ink	Primary text
--bx-ink-muted	Secondary text
--bx-ink-subtle	Labels, captions
--bx-ink-faint	Disabled only
--bx-ink-accent	Links
--bx-ink-danger	Error text
--bx-ink-warning	Warning text
--bx-ink-success	Success text

Surface & line

Token	Sample	Use
--bx-canvas		Page
--bx-surface		Cards, panels
--bx-surface-sunken		Wells, headers
--bx-surface-raised		Popovers, modals
--bx-surface-inverse		Emphasis blocks
--bx-line-subtle		Row rules
--bx-line		Default border
--bx-line-strong		State borders
--bx-line-heavy		Ticks, frames

--bx-ink-faint fails AA for text by design

At 3.6:1 it is for disabled controls and decorative glyphs. A border that conveys state must clear 3:1, which is why state borders use --bx-line-accent, --bx-danger or --bx-line-heavy rather than --bx-line.

03 / Type

Inter, Inter Tight, JetBrains Mono

The type scale has 13 steps, and every line height is a multiple of 4px. Letter spacing gets tighter as text gets larger. Mono labels are the only text spaced wider.

Token	Size / LH	Specimen
text-7xl	96 / 92	Boxy
text-6xl	72 / 72	Editorial hero
text-5xl	54 / 56	Sub-hero
text-4xl	40 / 44	Page heading
text-3xl	32 / 36	Section heading
text-2xl	24 / 32	App page title
text-xl	20 / 28	Card title
text-lg	18 / 28	Lead paragraph, large body copy
text-md	16 / 24	Default body copy for reading
text-base	14 / 20	Default UI text for controls, tables and navigation
text-sm	12 / 16	Captions, helper text, dense tables
text-xs	11 / 16	Mono label, eyebrow, table header
text-2xs	10 / 14	Micro annotation, dimension label

The mono label

01 / Architecture

11px mono, 0.08em, uppercase, --bx-ink-subtle. Never longer than 32 characters, never on running prose.

Tabular numerals

1,284.00

9,011.75

Every figure in a table, metric or price. Digits line up in columns.

Inverted emphasis

The Boxy answer to a highlighter.

Not a colored background, not a gradient. A solid inverted block.

04 / Space

One 4px scale for all spacing

17 steps. Anything off this list gets a lint warning. If you need an off-scale value, the layout is usually what needs fixing.

space-1 4px: Tightest gap, chip internals
space-2 8px: Icon-to-label, tag padding
space-3 12px: Control padding, table cell
space-4 16px: Control padding, compact card
space-5 24px: Card padding, stack gap, gutter
space-6 32px: Roomy card, group separation
space-8 48px: Sub-section spacing
space-9 64px: Industrial section padding
space-11 96px: Default section padding
space-13 160px: Editorial section padding

05 / Elevation

Shadows are hard offsets with no blur

Shadows always fall down and to the right, so the light seems to come from the same place everywhere. Anything that floats also gets a 1px border on top of its shadow.

shadow-0

none

shadow-2

2px 2px 0 0

shadow-3

4px 4px 0 0

shadow-6

8px 8px 0 0

06 / Motion & density

Four durations, three curves

Hover over the squares. The default easing is linear. Without acceleration nothing seems to have weight, and that is why the motion feels mechanical.

dur-1 / 80ms

Hover, focus, color

dur-2 / 120ms

Default

dur-3 / 160ms

Panels, modals

dur-4 / 240ms

Scrim. The ceiling.

Control heights (toggle density in the header)

control-sm

control-md

control-lg

07 / Extending

To rebrand, override roles and leave primitives alone

your-theme.css

[data-theme="light"] {
  --bx-accent:        #b5252b;
  --bx-accent-hover:  #8e1d22;
  --bx-accent-active: #6b1519;
  --bx-accent-soft:   #fdf0f0;
  --bx-ink-accent:    #8e1d22;  /* must clear 4.5:1 on canvas */
  --bx-line-accent:   #b5252b;
  --bx-focus:         #b5252b;
}

Before shipping a new accent, verify three things: --bx-ink-accent clears 4.5:1 on the canvas in both themes, --bx-on-accent clears 4.5:1 on the accent fill, and --bx-focus clears 3:1 on both the canvas and the inverse surface.