design.md
Back to directory
print · playful · editorial · maximalist

Risograph Press.

Two-color spot print, halftone vibes. Fluorescent pink + ink-black on cream paper, 3px misregistration outlines, hand-cut chunky type.

01 · Preview

The kitchen sink.

Risograph.app
ProductPricingDocsAbout
Sign inGet started
print · playful · editorial

Build with Risograph Press.

A complete design system, ready for your AI coding agent. Every primitive, token, and pattern below is generated straight from DESIGN.md — drop the file in your project and ship matching UI in minutes.

Start building →View on GitHub
Featured
Tokens that travel with your prompts.
Active users
12,840
Status
All systems operational
01 · Color

Palette

primary
#1A1815
secondary
#6B665C
tertiary
#FF4F8B
neutral
#F4EFE3
surface
#FBF7EC
02 · Typography

Type scale

display
The quick brown fox
h1
A major section heading
h2
A subsection title
body
Body copy in the system's body font.
03 · Buttons

Buttons

PrimarySecondaryOutlineGhostText link →
Disabled
04 · Inputs

Form controls

Email
iris@studio.com
Password
••••••••••••
Bio
Designing for long-form publications. Based in Kyoto.
05 · Choices

Select & toggle

Plan
Starter
Free forever
Pro
$18 / month
Team
$48 / month
Toggles
Public profile
Require two-factor
Auto-accept invites
06 · Tags & badges

Labeling

NeutralAccentSolidWith dot
NEWBETAv2.0LIVE
07 · Cards

Cards

Feature
Editorial rigor

Prose-first token file — decisions live next to their reasoning.

Learn more →
Metric
24,810
▲ +12.4% vs last week
08 · Navigation

Tabs & breadcrumb

Overview
Analytics
Members
Workspace/Projects/Heritage System
09 · Spacing

Spacing scale

Fine micro-scale (1–5px) for pills, editorial scale (12–21px) for the grid.

1px
2px
5px
8px · base
10px
12px
14px
16px
18px
20px
21px
10 · Radius

Border radius scale

The system's own radius tokens — sm for chips and inputs, md for buttons, lg for cards, pill for fully-rounded CTAs.

sm
2px
md
3px
lg
4px
pill
999px
11 · Elevation

Depth & elevation

00 · Flat
Elevation 00
01 · Low
Elevation 01
02 · Medium
Elevation 02
03 · High
Elevation 03
12 · Data

Charts

Weekly revenue
$48,210
M
T
W
T
F
S
S
Active sessions
2,184
02 · Pro tokens

The states behind the resting style.

ArchetypeEditorial

Tokens describe the resting state. A real product needs every interaction state. Hover, focus, active, disabled, loading — all derived from the system's resting tokens.

Button

resting → state delta
resting
hover
focus
active
disabled
loading
selected

Input

resting → state delta
resting
hover
focus
disabled
error

Card

resting → state delta
Account
sam@studio.com
resting
Account
sam@studio.com
hover
Account
sam@studio.com
selected

Tab

resting → state delta
Overview
resting
Overview
hover
Overview
focus
Overview
selected
03 · The file

DESIGN.md

markdown
1---
2name: "Risograph Press"
3description: "Two-color spot print, halftone vibes. Fluorescent pink + ink-black on cream paper, 3px misregistration outlines, hand-cut chunky type."
4tags: [print, playful, editorial, maximalist]
5colors:
6  primary:   "#1A1815"
7  secondary: "#6B665C"
8  tertiary:  "#FF4F8B"
9  neutral:   "#F4EFE3"
10  surface:   "#FBF7EC"
11typography:
12  display: Fraunces
13  body:    Inter
14  mono:    "Space Mono"
15  scale:
16    hero: "5.5rem / 0.95 / 600 / -0.04em"
17    h1:   "3rem / 1 / 500 / -0.03em"
18    h2:   "1.5rem / 1.2 / 600 / -0.01em"
19    body: "1.0625rem / 1.55 / 400 / 0"
20radius:
21  sm: 2px
22  md: 3px
23  lg: 4px
24shadows:
25  card:   "3px 3px 0 #1A1815"
26  button: "2px 2px 0 #1A1815"
27borders:
28  card:    "2px solid #1A1815"
29  divider: "2px solid #1A1815"
30buttons:
31  primary:
32    background: #FF4F8B
33    color: #1A1815
34    border: 2px solid #1A1815
35    shape: rounded
36    padding: 12px 20px
37    font: display / 600 / 0.9375rem / 0.04em
38    uppercase: true
39    shadow: 3px 3px 0 #1A1815
40  secondary:
41    background: #FBF7EC
42    color: #1A1815
43    border: 2px solid #1A1815
44    shape: rounded
45    padding: 12px 20px
46    font: display / 600 / 0.9375rem / 0.04em
47    uppercase: true
48    shadow: 3px 3px 0 #FF4F8B
49  outline:
50    background: transparent
51    color: #1A1815
52    border: 2px dashed #1A1815
53    shape: rounded
54    padding: 11px 20px
55    font: mono / 700 / 0.875rem / 0.06em
56    uppercase: true
57  ghost:
58    background: transparent
59    color: #FF4F8B
60    border: none
61    shape: sharp
62    padding: 10px 4px
63    font: mono / 700 / 0.875rem / 0.06em
64    uppercase: true
65    hover: underline
66charts:
67  variant: bars
68  gridlines: false
69  bar_radius: 0
70  bar_gap: 8px
71  highlight: all
72  axis_color: "#1A1815"
73  palette: ["#FF4F8B", "#1A1815", "#FF4F8B", "#1A1815", "#FF4F8B"]
74fonts_url: "https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600&family=Inter:wght@400;500;700&family=Space+Mono:wght@400;700&display=swap"
75dependencies: ["lucide-react"]
76---
77 
78# Risograph Press
79 
80## AI Build Instructions
81 
82> **Read this section before writing any code.** The rules below
83> are non-negotiable. Every value used in the UI must come from this
84> file's frontmatter — never substitute, approximate, or invent new
85> colors, fonts, radii, or shadows. If a value is missing, ask the
86> user before adding one.
87 
88### 1 · Your role
89 
90You are building UI for a project that has adopted **Risograph Press** as its
91design system. Treat `DESIGN.md` as the single source of truth.
92Your job is to translate the user's product requirements into
93components and pages that look like they were designed by the same
94person who authored this file.
95 
96### 2 · Token compliance
97 
98- Pull every color, font family, radius, shadow, and spacing value
99  from the frontmatter at the top of this file.
100- Use semantic roles (e.g. `primary`, `accent`, `muted`) — never
101  hard-code hex values that bypass the system.
102- When a token can be expressed as a CSS variable, declare it once
103  in your global stylesheet and reference it everywhere downstream.
104- The Google Fonts `<link>` is provided in the Typography section.
105  Add it to `<head>` before any component renders.
106 
107### 3 · Component recipes
108 
109Use these recipes verbatim when building the corresponding component.
110 
111#### Buttons
112 
113Four variants are defined. Pick one — never blend variants or invent a fifth.
114 
115- **Primary** — rounded shape, bg `#FF4F8B`, text `#1A1815`, border `2px solid #1A1815`, padding `12px 20px`, weight `600`, uppercased, shadow `3px 3px 0 #1A1815`.
116- **Secondary** — rounded shape, bg `#FBF7EC`, text `#1A1815`, border `2px solid #1A1815`, padding `12px 20px`, weight `600`, uppercased, shadow `3px 3px 0 #FF4F8B`.
117- **Outline** — rounded shape, text `#1A1815`, border `2px dashed #1A1815`, padding `11px 20px`, weight `700`, uppercased.
118- **Ghost** — sharp shape, text `#FF4F8B`, padding `10px 4px`, weight `700`, uppercased.
119 
120Reach for **primary** as the single dominant CTA per screen.
121**Secondary** for the supporting action. **Outline** for tertiary
122actions in toolbars. **Ghost** for inline links and table actions.
123 
124#### Cards
125 
126- Background: `#FBF7EC`
127- Border: `2px solid #1A1815`
128- Shadow: `3px 3px 0 #1A1815`
129- Radius: `radius.lg` (`4px`)
130- Internal padding: `20px` for compact cards, `24–28px` for content cards.
131 
132#### Tabs
133 
134Variant: `brutalist`. Hard rectangular tabs with thick borders. Active tab is fully filled in the primary color.
135Tabs are uppercased with `0.08em` tracking.
136 
137#### Charts
138 
139- Bar/line variant: `bars`
140- Bar radius: `0`
141- No gridlines — let the bars/lines carry the data.
142- Highlight strategy: `all` — emphasize a single bar/point per chart.
143- Use the declared palette in order: `#FF4F8B`, `#1A1815`, `#FF4F8B`, `#1A1815`, `#FF4F8B`.
144 
145#### Typography pairings
146 
147- **Display (`Fraunces`)** — h1, h2, hero headlines, brand wordmarks.
148- **Body (`Inter`)** — paragraphs, labels, button text, form inputs.
149- **Mono (`Space Mono`)** — code, eyebrows, metadata, numerals in tables.
150 
151### 4 · Hard constraints
152 
153Never do any of the following without explicit instruction from the user:
154 
155- Introduce a new color, font, radius, or shadow that isn't declared above.
156- Mix this system with another (e.g. don't paste in Material or Bootstrap defaults).
157- Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice.
158- Reach for emoji icons. Use a consistent icon library and size icons in line with body type.
159- Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle.
160 
161### 5 · Before you finish — verify
162 
163Run through this checklist for every screen you produce:
164 
165- [ ] Every color used appears in the Colors table above.
166- [ ] Headlines use the display font; body copy uses the body font.
167- [ ] Buttons match one of the declared variants exactly (shape, padding, weight).
168- [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`.
169- [ ] Cards and dividers use the declared border + shadow tokens.
170- [ ] No values were invented; if you needed something missing, you stopped and asked.
171 
172---
173 
174## Overview
175Risograph Press is a love letter to the spot-color print era. Two inks — fluorescent pink and warm black — on cream uncoated paper. A 3px ink-offset shadow on every card mimics the slight misregistration of a real Riso pass. Borders are 2px solid ink, hand-cut. Display type is editorial Fraunces; body is Inter; captions are typewriter Space Mono.
176 
177The system is loud where it wants to be (pink CTAs with chunky offset shadows) and quiet everywhere else (cream surfaces, ink-only meta).
178 
179## Material
180- **Page** is **cream #F4EFE3**, never white. The warmth matters — pure white kills the Riso illusion.
181- **Cards** sit on **stock #FBF7EC**, one shade lighter, with a **2px solid ink** border and a **3px 3px 0** ink-offset shadow. The shadow is the signature.
182- **Pink #FF4F8B** is the spot color. It appears on primary CTAs, accents, and as a misregistration shadow under secondary buttons. Never as body text.
183 
184## Typography
185- **Display: Fraunces** at hero (5.5rem / 600 / -0.04em). Editorial, optical-size, with a soft serif terminal that pairs with the cream paper.
186- **Body: Inter** at 1.0625rem for comfortable read on cream.
187- **Mono: Space Mono** for chunky uppercase labels and outline-button text — it reads like a typewriter ribbon.
188 
189| Role | Font | Size | Weight | Tracking |
190|------|------|------|--------|----------|
191| Hero | Display | 5.5rem | 600 | -0.04em |
192| H1 | Display | 3rem | 500 | -0.03em |
193| H2 | Body | 1.5rem | 600 | -0.01em |
194| Body | Body | 1.0625rem | 400 | 0 |
195| Label | Mono | 0.875rem | 700 | +0.06em UPPER |
196 
197## Buttons (the centerpiece)
198Four variants, all uppercase, all chunky.
199 
200- **Primary** — pink fill, 2px ink border, **3px 3px 0** ink shadow. Display font, +0.04em tracking. The shadow is non-negotiable.
201- **Secondary** — cream tile, 2px ink border, **3px 3px 0 PINK** shadow. Inverted ink relationship, same chunkiness.
202- **Outline** — dashed 2px ink, mono label. Reads like a paper cut-line.
203- **Ghost** — pink mono label with hover underline. Used inside cards only.
204 
205## Charts & Data
206Bar charts alternate pink and ink — the spot-color rhythm of a Riso print. **No gridlines, no rounded bars, no shadows on chart elements.** The chart's energy comes from contrast between the two passes.
207 
208## Do's and Don'ts
209- ✅ Always include the 3px ink-offset shadow on cards and primary CTAs.
210- ✅ Mix pink and ink — the system needs both passes to read as Riso.
211- ✅ Use cream backgrounds. Pure white breaks the print metaphor.
212- ✅ Let display Fraunces breathe at -3% to -4% tracking on hero sizes.
213- ❌ No drop-shadow blur. Riso shadows are crisp solid offsets.
214- ❌ No third color. Two passes — pink and ink — only.
215- ❌ No pill buttons. The brief is hand-cut, not pharmaceutical.
216- ❌ No body text in pink. Ink only for prose.
217 
218---
219 
220## Tokens
221 
222> Generated from the same source the live preview renders from.
223> Treat the values below as the contract — never substitute approximations.
224 
225### Colors
226 
227| Role      | Value |
228|-----------|-------|
229| primary   | `#1A1815` |
230| secondary | `#6B665C` |
231| tertiary  | `#FF4F8B` |
232| neutral   | `#F4EFE3` |
233| surface   | `#FBF7EC` |
234 
235### Typography
236 
237- **Display:** Fraunces
238- **Body:** Inter
239- **Mono:** Space Mono
240 
241| Role | size / leading / weight / tracking |
242|------|------------------------------------|
243| Hero | 5.5rem / 0.95 / 600 / -0.04em |
244| H1   | 3rem / 1 / 500 / -0.03em |
245| H2   | 1.5rem / 1.2 / 600 / -0.01em |
246| Body | 1.0625rem / 1.55 / 400 / 0 |
247 
248### Radius
249 
250- sm: `2px`
251- md: `3px`
252- lg: `4px`
253 
254### Shadows
255 
256- **card:** `3px 3px 0 #1A1815`
257- **button:** `2px 2px 0 #1A1815`
258 
259### Borders
260 
261- **card:** `2px solid #1A1815`
262- **divider:** `2px solid #1A1815`
263 
264### Buttons
265 
266Four variants, each fully tokenized. The preview renders from these exact values.
267 
268#### Primary
269 
270| Property | Value |
271|----------|-------|
272| shape | `rounded` |
273| background | `#FF4F8B` |
274| color | `#1A1815` |
275| border | `2px solid #1A1815` |
276| padding | `12px 20px` |
277| fontFamily | `display` |
278| fontWeight | `600` |
279| fontSize | `0.9375rem` |
280| tracking | `0.04em` |
281| uppercase | `true` |
282| shadow | `3px 3px 0 #1A1815` |
283 
284#### Secondary
285 
286| Property | Value |
287|----------|-------|
288| shape | `rounded` |
289| background | `#FBF7EC` |
290| color | `#1A1815` |
291| border | `2px solid #1A1815` |
292| padding | `12px 20px` |
293| fontFamily | `display` |
294| fontWeight | `600` |
295| fontSize | `0.9375rem` |
296| tracking | `0.04em` |
297| uppercase | `true` |
298| shadow | `3px 3px 0 #FF4F8B` |
299 
300#### Outline
301 
302| Property | Value |
303|----------|-------|
304| shape | `rounded` |
305| background | `transparent` |
306| color | `#1A1815` |
307| border | `2px dashed #1A1815` |
308| padding | `11px 20px` |
309| fontFamily | `mono` |
310| fontWeight | `700` |
311| fontSize | `0.875rem` |
312| tracking | `0.06em` |
313| uppercase | `true` |
314 
315#### Ghost
316 
317| Property | Value |
318|----------|-------|
319| shape | `sharp` |
320| background | `transparent` |
321| color | `#FF4F8B` |
322| border | `none` |
323| padding | `10px 4px` |
324| fontFamily | `mono` |
325| fontWeight | `700` |
326| fontSize | `0.875rem` |
327| tracking | `0.06em` |
328| uppercase | `true` |
329| hoverHint | `underline` |
330 
331### Charts
332 
333| Property | Value |
334|----------|-------|
335| variant | `bars` |
336| gridlines | `false` |
337| barRadius | `0` |
338| barGap | `8px` |
339| highlight | `all` |
340| axisColor | `#1A1815` |
341| palette | `#FF4F8B`, `#1A1815`, `#FF4F8B`, `#1A1815`, `#FF4F8B` |
342 
343---
344 
345## Pro tokens
346 
347> Production-fidelity tokens. States, density, motion, elevation,
348> content rules and a measured WCAG contract — derived from the
349> resting tokens unless explicitly authored.
350 
351### States
352 
353#### Button
354 
355- **hover** — bg: `rgba(255, 79, 139, 0.92)`, shadow: `0 4px 20px -8px rgba(255, 79, 139, 0.4)`
356- **focus** — outline: `1.5px solid #FF4F8B`, outline-offset: `4px`
357- **active** — transform: `translateY(1px)`, filter: `brightness(0.95)`
358- **disabled** — opacity: `0.45`
359- **loading** — opacity: `0.7`
360- **selected** — bg: `#1A1815`, color: `#FBF7EC`
361 
362#### Input
363 
364- **hover** — border: `1px solid #1A1815`
365- **focus** — border: `1px solid #FF4F8B`, shadow: `0 1px 0 0 #FF4F8B`
366- **disabled** — opacity: `0.45`
367- **error** — border: `1px solid #991B1B`, shadow: `0 1px 0 0 #991B1B`
368 
369#### Card
370 
371- **hover** — shadow: `0 8px 24px -12px rgba(15,23,42,0.14)`, transform: `translateY(-1px)`
372- **selected** — border: `1px solid #1A1815`
373 
374#### Tab
375 
376- **hover** — color: `#1A1815`
377- **focus** — outline: `1.5px solid #FF4F8B`, outline-offset: `3px`
378- **selected** — color: `#FF4F8B`, border: `0 0 2px 0 solid #FF4F8B`
379 
380### Density
381 
382| Mode | padding × | row × | body | radius × | Use for |
383|------|-----------|-------|------|----------|---------|
384| compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards |
385| comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI |
386| spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings |
387 
388### Motion
389 
390**Signature — Page turn.** Deliberate, measured motion — like turning a magazine page. Never jerky, never overdone.
391 
392```css
393transition: all 320ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
394```
395 
396| Token | Value |
397|-------|-------|
398| duration.instant | `80ms` |
399| duration.fast | `180ms` |
400| duration.base | `320ms` |
401| duration.slow | `500ms` |
402| easing.standard | `cubic-bezier(0.25, 0.46, 0.45, 0.94)` |
403| easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` |
404| easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` |
405| easing.spring | `cubic-bezier(0.5, 1.2, 0.6, 1)` |
406 
407### Elevation
408 
409Five-level scale, system-specific recipe.
410 
411| Level | Shadow | Recipe |
412|-------|--------|--------|
413| level0 | `none` | Hairline only — typical editorial resting state. |
414| level1 | `0 1px 2px rgba(15,23,42,0.04)` | Barely visible — list rows, dividers. |
415| level2 | `0 8px 24px -12px rgba(15,23,42,0.12)` | Pull-quote, sidebar — soft lift. |
416| level3 | `0 16px 40px -16px rgba(15,23,42,0.18)` | Cover story card — clear lift. |
417| level4 | `0 32px 80px -24px rgba(15,23,42,0.28)` | Modal — overlays the layout, with scrim. |
418 
419### Content
420 
421- **measure:** `60ch` (max line length for body prose)
422- **paragraph spacing:** `1.5em`
423- **list indent:** `1.75em`
424- **list gap:** `0.55em`
425- **link:** color `#FF4F8B`, underline `always`
426- **blockquote:** border `4px solid #FF4F8B`, padding `0.4em 0 0.4em 1.5em`
427- **code:** background `rgba(26, 24, 21, 0.06)`, color `#1A1815`
428 
429### Accessibility (WCAG 2.1)
430 
431**Overall:** FAIL
432 
433| Pair | Ratio | Required | Grade | Suggested fix |
434|------|-------|----------|-------|---------------|
435| Body text on surface | 16.55:1 | AA | AAA | — |
436| Body text on canvas | 15.44:1 | AA | AAA | — |
437| Muted text on surface | 5.33:1 | AA | AA | — |
438| Accent on surface | 2.91:1 | AA-Large | FAIL | `#de004c` → 4.66:1 (AA) |
439| Accent on canvas | 2.71:1 | AA-Large | FAIL | `#d40048` → 4.7:1 (AA) |
440
04 · How to use it

Wire it into your agent.

markdown
# CLAUDE.md
 
Reference @DESIGN.md for all styling decisions. Apply tokens strictly — do not introduce colors, fonts, or radii outside the system. When in doubt, prefer the values declared in DESIGN.md frontmatter.
05 · Required setup

Three snippets.

Google Fonts link

html
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600&family=Inter:wght@400;500;700&family=Space+Mono:wght@400;700&display=swap" />

Install dependencies

bash
npm install lucide-react

Tailwind config

js
// tailwind.config.js
export default {
  theme: {
    extend: {
      fontFamily: {
        display: ['"Fraunces"', 'serif'],
        sans:    ['"Inter"', 'sans-serif'],
        mono:    ['"Space Mono"', 'monospace'],
      },
      colors: {
        primary:   '#1A1815',
        secondary: '#6B665C',
        accent:    '#FF4F8B',
        neutral:   '#F4EFE3',
        surface:   '#FBF7EC',
      },
      borderRadius: {
        sm: '2px',
        md: '3px',
        lg: '4px',
      },
    },
  },
};
06 · Keep browsing

Try another system.

Atelier Glass

A studio interface built around real glassmorphism — frosted backdrop-blur cards floating over a soft tonal lavender-bone backdrop. Plus Jakarta Sans for UI, Spectral italic for accent display, a single indigo reserved for the active panel ring and the primary CTA. Built for creative studios, design tools, and product surfaces where the glass IS the interface chrome.

glassmodernpremiumminimalsaas
Atelier.app
ProductPricingDocsAbout
Sign inGet started
glass · modern · premium

Build with Atelier Glass.

A complete design system, ready for your AI coding agent. Every primitive, token, and pattern below is generated straight from DESIGN.md — drop the file in your project and ship matching UI in minutes.

Start building →View on GitHub
Featured
Tokens that travel with your prompts.
Active users
12,840
Status
All systems operational

Dune Glass

Mid-tone soft glass. Warm dusty-sand canvas with a peach-and-rose aurora behind; cards float as cream-tinted frosted panes with 26px backdrop-blur and a faint inset top highlight. The mid-tone is the system.

glasswarmpremiumminimalmodern
Dune.app
ProductPricingDocsAbout
Sign inGet started
glass · warm · premium

Build with Dune Glass.

A complete design system, ready for your AI coding agent. Every primitive, token, and pattern below is generated straight from DESIGN.md — drop the file in your project and ship matching UI in minutes.

Start building →View on GitHub
Featured
Tokens that travel with your prompts.
Active users
12,840
Status
All systems operational