Reference

Tokens

Two layers. Primitives are raw values, referenced only inside the token file. Roles are what component code uses. Writing var(--bx-n-600) in a component is a violation — reach for var(--bx-ink-subtle).

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

01 / Color primitives

The neutral ramp does 95% of the work

A cool gray, 13 stops. Every surface, every line, every piece of text on a Boxy page comes from here.

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 — interaction only, under 5% of painted pixels

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 paired with an icon or a word, never 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 only color names component code may use

Ratios are computed in the browser against the light-theme canvas. Switch the theme in the header and every swatch below follows.

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

Thirteen steps. Every line-height snaps to 4px. Tracking tightens as size grows and opens up only for mono labels.

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 — controls, tables, 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 every gap in the system

Seventeen steps. A value outside this list is a lint warning, and usually a sign the layout is wrong rather than the number.

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

Hard offsets. Never a blur radius.

The offset is always positive on both axes, so the implied light source is consistent across the whole interface. A floating element always carries a 1px border in addition to 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 the squares. linear is the house easing — no acceleration means no implied weight, which is what makes it read as 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

Rebrand by overriding roles, never primitives

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.