← All references

Ugly Site Scraper — Brutalist Marker Type

Brutalist

Raw black-background brutalist landing page with highlighter-yellow marker strokes, boxed keywords, and hand-drawn arrows.

Ugly Site Scraper — Brutalist Marker Type preview
Scrolling capture — scroll inside the frame to see the whole page
Mood
Loud, scrappy, and confrontational in a good way — a tool built for hustlers, not a polished enterprise brand.
Colors
Near-black base (#0D0D0D), high-saturation marker yellow (#F5C518), alert red (#E8394A) for the problem keyword, white text (#FFFFFF), and a single cyan tag accent (#22D3C0) used sparingly for labels.
Type
A heavy grotesque sans (Inter Black / Neue Montreal Bold), set large and tight, with individual keywords boxed in solid color blocks or wrapped in yellow marker-highlight strokes and underlines for emphasis inside the headline.
Layout
Centered hero: star rating, italic quote, oversized headline with color-boxed keywords, bullet-style problem tags, one bold yellow CTA button, then a big yellow-framed product screenshot. Below, alternating 2-column feature sections (screenshot + bold claim) connected by hand-drawn down-arrows, closing with a flag-icon world-map footer strip.
Motion
Simple, punchy reveals — sections snap or fade in hard with no easing finesse; arrows and highlight strokes likely animate in as attention cues rather than ambient drift.
Texture
Thick black card borders, solid-color keyword boxes and yellow marker-highlight strokes behind text, hand-drawn arrow doodles between sections, small pill/sticky-note tag labels (colored background, dark bold text).
Imagery
Generate: hand-drawn arrow doodles (white, sketchy, pointing down between sections), a small globe/world icon, and flat national flag icons for the footer strip. Tool: kie-ai Flux or GPT-Image for the doodle arrows and icon set; nanobanana for any quick sticker-style graphics.
Don't
No soft pastels, no serif elegance, no generous whitespace or muted restraint, no rounded-corner softness — everything stays high-contrast, boxed, and raw.

Use in a session

uglysitescraper

Tell Claude: build [my thing] using swipe ref uglysitescraper

Full recreation prompt

Recreate a landing page in the "Ugly Site Scraper — Brutalist Marker Type" style (Brutalist). This is a VIBE / STYLE-TRANSFER task, not a clone: apply the design DNA below to MY content and section structure, do not copy the reference's copy or exact layout.

Design DNA:
- Mood: Loud, scrappy, and confrontational in a good way — a tool built for hustlers, not a polished enterprise brand.
- Colors: Near-black base (#0D0D0D), high-saturation marker yellow (#F5C518), alert red (#E8394A) for the problem keyword, white text (#FFFFFF), and a single cyan tag accent (#22D3C0) used sparingly for labels.
- Typography: A heavy grotesque sans (Inter Black / Neue Montreal Bold), set large and tight, with individual keywords boxed in solid color blocks or wrapped in yellow marker-highlight strokes and underlines for emphasis inside the headline.
- Layout: Centered hero: star rating, italic quote, oversized headline with color-boxed keywords, bullet-style problem tags, one bold yellow CTA button, then a big yellow-framed product screenshot. Below, alternating 2-column feature sections (screenshot + bold claim) connected by hand-drawn down-arrows, closing with a flag-icon world-map footer strip.
- Motion: Simple, punchy reveals — sections snap or fade in hard with no easing finesse; arrows and highlight strokes likely animate in as attention cues rather than ambient drift.
- Texture: Thick black card borders, solid-color keyword boxes and yellow marker-highlight strokes behind text, hand-drawn arrow doodles between sections, small pill/sticky-note tag labels (colored background, dark bold text).
- Avoid: No soft pastels, no serif elegance, no generous whitespace or muted restraint, no rounded-corner softness — everything stays high-contrast, boxed, and raw.

Imagery (generate real assets, do not use placeholders): Generate: hand-drawn arrow doodles (white, sketchy, pointing down between sections), a small globe/world icon, and flat national flag icons for the footer strip. Tool: kie-ai Flux or GPT-Image for the doodle arrows and icon set; nanobanana for any quick sticker-style graphics.

Reference exemplar: https://www.uglysitescraper.com. Build the page around the content I give you next, faithfully channeling this aesthetic, and generate the matching imagery described above.