Brand toolkit
The Wild N Well
design system.
Everything the site is built from, colour, type, spacing, buttons and section patterns, so you can add Socials, new retreats and new pages without the design drifting.
Voice
Every line on the site should pass three tests: is it warm, is it confident, and would you actually say it out loud?
Sounds like us
- “Come make something.”
- “For women who are done waiting for permission.”
- “No experience needed. That’s the whole point.”
- “Zero sage. Zero beige.”
Never us
- “Unplug, restore, realign.”
- “Hold space for your highest self.”
- Exclamation marks in threes. Emoji in headlines.
- Anything that asks her to be a calmer version of herself.
Warm
Talk to one woman, not an audience.
Direct
Short sentences. Say the price, say the date.
Cheeky
One wink per page. Never two.
Colour
Ivory, pearl, brushed gold and charcoal create a sanctuary that feels collected rather than decorated. Nothing else gets added without a very good reason.
Ivory
background: oklch(0.985 0.008 82)
Default page background and breathing room.
Pearl
ink: oklch(0.945 0.015 80)
Quiet feature bands, forms and footer surfaces.
Antique gold
ember: oklch(0.62 0.085 76)
A deeper metallic accent for actions and emphasis.
Gold
gold: oklch(0.67 0.072 78)
Brushed-gold buttons, eyebrows, hairlines and links.
Soft pearl
secondary: oklch(0.955 0.018 80)
Alternate light section, to create a gentle page rhythm.
Card
card: oklch(0.968 0.014 80)
Panels and listing cards sitting on ivory.
Muted text
muted-foreground
Body copy and supporting lines. Never for headlines.
Line
border
Hairline rules between rows and sections.
Rules
- Gold is structural, not ornamental: use it for rules, labels and decisive actions.
- Keep most of every page ivory or pearl so photography remains the richest colour.
- Alternate ivory and pearl surfaces to create rhythm without heavy blocks.
- Use charcoal ink for legibility and warmth, never stark black.
Typography
Two families only. Playfair Display carries emotion; Montserrat carries information with restraint.
display-xl · Fraunces · page headline, one per page
Come make something.
display-lg · Fraunces · section headline
Pick your level of wild.
display-md · Fraunces · card and row titles
Dried Floral Studio
eyebrow · Jost · uppercase label above a headline
Workshops · 1.5–2 hours
lede · Jost · the sentence under a headline
The easiest way into Wild N Well. One beautiful thing to make, a drink worth holding, and two hours that belong to you.
body · Jost · paragraphs, max 65 characters wide
Twelve women flew into a rainforest island on the edge of the Pacific. We hiked ridgelines in the rain, ate fresh-caught dinners at a long table, and talked the way you only talk when nobody needs anything from you.
Hierarchy recipe
Eyebrow → headline → lede → action. In that order, every time. One headline per section; if you need two, you need two sections.
Never
No third font. No serif body copy. No centred paragraphs (centred headlines over a photo are fine). No all-caps longer than five words.
Spacing & layout
Generous space is the whole aesthetic. When a page feels cheap, it's almost always that something needs more room, not more decoration.
Column patterns
Three up
Experiences, testimonials, benefits
Two up, image left
Founder story, retreat story
Wide + narrow
Event copy beside a details list
Full-bleed image
Hero and mid-page pause
Everything collapses to one column on mobile in source order, so write sections top-to-bottom in the order they should be read on a phone.
Buttons & links
One ember button per screen is the main action. Everything else is outline, light or a plain underlined link.
Label style
Uppercase, 0.22em letter-spacing, 0.72rem.
Hover
Ember → ink, outline → filled ember. 300ms.
Wording
Verb first: "Book", "Reserve", "Get on the Wild List".
Section patterns
Six blocks build every page on this site. Duplicate these rather than inventing new layouts.
A · Listing row (What's Coming)
Dried Floral Studio
Book →First Social
Book →B · Event card (Workshops, Socials)
Event title goes here
Two or three sentences on what she’ll actually do, and who it’s for. End on the reassurance.
- When
- Date · time
- Where
- Venue, town
- Price
- $ per woman
- Capacity
- N spots
C · Testimonial trio
“One sentence of what changed for her.”
“One sentence of what changed for her.”
“One sentence of what changed for her.”
D · Image & story
Eyebrow
A headline with a point of view.
Two short paragraphs, then one link out. Never more than two paragraphs beside an image.
E · Wild List capture (ends every page)
Be first to know what’s coming next.
Same words, same place, every page.
Photography
Photos carry the brand, so they get the most space and the least treatment. iPhone shots are fine, candid beats polished here.
Choose
Real moments, hands, weather, food mid-meal. Nobody posing in a doorway.
Treat
Slight desaturation, a touch of contrast (img-warm). No heavy filters, no vignettes.
Place
Full-bleed for heroes, tall crops beside text, 4:3 in grids. Never a drop shadow.
Every image needs alt text describing what’s happening, “women arranging dried flowers in a greenhouse”, not “workshop photo”. It’s how the site gets found, and it’s how it works for women using a screen reader. When the professional Sitka gallery lands, swap the files in the same crops and nothing else changes.
Page recipes
Building the Socials page or a second retreat? Follow the order below and the page will look like it was always there.
New offering page
- 01Photo hero + eyebrow, headline, lede
- 02Three-up: the ways to take part
- 03Event cards for live dates
- 04How it works, three steps
- 05Policies on ink
- 06Wild List capture
New retreat page
- 01Full-bleed hero, headline, lede
- 02Story + image, with the numbers row
- 03Testimonial trio on sand
- 04What's included list
- 05Waitlist capture on ink
New workshop date
- 01Duplicate the event card
- 02Swap title, date, venue, price, capacity
- 03Add the photo (4:3 crop)
- 04Add the row to What's Coming on the homepage
- 05Announce to the Wild List
The four-second test
Before any new page goes live, open it cold and answer: What is Wild N Well? What can I do? What’s coming next? How do I join? If a page can’t answer all four in seconds, cut something, don’t add.