---
title: "void — heavy sites, zero jank"
description: "A design system for AI coding agents. Bring shaders, 3D and every component library you love — void makes the agent ship it smooth, fast and accessible."
canonical: https://void-design.vercel.app/
lastModified: 2026-09-16
---

# Heavy sites. Zero jank.

A design system for AI coding agents. Bring shaders, 3D and every component library you love — void makes the agent ship it smooth, fast and accessible.

Shaders, 3D, fluid backgrounds, every component library you love. void teaches your agent to ship all of it at 60 fps, and proves it with 273 checks in real Chromium.

```bash
claude plugin marketplace add ParthKapoor-dev/design
claude plugin install void@void
```

## What void is

Three parts an agent uses together:

- **Skills** (`skills/`): instructions Claude Code loads on demand. website, craft, motion, components, inspire, speed, seo, a11y, audit: 9 skills, 36 references. [Docs](https://void-design.vercel.app/docs)
- **Tokens** (`packages/tokens/`): Tailwind v4 CSS, one semantic base and 6 directions. [Directions](https://void-design.vercel.app/directions)
- **CLI** (`packages/cli/`): `void lint`, `void audit`, `void extract`, `void rules <id>`. 273 rules: perf 25, smooth 13, a11y 48, seo 60, geo 41, design 19, lint 67. [CLI reference](https://void-design.vercel.app/cli) · [Rules](https://void-design.vercel.app/rules)

## Heavy is fine. Jank isn't.

Particles, shaders and 3D are welcome. What void catches is the version an agent writes by default: layout properties animated every frame, idle requestAnimationFrame loops, one WebGL context per component. Browsers cap WebGL contexts at about 16; void has the agent share one canvas and scissor it, so a gallery of live backgrounds costs what a hero does.

## The loop

Your agent writes, void checks. Skills go into whatever agent you use. The CLI drives real Chromium against what it built, and every finding comes back as a rule id the agent already knows how to fix.

## The pipeline

Brief, direction, build, audit, fix: five steps, no guessing.

## Directions

A direction is one CSS file over a shared base; components only read semantic tokens.

| Direction | Scheme | Radius | Mood | Use for | Fonts |
| --- | --- | --- | --- | --- | --- |
| [Precision](https://void-design.vercel.app/directions/precision) | dark-first | 0.375rem | Calm, exact, fast. Engineered near-black UI, hairlines, one electric indigo signal. | dev tools, AI/infra products, pro SaaS, technical launch pages | Geist 500 / Geist Mono |
| [Terminal](https://void-design.vercel.app/directions/terminal) | dark-first | 0rem | Raw, fast, honest. Graphite black, monospace everything, one phosphor-amber signal, hard edges. | CLIs, dev infra, hacker tools, hackathons, developer launch pages | Geist Mono 600 / Geist Mono |
| [Instrument](https://void-design.vercel.app/directions/instrument) | light + dark | 0.375rem | Trustworthy, dense, data-first. Cool slate neutrals, a chart-grade blue, tabular everything. | analytics, admin, finance, ops consoles, internal tools, docs for data products | IBM Plex Sans 600 / IBM Plex Mono |
| [Editorial](https://void-design.vercel.app/directions/editorial) | light-first | 0.125rem | Literary, considered, slow. Warm paper, near-black ink, an oxblood red pencil, hairline rules. | publications, essays, research, studios, premium brands, long-form docs | Newsreader 400 / IBM Plex Mono |
| [Swiss](https://void-design.vercel.app/directions/swiss) | light-first | 0rem | Rational, confident, poster-like. Achromatic neutrals, black type, a visible grid, one signal red. | agencies, architecture, type/design tools, events, portfolios, data journalism | Schibsted Grotesk 700 / JetBrains Mono |
| [Warm](https://void-design.vercel.app/directions/warm) | light-first | 0.625rem | Approachable and calm, like a well-made notebook app. Warm off-white, soft clay, rounded not bubbly. | consumer SaaS, productivity/notes, education, health, community | Bricolage Grotesque 600 / JetBrains Mono |

## Measured, not claimed

Same model, same brief, one run with void. Both sites are audited by the CLI and judged blind on screenshots.

| Task | baseline | void |
| --- | --- | --- |
| Conference site | 70 | 80 |
| Designer-engineer portfolio | 54 | 80 |
| SaaS landing page | 68 | 92 |

Method and full results: https://void-design.vercel.app/evals

## This site, audited

Overall **99** · void 0.1.0 · 10 routes · mobile + desktop · measured 2026-09-16.

| Category | Score |
| --- | --- |
| Performance | 100 |
| Smoothness | 93 |
| Accessibility | 100 |
| SEO | 99 |
| AI search | 100 |
| Design | 99 |

## Two commands

```bash
claude plugin install void@void
void audit http://localhost:3000
```