Risograph UI

A risograph print aesthetic as a real, codified design system. Tokens, components, hard rules — drop-in, framework-agnostic.

CSS MIT no dependencies light + dark
DOC EDITOR
SHEETS

Teal offset

Default card — noise fill, teal misregistration shadow, registration-mark corners.

Orange offset

Same anatomy, orange ink shadow. One contrast step from the surface beneath.

Press me

Interactive card — lifts on hover, presses in on click.

TaskStatusOwner
Wire up the date pickerdoneAda
Audit toolbar iconsin progressLin
Export to PDFreviewKai
Dark-mode passbacklogAda

↑ click the date field — fully custom riso calendar, no native browser chrome.

Saved to canvas
Export failed — retry
AI is generating…
default orange teal violet NEW 42
Misregistration

Halftone & grain

The .riso-noise overlay layers fractal grain + a halftone dot grid over any surface — the signature riso texture, no image assets.

orange
teal
violet
gold
paper
Syne
AaBbCc 0123 — titles
display .font-display
IBM Plex Mono
AaBbCc 0123 — labels
UI mono .font-mono-ui
Noto Sans
AaBbCc 0123 — body text
body default sans