Perfect Imperfect · a design system
Make software feel human .
Perfect Imperfect is a small design system. Its imperfections are decided at build time, cost nothing to render, and never touch what matters: actions, focus, forms, navigation, dialogs and content.
Perfection is reserved for what matters.
A page can be a little human and still be exact. Imperfection is a budget, spent on a few noticeable details. Everything a person needs to act on is solid, straight and high contrast.
-
Deliberate
Every imperfection comes from a stable key, a slug or an index, at build time. The same input gives the same page on every visit.
How it works -
Free
Transforms, paint and absolutely positioned SVG only. No layout shift, no JavaScript for the effects, no extra requests.
The free checklist -
Straight where it matters
Buttons, focus rings, forms, navigation and dialogs stay solid and straight. The one straight thing on a screen is the thing people press.
The components
What it looks like
Riso prints with two inks, drawn in code. Halftone dots, a misregistered second ink and overprint. The text under each print is straight.
- LedgerPrint · two inksA two-ink sketch of a table of rows.
- NotesPrint · two inksTwo cards and a list, one ink in a tinted box.
- GraphPrint · two inksA few nodes, joined by hairlines.