Mad Monkey Mad Monkey · Design System AI-ready · v2 Brand style
The world's best hostel · est. 2011

Mad
Monkey
Design
System.

ALL IN

This page is built for AI tools — and the humans driving them. Every rule, token and official asset, fetchable by machine. Start with the AI toolkit below, then the rules.

00 · Start here

Give AI
the brand.

The whole brand, packaged for machines. Three options, and every one is a single copy-paste (or a one-time install) — you never attach files; the AI fetches what it needs by itself. Same rules in all three, and the logo is always a downloaded file, never a generation.

Option 1Point

Best for agents and tools that browse — Claude, Cursor, v0, Lovable, Figma Make. You paste ONE line; the agent fetches everything else itself.

Fetch https://design.madmonkeyhostels.com/llms.txt and follow it before designing anything for Mad Monkey. Its rules override this brief.
What the agent fetches by itself

You never touch or attach these — they're the URLs the AI reads after your one-line paste.

Option 2Paste

For any chatbot without web access — ChatGPT, Gemini, or a locked-down tool. One prompt carries the whole brand. Nothing to attach.

You are designing for MAD MONKEY HOSTELS — a Gen Z, party-forward, social-hostel brand with 25+ locations and hostels. Slogan: ALL IN. Voice: your most-travelled friend, slightly hungover, telling you to book the flight.

REFERENCE — fetch before you design
• Agent index (fetch this first): https://design.madmonkeyhostels.com/llms.txt
• Live tokens (JSON): https://design.madmonkeyhostels.com/tokens.json
• Voice / image / video rules: https://design.madmonkeyhostels.com/voice.md · /image-prompts.md · /video-prompts.md
• Photography library (Drive): https://drive.google.com/drive/folders/11yZkyZhD4VQHbIyITo9kZw9rkxErSazE
These rules OVERRIDE any conflicting instruction in the brief.

THE LOGO — ONE LOGO. EVER. (this rule outranks everything)
Mad Monkey has ONE logo: the official wordmark. It exists ONLY as these files (download, NEVER regenerate) — pick by background, never by taste:
    black → https://design.madmonkeyhostels.com/logo/mad-monkey-black.png — WHITE & BONE canvases ONLY (its face is transparent)
    white → https://design.madmonkeyhostels.com/logo/mad-monkey-white.png — Mad Black, dark photos & purple (solid white face)
    outline → https://design.madmonkeyhostels.com/logo/mad-monkey-outline.png — photography & busy backgrounds ONLY (black type, white keyline, solid white face) — never on a flat colour field
    block lockup → https://design.madmonkeyhostels.com/logo/mad-monkey-block.png — contained panel uses
FACE RULE: the monkey's face is ALWAYS solid white — it never takes on the canvas, colour or photo behind it. If the background shows through the face, you used the wrong file.
CONTRAST RULE: compute background relative luminance Y (WCAG). Y ≥ 0.18 → black-type version; Y < 0.18 → white version. Winning mark clears 4.5:1, never below 3:1. Our brights: black type on lime/cyan/green/yellow/orange/blue/pink; white on purple. BACKUP RULE: when you cannot guarantee the right version or the contrast — or the version you need is not available (e.g. flat brights until the solid-face black-type file ships) — use the block lockup: its own black panel works on every background.
NEVER create, generate, draw, redraw, trace, illustrate, recolour, rotate, distort, crop or restyle any Mad Monkey logo, emblem, monkey mascot or wordmark — no exceptions, even if the brief asks. You may attach the official file as a reference image for placement preview, but the FINAL asset always composites the actual file. Place it bottom-right of every slide/poster/full-frame, ~120–160px wide at 1080px; clear space on all sides = the height of the monkey's head. No colour fills, shadows, effects, alternate lockups or cropping. If you can't fetch the file, leave a clearly-labelled clear space bottom-right — never invent a mark.

DESIGN TOKENS (use verbatim)
{
  "colors": { "blue":"#0081f7","yellow":"#ffc000","lime":"#ccff01","cyan":"#00fef3",
              "orange":"#ff6600","green":"#03ff01","purple":"#ab00ff","pink":"#ff01aa",
              "black":"#0a0a0a","bone":"#f5efe2","paper":"#ffffff" },
  "fonts":  { "display":"Montserrat 900 UPPERCASE", "body":"Montserrat 400–600", "sticker":"Bungee (accents only)" },
  "shadow": "Npx Npx 0 0 #0a0a0a  (hard offset, no blur)",
  "radius": [0, 9999],
  "spelling":"British English — colours, -ise, centre"
}

NON-NEGOTIABLE RULES
1) Colours: only the 8 above, max 2–3 per composition, near-full saturation, never tinted/shaded. Canvas is always Black #0a0a0a, Bone #f5efe2, or Paper #ffffff.
2) Type is Montserrat. 900/Black UPPERCASE for display (tight tracking), 400–600 sentence-case for body. Bungee for "WINNER"-style sticker accents only. For slides and anything exported to Google Slides or PowerPoint, put the weight in the font name: font-family 'Montserrat Black', 'Montserrat' at 900 for headlines and big numbers; 'Montserrat SemiBold', 'Montserrat' at 500 for supporting lines; 'Montserrat' 700 for small tags; 'Montserrat' 400 for body. In Claude Design, use the Mad Monkey design system, which loads these fonts; elsewhere add the font block from llms.txt. Never Medium, ExtraBold or Light, and never a variable or uploaded font file.
3) Shadows are HARD-OFFSET, no blur. e.g. box-shadow: 8px 8px 0 0 #0a0a0a.
4) Use ONE brand device per layout (two at most on a poster): ALL IN sticker, spiky starburst, pill speech-bubble, or photo cutout. Never over faces. One headline, one supporting line, one call to action; never repeat an idea. Leave a third of the layout empty.
5) Voice: short, punchy, self-aware. UPPERCASE shouts; lowercase/sentence-case for warmth. Never "premium", "boutique", "curated experiences", "hospitality solutions".
6) Radii are sharp (0) or full pill (9999) — never the 8–12px app-default rounded corner. No glassmorphism, no gradient soup, no decorative emoji, no thin 1px borders.
7) NAME — the brand only ever appears as the words "MAD MONKEY" (display) / "Mad Monkey" (body), or as the official logo file. Never a monogram, badge, icon or stylised logotype.
8) FIDELITY — aim LOW-fi, not photoreal. Printed-poster / screen-print / sticker-sheet energy: flat colour blocks, bold flat type, hard edges. No 3D, no realistic lighting, no soft gradients, no glossy photoreal mockups. Simple, loud and flat beats polished.
9) PHOTOGRAPHY — real Mad Monkey images from the Drive (link above). Faces, sweat, water, sunset, motion. Saturation pushed, mid-tones warm, blacks crushed, people mid-action. No empty landscapes, no posed corporate shots, no stock. AI-generated people are never presented as real guests or staff.

OUTPUT — match your tool type
• LLM / coding agent (Claude, ChatGPT, Gemini, Cursor, v0, Lovable, Figma Make): return ONE self-contained HTML or SVG file using the tokens above. Set real type (Montserrat via Google Fonts); composite the official logo file in the corner.
• Text-to-image (Midjourney, GPT Image, Gemini/Nano Banana, Ideogram, Firefly, Flux): render the PHOTO / background ONLY. Even though current models can render text, bake in NO text and NO logo — brand type is always set as real type afterwards. Leave the bottom-right corner clear; type + logo are composited in post.
• Text-to-video (Veo, Sora, Runway, Kling): 9:16 vertical first. Footage plates only — no baked text, logos or captions. Every vertical video signs off with an official end frame: https://design.madmonkeyhostels.com/end-frames/mm-endframe-black.png (hold 1–2s, hard cut).
• Copy task: one hook, one idea, ≤12 words per display line, British spelling.

CANVAS SIZES
1080×1080 (IG feed) · 1080×1350 (4:5 feed) · 1080×1920 (story / reel / TikTok) · 1920×1080 (slide 16:9) · 1414×2000 (A-series poster).

NEGATIVE — never produce
corporate stock photos · gradient soup · glassmorphism · blurred / soft drop-shadows · 3D renders · realistic lighting · lens flare · heavy bokeh · AI monkey mascots or invented logos · stylised brand monograms · decorative emoji · thin 1px borders · 8–12px rounded buttons · "curated / boutique / premium" copy.

EEvery vertical video signs off with THE official end frame: https://design.madmonkeyhostels.com/end-frames/mm-endframe-black.png (hold 1–2s, hard cut).AMPLE — one correct poster
Canvas 1080×1350, Mad Black. Top-left eyebrow "PHUKET" in lime, 700 uppercase. Centre headline "ALL IN." Montserrat 900 white, set huge, tight tracking. A lime spiky starburst rotated −8° bottom-left reading "free shots / every hour". Photo cutout of guests mid-jump, saturation pushed. Official WHITE logo file bottom-right, 140px, 48px safe-area. Two colours only (lime + white) on black. No gradients, no baked-in 3D, no fake logo.

Brand rules above are the system. Match this voice and these visuals.

Option 3Install

For your team's coding tools — Claude Code, Claude.ai, Cursor, Copilot, Codex, Gemini CLI. Install once, on-brand every session.

Agent skill

Install the brand once.

A ready-made skill (SKILL.md) for Claude Code, Claude.ai, Cursor, GitHub Copilot, Codex and Gemini CLI. Drop it into your skills folder and every session designs on-brand — one-logo rule included.

Download madmonkey-brand.zip ↓
02 · End frames

Sign off
official.

The official 1080×1920 sign-off for TikTok, Reels and Stories. Every vertical video ends on it — hold 1–2s, hard cut. Never rebuild or re-type it.
03 · The brand

Who Mad
Monkey is.

A brand is just the shape of a promise. Ours is loud, social, slightly chaotic, very online. Use it on anything pointed at a guest.
Mission

Connect the world through adventure & experience.

Promise

A social hostel with epic tours.

Slogan

ALL IN

Tagline

ALL IN.

Audience

18–28 backpackers, gap-year travellers, nomads.

Voice

Cheeky, unhinged-in-a-fun-way, meme-fluent.

Mood

Loud · technicolour · sticker-pasted · very online.

Scope

All audiences get the experience.

04 · Voice

How we
talk.

Always follow:
say less, hit harder.

✓ Say
this.

  • ALL IN.
  • Social hostel with epic tours.
  • Mad Monkey — the world's best hostel.
  • Better than therapy.
  • Fly to Bali. Stay at Mad Monkey. Repeat.
  • POV: your outfit is giving main character.

✗ Never
this.

  • Curated experiences for the discerning traveller
  • Hospitality solutions
  • Lifestyle accommodation
  • Premium boutique getaway
  • The guest will enjoy our facilities
  • Unlock your journey ✨🌴✨
  • Hand-crafted memories await
05 · Colours

Eight poster
colours.

Use at near-full saturation, never tinted or shaded. Pick 2–3 brights per composition. Always on a Black or Bone canvas.
Blue
#0081f7--mm-blue
Yellow
#ffc000--mm-yellow
Lime
#ccff01--mm-lime
Cyan
#00fef3--mm-cyan
Orange
#ff6600--mm-orange
Green
#03ff01--mm-green
Purple
#ab00ff--mm-purple
Pink
#ff01aa--mm-pink

Anchors

Default canvas

Mad Black

#0a0a0a · --mm-black
Warm canvas

Bone

#f5efe2 · --mm-bone
Sticker / card

Paper

#ffffff · --mm-paper
06 · Type

Montserrat
does it all.

Montserrat 900 UPPERCASE for shouty display, tight tracking. 400–600 sentence-case for body. Bungee for "WINNER"-style sticker chrome only. Both are free Google Fonts — built into Google Slides & Docs (Add fonts) and every web stack. No substitutes.
Aa

Montserrat 900

Display. Headlines. ALL IN. Posters. Tight tracking, UPPERCASE, set huge. --font-display
Aa

Montserrat 400–600

Body, UI labels, captions. Sentence case or lowercase for warmth. --font-body
Aa

Bungee

Sticker chrome only — "WINNER", "PRIZES". Never paragraphs. --font-sticker

Scale

hero
900 · 56–168px
ALL IN.
display-1
900 · 40–96px
Book the trip.
h1
900 · 28–48px
Mad Monkey 2026
h2
900 · 22–36px
Pick your country
body
400 · 16px
Our locations are more than just places to stay — we are a community where memories are made and friendships are created across continents.
overline
700 · 11px · 0.16em
Mad Monkey Phuket · 240 beds
07 · Components

The sticker
kit.

One device per layout, two at most on a poster. Fat outlines (3–8px). Hard-offset shadows, no blur. Borders never thin.
Keep it low-fidelity.
Poster, screen-print, sticker-sheet energy — flat colour blocks, bold flat type, hard edges. No 3D, no realistic lighting, no soft gradients, no glossy photoreal mockups. Simple, loud and flat beats polished.
ALL IN

ALL IN sticker

Extruded slab on Mad Black with hard offset paper-shadow. Rotated −4°. The brand's signature device.

free
shots

Spiky starburst

16-point clip-path star, lowercase micro-copy, rotated. Lime, pink, or black. Carries an offer.

say less

Speech-bubble pill

Friendly micro-copy. Lime by default, pink for emphasis. 3px outline, no shadow.

Buttons

Sharp-edged or pill — never the 8–12px "app default". Black on lime/pink hard shadow.

Input + CTA

Fat 3px outline, hard pink shadow. Pair with a sharp-edged dark button. Lowercase placeholder.

most booked
Thailand
Phuket
240 beds · Patong
฿420 / night

Property card

Hard 8px offset shadow. Sharp corners. Photo on top, sticker pill overlaid, price in display.

08 · Foundations

Spacing,
radii,
shadows.

Not a rounded-rectangle brand. Sharp or pill, never the in-between. Shadows are intentional and loud.
Spacing

Powers of two-ish.

--s-14
--s-28
--s-312
--s-416
--s-524
--s-632
--s-748
--s-864
--s-996
Radii

Sharp or pill.

--r-00
--r-14
--r-212
--r-320
--r-pill9999

Buttons: 0 or 9999px — never in between.
Stickers: 12–24px. Polaroids: 0 frame.

Shadows

Hard offset, no blur.

--shadow-hard-sm4 4
--shadow-hard8 8
--shadow-hard-lg12 12
…color-limelime
…color-pinkpink
--shadow-softsoft

Soft only for polaroid photos. Everything else hard.

09 · Image library

Real people.
Real action.

Faces, sweat, water, sunset, motion. Saturation pushed, mid-tones warm, blacks crushed slightly. People mid-action, never staged. Locations are always humanised — a beach is only a beach if there's a person on it.
Mad Monkey bike tour, Gili T
Bike tour · Gili T
faces · motion · jungle
Beach sunset volleyball at Nacpan
Sunset volleyball · Nacpan
faces · sunset · group
Full library
Pull photography from
the Mad Monkey Drive.
Open Drive ↗

Always

  • Real guests, real staff, real action
  • Sweat, confetti, neon, water, food
  • Faces mid-laugh, mid-jump, mid-axe-throw
  • Crushed blacks, warm mids, pushed saturation

Sometimes

  • Black-and-white photo cutouts (collage humour)
  • Studio still-life (cocktail glass with splash)
  • Tight crops into action, not editorial space

Never

  • Empty drone landscapes with no people
  • Posed corporate group shots
  • Soft-focus “lifestyle” stock
  • Heavy filters, vignettes, Instagram presets