# Fun & Funky: Weird on purpose, impossible to forget

Fun & Funky sites look odd on purpose, but the oddness sits on a strict base. One dark ink, flat paper or white grounds, hard edges and a disciplined grid carry the structure. Personality comes from deadpan copy, one loud display voice, clashing flat colour fields and hand-made textures or illustrations. The chrome stays sober so the joke lands, and the result reads as confident rather than gimmicky.

Sites in this collection: [Liquid Death](https://liquiddeath.com), [Oatly](https://www.oatly.com), [Who Gives A Crap](https://www.whogivesacrap.org), [Graza](https://www.graza.co), [Poolsuite](https://poolsuite.net), [Partiful](https://partiful.com).

## Brief for your agent

Design this in a 'Fun & Funky' style: weird on purpose, with deadpan humour on a disciplined base. Use a warm paper background (#fffef6, #f6e6d9 or #faf3ee) or white, and one dark ink (#111111, or olive #3c422e) for all text, borders and icons. Keep the chrome sober: 1px solid black borders, 0–4px radius, no blurred shadows. For depth, use hard offset shadows (2px 2px 0 #000). Primary buttons are black rectangles with white 14–16px uppercase labels; allow one pill-shaped button (radius 9999px, lime #d7f6a4 or cobalt #0f47ff) as the single rounded exception. Add colour as flat full-width bands or meaning: one saturated accent (cobalt #0f47ff, tangerine #ff7744 or chartreuse #d1e030) plus two to four pastels (aqua #a9dde2, apricot #fdcf85, bubblegum #f8c8d8, lilac #a67eb1) for section bands, category tags and active states. Always put dark text on pastels and use no gradients on controls. Typography has two voices. Display is one huge characterful line per section, 56–112px, line-height 0.8–1.0, tracking 0 to -4% (bold condensed uppercase, a compressed serif or a heavy quirky grotesk). Utility type is 11–16px, plain and mechanical (uppercase labels, a mono or typewriter face for meta). Body copy is 16px at 1.45 line-height in a readable sans. Layout uses a 1100–1300px column with 80–200px between sections and tight spacing inside modules. Break the grid once or twice on purpose (an edge-to-edge wordmark, an organic blob bleeding off-screen, tilted cards, a marquee between dotted rules). Fill empty space with halftone, dither, a faint graph-paper grid or hand-drawn line characters. Build nav and footer as ruled cells. In app screens, use bordered sidebars, spreadsheet-style tables with full 1px gridlines, segmented button groups, pastel status chips and dither for disabled areas. Empty states pair an illustration with one deadpan line. Write straight-faced jokes into functional copy (newsletter heads, footers, errors) while the typography stays serious.

## Principles

### Sober chrome, loud content

Keep UI furniture (nav, buttons, inputs, cards) in black, white or cream with no decoration. Photography, packaging, illustration and copy supply the noise. Liquid Death runs a pure #000/#fff/#999 retail shell under metal-band can art. Oatly frames hand-made posters in plain 1px black cards. Partiful keeps 4px black rectangular buttons over iridescent washes. If the content is weak, this style fails, so invest in imagery and words before decoration.

### One ink does all the line work

A single dark colour handles text, borders, icons and illustration. Use #000000–#151515 at Liquid Death, Oatly and Poolsuite, #262626 at Who Gives A Crap, and olive #3c422e at Graza. Because every line shares one ink, chartreuse, tangerine or salmon backgrounds can clash freely without the page falling apart. Never set body text lighter than #5a5a5a.

### Flat colour as fields and codes, never as gloss

Colour arrives in solid blocks or as meaning, not as gradients on controls. Who Gives A Crap floods bands with tangerine #ff7744, lime #d7f6a4, aqua #b1e8eb and cobalt #4268ff. Graza alternates blush #f6e6d9 and chartreuse #d1e030 bands. Oatly colour-codes categories with pastel chips (#fdcf85, #f8c8d8, #a67eb1, #fbcccc). Poolsuite uses cyan #a9dde2 only for the active control and pink #f3c4c4 for a secondary action. Allow one action colour at most (cobalt #0f47ff at Who Gives A Crap); everywhere else, black is the CTA.

### Extreme type contrast: one shouting voice, one mechanical voice

Pair a huge, characterful display face with small, plain utility type, and keep almost nothing in between. Graza sets 72–90px condensed Garamond against 16px typewriter. Liquid Death uses 60px bold condensed uppercase at line-height 1.0 over 12–14px meta. Who Gives A Crap sets 68px black italic with one statement per section. Partiful runs a 112px H1 at weight ~825, line-height 0.8, tracking -3%. Oatly and Poolsuite invert the idea: all UI type stays at 10–16px uppercase or bitmap size, and the imagery does the shouting.

### Hard edges and printed shadows

Avoid blurred elevation. Radii are 0px (Liquid Death, Oatly) or 3–4px (Poolsuite, Partiful buttons), with pills used deliberately as the one rounded object. Depth is printed rather than lit: Oatly uses a 1px black border plus a 2px 2px 0 #000 shadow, and Graza uses a dotted, misregistered duplicate pill offset bottom-right. Separate content with 1px black rules, dotted olive rules or ruled table cells, as in the Oatly nav and footer.

### Hand-made texture and retro artefacts fill the gaps

Fill empty space with something tactile rather than leaving it blank. Oatly uses halftone dot blocks and graph-paper margins. Poolsuite uses grey dither for inactive slots and pixel-art dock icons. Graza places hand-drawn olive characters and dotted circling ellipses. Who Gives A Crap has a scalloped lime blob bleeding off the viewport, and Partiful adds Y2K pixel stickers and tilted notification cards. Use one or two of these motifs per site, not all of them.

### Deadpan copy in boring places

Put the jokes in functional spots: newsletter headings ('news, promos and fart jokes'), footer heads ('FOR A GOOD TIME CALL:'), section titles ('MURDER YOUR THIRST', 'KILLER MERCH'), empty carts and consent lines. Partiful drops emoji into sentence-case headings ('Stalk the guest list'). Keep the tone straight-faced and the typography serious so the copy does the joking.

## Colour

Backgrounds are either pure white #ffffff or a warm paper: oat cream #fffef6, sun-faded cream #faf3ee, kraft #f5f0e0, blush #f6e6d9 or pool pink #f5d6d5. Surfaces sit one step off the background (#f5f5f5, #fafafa, #fff4ec, or white cards on cream). Ink is #000000–#262626, or one tinted dark such as olive #3c422e; it covers text, borders and illustrations. Muted greys run #999999–#c6c6c6 for rules and chips. Accents fall into two families: (1) saturated punches such as cobalt #0f47ff, tangerine #ff7744, chartreuse #d1e030 and on-air red #e04a4a, and (2) chalky pastels such as lime #d7f6a4, aqua #a9dde2–#b1e8eb, apricot #fdcf85, bubblegum #f7c6f0–#f8c8d8, lilac #a67eb1–#e9dcf7 and peach #ffba85. Pick one saturated colour as the action or hero and two to four pastels for bands, tags or state. Always put dark text on pastels and chartreuse, never white. Clashing pairs are fine when they sit in separate blocks divided by ink rules or white space. Gradients are allowed only as blurry pastel backdrop washes (Partiful), never on buttons or cards.

## Typography

Use two voices. Display: a font with obvious character at 56–112px, line-height 0.8–1.0, tracking 0 to -4%. Options include bold condensed uppercase (Liquid Death, ~60px/700), compressed high-contrast serif (Graza, 72–90px/400, -3%), heavy black italic used for one line per section (Who Gives A Crap, 68px), or ultra-heavy grotesk at 0.8 line-height (Partiful, 112px). Utility: small and mechanical at 11–16px. Choose a typewriter or mono face (Graza, Poolsuite chips), uppercase single-weight labels (Oatly, 12px/400), or condensed meta (Liquid Death, 12–14px). Nav and button labels are 13–16px, often uppercase with +2–5% tracking. Body copy is 16px with line-height 1.4–1.5 in a readable sans, never in the display face, a bitmap font or condensed type at 1.0. Build hierarchy through the jump between voices, not through many intermediate sizes. Free substitutes: Barlow Condensed or Oswald for condensed uppercase; Instrument Serif for the narrow serif; Bricolage Grotesque, Unbounded or Syne for wide or quirky display; Courier Prime or IBM Plex Mono for typewriter; Pixelify Sans or VT323 for pixel labels; Space Grotesk, Figtree or Inter for body.

## Layout

Use a 1010–1312px content column with 30–96px gutters. Hero bands, colour fields and wordmarks go full-bleed. Keep vertical spacing between sections generous (80–200px) and spacing inside modules tight (4–24px). That contrast between packed blocks and empty space is part of the look. Pick one structural conceit and commit to it: stacked full-bleed colour bands (Who Gives A Crap, Graza), a ruled masonry wall inside a 1px black frame with 24–36px gutters (Oatly), a centred-heading-plus-grid retail rhythm with a scaled-up centre item (Liquid Death), or a single desktop window on a flat pastel field with a dock (Poolsuite). Break the grid on purpose, but only once or twice per page: an edge-to-edge wordmark, a blob bleeding off the viewport, headlines staggered left and right, tilted floating UI fragments, a scrolling marquee between dotted rules. Footers are worth the effort: run them as ruled tables of cells or as a voice-heavy sign-off.

## Components

Buttons have three treatments. The first is a square or 4px rectangle in solid black with white uppercase or semibold 14–16px text. The second is white with a 1px black border and a 2px 2px 0 #000 shadow plus a → arrow. The third, used once per page as the deliberate rounded object, is a pill (radius 9999px) in lime, chartreuse, cream or cobalt with dark or white text and padding of about 12×24px. Cards have no container on white for packshots; otherwise use a 0–12px radius, 1px #000 or #d8d8d8 border and a hard shadow or none, with a caption bar of tiny uppercase title and a pastel tag. Tags and chips are small rectangles or ovals, 11–12px uppercase, flat pastel fill or 1px outline. Inputs are square, 1px black or #999 border, with an attached arrow or pill submit button. Announcement bars are 28–36px strips in a pastel (aqua, bubblegum, cream) with a joke or emoji. Nav is either transparent over the hero with uppercase links, or a ruled strip of bordered cells. Counters use brackets ('Cart [0]'). Carousels use dash pagination or outlined split-pill arrows. Icons are simple line or solid glyphs in ink; colourful illustration (pixel art, hand-drawn characters) is reserved for navigation tiles, empty space and storytelling.

## App UI

Carry the style into product screens as a ledger or retro-OS system, not a soft SaaS one. Use a cream (#faf3ee or #fffef6) or white canvas with 1px #000 rules dividing every region. The sidebar is a column of bordered cells with 13–14px uppercase or mono labels; the active item gets a flat pastel fill (cyan #a9dde2 or similar), not a glow. An alternative is Poolsuite's bottom dock of square tiles with pixel icons. Panels nest as bordered trays inside bordered windows, with 4–8px insets and a 0–4px radius. Tables look like spreadsheets: full 1px gridlines, uppercase 11–12px headers, mono or typewriter numerals, pastel category chips in a status column, and hover rows tinted with the background's darker step. Forms use square bordered inputs, uppercase labels above, black submit buttons and segmented button groups with shared borders. Show state with one candy colour per state and keep everything else ink-on-cream. Dashboards stay dense (10–14px type, 4–12px gaps) with a single display-face title per page at 32–48px. Fill disabled or empty slots with dither or halftone. Empty states are where the brand speaks: a hand-drawn or pixel illustration, one deadpan line in the display face ('Nothing here. Suspicious.') and a black CTA. Avoid soft shadows, gradients on controls and more than one action colour.

## Do

- Pick one ink colour (#000–#262626 or a tinted dark like #3c422e) and use it for all text, borders and illustration.
- Keep buttons black or white rectangles; allow one pill style as a deliberate exception.
- Use 1px black borders and 2px 2px 0 #000 hard shadows for depth.
- Put flat colour in full-width bands, pastel category tags or single state fills.
- Set one display line per section huge (56–112px, line-height 0.8–1.0) and keep all other type small and plain.
- Write jokes into newsletter heads, footers, empty states and error messages.
- Fill dead space with halftone, dither, graph-paper grid or hand-drawn characters.
- Break the grid once or twice per page on purpose: an edge-to-edge wordmark, a bleeding blob or a tilted card.
- Use warm paper backgrounds (#fffef6, #f6e6d9, #faf3ee) so white cards read as paper on paper.

## Don't

- Don't add blurred drop shadows, glassmorphism or gradients to buttons and cards.
- Don't put white text on lime, chartreuse, aqua or other pastels.
- Don't set body paragraphs in the display face, condensed type at 1.0 line-height, bitmap or typewriter fonts beyond 2–3 lines.
- Don't introduce a second action colour; black or one accent is the only clickable colour.
- Don't stack every motif (pixel art, halftone, blobs, stickers) on one page.
- Don't rely on stock imagery or generic icon sets, because the plain chrome exposes weak content.
- Don't use black borders thicker than 1–2px or generic neo-brutalist chunkiness.
- Don't let pale grey metadata drop below #5a5a5a on tinted backgrounds.

## Theme preset

```json
{
    "brand": "#0f47ff",
    "neutral_tone": "warm",
    "mode": "light",
    "radius": 4,
    "density": "comfortable",
    "heading_font": "Bricolage Grotesque",
    "body_font": "Space Grotesk",
    "shadow": "hard"
}
```

## The sites

### Liquid Death (https://liquiddeath.com)

Liquid Death runs a stark black-and-white retail shell — Acumin Pro Extra Condensed in shouty uppercase, square buttons, no shadows, no radius — and lets loud photography, metal-band can art and deadpan copy carry all the colour and personality. The restraint of the chrome is what makes the joke land: it reads like a serious premium e-commerce site that happens to sell murder-themed water, so the irreverence feels confident rather than gimmicky.

Palette: #ffffff background, #f5f5f5 surface, #000000 text, #151515 text, #999999 border, #e6e6e6 muted, #8a6d35 accent, #e9e6e3 surface. Type: Acumin Pro (Extra Condensed / Condensed, bold) headings, Acumin Pro Condensed body.

Signature moves:
- Keep the UI chrome strictly black, white and grey with zero radius and zero shadows so loud photography and packaging supply 100% of the colour.
- Set every heading in bold condensed uppercase at ~60px with 1.0 line height and write it as a deadpan threat or pun ('MURDER YOUR THIRST', 'KILLER MERCH').
- Scale up the centre item in a 3-up product row so the grid feels like a stage rather than a catalogue.
- Use a single tarnished gold (#8a6d35) only for inline links and emblem art, giving a metal-band/heavy-metal-merch luxury tint without adding a brand colour.
- Turn even boilerplate (newsletter consent, footer heading) into brand voice copy, letting the typography stay sober while the words do the joking.

Full teardown: https://pageproofer.com/inspiration/fun-funky/liquid-death.md · Screenshots: https://pageproofer.com/images/inspiration/fun-funky/liquid-death/hero.jpg (first screen), https://pageproofer.com/images/inspiration/fun-funky/liquid-death/page.jpg (full page) · Tokens: https://pageproofer.com/inspiration/fun-funky/liquid-death/tokens.json

### Oatly (https://www.oatly.com)

Oatly's homepage is a cream-paper bulletin board: a hairline-black frame and nav grid hold a masonry wall of square-cornered cards, each with a 2px hard black offset shadow, a tiny uppercase caption bar and a pastel category tag. The UI chrome is deliberately plain and mechanical so the loud, hand-made campaign artwork (posters, packaging, hand lettering) can carry all the personality.

Palette: #fffef6 background, #ffffff surface, #000000 text, #fdcf85 accent, #f8c8d8 accent, #a67eb1 accent, #c6c6c6 muted, #fbcccc highlight. Type: Margo Pro Regular headings, Margo Pro Regular body.

Signature moves:
- Give every card a 1px black border plus a 2px 2px 0 solid black shadow, so tiles look like printed cards pinned to paper.
- Keep all UI type tiny, uppercase and in a single weight, and let the content imagery hold the shouting, hand-made typography.
- Colour-code content categories with flat pastel tag chips. This is the only colour in the chrome.
- Build navigation and the footer as ruled table cells with 1px black dividers, like a form or ledger.
- Fill empty masonry gaps with halftone dot-pattern blocks, and put a faint graph-paper grid behind the frame.
- Use cream #fffef6 instead of white for the page, so the white cards read as paper laid on paper.

Full teardown: https://pageproofer.com/inspiration/fun-funky/oatly.md · Screenshots: https://pageproofer.com/images/inspiration/fun-funky/oatly/hero.jpg (first screen), https://pageproofer.com/images/inspiration/fun-funky/oatly/page.jpg (full page) · Tokens: https://pageproofer.com/inspiration/fun-funky/oatly/tokens.json

### Who Gives A Crap (https://www.whogivesacrap.org)

Who Gives A Crap pairs a chunky, black-italic custom display face with flat, saturated colour fields (tangerine, electric blue, lime, aqua) on a mostly white canvas, so an everyday commodity reads as cheeky, warm and giftable. The structure underneath is a disciplined, shadowless e-commerce layout with 8–12px cards, pill buttons and one cobalt action colour, which keeps the jokes and colour blocks from turning chaotic.

Palette: #ffffff background, #fafafa surface, #262626 text, #0f47ff accent, #ff7744 highlight, #d7f6a4 highlight, #b1e8eb highlight, #f5f0e0 surface. Type: Crapcase Display (Black Italic for hero/statement headings, Medium for section titles) headings, Crapcase Text body.

Signature moves:
- Set one hero line per section in a heavy black-italic display face at line-height 1.0 and let it carry the brand voice, while all other type stays upright and quiet.
- Flood whole bands or blobs with flat saturated brand colours (tangerine, lime, aqua, cobalt) instead of using gradients or shadows, and use colour fields as section dividers.
- Break the grid with a giant organic scalloped shape that bleeds off the viewport edge behind the key mission statistic.
- Make cobalt #0f47ff the single action colour for buttons, links, and category label bars. Switch to a lime pill only when the button sits on a coloured field.
- Write UI copy with jokes in functional places, such as the newsletter heading, the empty cart and the hero subline, so the personality lives in the words as much as the visuals.
- Shoot products on a warm kraft-cream backdrop so the patterned packaging pops, and keep these tiles consistent across the catalogue.

Full teardown: https://pageproofer.com/inspiration/fun-funky/who-gives-a-crap.md · Screenshots: https://pageproofer.com/images/inspiration/fun-funky/who-gives-a-crap/hero.jpg (first screen), https://pageproofer.com/images/inspiration/fun-funky/who-gives-a-crap/page.jpg (full page) · Tokens: https://pageproofer.com/inspiration/fun-funky/who-gives-a-crap/tokens.json

### Graza (https://www.graza.co)

Graza feels like a hip deli counter: warm blush-paper backgrounds, a punchy chartreuse block colour, deep olive-green ink, condensed Garamond display headlines paired with a typewriter body face, and hand-drawn olive characters that make a commodity product feel like a personality. It works because one dark ink colour carries all text and line work, so the loud lime and playful illustration never feel chaotic. The page reads as packaging design extended into a website.

Palette: #f6e6d9 background, #d1e030 accent, #fff4ec surface, #3c422e text, #fbd535 highlight, #9eef80 highlight, #000000 muted. Type: ITC Garamond Condensed headings, GT Alpina Typewriter body.

Signature moves:
- Set one dark olive ink (#3c422e) as the only colour for text, borders, icons and illustrations, so loud backgrounds like chartreuse stay cohesive.
- Pair a huge, compressed, high-contrast serif for headlines with a small typewriter face for everything else, so it reads like a menu or packaging label.
- Give pills a hard offset 'shadow' made from a dotted or hatched duplicate shape instead of a blur, which reads as printed rather than digital.
- Fill whitespace with charming hand-drawn line characters (smiling olives, a farmer, an olive with a tap) and stagger headlines left and right across a mostly empty canvas.
- Run the wordmark edge to edge as a giant typographic section, then follow it with a quiet one-line serif tagline.
- Use the product packaging colours (lime, yellow, mint) as section and card backgrounds so the site and the bottle feel like the same object.

Full teardown: https://pageproofer.com/inspiration/fun-funky/graza.md · Screenshots: https://pageproofer.com/images/inspiration/fun-funky/graza/hero.jpg (first screen), https://pageproofer.com/images/inspiration/fun-funky/graza/page.jpg (full page) · Tokens: https://pageproofer.com/inspiration/fun-funky/graza/tokens.json

### Poolsuite (https://poolsuite.net)

Poolsuite renders its homepage as a retro desktop: one cream, black-outlined Mac OS–style window floats in the centre of a flat salmon-pink field, with a pixel-icon dock pinned to the bottom and two small chips in the top corners. Nothing scrolls and nothing is pitched at you, so the page feels like an object you use rather than a page you read, and that suits a lifestyle music brand built on 80s and 90s nostalgia.

Palette: #f5d6d5 background, #faf3ee surface, #111111 text, #000000 border, #ceb7b5 muted, #a9dde2 accent, #f3c4c4 highlight, #e04a4a accent. Type: Custom bold condensed retro wordmark (POOLSUITE logotype) and a bold pixel-style sans for window titles headings, Small bitmap-style sans (Chicago/Geneva-like system font) for UI labels body.

Signature moves:
- Make the homepage a desktop: one draggable-looking app window centred on a flat pastel field, with no hero copy, no scroll and no marketing sections.
- Draw every surface with a 1px pure-black outline and a small radius, then nest bordered panels inside bordered windows so the UI reads as physical hardware.
- Use one candy accent per state: cyan fill marks the active control and pink fill marks a secondary action. Everything else stays cream and black.
- Navigate with a bottom dock of colourful pixel-art icons labelled in small type, which turns sections into 'apps'.
- Pin tiny bordered chips to the screen corners for account and clock, and set the CTA in uppercase typewriter mono so it reads like a system menu, not a button.
- Fill empty space and inactive areas with dither or dot textures, which gives retro authenticity without heavy imagery.

Full teardown: https://pageproofer.com/inspiration/fun-funky/poolsuite.md · Screenshots: https://pageproofer.com/images/inspiration/fun-funky/poolsuite/hero.jpg (first screen), https://pageproofer.com/images/inspiration/fun-funky/poolsuite/page.jpg (full page) · Tokens: https://pageproofer.com/inspiration/fun-funky/poolsuite/tokens.json

### Partiful (https://partiful.com)

Partiful pairs a stark black-and-white UI system (black text, black or white rectangular buttons, plain white cards) with a dreamy iridescent backdrop of pastel lavender, sky blue and peach gradients, plus a loud, grainy flash-photo hero. The restraint of the chrome lets the invites, photos and Gen-Z copy carry the personality, so the page feels like a party poster but still reads as a trustworthy tool.

Palette: #ffffff background, #000000 text, #e9dcf7 surface, #cfe3fb surface, #f7c6f0 highlight, #ffba85 accent, #5a5a5a muted, #f0f0f0 border. Type: TWK Lausanne Pan (850 for hero, 700 for section heads) plus a wide custom 'Partiful Display Medium' for some section titles headings, TWK Lausanne Pan 550 body.

Signature moves:
- Keep all UI chrome strictly black and white with sharp 4px buttons, and let iridescent pastel gradients (lavender, sky, peach, pink) bleed across section backgrounds to supply the colour.
- Set the hero headline enormous and ultra-heavy with 0.8 line-height and -3% tracking over a grainy, flash-lit lifestyle photo washed with a blue-to-magenta gradient.
- Show the product as tilted, floating UI fragments and notifications (RSVP push, comment thread, tickets) rather than full device screenshots.
- Drop emoji directly into headings and write in casual, joking voice ('Stalk the guest list', 'Evites are so last decade').
- Mix in Y2K/pixel-art stickers and a wide display face for section titles to signal fun without changing the base UI system.

Full teardown: https://pageproofer.com/inspiration/fun-funky/partiful.md · Screenshots: https://pageproofer.com/images/inspiration/fun-funky/partiful/hero.jpg (first screen), https://pageproofer.com/images/inspiration/fun-funky/partiful/page.jpg (full page) · Tokens: https://pageproofer.com/inspiration/fun-funky/partiful/tokens.json