Risograph Print

Also called: Riso, Two-ink Zine, Overprint

Two inks only — fluoro pink and blue — on off-white paper, with grain, halftone dots, overprint and slightly misregistered layers.

“Riso zine”Retro & NostalgiaEra: 1980s stencil duplicators, indie zine revival 2010s–2020sPlayfulEdgyNostalgicFriendlyNew

Open full screen ↗

risograph-print / landingEN

risograph-print / landingTH

Customize

Try a palette, other colours, radius, density, display size and fonts on the preview. The copied prompt and theme export follow your choices; the style itself never changes.

Palettes

UI Lingo pool

Radius sm2pxRadius md3pxRadius lg4pxRadius xl6pxDensity×1Display size×1Latin headingLatin bodyThai headingThai body

Colours · Light

bgsurfacesurface-2texttext-mutedprimaryon-primarysecondaryon-secondaryaccentbordersuccesswarningdangerchart-1chart-2chart-3chart-4chart-5

Recipes may hard-code decorative colours, sizes or fonts, so a change can apply only in part, and the signature may not hold.

Design keywords

Say these words to ask for this style.

two spot inksfluoro pink + bluemisregistrationhalftone dotsink grainoverprintzine layoutuncoated paperquirky grotesque

Risograph Print imitates the cheap stencil duplicator loved by zine makers and art schools: every page is printed in two spot inks, fluorescent pink and medium blue, on warm uncoated paper. Fills are flat or halftone-dotted, ink is grainy, and each colour layer lands a few pixels off the other, so fills peek out from their outlines and headlines carry a pink ghost. Layouts feel cut-and-pasted: chunky quirky grotesque, mono issue numbers, rotated stickers and collage-like bento blocks.

Best for

Indie publishers, zines and print studios
Art schools, festivals, workshops and events
Record labels, cafés and independent shops
Creative newsletters and portfolios

Avoid for

Banking, insurance and enterprise software
Data-dense products that need many distinct colours
Luxury brands that need polish and restraint

✓ Do

Limit the palette to two inks (#FF48B0 pink, #0072B8 blue) plus their overprint and paper
Offset fills 3–5px from their outlines so the layers look misregistered
Use halftone dots (7px grid) for tints instead of opacity
Set all type in navy blue-ink #233A8C (#14205A on pink fills); pink is for fills and ghosts

✕ Don't

Don’t add a third bright colour or black (small status badges/danger actions and the pink-over-blue overprint #3B2A8F are the only exceptions)
Don’t use soft blurred shadows, smooth colour gradients or glass (flat CSS gradients for dots and offsets are fine)
Don’t register everything perfectly — a little offset is the charm
Don’t set long body text on halftone fills

Not to be confused with

Neubrutalism →Neubrutalism uses black outlines and hard black shadows with many flat colours; Risograph uses only pink and blue ink, with grain, halftone and offset colour layers instead of shadows.Vintage Analog / Retro Film →Vintage film is full faded colour photography with polaroid frames; Risograph is flat two-ink printing with halftone dots and misregistration.Memphis Design →Memphis is a confetti of squiggles and many saturated colours; Risograph limits itself to two overprinting inks on paper.

On mobile

Keep the paper grain as one static overlay, use the offset pink fill on the primary button, featured card and active tab only, and keep list rows as clean blue-ink text on paper separated by 2px rules.

At a glance

Accessibility

Performance

Build complexity

Typography

Heading · LatinBricolage Grotesque · 700/800

The quick brown fox

Heading · ThaiPrompt · 600/800

สวัสดีชาวโลก ยินดีต้อนรับ

Body · LatinKarla · 400/500/700

Clear words make shared decisions.

Body · ThaiKoHo · 400/500/600

คำที่ชัดเจนช่วยให้ทีมตัดสินใจร่วมกันได้

Prompt’s heavy loopless forms keep up with Bricolage’s chunky display weight; KoHo’s slightly hand-made humanist strokes match Karla’s quirky, zine-friendly body.

Colour palette

Light

Dark

Design tokens

Radius	`sm 2px · md 3px · lg 4px · xl 6px · pill 999px`
Border	`2px`
Shadow	`5px 4px 0 rgba(255,72,176,0.8)`
Display	`clamp(3rem, 7.5vw, 6.25rem)`
Motion	`160ms cubic-bezier(.3,.6,.3,1)`
Density	`×1`

Theme export

Drop the tokens into a shadcn/ui or Tailwind project, or any tool that reads design tokens.

shadcn/ui globals.css

Preview

/* UI Lingo · Risograph Print (risograph-print) — shadcn/ui theme variables (Tailwind v4). Replace the :root and .dark blocks in globals.css.
 * Default mode is light; dark values apply under .dark.
 * Derived: card/popover/sidebar = surface, muted = surface-2, accent = surface-2 (shadcn hover surface), destructive = danger, input = border, ring = primary, --radius = radius lg.
 * Fonts: https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@700;800&family=Karla:wght@400;500;700&family=DM+Mono:wght@400;500&family=Prompt:wght@600;800&family=KoHo:wght@400;500;600&display=swap
 */
:root {
  --radius: 4px;
  --background: #F3EEE3;
  --foreground: #233A8C;
  --card: #FBF8F1;
  --card-foreground: #233A8C;
  --popover: #FBF8F1;
  --popover-foreground: #233A8C;
  --primary: #FF48B0;
  --primary-foreground: #14205A;
  --secondary: #0072B8;
  --secondary-foreground: #FBF8F1;
  --muted: #ECE4D3;
  --muted-foreground: #4D5C9C;
  --accent: #ECE4D3;
  --accent-foreground: #233A8C;
  --destructive: #D4004C;
  --border: #2D4396;
  --input: #2D4396;
  --ring: #FF48B0;
  --chart-1: #0072B8;
  --chart-2: #FF48B0;
  --chart-3: #3B2A8F;
  --chart-4: #FF9CD2;
  --chart-5: #7DB4DE;
  --sidebar: #FBF8F1;
  --sidebar-foreground: #233A8C;
  --sidebar-primary: #FF48B0;
  --sidebar-primary-foreground: #14205A;
  --sidebar-accent: #ECE4D3;
  --sidebar-accent-foreground: #233A8C;
  --sidebar-border: #2D4396;
  --sidebar-ring: #FF48B0;
}

.dark {
  --background: #17183A;
  --foreground: #F6EFE3;
  --card: #1F2148;
  --card-foreground: #F6EFE3;
  --popover: #1F2148;
  --popover-foreground: #F6EFE3;
  --primary: #FF5FBA;
  --primary-foreground: #17183A;
  --secondary: #4FB3F0;
  --secondary-foreground: #17183A;
  --muted: #282A56;
  --muted-foreground: #BDB8DA;
  --accent: #282A56;
  --accent-foreground: #F6EFE3;
  --destructive: #FF6B8F;
  --border: #6C73B8;
  --input: #6C73B8;
  --ring: #FF5FBA;
  --chart-1: #4FB3F0;
  --chart-2: #FF5FBA;
  --chart-3: #FFD4EB;
  --chart-4: #B8A6FF;
  --chart-5: #8FD0F7;
  --sidebar: #1F2148;
  --sidebar-foreground: #F6EFE3;
  --sidebar-primary: #FF5FBA;
  --sidebar-primary-foreground: #17183A;
  --sidebar-accent: #282A56;
  --sidebar-accent-foreground: #F6EFE3;
  --sidebar-border: #6C73B8;
  --sidebar-ring: #FF5FBA;
}

Tailwind v4 theme.css

Preview

/* UI Lingo · Risograph Print (risograph-print) — Tailwind CSS v4 theme. Paste after @import "tailwindcss";
 * Default mode is light; dark values apply under .dark.
 * Derived: shadow "none" = 0 0 #0000; var(--c-x) in shadows = var(--color-x); shadows using recipe-only variables are left out.
 * Fonts: https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@700;800&family=Karla:wght@400;500;700&family=DM+Mono:wght@400;500&family=Prompt:wght@600;800&family=KoHo:wght@400;500;600&display=swap
 */
@theme {
  --color-bg: #F3EEE3;
  --color-surface: #FBF8F1;
  --color-surface-2: #ECE4D3;
  --color-text: #233A8C;
  --color-text-muted: #4D5C9C;
  --color-primary: #FF48B0;
  --color-on-primary: #14205A;
  --color-secondary: #0072B8;
  --color-on-secondary: #FBF8F1;
  --color-accent: #3B2A8F;
  --color-border: #2D4396;
  --color-success: #1C7C54;
  --color-warning: #B86400;
  --color-danger: #D4004C;
  --color-chart-1: #0072B8;
  --color-chart-2: #FF48B0;
  --color-chart-3: #3B2A8F;
  --color-chart-4: #FF9CD2;
  --color-chart-5: #7DB4DE;
  --radius-sm: 2px;
  --radius-md: 3px;
  --radius-lg: 4px;
  --radius-xl: 6px;
  --radius-pill: 999px;
  --shadow-sm: 3px 2px 0 rgba(255,72,176,0.85);
  --shadow-md: 5px 4px 0 rgba(255,72,176,0.8);
  --shadow-lg: 9px 7px 0 rgba(255,72,176,0.75);
  --font-heading: "Bricolage Grotesque", "Prompt", system-ui, sans-serif;
  --font-body: "Karla", "KoHo", system-ui, sans-serif;
  --font-mono: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, "KoHo", monospace;
}

.dark {
  --color-bg: #17183A;
  --color-surface: #1F2148;
  --color-surface-2: #282A56;
  --color-text: #F6EFE3;
  --color-text-muted: #BDB8DA;
  --color-primary: #FF5FBA;
  --color-on-primary: #17183A;
  --color-secondary: #4FB3F0;
  --color-on-secondary: #17183A;
  --color-accent: #FFD4EB;
  --color-border: #6C73B8;
  --color-success: #5ED39A;
  --color-warning: #FFB454;
  --color-danger: #FF6B8F;
  --color-chart-1: #4FB3F0;
  --color-chart-2: #FF5FBA;
  --color-chart-3: #FFD4EB;
  --color-chart-4: #B8A6FF;
  --color-chart-5: #8FD0F7;
}

DTCG tokens tokens.json

Preview

{
  "$description": "UI Lingo · Risograph Print (risograph-print). Default mode: light. Fonts: https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@700;800&family=Karla:wght@400;500;700&family=DM+Mono:wght@400;500&family=Prompt:wght@600;800&family=KoHo:wght@400;500;600&display=swap",
  "color": {
    "light": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9529,
            0.9333,
            0.8902
          ],
          "hex": "#f3eee3"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9843,
            0.9725,
            0.9451
          ],
          "hex": "#fbf8f1"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9255,
            0.8941,
            0.8275
          ],
          "hex": "#ece4d3"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1373,
            0.2275,
            0.549
          ],
          "hex": "#233a8c"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.302,
            0.3608,
            0.6118
          ],
          "hex": "#4d5c9c"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.2824,
            0.6902
          ],
          "hex": "#ff48b0"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0784,
            0.1255,
            0.3529
          ],
          "hex": "#14205a"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0,
            0.4471,
            0.7216
          ],
          "hex": "#0072b8"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9843,
            0.9725,
            0.9451
          ],
          "hex": "#fbf8f1"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2314,
            0.1647,
            0.5608
          ],
          "hex": "#3b2a8f"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1765,
            0.2627,
            0.5882
          ],
          "hex": "#2d4396"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1098,
            0.4863,
            0.3294
          ],
          "hex": "#1c7c54"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7216,
            0.3922,
            0
          ],
          "hex": "#b86400"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8314,
            0,
            0.298
          ],
          "hex": "#d4004c"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0,
            0.4471,
            0.7216
          ],
          "hex": "#0072b8"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.2824,
            0.6902
          ],
          "hex": "#ff48b0"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2314,
            0.1647,
            0.5608
          ],
          "hex": "#3b2a8f"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.6118,
            0.8235
          ],
          "hex": "#ff9cd2"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.4902,
            0.7059,
            0.8706
          ],
          "hex": "#7db4de"
        }
      }
    },
    "dark": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0902,
            0.0941,
            0.2275
          ],
          "hex": "#17183a"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1216,
            0.1294,
            0.2824
          ],
          "hex": "#1f2148"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1569,
            0.1647,
            0.3373
          ],
          "hex": "#282a56"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9647,
            0.9373,
            0.8902
          ],
          "hex": "#f6efe3"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7412,
            0.7216,
            0.8549
          ],
          "hex": "#bdb8da"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.3725,
            0.7294
          ],
          "hex": "#ff5fba"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0902,
            0.0941,
            0.2275
          ],
          "hex": "#17183a"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.3098,
            0.702,
            0.9412
          ],
          "hex": "#4fb3f0"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0902,
            0.0941,
            0.2275
          ],
          "hex": "#17183a"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.8314,
            0.9216
          ],
          "hex": "#ffd4eb"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.4235,
            0.451,
            0.7216
          ],
          "hex": "#6c73b8"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.3686,
            0.8275,
            0.6039
          ],
          "hex": "#5ed39a"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.7059,
            0.3294
          ],
          "hex": "#ffb454"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.4196,
            0.5608
          ],
          "hex": "#ff6b8f"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.3098,
            0.702,
            0.9412
          ],
          "hex": "#4fb3f0"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.3725,
            0.7294
          ],
          "hex": "#ff5fba"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.8314,
            0.9216
          ],
          "hex": "#ffd4eb"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7216,
            0.651,
            1
          ],
          "hex": "#b8a6ff"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.5608,
            0.8157,
            0.9686
          ],
          "hex": "#8fd0f7"
        }
      }
    }
  },
  "radius": {
    "sm": {
      "$type": "dimension",
      "$value": {
        "value": 2,
        "unit": "px"
      }
    },
    "md": {
      "$type": "dimension",
      "$value": {
        "value": 3,
        "unit": "px"
      }
    },
    "lg": {
      "$type": "dimension",
      "$value": {
        "value": 4,
        "unit": "px"
      }
    },
    "xl": {
      "$type": "dimension",
      "$value": {
        "value": 6,
        "unit": "px"
      }
    },
    "pill": {
      "$type": "dimension",
      "$value": {
        "value": 999,
        "unit": "px"
      }
    }
  },
  "border-width": {
    "$type": "dimension",
    "$value": {
      "value": 2,
      "unit": "px"
    }
  },
  "shadow": {
    "sm": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              1,
              0.2824,
              0.6902
            ],
            "hex": "#ff48b0",
            "alpha": 0.85
          },
          "offsetX": {
            "value": 3,
            "unit": "px"
          },
          "offsetY": {
            "value": 2,
            "unit": "px"
          },
          "blur": {
            "value": 0,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    },
    "md": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              1,
              0.2824,
              0.6902
            ],
            "hex": "#ff48b0",
            "alpha": 0.8
          },
          "offsetX": {
            "value": 5,
            "unit": "px"
          },
          "offsetY": {
            "value": 4,
            "unit": "px"
          },
          "blur": {
            "value": 0,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    },
    "lg": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              1,
              0.2824,
              0.6902
            ],
            "hex": "#ff48b0",
            "alpha": 0.75
          },
          "offsetX": {
            "value": 9,
            "unit": "px"
          },
          "offsetY": {
            "value": 7,
            "unit": "px"
          },
          "blur": {
            "value": 0,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    }
  },
  "font": {
    "heading": {
      "$type": "fontFamily",
      "$value": [
        "Bricolage Grotesque",
        "Prompt",
        "system-ui",
        "sans-serif"
      ]
    },
    "body": {
      "$type": "fontFamily",
      "$value": [
        "Karla",
        "KoHo",
        "system-ui",
        "sans-serif"
      ]
    },
    "mono": {
      "$type": "fontFamily",
      "$value": [
        "DM Mono",
        "ui-monospace",
        "SFMono-Regular",
        "Menlo",
        "KoHo",
        "monospace"
      ]
    }
  },
  "font-weight": {
    "heading": {
      "$type": "fontWeight",
      "$value": 800
    },
    "body": {
      "$type": "fontWeight",
      "$value": 400
    }
  },
  "duration": {
    "$type": "duration",
    "$value": {
      "value": 160,
      "unit": "ms"
    }
  },
  "easing": {
    "$type": "cubicBezier",
    "$value": [
      0.3,
      0.6,
      0.3,
      1
    ]
  },
  "density": {
    "$type": "number",
    "$value": 1
  }
}

Prompt builder

Paste into Claude, Cursor, v0, Lovable or any coding agent to recreate this style.

PageTech stackContent languageMode

Audit: ✓ Passed
Rounds: 3
Builder: unknown
Auditor: unknown

Second style (optional)Instruction

A new-style brief from this style and an optional second one, for the model ladder. It is not a style: it must pass the ladder before merging, and nothing is created for you.

Meta-prompt for the writer remix-brief.md

Preview

New style issue draft new-style-issue.md

Preview

prompt.json skeleton prompt.json

Preview

Copied!