# Anti-Polish / Raw Aesthetic > A photocopied zine: grainy recycled paper, masking tape, marker scribbles, rubber stamps and cut-out scraps placed slightly off-grid. - Nickname: Photocopy zine - Also called: Raw aesthetic, Zine UI, DIY / xerox style, Anti-design - Category: Bold & Expressive - Moods: Edgy, Nostalgic, Friendly - Industries: Creative & Portfolio, Media & Entertainment, Food & Restaurant, Education, Startup & Tech - Style page: https://uilingo.dev/styles/anti-polish-raw-aesthetic/ Anti-polish rejects the smooth, gradient-perfect product look in favour of something visibly hand-made. Pages sit on grainy recycled paper with a photocopier vignette; content lives on paper scraps held down by translucent masking tape, nudged a few pixels off the grid. Headlines are in fat marker, body text is typewriter, and key words get red marker underlines, circles and rubber-stamp labels. Images look xeroxed — halftone dots, harsh black and white. It signals authenticity and personality over corporate sheen. ## Best for - Independent studios, artists and musicians - Indie magazines, newsletters and podcasts - Craft food, coffee and small-batch brands - Community projects, workshops and events ## Avoid for - Banks, insurers and healthcare portals - Enterprise SaaS and data-dense dashboards - Luxury brands that sell perfection ## Do - Use a real grain texture (SVG noise at 25–40%) on the page and paper cards - Tilt content scraps ±0.7° and nudge them ≤8px; tape strips -8°…+5°; only the hero scrap cluster goes to ±2° - Reserve red marker for one scribble per section (underline, circle or arrow); the nav ellipse counts with the hero, and in steps or stats only the first value is circled - Keep body copy in a readable typewriter or plain hand at 16px+ ## Don't - No smooth gradients, glass, glows or smooth 3D (the vignette and halftone are gradient-built print textures) - Don’t set paragraphs in the marker display font - Don’t make every element taped and rotated — leave calm scraps - Don’t use bright brand colours; stay with toner black, paper, kraft, highlighter yellow and red ## Audit Passed after 2 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 "Anti-Polish / Raw Aesthetic" UI style Platform: Web (responsive, 1440px desktop down to 375px) · Stack: Plain HTML + CSS · Mode: light ## The style in one line A photocopied zine: grainy recycled paper, masking tape, marker scribbles, rubber stamps and cut-out scraps placed slightly off-grid. Design keywords: photocopy texture, masking tape, marker scribbles, rubber stamp labels, typewriter text, paper scraps, slightly off-grid, halftone xerox images, recycled paper. ## Visual language A photocopied DIY zine laid out on a desk: grainy recycled paper with a faint photocopier vignette, content on paper scraps held down by translucent masking tape and nudged slightly off the grid. Headlines are fat felt-tip marker, body copy is typewriter, labels look like red rubber stamps, and one red marker scribble per section underlines or circles what matters. Images are xeroxed — black halftone dots fading into paper inside white photo-print borders. Nearly monochrome: toner black, paper, kraft brown, a highlighter yellow and a single red. ## Signature details (must be visible) - Page ground #E8E3D6 with an SVG feTurbulence grain tile (240px, ~30% alpha) and a photocopier vignette: radial-gradient(ellipse at 50% 40%, transparent 55%, rgba(26,25,23,.1) 100%). No smooth decorative gradients or glows — the vignette, halftone dot grids (radial-gradient dots + radial mask) and ruled lines are allowed as print-process textures - Only off-token colours: highlighter #F3E26A, focus fill #FFF6B8, input / print-border / index-card paper #FBFAF6, tape rgba(236,224,178,.78), ruled lines rgba(39,71,184,.18), vignette rgba(26,25,23,.1) (shadows are ink at .45–.5 alpha). Everything else comes from the tokens (paper = surface #F7F4EC, kraft = secondary #C9B183, red marker = accent #D0281E) - Masking tape via ::before: 84–92×24px tape strip with ragged clip-path ends, rotated -8°…+5° across the top edges of cards, steps and the CTA; photo prints take two corner strips at -38° - Paper scraps: surface #F7F4EC + grain, no border, uneven radius var(--r-sm) var(--r-lg) var(--r-md) var(--r-xl) (2/4/3/6px), scrap shadow = --shadow-md. Tilt limits: content scraps and photo prints ±0.7° and nudged ≤8px alternately; tape strips -8°…+5°; the hero scrap cluster up to ±2° - Fonts: Permanent Marker headlines and buttons; Thai headlines in Sriracha, an upright marker hand — never add font-style:italic or skew to it. Courier Prime body; Thai body in KoHo 400 (no Thai typewriter exists), keeping Courier Prime for Latin, numbers and dates so the typewriter feel survives. Special Elite for Latin stamps and labels; Thai stamps in KoHo 700 red - Red marker #D0281E scribbles as inline SVG backgrounds — one per section: the hero's double wavy underline (the nav's current-link ellipse counts with it as the hero's one), the pullquote underline, the active dashboard nav item; in stats or steps circle only the first value. The ellipse sits on a pseudo-element at inset -7px -12px so it surrounds the word and never cuts the glyphs - Rubber-stamp eyebrows: Special Elite, red text, 2px red border, rotate(-2.5deg); dashed red stamp for the hero note - Torn-paper edges (12px jagged SVG strip) revealing the page bg #E8E3D6: nav bottom edge, alt sections top and bottom, footer top, mobile tab bar top ## Design tokens — use these exact values Colours (light mode): - background #E8E3D6 - surface #F7F4EC - surface-2 #D9D0BC - text #1A1917 - text-muted #4D483F - primary #1A1917 (text on it #F7F4EC) - secondary #C9B183 (text on it #1A1917) - accent #D0281E - border #1A1917 - success #2E6B34 · warning #9A5A00 · danger #C0221A - chart series #1A1917, #D0281E, #2747B8, #C9A100, #8A8478 Radius: sm 2px, md 3px, lg 4px, xl 6px, pill 999px Border width: 2px Shadows: sm `0 1px 2px rgba(26,25,23,0.18)`, md `0 2px 1px rgba(26,25,23,0.06), 0 10px 18px -8px rgba(26,25,23,0.45)`, lg `0 3px 2px rgba(26,25,23,0.08), 0 18px 30px -12px rgba(26,25,23,0.5)` (where shadows reference var(--c-border) use the border colour) Spacing: 8px base unit × 1.05 density Motion: 140ms steps(3, end) ## Typography (Latin + Thai) - Headings: Permanent Marker 400 with Thai fallback Sriracha 400 - Body: Courier Prime 400/700 with Thai fallback KoHo 400/500/700 - Mono: Special Elite - Google Fonts URL: https://fonts.googleapis.com/css2?family=Permanent+Marker:wght@400&family=Courier+Prime:wght@400;700&family=Special+Elite:wght@400&family=Sriracha:wght@400&family=KoHo:wght@400;500;700&display=swap - CSS stacks: heading `"Permanent Marker", "Sriracha", system-ui, sans-serif`; body `"Courier Prime", "KoHo", system-ui, sans-serif`; mono `"Special Elite", 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(2.8rem, 6vw, 5rem), heading weight 400, heading tracking 0 (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: Sriracha is a lively Thai marker hand that matches Permanent Marker’s felt-tip strokes; KoHo’s humanist, slightly hand-made forms sit naturally beside Courier Prime’s typewriter body. ## Components - Primary button: toner-black cut-out with paper text in marker font, clip-path polygon(1% 6%, 98% 0, 100% 90%, 3% 100%); hover rotate(-1.5deg) in a 3-step motion - Secondary button: kraft-paper cut-out #C9B183 with ink text; hover turns highlighter #F3E26A; ghost button: typewriter text with a 2px red underline offset 5px - Card: taped paper scrap with grain, uneven radius (2/4/3/6px tokens), --shadow-md, ±0.7° tilt; highlighted plan on highlighter #F3E26A paper - Inputs stay straight: #FBFAF6, 2px ink border, radius 2px 4px 3px 5px; focus turns the field #FFF6B8 (no glow); error uses a dashed red border - Checkbox ticks and radio dots drawn in red marker; switch is an ink-outlined pill that fills kraft when on - Badges: outlined stamps in ink / green / amber / red, slight -2° rotation (none inside tables) - Charts: 3px ink line plus dashed red comparison, a flat 7% toner tint under the line (never a fade), faint flat red forecast band, bars filled with -55° hard-stop ink hatching or solid toner - FAQ: index cards with faint blue ruled lines and a red double margin rule. Xerox photos: an 8px #FBFAF6 print border around a halftone circle (7px dot grid, radial mask fading to paper) with a black 96px circle holding a white line icon in the centre, taped on two corners - Steps: taped index cards (#FBFAF6 with rgba(39,71,184,.18) ruled lines, --shadow-sm, ±0.6° tilt) each with a big marker numeral; only the first numeral is circled in red. Stats: big marker numbers, only the first one circled - Mobile tab bar: torn paper strip; the active tab is circled with a red marker ellipse ## 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: two columns — copy left, product visual right. Navigation: minimal style. Sections in order: hero → features → steps → showcase → testimonials → pricing → faq → cta. Feature section as alternating. Split hero: tilted marker headline with a red double scribble underneath, typewriter lead, a toner cut-out CTA beside a kraft one and a dashed red stamp note; the product mock is a cluster of taped paper scraps at different angles (up to ±2°). Features alternate taped xerox photo prints (halftone circle around a black icon disc, ±0.7°) with marker headings; steps are taped, ruled index cards with only the first numeral circled. Alt sections are kraft-tinted spreads with torn top and bottom edges; section heads lean left and slightly rotate. Testimonials are taped notes, pricing scraps with one highlighter plan, FAQ index cards, and a black photocopied CTA panel with tape. Dashboards use a paper top bar with the active link circled, taped KPI scraps with marker numbers and hatched charts. ## Content Use realistic product copy (fictional brand) suited to: Independent studios, artists and musicians. Make the UI bilingual: Thai and English, with a visible TH/EN switch that swaps every string. Set the lang attribute to match. ## Do - Use a real grain texture (SVG noise at 25–40%) on the page and paper cards - Tilt content scraps ±0.7° and nudge them ≤8px; tape strips -8°…+5°; only the hero scrap cluster goes to ±2° - Reserve red marker for one scribble per section (underline, circle or arrow); the nav ellipse counts with the hero, and in steps or stats only the first value is circled - Keep body copy in a readable typewriter or plain hand at 16px+ ## Don't - No smooth gradients, glass, glows or smooth 3D (the vignette and halftone are gradient-built print textures) - Don’t set paragraphs in the marker display font - Don’t make every element taped and rotated — leave calm scraps - Don’t use bright brand colours; stay with toner black, paper, kraft, highlighter yellow and red - Smooth decorative gradients, glassmorphism, glows or glossy 3D (the vignette, halftone dots and ruled lines are print-process textures and are fine) - Default Times/Arial with blue links and 1px boxes — that is Brutalism - Neon colours, emoji stickers and marquees — that is Gen Z chaos - Pencil-sketch wobbly outlines on every element — that is Sketch / hand-drawn - Marker font for paragraphs or form text - Tape, tilt and scribbles on every element at once — one red scribble per section, keep calm scraps between the loud ones ## Stack notes One self-contained HTML file with a