# Risograph Print > Two inks only — fluoro pink and blue — on off-white paper, with grain, halftone dots, overprint and slightly misregistered layers. - Nickname: Riso zine - Also called: Riso, Two-ink Zine, Overprint - Category: Retro & Nostalgia - Moods: Playful, Edgy, Nostalgic, Friendly - Industries: Creative & Portfolio, Media & Entertainment, Education, Food & Restaurant, Startup & Tech - Style page: https://uilingo.dev/styles/risograph-print/ 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 ## Audit Passed after 3 rounds · builder unknown · auditor unknown ## Prompt Paste this into any coding agent. Composed for: Landing page, Plain HTML + CSS, Thai + English, light mode. For another page, stack, language or mode, use the prompt builder on the style page. ```markdown # Build a landing web page in the "Risograph Print" UI style Platform: Web (responsive, 1440px desktop down to 375px) · Stack: Plain HTML + CSS · Mode: light ## The style in one line Two inks only — fluoro pink and blue — on off-white paper, with grain, halftone dots, overprint and slightly misregistered layers. Design keywords: two spot inks, fluoro pink + blue, misregistration, halftone dots, ink grain, overprint, zine layout, uncoated paper, quirky grotesque. ## Visual language Everything looks printed on a risograph in exactly two spot inks — fluorescent pink (#FF48B0) and medium blue (#0072B8) — on warm uncoated paper (#F3EEE3). Type, outlines and rules are blue ink; pink is the fill colour; where the two overlap they multiply into a deep violet-navy. Ink is grainy, tints are halftone dots rather than opacity, and each colour layer lands a few pixels off the other, so pink fills peek out from their blue outlines and headlines carry a pink ghost. The layout feels like an indie zine: chunky quirky grotesque headlines, mono issue labels, slightly rotated stickers and collage blocks. ## Signature details (must be visible) - Inks: blue #0072B8 (rules, icons, secondary) and pink #FF48B0 (fills), overprinting via mix-blend-mode: multiply on paper #F3EEE3. Type uses the darker blue-ink shade #233A8C (text) / #14205A (on pink) — treat these as the blue ink at full density, not a third colour. The accent #3B2A8F is the pink-over-blue overprint (violet-navy), used only where two inks overlap and for the third chart series — not a third ink. Status colours (success/warning/danger) only appear in small badges and the danger action; no black. No smooth colour gradients: CSS gradients only draw flat fills, halftone dots and offset layers - Misregistered fills: background: linear-gradient(pink, pink) 4px 3px / 100% 100% no-repeat with background-clip: padding-box inside a 2px blue border, so a paper sliver shows top-left; pair it with box-shadow 3px 2px 0 pink so the pink peeks out bottom-right - Pink ghost on headings and big numbers: text-shadow 0.045em 0.035em 0 #FF48B0 — an opaque pink ink layer printed under the blue type, not a tint - Halftone tints on a 7px grid: radial-gradient(color-mix(in srgb, #FF48B0 34%, transparent) 0 1.4px, transparent 1.8px) 0 0 / 7px 7px (blue variant: color-mix(in srgb, #0072B8 24%, transparent) 0 1.3px, transparent 1.7px) for tinted cards, secondary buttons and alt sections. Text on halftone cards uses the full text colour #233A8C, never textMuted - Ink grain over the whole page: body::after with an SVG data-URI 200×200 — feTurbulence type=fractalNoise baseFrequency=1.1 numOctaves=2 stitchTiles=stitch, then feColorMatrix values="0 0 0 0 .14 0 0 0 0 .23 0 0 0 0 .55 0 0 0 1.4 -.45" (blue-ink specks with the alpha thresholded); opacity .14, mix-blend-mode multiply, pointer-events none. The paper must still read warm #F3EEE3 — a plain fractalNoise without that matrix turns it grey-green - Halftone sun: a 460px circle filled #FF48B0 on the hero ::before, mask: radial-gradient(#000 0 2.6px, transparent 3px) 0 0 / 9px 9px, opacity .9, mix-blend-mode multiply, positioned right 6% top 40px, z-index -1; the product cards overlap at most 50% of it. 9px dots only here; every other tint uses the 7px grid - Zine details: rotated pink eyebrow stickers in DM Mono uppercase, a vertical 'ISSUE Nº 04 — 2 INKS' strip on the hero edge (writing-mode vertical-rl, 0.72rem, 0.3em tracking), bento cards tilted ±0.6deg. Mono stack: "DM Mono", ui-monospace, Menlo, "KoHo", monospace — Thai mono labels fall back to KoHo; drop uppercase and tracking for them (the page is lang="th": wrap Latin issue numbers in to keep their tracking) - Duotone imagery: overlapping pink and blue circles (background-blend-mode multiply) over a blue halftone field ## Design tokens — use these exact values Colours (light mode): - background #F3EEE3 - surface #FBF8F1 - surface-2 #ECE4D3 - text #233A8C - text-muted #4D5C9C - primary #FF48B0 (text on it #14205A) - secondary #0072B8 (text on it #FBF8F1) - accent #3B2A8F - border #2D4396 - success #1C7C54 · warning #B86400 · danger #D4004C - chart series #0072B8, #FF48B0, #3B2A8F, #FF9CD2, #7DB4DE Radius: sm 2px, md 3px, lg 4px, xl 6px, pill 999px Border width: 2px Shadows: sm `3px 2px 0 rgba(255,72,176,0.85)`, md `5px 4px 0 rgba(255,72,176,0.8)`, lg `9px 7px 0 rgba(255,72,176,0.75)` (where shadows reference var(--c-border) use the border colour) Spacing: 8px base unit × 1 density Motion: 160ms cubic-bezier(.3,.6,.3,1) ## Typography (Latin + Thai) - Headings: Bricolage Grotesque 700/800 with Thai fallback Prompt 600/800 - Body: Karla 400/500/700 with Thai fallback KoHo 400/500/600 - Mono: DM Mono - Google Fonts URL: 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 - CSS stacks: heading `"Bricolage Grotesque", "Prompt", system-ui, sans-serif`; body `"Karla", "KoHo", system-ui, sans-serif`; mono `"DM Mono", ui-monospace, "SFMono-Regular", Menlo, "KoHo", monospace` (the mono font has no Thai glyphs, so Thai inside mono labels falls back to KoHo — drop uppercase and tracking there) — Latin font first, Thai font second, so each script gets its own face. - Display size clamp(3rem, 7.5vw, 6.25rem), heading weight 800, heading tracking -0.035em (Latin only), uppercase small labels (Latin only). - Thai rules: body line-height ≥ 1.7, headings ≥ 1.3; never apply negative letter-spacing or condensed tracking to Thai; do not fake-bold or italicise Thai; keep Thai text at least 1px larger than the equivalent Latin size when they sit side by side. - Why this pairing: 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. ## Components - Primary button: blue 2px border, misregistered pink fill, navy label; hover snaps the fill into register (background-position 0 0, shadow 0); active nudges 2px. Secondary button: paper with a blue halftone tint and 2px blue border; hover switches to a pink halftone - Cards: paper surface, 2px blue border, 3px radius, solid pink offset shadow 5px 4px 0; tinted variants use pink or blue halftone dots. Avatars, step numbers and icon chips: circles with a misregistered pink or blue fill inside a blue ring - Inputs: 2px blue border on paper; focus keeps the border and adds a 4px 3px pink offset block; labels in uppercase mono - Badges: transparent with a 2px currentColor border and mono uppercase text; solid badge is a pink sticker rotated -3deg - Charts: blue primary line, pink dashed comparison line, the #3B2A8F overprint for the third series; bars are pink with a blue offset; heatmap is a halftone — dot size grows with the value. The SVG area fill is the one allowed opacity exception (an SVG fill cannot take a CSS halftone): fill #FF48B0, opacity .3, mix-blend-mode multiply - Tabs: mono uppercase, the active tab gets a 5px pink underline; segmented control selection is a solid pink block - CTA: a solid blue-ink block with paper text, a pink-ghosted headline and a pink halftone circle multiplied into the corner - Mobile tab bar: paper bar with a 2px blue top rule; active icon sits on a misregistered pink pill - Nav (split): logo left, mono uppercase links centred, sign-in + misregistered pink CTA right, 2px blue bottom rule; the current link gets a pink highlighter band that sits low, under the Thai below-line vowels instead of striking through: background: linear-gradient(transparent 55%, color-mix(in srgb, #FF48B0 70%, transparent) 55% 90%, transparent 90%) - Testimonials: paper cards with a 2px blue border and the pink offset shadow, tilted -1deg / +1deg alternately, every second card on the pink halftone; a solid pink quote mark and a quirky-grotesque quote in blue ink. Footer: paper ground under a 2px blue top rule; DM Mono column heads (KoHo for Thai) and blue-ink links, the misregistered pink logo dot beside the brand ## Layout for this web page Marketing landing page: top navigation, hero with headline/sub-headline/two CTAs and a product visual, then the content sections, and a footer. Hero: oversized flush-left headline on a wide column with a narrow supporting column. Navigation: split style. Sections in order: hero → features → steps → showcase → testimonials → faq → cta. Feature section as bento. Editorial hero like a zine cover: a huge two-ink headline with a pink ghost on the left, a slightly rotated stack of halftone-tinted product cards over a pink halftone sun on the right, and a vertical issue strip on the edge. Features are a bento collage — one big solid-pink block with an overprinted blue circle, smaller cards in pink or blue halftone, each tilted ±0.6deg; on hover a tilted card straightens to 0deg and its fill snaps into register. Alternate sections sit on a light blue dot screen between 2px blue rules; steps use big misregistered numbered circles; the showcase pairs a halftone chart card with two duotone spread thumbnails; FAQ rules are 2px blue; the CTA is a blue ink slab. Dashboards use a topnav with misregistered active links, dashed table rules and halftone charts. ## Content Use realistic product copy (fictional brand) suited to: Indie publishers, zines and print studios. Make the UI bilingual: Thai and English, with a visible TH/EN switch that swaps every string. Set the lang attribute to match. ## 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 - Black outlines or black hard shadows — that turns into neubrutalism - Adding a third bright colour, smooth colour gradients, glass or soft blurred shadows - Perfect registration everywhere — the 3–5px offset is the signature - Opacity tints instead of halftone dots - Long body text on dense halftone fills (keep dots ≤ 35% ink behind text) - Photographic imagery or polaroid frames — that is vintage film, not print ## Stack notes One self-contained HTML file with a