A risograph print aesthetic as a real, drop-in UI design system — tokens, components, and hard numeric rules. Not a one-off filter. Free, MIT, framework-agnostic.
▶ Live demo · or open demo.html locally (no build needed).
The design system itself is two plain files — riso.css (drop-in tokens +
component classes, light + dark, no build/images/deps) and DESIGN_RULES.md
(the hard numeric ruleset). They're tool-agnostic and bundled, identical, into both
agent folders:
| Folder | For | Contains |
|---|---|---|
claude-code/ |
Claude Code | riso.css + DESIGN_RULES.md · SKILL.md (inline skill) · risograph-ui-auditor.md (subagent for full-app audits) |
codex/ |
OpenAI Codex | riso.css + DESIGN_RULES.md · AGENTS.md (always-on rules) · risograph-audit.md (/risograph-audit slash command) |
Just want the CSS? Grab riso.css + DESIGN_RULES.md from either folder — no agent
required. Each folder has its own README with install paths. demo.html is the full
component set on one page.
@import "./riso.css"; /* import once at the app root */<html class="dark"> <!-- optional: dark palette -->
<button class="btn-tactile btn-tactile-orange">Ship it</button>
<div class="card-riso card-riso-teal">…</div>Then follow DESIGN_RULES.md for dimensions. The essentials:
- Control heights bucket to 22 / 26 / 32px — never mix two in one row.
- Dropdowns with names:
min-width: 200px, neverw-auto. - One spacing scale (
2/4/8 → 12/16 → 20/24 → 32/40) and one easing curve (cubic-bezier(0.22, 1, 0.36, 1)). - Colours via tokens only — never raw hex.
Four "inks" over warm paper, each with a role: 🟠 --accent-orange (primary / selection) · 🟢 --accent-teal (toggle-on / dates) · 🟣 --accent-violet (info) · 🟡 --accent-gold (warning).
Plain CSS — works anywhere. Examples reference React + Tailwind v4 + Radix for the tricky bits; nothing depends on a framework (Tailwind v4: map tokens via @theme inline). Fonts (Syne, IBM Plex Mono, Noto Sans) degrade to system-ui if absent — see demo.html for the exact links.
MIT — by sanchez.sk. A star is appreciated ⭐.