RisographScreen Print
ComponentsInk LayersPaletteRulesDocsStyles

RISOGRAPH

Screen-printed aesthetics. Intentional misregistration. Four ink drums, one pass at a time.

Screen-printed aesthetics. Intentional misregistration. Four ink drums, one pass at a time.

4

Ink Colors

2-3

Per Section

100ms

Transition

0

Blur Allowed

RisographScreen PrintOverprintMisregistrationFour ColorsFlat InkNewsprintHalftone
RisographScreen PrintOverprintMisregistrationFour ColorsFlat InkNewsprintHalftone

02 / Components

Print Components

Each component follows Misregistration Offset, Instant Print, and Overprint Illusion rules.

Buttons — Misregistration Offset on Hover

hover: dual-shadow
hover:shadow-[6px_6px_0_#2563eb,-4px_-4px_0_#ff8a00] active:bg-[#2563eb] duration-100 ease-linear

Cards — Registration Shift Green Corner

hover: corner locks in

01

Layer One

The first drum lays fluorescent pink. Solid fills, bold shapes — no blending yet.

02

Layer Two

Blue passes second. Text and geometry gain cool contrast against the warm paper.

03

Overprint

Where pink and blue overlap, a third color emerges — the signature of Riso.

Input — Focus Misregistration Shadow

focus: blue border + pink shadow

focus:border-[#2563eb] focus:shadow-[2px_2px_0_#ff6b9d]

/

No border-radius — hard-edge Riso style

03 / Halftone

Dot Patterns

Halftone is the foundational visual language of Risograph. Each ink drum can produce dot patterns at different densities and angles.

Pink Dots

radial-gradient 1px

Blue Dots

radial-gradient 1px

Orange Dots

radial-gradient 1px

Green Dots

radial-gradient 1px

Halftone + Overprint Combination

Where Layers Overlap

In real Risograph printing, when two ink layers overlap, the result is a new color formed by the transparent soy inks mixing optically. This is called overprinting — the defining characteristic of Riso.

Pink + Blue→Purplemix-blend-mode: multiply
Blue + Orange→Brownopacity: 0.55 each layer
Pink + Green→Teal-YellowbackgroundPosition offset

04 / Ink Layers

Four Print Runs

Each color requires a separate drum pass. Select a layer to inspect the print run — real Riso printers handle one ink at a time.

01

Primary

Fluorescent Pink

Ink hex: #ff6b9d. Each pass through the drum deposits a flat layer of soy ink on warm newsprint. Slight mechanical offset between passes creates the hallmark misregistration effect.

Flat fillSoy ink1 drum pass

02

Secondary

Risograph Blue

Ink hex: #2563eb. Each pass through the drum deposits a flat layer of soy ink on warm newsprint. Slight mechanical offset between passes creates the hallmark misregistration effect.

Flat fillSoy ink1 drum pass

03

Accent A

Burn Orange

Ink hex: #ff8a00. Each pass through the drum deposits a flat layer of soy ink on warm newsprint. Slight mechanical offset between passes creates the hallmark misregistration effect.

Flat fillSoy ink1 drum pass

04

Accent B

Sap Green

Ink hex: #22c55e. Each pass through the drum deposits a flat layer of soy ink on warm newsprint. Slight mechanical offset between passes creates the hallmark misregistration effect.

Flat fillSoy ink1 drum pass

05 / Ink Palette

The Drum Colors

The Risograph palette is strictly limited to the available drum inks. Combine two or three at most per composition. Never use more.

Primary

FL. Pink

#ff6b9d

Headlines, CTAs, emphasis shapes

Secondary

Riso Blue

#2563eb

Body text, secondary shapes

Accent A

Orange

#ff8a00

Accent marks, registration

Accent B

Green

#22c55e

Registration marks, labels

Paper

Newsprint

#fffbf0

Always the base — never pure white

Overprint Color Mixing — Two Ink Plates

Pink + Blue

Pink + Orange

Blue + Green

Orange + Green

06 / Design Rules

Print Constraints

Risograph is defined by what it cannot do. The constraints of the machine are the aesthetic. Work within them, not around them.

+

Do — Follow the Press

+Limit 2-3 ink colors per composition
+Use dual-direction hover shadows (Misregistration Offset)
+Bold monospace fonts only — font-mono
+Flat solid fills — no gradients ever
+Halftone/grain texture overlays
+Paper-tone background bg-[#fffbf0]
+duration-100 ease-linear on all transitions
+border-2 border-[#1a1a1a] on all containers
-

Don't — Break the Machine

-Complex gradients — ink is flat and opaque
-More than 3-4 colors total in any view
-Soft box-shadow with blur — kills the print illusion
-Rounded corners larger than rounded-sm
-ease-in-out transitions — too organic, too smooth
-Single-direction shadow — Riso always has two plates
-Realistic lighting or 3D shading effects
-Pure white #ffffff backgrounds — always use newsprint
Rule
Rationale
+
Limit 2-3 ink colors
Enforce the real Riso palette constraint
+
Misregistration offset shadows
dual-direction: bottom-right blue + top-left orange
+
Bold monospace fonts
font-mono — stencil mechanical fidelity
+
Flat solid fills only
no gradients — ink is opaque and flat
+
Halftone / grain texture
radial-gradient dot pattern or SVG noise
+
Paper-tone background
bg-[#fffbf0] — warm newsprint, never pure white
+
ease-linear transitions
duration-100 — mechanical press snap speed
+
Hard border outlines
border-2 border-[#1a1a1a] on all containers
-
soft box-shadow with blur
forbidden — breaks hard-edge print illusion
-
ease-in-out transitions
forbidden — organic motion kills the snap
-
rounded-lg or larger corners
forbidden — too smooth, too digital
-
single-direction shadow
forbidden — Riso always has two ink plates
-
complex gradients
forbidden — ink is flat and opaque

07 / Typography

Stencil Type

Monospaced typefaces mimic the mechanical uniformity of stencil printing. Bold, poster-scale headings. Zero decorative fonts.

Aa

Monospace

font-mono — Bold Grotesque

Every character occupies equal width — like a drum pressing ink with measured mechanical precision. No variable-width humanist typefaces. The typewriter is the machine; the machine is the aesthetic.

BlackBoldMediumRegular

OVERPRINT

MISREGISTER

FLAT INK

Newsprint grain

Soy-based inks on warm paper stock — one pass at a time.

Poster Typography — Misregistration Text Effect

RISO

GRAPH

Print aesthetics for the digital age

08 / Animation

Mechanical Motion

The printing press is a machine. All motion must feel mechanical — instant, snapping, without organic easing.

Misregistration Offset

Hover must use dual-direction shadows — one bottom-right (blue plate), one top-left (orange plate). Single shadows are forbidden.

hover:shadow-[6px_6px_0_#2563eb,
-4px_-4px_0_#ff8a00]

Instant Print

All transitions use duration-100 ease-linear — mechanical press speed. Never ease-in-out. Never slow organic fades.

100ms linear300ms ease-out
transition-all
duration-100
ease-linear

Registration Shift

Green corner element is offset at rest. On hover it translates to (0, 0) — the registration mark locks into place as press completes.

Hover Card

translate-x-2 -translate-y-2
group-hover:translate-x-0
group-hover:translate-y-0

Start Printing

Apply the Risograph style to your next project

View DocsAll Styles

Risograph

Printed in 4 colors — one pass at a time

4 ink drums
Documentation →All Styles →
StyleKit / Risograph Design System
FL. PINKRISO BLUEORANGEGREEN