Design System

Risograph

Imperfect prints. Soy-based inks. Paper grain. The beautiful accidents of duplicator machines and indie zine culture.
01

Color

Soy-based ink colors from the Risograph palette. Rich, vibrant, and designed to overlap beautifully with mix-blend-mode: multiply.

Coral #FF6B6B
Teal #2EC4B6
Yellow #FFE66D
Blue #4361EE
Fluoro Pink #FF006E

Overprint Effect

When Risograph colors overlap, they create new colors through subtractive mixing. This is achieved in CSS using mix-blend-mode: multiply.

02

Typography

Space Mono for headings and labels brings that typewriter, zine aesthetic. DM Sans for body text maintains readability.

Display

72px / Bold / Space Mono

Aa

H1

48px / Bold / Space Mono

Heading One

H2

32px / Bold / Space Mono

Heading Two

H3

20px / Bold / Space Mono

Heading Three

Body

16px / Regular / DM Sans

The quick brown fox jumps over the lazy dog. Beautiful imperfection in every print.

Mono

14px / Regular / Space Mono

Code, labels, and technical details use monospace.
03

Spacing

A 4px base unit creates consistent rhythm. Slightly loose spacing reflects the casual, handmade nature of zine printing.

4px
xs
8px
sm
16px
md
24px
lg
32px
xl
48px
2xl
64px
3xl
96px
4xl
04

Buttons

Chunky, offset shadows create depth. The misregistration effect gives that hand-printed, slightly-off-center feel.

05

Forms

Bold borders and offset shadows. Focus states add color bleeds reminiscent of ink spreading on paper.

Toggle Switches

06

Cards

Layered offset shadows in different ink colors. Each card feels like a separate print layer stacked together.

01

Layer One

Each color is printed separately, creating natural misalignment and overlap effects.

02

Layer Two

Soy-based inks absorb into paper, creating soft edges and subtle bleeding.

03

Layer Three

The grain of recycled paper adds texture and warmth to every print.

07

Data Table

Monospace type in tables feels like print shop inventory lists. Dashed borders add handmade charm.

Ink Color Stock Coverage Price/Drum
Fluorescent Pink In Stock 8,000 prints $185
Teal In Stock 8,000 prints $165
Sunflower Yellow Low Stock 8,000 prints $165
Blue Out of Stock 8,000 prints $165
Coral In Stock 8,000 prints $175
08

Badges

Small, punchy labels with offset shadows. Like stamps or stickers on a zine cover.

Default Coral Teal Pink Blue Yellow

Usage Examples

New Issue Limited Run Sold Out Pre-Order Digital Only
09

Alerts & Notifications

Feedback messages with offset shadows and bold accent borders. Like urgent notes stamped on zine pages.

Information

Your print job has been queued. Estimated processing time: 15 minutes.

Success

250 copies successfully printed! Your zine run is complete.

Warning

Teal ink drum is running low. Consider reordering before your next print run.

Error

Paper jam detected. Please clear the feeder and restart the print job.

Toast Notification

Toast notifications appear in the bottom-right corner for non-blocking feedback.

Print Complete

Your order is ready for pickup!

10

Design Principles

Embrace Imperfection

Misregistration, ink bleed, and grain are features, not bugs. The beauty of risograph lies in its happy accidents and organic inconsistencies.

Layer with Purpose

Each color is a separate pass through the machine. Design with overprinting in mind, letting colors mix and create new tones where they overlap.

Limited Palette

Work within constraints. A limited color palette forces creativity and creates cohesion. Two or three spot colors can achieve remarkable range.

DIY Spirit

Risograph emerged from the independent publishing scene. Maintain that grassroots, accessible, punk-inspired energy in every design decision.