Risograph Print
Generates UI with the tactile charm of risograph printing β limited spot colors, visible halftone texture, slight misregistration, and the warmth of indie zine culture. Screen-printed pixels.
Added February 16, 2026 by unslop.dev
Example output
Zine-style card
The joy of constraints in interface design
When you limit your palette to two colors and a paper stock, every decision becomes more intentional. Design thrives under constraint.
View code
<div style="padding: 2rem; background: #f4efe6;">
<div style="max-width: 24rem; border: 2px solid #e04040; padding: 1.5rem; position: relative; background: #f4efe6;">
<div style="position: absolute; top: -1px; right: -1px; width: 12px; height: 12px; border-right: 1px solid rgba(0,128,128,0.3); border-top: 1px solid rgba(0,128,128,0.3);"></div>
<div style="position: absolute; bottom: -1px; left: -1px; width: 12px; height: 12px; border-left: 1px solid rgba(0,128,128,0.3); border-bottom: 1px solid rgba(0,128,128,0.3);"></div>
<div style="display: inline-block; background: #008080; color: #f4efe6; padding: 0.125rem 0.625rem; font-family: 'Courier New', monospace; font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.875rem;">Issue 04</div>
<h3 style="font-family: 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif; font-size: 1.5rem; font-weight: 900; text-transform: uppercase; color: #e04040; margin: 0 0 0.5rem 0; line-height: 1.1; letter-spacing: -0.01em;">The joy of constraints in interface design</h3>
<p style="font-family: Georgia, 'Times New Roman', serif; font-size: 0.8125rem; color: #5a5248; line-height: 1.65; margin: 0 0 1.25rem 0;">When you limit your palette to two colors and a paper stock, every decision becomes more intentional. Design thrives under constraint.</p>
<div style="display: flex; justify-content: space-between; align-items: center; padding-top: 0.875rem; border-top: 2px solid #008080;">
<span style="font-family: 'Courier New', monospace; font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.15em; color: #008080;">Feb 2026</span>
<span style="font-family: 'Courier New', monospace; font-size: 0.625rem; color: #a09888;">pg. 12</span>
</div>
</div>
</div>Spot-color button group
View code
<div style="padding: 2rem; background: #f4efe6; display: flex; gap: 0.625rem; flex-wrap: wrap; align-items: center;"> <button style="background: #e04040; color: #f4efe6; border: 2px solid #e04040; padding: 0.5rem 1.5rem; font-family: 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif; font-size: 0.875rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; cursor: pointer; border-radius: 2px;">Print Run</button> <button style="background: #008080; color: #f4efe6; border: 2px solid #008080; padding: 0.5rem 1.5rem; font-family: 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif; font-size: 0.875rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; cursor: pointer; border-radius: 2px;">Proof</button> <button style="background: #f4efe6; color: #e04040; border: 2px solid #e04040; padding: 0.5rem 1.5rem; font-family: 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif; font-size: 0.875rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; cursor: pointer; border-radius: 2px;">Outline</button> <button style="background: #f4efe6; color: #b0a898; border: 2px solid #d0c8b8; padding: 0.5rem 1.5rem; font-family: 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif; font-size: 0.875rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; cursor: not-allowed; border-radius: 2px; opacity: 0.5;">Sold Out</button> </div>
Two-color stats block
β Print metrics β Q1 2026
842
Copies printed
96%
Ink coverage
2
Spot colors
View code
<div style="padding: 2rem; background: #f4efe6;">
<div style="max-width: 30rem;">
<p style="font-family: 'Courier New', monospace; font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.2em; color: #008080; margin: 0 0 0.75rem 0;">β Print metrics β Q1 2026</p>
<div style="display: flex; gap: 0;">
<div style="flex: 1; background: #e04040; padding: 1.25rem; border: 2px solid #e04040;">
<p style="font-family: 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif; font-size: 2.25rem; font-weight: 900; color: #f4efe6; margin: 0; line-height: 1;">842</p>
<p style="font-family: 'Courier New', monospace; font-size: 0.5625rem; text-transform: uppercase; letter-spacing: 0.15em; color: rgba(244,239,230,0.7); margin: 0.375rem 0 0 0;">Copies printed</p>
</div>
<div style="flex: 1; background: #008080; padding: 1.25rem; border: 2px solid #008080;">
<p style="font-family: 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif; font-size: 2.25rem; font-weight: 900; color: #f4efe6; margin: 0; line-height: 1;">96%</p>
<p style="font-family: 'Courier New', monospace; font-size: 0.5625rem; text-transform: uppercase; letter-spacing: 0.15em; color: rgba(244,239,230,0.7); margin: 0.375rem 0 0 0;">Ink coverage</p>
</div>
<div style="flex: 1; background: #f4efe6; padding: 1.25rem; border: 2px solid #e04040;">
<p style="font-family: 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif; font-size: 2.25rem; font-weight: 900; color: #e04040; margin: 0; line-height: 1;">2</p>
<p style="font-family: 'Courier New', monospace; font-size: 0.5625rem; text-transform: uppercase; letter-spacing: 0.15em; color: #a09888; margin: 0.375rem 0 0 0;">Spot colors</p>
</div>
</div>
</div>
</div>Newsletter signup
Monthly dispatch from the print shop. New patterns, color experiments, and a featured artist in every issue. No digital noise.
β 2,400 readers Β· monthly Β· free
View code
<div style="padding: 2rem; background: #f4efe6;">
<div style="max-width: 28rem; border: 2px solid #008080; padding: 0; position: relative;">
<div style="position: absolute; top: -1px; right: -1px; width: 12px; height: 12px; border-right: 1px solid rgba(224,64,64,0.3); border-top: 1px solid rgba(224,64,64,0.3);"></div>
<div style="position: absolute; bottom: -1px; left: -1px; width: 12px; height: 12px; border-left: 1px solid rgba(224,64,64,0.3); border-bottom: 1px solid rgba(224,64,64,0.3);"></div>
<div style="background: #008080; padding: 0.75rem 1.25rem;">
<span style="font-family: 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif; font-size: 1.125rem; font-weight: 900; text-transform: uppercase; color: #f4efe6; letter-spacing: 0.04em;">Get the Zine</span>
</div>
<div style="padding: 1.5rem;">
<p style="font-family: Georgia, 'Times New Roman', serif; font-size: 0.875rem; color: #5a5248; line-height: 1.6; margin: 0 0 1.25rem 0;">Monthly dispatch from the print shop. New patterns, color experiments, and a featured artist in every issue. No digital noise.</p>
<div style="display: flex; gap: 0.5rem;">
<input type="email" placeholder="your@email.com" style="flex: 1; border: 2px solid #e04040; padding: 0.5rem 0.75rem; font-family: 'Courier New', monospace; font-size: 0.8125rem; background: #f4efe6; outline: none; border-radius: 2px;" />
<button style="background: #e04040; color: #f4efe6; border: 2px solid #e04040; padding: 0.5rem 1.25rem; font-family: 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif; font-size: 0.8125rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; cursor: pointer; border-radius: 2px;">Subscribe</button>
</div>
<p style="font-family: 'Courier New', monospace; font-size: 0.5625rem; text-transform: uppercase; letter-spacing: 0.15em; color: #a09888; margin: 0.75rem 0 0 0;">β 2,400 readers Β· monthly Β· free</p>
</div>
</div>
</div>Event listing
β Upcoming Print Events
22
Feb
Open Press Night
Bring your own paper. We supply the ink, the drums, and the good vibes.
08
Mar
Colour Theory Workshop
Two-day intensive on ink mixing, overprinting, and spot-colour strategy.
21
Mar
Zine Fair 2026
50+ exhibitors. Live printing demos. Swap table. Free entry.
View code
<div style="padding: 2rem; background: #f4efe6;">
<div style="max-width: 30rem;">
<p style="font-family: 'Courier New', monospace; font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.2em; color: #008080; margin: 0 0 1rem 0;">β Upcoming Print Events</p>
<div style="border: 2px solid #e04040;">
<div style="display: flex; border-bottom: 2px solid #e04040;">
<div style="width: 4.5rem; background: #e04040; padding: 0.875rem 0.75rem; text-align: center; flex-shrink: 0;">
<p style="font-family: 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif; font-size: 1.5rem; font-weight: 900; color: #f4efe6; margin: 0; line-height: 1;">22</p>
<p style="font-family: 'Courier New', monospace; font-size: 0.5rem; text-transform: uppercase; letter-spacing: 0.15em; color: rgba(244,239,230,0.7); margin: 0.125rem 0 0 0;">Feb</p>
</div>
<div style="padding: 0.75rem 1rem; flex: 1;">
<p style="font-family: 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif; font-size: 0.9375rem; font-weight: 800; text-transform: uppercase; color: #2a2420; margin: 0;">Open Press Night</p>
<p style="font-family: Georgia, serif; font-size: 0.75rem; color: #5a5248; margin: 0.25rem 0 0 0;">Bring your own paper. We supply the ink, the drums, and the good vibes.</p>
</div>
</div>
<div style="display: flex; border-bottom: 2px solid #e04040;">
<div style="width: 4.5rem; background: #008080; padding: 0.875rem 0.75rem; text-align: center; flex-shrink: 0;">
<p style="font-family: 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif; font-size: 1.5rem; font-weight: 900; color: #f4efe6; margin: 0; line-height: 1;">08</p>
<p style="font-family: 'Courier New', monospace; font-size: 0.5rem; text-transform: uppercase; letter-spacing: 0.15em; color: rgba(244,239,230,0.7); margin: 0.125rem 0 0 0;">Mar</p>
</div>
<div style="padding: 0.75rem 1rem; flex: 1;">
<p style="font-family: 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif; font-size: 0.9375rem; font-weight: 800; text-transform: uppercase; color: #2a2420; margin: 0;">Colour Theory Workshop</p>
<p style="font-family: Georgia, serif; font-size: 0.75rem; color: #5a5248; margin: 0.25rem 0 0 0;">Two-day intensive on ink mixing, overprinting, and spot-colour strategy.</p>
</div>
</div>
<div style="display: flex;">
<div style="width: 4.5rem; background: #f4efe6; padding: 0.875rem 0.75rem; text-align: center; flex-shrink: 0; border-right: 2px solid #e04040;">
<p style="font-family: 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif; font-size: 1.5rem; font-weight: 900; color: #e04040; margin: 0; line-height: 1;">21</p>
<p style="font-family: 'Courier New', monospace; font-size: 0.5rem; text-transform: uppercase; letter-spacing: 0.15em; color: #a09888; margin: 0.125rem 0 0 0;">Mar</p>
</div>
<div style="padding: 0.75rem 1rem; flex: 1;">
<p style="font-family: 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif; font-size: 0.9375rem; font-weight: 800; text-transform: uppercase; color: #2a2420; margin: 0;">Zine Fair 2026</p>
<p style="font-family: Georgia, serif; font-size: 0.75rem; color: #5a5248; margin: 0.25rem 0 0 0;">50+ exhibitors. Live printing demos. Swap table. Free entry.</p>
</div>
</div>
</div>
</div>
</div>System prompt
You generate UI with a risograph print aesthetic β the distinctive look of screen-printed zines and indie publications. Limited spot color palette (2-3 colors max), visible dot texture, the slight imperfection of analog printing, and a warm DIY sensibility. Digital interface design that feels like it was run through a drum printer on recycled paper. VISUAL RULES: - Background: Warm off-white that simulates uncoated paper. #f4efe6 (slightly yellow) or #ede8df. Never pure white β this is cheap recycled stock. - Spot colors: Pick exactly 2-3 from the classic riso ink palette. Primary: fluorescent pink (#ff5784) or red (#e04040). Secondary: teal (#008080) or blue (#2255aa). Tertiary: bright yellow (#f0c030) if needed. Colors should feel like actual ink on paper. - Color overlap: When two spot colors overlap, simulate the overprint effect by showing a darker mixed color. Pink + blue = a dark purple. Use `mix-blend-mode: multiply` where possible. - Texture: Add subtle grain/noise. On colored areas, use a slight opacity variation to simulate uneven ink coverage. A CSS noise pattern or subtle texture overlay adds authenticity. - Text: Dark versions of spot colors for readability. Or a near-black warm tone (#2a2420). Body text in a slightly rough-edged style. - Typography: Mix of utilitarian and expressive. Headings in a bold compressed font: `font-family: 'Arial Narrow', 'Helvetica Neue', 'Arial', sans-serif; font-stretch: condensed`. Body in a readable serif or sans. Labels in monospace. - Borders: Visible and slightly heavy (2px). In spot colors, not black. - Border radius: Small to none. 4px max. Print doesn't have smooth curves. - Spacing: Functional but characterful. Slightly tighter than editorial, with generous margins around the "print area." - Registration marks: Small crosshair/target marks in corners as decorative elements. Crop marks, color bars, or printer notation as ornamental details. SPECIFIC PATTERNS: - Cards: Paper-colored bg with 2px spot-color border. No shadow β flat like print. Category labels in a second spot color. - Buttons: Solid spot-color fill on paper bg. No gradients. Slightly rough edges (use small border-radius: 2px). Bold uppercase text. - Badges: Small rectangles with spot-color fill, contrasting text. Look like ink stamps. - Headers: Bold condensed uppercase in primary spot color. Optional underline using secondary color. - Images/illustrations: Would be rendered in 1-2 spot colors with visible halftone dots. Use dotted patterns or stippled textures. - Color blocks: Large areas of flat spot color used as section dividers or backgrounds. ANTI-PATTERNS: - No gradients. Riso is flat color only. - No drop shadows or glows. Print is flat. - No more than 3 colors total (plus the paper tone). - No glossy or glass effects. This is matte, tactile, analog. - No neon or dark mode. Keep the paper base. - No thin hairline borders. Borders should feel printed β 2px minimum. - No complex color palettes. Constraint is the aesthetic.
Related prompts
Featured
Midnight Frequencies
Curated late-night electronic sessions. Deep cuts from the archive, surfaced for the nocturnal.
4.2K
plays
312
saves
87
shares
98%
rating
Duotone
Generates UI using strict two-color palettes β every element rendered in precisely two hues plus their blend, creating high-impact graphic compositions inspired by Spotify's iconic duotone imagery and silkscreen poster art.
Essay
The Grid as Language
The mathematical grid is not a limitation but a framework for absolute creative freedom. Within its constraints, every element finds its precise, objective position.
Josef MΓΌller-Brockmann demonstrated that the grid could organize the most complex information into clear, accessible form. The grid speaks.
Author
Max Keller β Zurich, 1962
Index
Swiss International Style
Generates UI in the Swiss/International Typographic Style β Helvetica, mathematical grids, asymmetric layouts, objective photography zones, and the radical clarity of the world's most influential graphic design movement.
Terracotta Earth
Generates UI with sun-baked desert warmth β clay oranges, dried sage, sandstone textures, and the grounded beauty of Southwestern architecture. Adobe walls as a design system.