# Show HN: Boxy – Design System and Agent Skill for interfaces with square corners > Source: > Published: 2026-09-21 07:40:28+00:00 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` `npx boxy-design init` `curl -fsSL https://github.avestura.dev/boxy-design-skill/install.sh | sh` 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. 01 ### Radius is zero Everywhere, without exception. Including avatars, badges and toggles. The radius token exists only so that zero is explicit and greppable. 02 ### 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. 03 ### Never blur a shadow Depth is a hard offset or a hairline. Any blur radius above zero is forbidden, `backdrop-filter` included. 04 ### Everything snaps to 4px Spacing, sizing and leading come from one scale. No 13px, no 0.375rem, no arbitrary values slipped in under deadline. 05 ### Accent is rationed Under 5% of painted pixels: links, focus, one primary action. Neutrals carry everything else. 06 ### Hierarchy is typographic Size, weight, tracking, case and rules. Not colored headings, not gradient text, not another shade of purple. 07 ### Motion is mechanical 80–160ms, linear or sharp. Opacity, color and whole-pixel translation. No scale, no bounce, no spring. 08 ### 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. 01 / Runtime Keystroke latency p50 0.6ms p99 4.1ms Dev tools, infra, technical products. Grid substrate, corner ticks, mono annotations, dense by default. | 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. Payments Revenue infrastructure 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+. ``` bash $ 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 ``` 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 | ``` bash $ 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.