homebeach.net · Design System v2.0

Style Guide.

Everything you need to build things that feel like homebeach. Colours, type, components, voice — all in one place.

01

Colour Palette

Official Brand Palette — 7 Colours
Ocean Blue#00A8E8--blue
Deep Navy#005F80--navy
Sand#F7D060--sand
Coral#F5825A--coral
Palm Green#4CAF50--green
Cream#F8F6EC--cream
Ink#111111--ink
Gradients
--grad-hero
--grad-quotes
--grad-games
--grad-amber
--grad-coral
--grad-sky
--grad-lime
--grad-pink
--grad-teal
02

Typography

Font Families Display / Headings: Bangers (regular — single weight) Body copy: Nunito (400, 300, italic) Labels / Code: Space Mono (400, 700)
Google Fonts Import family=Bangers family=Nunito:ital,wght@0,300;0,400;0,600;1,300;1,400 family=Space+Mono:wght@400;700
DisplayBangers · clamp(3rem, 8vw, 6rem) · ls 0.02em
homebeach
H1Bangers · clamp(2.8rem, 5vw, 4.5rem) · lh 0.95
Beach Bar is Open
H2Bangers · 2rem · lh 1.1
Drinks that taste like vacation
H3Bangers · 1.4rem · lh 1.2
The Painkiller
Body LargeNunito · 400 · 1.15rem · lh 1.7

No agenda. No meetings. No pants required. Just you, the sun, and something cold in your hand.

BodyNunito · 400 · 1rem · lh 1.65

A single grain of sand takes roughly 10,000 years to travel from mountain to beach. It's been on a longer journey than any of us. Show some respect.

Body SmallNunito · 400 · 0.9rem · color: --text-light

Combine rum, pineapple juice, orange juice, and cream of coconut in a shaker with ice. Shake well and pour over fresh ice.

Italic / QuoteNunito · italic · 1.1rem · color: --text-light

The sea, once it casts its spell, holds one in its net of wonder forever.

Mono LabelSpace Mono · 0.65rem · uppercase · ls 0.3em
🍹 beach bar is open
03

Buttons & Interactive Elements

Primary Actions
Outline & Ghost
On Dark Backgrounds
Sizes
Section Tag Pills — with custom SVG icons
beach bar is open useless knowledge for the bored
wisdom from the shore
/* Button base */ font-family: 'Bangers', cursive; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.7rem 2rem; border-radius: var(--radius-pill); transition: transform 0.15s, box-shadow 0.15s; /* Primary button — Ghost hard shadow */ border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); /* Hover state: all hard-shadow buttons */ transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink);
04

Card Components

Cocktail Card
🍍
The Painkiller
British Virgin Islands classic.
▶   See the recipe
🥊
Rum Punch
One sour, two sweet, three strong.
▶   See the recipe
🩵
Blue Lagoon
Looks like the ocean. Tastes better.
▶   See the recipe
Quote Card — Light
"

The ocean stirs the heart, inspires the imagination, and brings eternal joy to the soul.

— Wyland
"

Live in the sunshine, swim the sea, drink the wild air.

— Ralph Waldo Emerson
Quote Card — Dark (on ocean background)
"

I followed my heart and it led me to the beach. The heart knew what it was doing.

— Anonymous, extremely wise
"

A bad day at the beach is still better than a good day at the office. This is science.

— Someone who works indoors
Fact Card
🪨

Sand is just very patient rock

A single grain takes 10,000 years from mountain to beach. Show some respect.

🌊

The ocean is mostly unexplored

More than 80% of Earth's oceans remain unmapped. Whatever's down there isn't checking email.

Game Card (on dark background)
🌊 Game One coming soon 🦀 Game Two coming soon 🌴 Game Three coming soon
05

Layout & Spacing

Spacing Scale
--space-xs
0.5rem · 8px
--space-sm
1rem · 16px
--space-md
2rem · 32px
--space-lg
3.5rem · 56px
--space-xl
5rem · 80px
Border Radius
--radius-sm
8px
--radius-md
16px
--radius-lg
20px
--radius-pill
50px
Shadow Levels

--shadow-sm
Subtle cards

--shadow-md
Cocktail cards

--shadow-lg
Hover states

Page Layout Rules Max content width: 1000px (section-inner) Section padding: 5rem top/bottom · 2rem left/right Card grid gap: 1.5rem — 1.8rem Cards min-width: 260px — 290px (auto-fill) Games grid min-width: 200px Section backgrounds alternate: Light sections → --cream (#fffaf0) or --sand (#fef0c8) Ocean section → --grad-quotes (blue) Games section → --grad-games (dark green/black) Wave SVG dividers connect all sections. Max-width wrapper is always centred with margin: 0 auto.
06

Voice & Tone

homebeach has a specific personality. It's relaxed, a little funny, self-aware, and never takes itself seriously. Every word on the site should feel like it was written from a beach chair with a drink in hand.

✓ Do — Relaxed

Write like you're already there

Assume the reader is on vacation or wants to be. Slow it down. No urgency. No "click here" or "don't miss out." Just good vibes.

✓ Do — Dry Humour

Be funny without trying too hard

Deadpan works best. "This fact has no useful application whatsoever." No exclamation marks, no LOL. Just say the thing with a straight face.

✓ Do — Confident

Make small declarations

Don't hedge. "This drink only works outdoors." "The heart knew what it was doing." Short, decisive sentences land harder than long explanations.

✓ Do — Self-aware

Acknowledge the absurdity

The site is about nothing. Own it. "No agenda. No rush. No refunds." Lean into the fact that this is a place that exists purely to exist.

✗ Don't — Hype

Never be breathless or urgent

Avoid: "Amazing!", "You won't believe!", "Limited time!", exclamation marks in general, ALL CAPS for emphasis, or anything that sounds like an ad.

✗ Don't — Corporate

No formality, no jargon

Avoid: "Discover our curated selection," "Experience the difference," "We're passionate about," or anything that could appear in a brand brief.

Examples — Rewriting in homebeach voice
✗ Wrong

"Discover our amazing selection of tropical cocktail recipes, guaranteed to elevate your summer experience!"

✓ Right

"Drinks that taste like vacation. No bartender needed. Just ice, good ingredients, and zero accountability."

✗ Wrong

"Here are some interesting fun facts about beaches and oceans that you might not know!"

✓ Right

"Beach facts you never needed. Whatever's down there, it isn't checking its email."

✗ Wrong

"Click below to explore our games section and enjoy hours of entertainment!"

✓ Right

"Made by hand. Probably work most of the time. No refunds."

The One-Line Test

Before publishing any copy on homebeach, ask: "Would someone say this from a beach chair?" If it sounds like it belongs in a boardroom, a press release, or a banner ad — rewrite it. If it sounds like something you'd actually say to someone at a barbecue, it's probably right.

07

Icon System

Dual icon system: functional SVG icons for buttons and tags (inline, colour-controlled via CSS); illustrated PNG sticker icons for section decoration (72px, themed ghost-style illustrations).

Functional SVG Icons — inline, colour via class
Cocktail#icon-cocktail · drinks tag
Sun#icon-sun · quotes tag
Wave#icon-wave · facts tag
Controller#icon-controller · games tag
Functional SVG Icons — on dark background
Cocktail--blue on dark
Sun--sand on dark
Wave--white on dark
Controller--green on dark
PNG Sticker Icons — 72px section decorations
drink icon
Drinkicon-drink.png · cocktails
sun icon
Sunicon-sun.png · quotes
wave icon
Waveicon-wave.png · facts
palm icon
Palmicon-palm.png · general
sunglasses icon
Sunglassesicon-sunglasses.png · hero drift
Functional Icon Sizes
13px · pill tags
16px · buttons
24px · inline
36px · card header
48px · showcase
/* FUNCTIONAL SVG — inline with text/buttons */ <svg width="16" height="16" class="icon-blue"> <use href="#icon-cocktail"/> </svg> /* Color via .icon-* class — swap class, no redraw */ .icon-blue .icon-navy .icon-sand .icon-coral .icon-green .icon-white .icon-ink /* Sizes in use */ 13px → section tag pills 16px → buttons with icons 48px → style guide showcase /* SVG stroke spec */ stroke-width: 3.5px · stroke-linecap: round · stroke-linejoin: round /* PNG STICKER ICONS — section decoration */ <div class="section-icon-wrap"> <img src="images/icon-drink.png" class="section-icon-img"> </div> /* Rendered at 72px height, full opacity on light bg */ /* Use filter: brightness(0) invert(1) opacity(0.7) on dark bg */