01 / A design system for agents

Interfaces with square corners and nothing to hide

A zero-radius design system your coding agent actually follows. Hairline structure, engineering detail, a rationed palette — and a linter that fails the build when something drifts.

/plugin marketplace add avestura/boxy-design-skill

/plugin install boxy@boxy-design-skill

MIT · zero dependencies · 13 reference docs · 15 lint rules

02 / The rules

Seven axioms. Violating one is a bug, not a preference.

Most design guidance is advisory, so agents drift back to rounded cards and soft shadows by the third prompt. These are written as constraints, and the last cell is what enforces them.

Radius is zero

Everywhere, without exception. Including avatars, badges and toggles. The radius token exists only so that zero is explicit and greppable.

Lines carry structure

A 1px border is the primary separator. Reach for a border before a background change, and a background change before a shadow.

Never blur a shadow

Depth is a hard offset or a hairline. Any blur radius above zero is forbidden, backdrop-filter included.

Everything snaps to 4px

Spacing, sizing and leading come from one scale. No 13px, no 0.375rem, no arbitrary values slipped in under deadline.

Accent is rationed

Under 5% of painted pixels: links, focus, one primary action. Neutrals carry everything else.

Hierarchy is typographic

Size, weight, tracking, case and rules. Not colored headings, not gradient text, not another shade of purple.

Motion is mechanical

80–160ms, linear or sharp. Opacity, color and whole-pixel translation. No scale, no bounce, no spring.

And it is checked

boxy-check reads your source and fails on every one of the rules above. The agent runs it before it says done.

03 / The difference

Same content. One of them was designed by default.

Before — the default

× 14px radius, pill badge, pill button
× 8px blurred drop shadow
× Violet gradient doing the work of hierarchy
× Indistinguishable from every other dashboard

After — Boxy

✓ Zero radius, square tag, square buttons
✓ 1px hairline and corner ticks carry the structure
✓ One flat accent; the second action is an outline
✓ Reads as engineered rather than decorated

04 / Modes

One system, three postures

Identical radius, borders, spacing, type and motion. Only section rhythm, display scale, grid columns and substrate visibility change. Set data-mode and the whole page follows — try the mode control in the header.

blueprint

01 / Runtime

Keystroke latency

p50

0.6ms

p99

4.1ms

Dev tools, infra, technical products. Grid substrate, corner ticks, mono annotations, dense by default.

industrial

Node	State	Load
api-01	Active	0.42
api-02	Active	0.38
api-03	Drain	0.91

Enterprise apps, dashboards, admin. 16 columns, bottom-border fields, heavy tables, no substrate.

editorial

Payments

Revenue
infrastructure

Start Docs

Marketing, landing, docs. Big display type, 160px rhythm, generous air, still perfectly square.

05 / Enforcement

The part that makes it stick

Guidance an agent can ignore is decoration. boxy-check parses CSS, HTML, JSX, Vue and Svelte, flags every violation with a file and line, and exits non-zero. Zero dependencies, Node 18+.

terminal

$ npx boxy-design check "src/**/*"

src/components/Card.tsx
     8  error  Nonzero border-radius: border-radius: 8px  radius
     9  error  Shadow with a blur or spread radius: blur 12px  shadow-blur
    14  warn   Spacing off the 4px scale: padding: 13px (13px)  space
    22  warn   Raw hex outside the token file: #333333  raw-hex

src/styles/hero.css
    31  error  transition: all: transition: all  transition-all
    31  error  Transition longer than 240ms: 0.3s > 240ms  duration
    47  error  backdrop-filter / filter blur: backdrop-filter  blur

[ FAIL ]  46 files - 5 errors, 2 warnings
         boxy-check.mjs --list-rules for the full rule set

Errors — build fails

Nonzero radius, and rounded utility classes
Blur or spread on a shadow, drop-shadow, shadow-md
backdrop-filter, filter: blur(), text-shadow
transition: all, durations over 240ms
Gradient clipped to text

Warnings — --strict to fail

Spacing off the 4px scale
Font sizes off the type scale
Raw hex outside the token file
Font weights below 400
ease-in-out, overshoot curves, scale()

06 / Contents

What lands in your project

.claude/skills/boxy/

SKILL.md                     the seven axioms, modes, routing
references/
  tokens.md                every token, every value
  modes.md                 blueprint / industrial / editorial
  layout.md                rails, grids, shells, breakpoints
  typography.md            scale, labels, numerals, measure
  color.md                 contrast pairs, semantics, charts
  components-core.md       16 components, exact specs
  components-data.md       tables, tiles, charts, states
  components-marketing.md  hero, pricing, footer, docs
  components-forms.md      steppers, validation, auth, palette
  motion-depth.md          durations, easing, elevation
  blueprint-details.md     substrate, ticks, annotations
  accessibility.md         contrast, focus, keyboard, targets
  anti-patterns.md         what breaks it, and the fix
assets/
  boxy.css                 tokens, reset, utilities
  design-tokens.json       W3C DTCG export
scripts/
  boxy-check.mjs           the linter

Agent targets

Target	Writes
Claude Code	.claude/skills/boxy/
Cursor	.cursor/rules/boxy.mdc
Windsurf	.windsurf/rules/boxy.md
Any agent	AGENTS.md
Copilot	.github/copilot-instructions.md

all at once

$ npx boxy-design init --ai all --css

Non-Claude targets also get the full reference set in .boxy/, so every agent reads the same source of truth.

Ready

Stop asking your agent to remove the rounded corners

Install once. Every UI it builds afterwards is square, ruled, accessible and checked.

See components