Anti-Polish / Raw Aesthetic

Also called: Raw aesthetic, Zine UI, DIY / xerox style, Anti-design

A photocopied zine: grainy recycled paper, masking tape, marker scribbles, rubber stamps and cut-out scraps placed slightly off-grid.

“Photocopy zine”Bold & ExpressiveEra: 2020s (rooted in 70s–90s DIY zines)EdgyNostalgicFriendly

Open full screen ↗

anti-polish-raw-aesthetic / landingEN

anti-polish-raw-aesthetic / 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×1.05Display 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.

photocopy texturemasking tapemarker scribblesrubber stamp labelstypewriter textpaper scrapsslightly off-gridhalftone xerox imagesrecycled paper

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

Not to be confused with

Brutalism →Brutalism is digital rawness — default fonts, blue links and 1px HTML boxes; Anti-polish fakes physical media — paper grain, tape, marker and photocopies.Sketch / Hand-Drawn →Sketch / hand-drawn draws wobbly pencil outlines and doodle icons on clean paper; Anti-polish collages taped scraps, stamps and xeroxed halftone images.Gen Z Chaos / Maximalism →Gen Z chaos is neon colour, emoji and stickers; Anti-polish is near-monochrome toner on paper with a single red marker accent.

On mobile

Keep the paper grain on the screen background only (not on every card) to save paint cost. Cards become taped paper scraps with ±0.5° tilt; the tab bar is a torn paper strip with the active tab circled in red marker. Keep form fields straight and clearly outlined.

At a glance

Accessibility

Performance

Build complexity

Typography

Heading · LatinPermanent Marker · 400

The quick brown fox

Heading · ThaiSriracha · 400

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

Body · LatinCourier Prime · 400/700

Clear words make shared decisions.

Body · ThaiKoHo · 400/500/700

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

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.

Colour palette

Design tokens

Radius	`sm 2px · md 3px · lg 4px · xl 6px · pill 999px`
Border	`2px`
Shadow	`0 2px 1px rgba(26,25,23,0.06), 0 10px 18px -8px rgba(26,25,23,0.45)`
Display	`clamp(2.8rem, 6vw, 5rem)`
Motion	`140ms steps(3, end)`
Density	`×1.05`

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 · Anti-Polish / Raw Aesthetic (anti-polish-raw-aesthetic) — shadcn/ui theme variables (Tailwind v4). Replace the :root and .dark blocks in globals.css.
 * Only a light mode: its colours sit on :root.
 * 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=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
 */
:root {
  --radius: 4px;
  --background: #E8E3D6;
  --foreground: #1A1917;
  --card: #F7F4EC;
  --card-foreground: #1A1917;
  --popover: #F7F4EC;
  --popover-foreground: #1A1917;
  --primary: #1A1917;
  --primary-foreground: #F7F4EC;
  --secondary: #C9B183;
  --secondary-foreground: #1A1917;
  --muted: #D9D0BC;
  --muted-foreground: #4D483F;
  --accent: #D9D0BC;
  --accent-foreground: #1A1917;
  --destructive: #C0221A;
  --border: #1A1917;
  --input: #1A1917;
  --ring: #1A1917;
  --chart-1: #1A1917;
  --chart-2: #D0281E;
  --chart-3: #2747B8;
  --chart-4: #C9A100;
  --chart-5: #8A8478;
  --sidebar: #F7F4EC;
  --sidebar-foreground: #1A1917;
  --sidebar-primary: #1A1917;
  --sidebar-primary-foreground: #F7F4EC;
  --sidebar-accent: #D9D0BC;
  --sidebar-accent-foreground: #1A1917;
  --sidebar-border: #1A1917;
  --sidebar-ring: #1A1917;
}

Tailwind v4 theme.css

Preview

/* UI Lingo · Anti-Polish / Raw Aesthetic (anti-polish-raw-aesthetic) — Tailwind CSS v4 theme. Paste after @import "tailwindcss";
 * Only a light mode: its colours sit on :root.
 * 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=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
 */
@theme {
  --color-bg: #E8E3D6;
  --color-surface: #F7F4EC;
  --color-surface-2: #D9D0BC;
  --color-text: #1A1917;
  --color-text-muted: #4D483F;
  --color-primary: #1A1917;
  --color-on-primary: #F7F4EC;
  --color-secondary: #C9B183;
  --color-on-secondary: #1A1917;
  --color-accent: #D0281E;
  --color-border: #1A1917;
  --color-success: #2E6B34;
  --color-warning: #9A5A00;
  --color-danger: #C0221A;
  --color-chart-1: #1A1917;
  --color-chart-2: #D0281E;
  --color-chart-3: #2747B8;
  --color-chart-4: #C9A100;
  --color-chart-5: #8A8478;
  --radius-sm: 2px;
  --radius-md: 3px;
  --radius-lg: 4px;
  --radius-xl: 6px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(26,25,23,0.18);
  --shadow-md: 0 2px 1px rgba(26,25,23,0.06), 0 10px 18px -8px rgba(26,25,23,0.45);
  --shadow-lg: 0 3px 2px rgba(26,25,23,0.08), 0 18px 30px -12px rgba(26,25,23,0.5);
  --font-heading: "Permanent Marker", "Sriracha", system-ui, sans-serif;
  --font-body: "Courier Prime", "KoHo", system-ui, sans-serif;
  --font-mono: "Special Elite", ui-monospace, "SFMono-Regular", Menlo, "KoHo", monospace;
}

DTCG tokens tokens.json

Preview

{
  "$description": "UI Lingo · Anti-Polish / Raw Aesthetic (anti-polish-raw-aesthetic). Default mode: light. Fonts: 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",
  "color": {
    "light": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9098,
            0.8902,
            0.8392
          ],
          "hex": "#e8e3d6"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9686,
            0.9569,
            0.9255
          ],
          "hex": "#f7f4ec"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.851,
            0.8157,
            0.7373
          ],
          "hex": "#d9d0bc"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.102,
            0.098,
            0.0902
          ],
          "hex": "#1a1917"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.302,
            0.2824,
            0.2471
          ],
          "hex": "#4d483f"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.102,
            0.098,
            0.0902
          ],
          "hex": "#1a1917"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9686,
            0.9569,
            0.9255
          ],
          "hex": "#f7f4ec"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7882,
            0.6941,
            0.5137
          ],
          "hex": "#c9b183"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.102,
            0.098,
            0.0902
          ],
          "hex": "#1a1917"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8157,
            0.1569,
            0.1176
          ],
          "hex": "#d0281e"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.102,
            0.098,
            0.0902
          ],
          "hex": "#1a1917"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1804,
            0.4196,
            0.2039
          ],
          "hex": "#2e6b34"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6039,
            0.3529,
            0
          ],
          "hex": "#9a5a00"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7529,
            0.1333,
            0.102
          ],
          "hex": "#c0221a"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.102,
            0.098,
            0.0902
          ],
          "hex": "#1a1917"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8157,
            0.1569,
            0.1176
          ],
          "hex": "#d0281e"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1529,
            0.2784,
            0.7216
          ],
          "hex": "#2747b8"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7882,
            0.6314,
            0
          ],
          "hex": "#c9a100"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.5412,
            0.5176,
            0.4706
          ],
          "hex": "#8a8478"
        }
      }
    }
  },
  "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": [
              0.102,
              0.098,
              0.0902
            ],
            "hex": "#1a1917",
            "alpha": 0.18
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 1,
            "unit": "px"
          },
          "blur": {
            "value": 2,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    },
    "md": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.102,
              0.098,
              0.0902
            ],
            "hex": "#1a1917",
            "alpha": 0.06
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 2,
            "unit": "px"
          },
          "blur": {
            "value": 1,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        },
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.102,
              0.098,
              0.0902
            ],
            "hex": "#1a1917",
            "alpha": 0.45
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 10,
            "unit": "px"
          },
          "blur": {
            "value": 18,
            "unit": "px"
          },
          "spread": {
            "value": -8,
            "unit": "px"
          },
          "inset": false
        }
      ]
    },
    "lg": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.102,
              0.098,
              0.0902
            ],
            "hex": "#1a1917",
            "alpha": 0.08
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 3,
            "unit": "px"
          },
          "blur": {
            "value": 2,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        },
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.102,
              0.098,
              0.0902
            ],
            "hex": "#1a1917",
            "alpha": 0.5
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 18,
            "unit": "px"
          },
          "blur": {
            "value": 30,
            "unit": "px"
          },
          "spread": {
            "value": -12,
            "unit": "px"
          },
          "inset": false
        }
      ]
    }
  },
  "font": {
    "heading": {
      "$type": "fontFamily",
      "$value": [
        "Permanent Marker",
        "Sriracha",
        "system-ui",
        "sans-serif"
      ]
    },
    "body": {
      "$type": "fontFamily",
      "$value": [
        "Courier Prime",
        "KoHo",
        "system-ui",
        "sans-serif"
      ]
    },
    "mono": {
      "$type": "fontFamily",
      "$value": [
        "Special Elite",
        "ui-monospace",
        "SFMono-Regular",
        "Menlo",
        "KoHo",
        "monospace"
      ]
    }
  },
  "font-weight": {
    "heading": {
      "$type": "fontWeight",
      "$value": 400
    },
    "body": {
      "$type": "fontWeight",
      "$value": 400
    }
  },
  "duration": {
    "$type": "duration",
    "$value": {
      "value": 140,
      "unit": "ms"
    }
  },
  "density": {
    "$type": "number",
    "$value": 1.05
  }
}

Prompt builder

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

PageTech stackContent languageMode

Audit: ✓ Passed
Rounds: 2
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!