✦ BRIEF
Welcome
Website Brief Wizard
DESIGN
BRIEF

Answer 8 focused questions. Walk away with a complete website specification — palette, typography, interactions, and a prompt that builds it in Claude Code.

🎨 Colour direction ✦ Typography pairing ⚡ Interactions 📋 Build prompt

Takes about 3 minutes · No account needed

01
Step 1 of 7 · Identity

Tell us about
your business

The foundation everything is built on.

🍽 Restaurant ✂️ Salon 💪 Fitness 🏛 Architecture 🛎 Hotel 📷 Photography ⚖️ Legal ✨ Beauty ☕ Coffee 🛋 Interiors 🥃 Distillery 🌸 Florist 🎨 Tattoo 🏄 Surf 🌿 Nursery

Primary goal of this website

🛒
Sell products or services
Drive purchases, bookings, transactions
✓
📞
Generate enquiries and leads
Get people to call, email, or fill a form
✓
🏆
Showcase portfolio and work
Let your work attract the right opportunities
✓
📣
Build brand awareness
Tell your story and grow your audience
✓

Please enter your business name and industry to continue.

02
Step 2 of 7 · Brand Personality

What world does
your brand live in?

This single choice shapes every colour, typeface, and interaction on your site.

✓
REFINED
Elegant · Authoritative · Timeless
Think: Cartier, Chanel, The Ritz-Carlton

Deep rich palettes. Serif typography. Restrained animations. Every detail considered. This brand doesn't shout — it commands attention through quiet confidence.

luxurytrustheritagepremium
✓
CREATIVE
Bold · Expressive · Surprising
Think: Airbnb, Figma, Oatly

Unexpected colour pairings. Asymmetric layouts. Typography with personality. This brand has a clear point of view and isn't afraid to show it.

artdesignculturebold
✓
ENERGETIC
Dynamic · Direct · Relentless
Think: Nike, Apple, Peloton

High contrast. Kinetic type. Full-bleed impact. This brand moves fast and looks powerful doing it. No decoration — pure signal.

sportfitnesstechimpact
✓
SENSORY
Warm · Inviting · Experiential
Think: Aesop, Le Labo, Noma

Earthy warmth. Rich textures. Slow considered animations. This brand makes you feel something — a place, a scent, a taste. Deeply human.

foodwellnessnaturecraft

Please select a brand personality to continue.

03
Step 3 of 7 · Colour Direction

Choose your
colour world

Select up to 2 palettes. These establish the emotional tonal range of your site — from deepest dark to lightest light, with your key accent.

Exact tones will be refined with your developer. These palettes establish the emotional direction and will be used verbatim in the build prompt.

Please select at least one colour palette to continue.

04
Step 4 of 7 · Typography & Layout

Find your
typographic voice

Typography is responsible for 95% of visual design. Each pairing creates a completely different brand world.

✓
The Art of
Considered Design
Subtitle in Playfair italic
Body copy in Inter Regular. The pairing of classic serif display with a clean neutral sans creates the exact tension that luxury brands live in.
Editorial Serif
Playfair Display 700 + Inter 400
luxuryfashionculture
✓
Clarity Through
Simplicity
Subtitle in DM Sans medium
Body in DM Sans regular. Single-family, weight-driven hierarchy — geometric precision, confident and modern without ever feeling cold.
Modern Sans
DM Sans 700 + DM Sans 400
techSaaSminimal
✓
WE PUSH
THE LIMITS
Subtitle in condensed light
Body in Barlow regular. The contrast between compressed display and open body text creates kinetic energy — every headline feels like a starting gun.
Bold Condensed
Barlow Condensed 700 + Barlow 400
sportfitnessimpact
✓
Grown with care,
crafted with love
Subtitle in Fraunces regular
Body in Instrument Sans. Fraunces brings genuine warmth and quirkiness — paired with a clean humanist sans it feels artisanal without being rustic.
Warm Humanist
Fraunces 700 italic + Instrument Sans 400
craftnatureartisan

Please select a typography style to continue.

Layout

How should your
site feel to navigate?

Layout personality determines how content is paced and experienced.

✓
Editorial
Asymmetric hero, overlapping panels, off-grid type. The layout itself is the design.
Best for: Creative agencies, fashion, culture, architecture
✓
Structured
Balanced grids, clear hierarchy, white space as a feature. Ordered and trustworthy.
Best for: Legal, finance, consulting, healthcare, SaaS
✓
Bold
Full-bleed imagery, diagonal section cuts, maximum contrast. Makes an entrance.
Best for: Fitness, sport, music, nightlife, disruptive brands
✓
Immersive
Rich layered gradients, generous breathing room, slow atmospheric animations.
Best for: Wellness, hospitality, fragrance, fine food

Please select a layout style to continue.

05
Step 5 of 7 · Interactive Features

Make it
feel alive

These micro-moments separate memorable sites from forgettable ones. Pick what fits your brand's energy.

A
Cursor & Pointer
How the cursor behaves across your site
0 / 1
▼
Cursor TrailDots follow cursor with increasing lag
⊕
Magnetic ButtonsButtons physically attract the cursor
Cursor SpotlightRadial gradient reveals content under dark veil
◱
3D Tilt CardsCards tilt in perspective with mouse position
Cursor MorphShape changes: circle, crosshair, arrow by context
B
Scroll Effects
What happens as the page scrolls
0 / 2
▼
Scroll Progress BarThin gradient line at top tracks scroll depth
BRAND
Horizontal ScrubLarge text translates sideways as you scroll
SECTION
Sticky Side LabelSection name floats at the viewport edge
Wordbyword
Word RevealText flows in word-by-word on scroll into view
·:·
Velocity ParticlesFast scroll spawns drifting accent particles
Section Colour ShiftBackground transitions between tones per section
C
Text Animation
How headlines make their entrance
0 / 1
▼
A#B%
Scramble RevealLetters cycle random chars before decoding
Type|
TypewriterTagline types itself with blinking cursor
GL!TCH
Glitch EffectTitle flickers with channel-split distortion
TOPBTM
Split RevealHeadings halves slide apart on scroll
D
Visual Atmosphere
Ambient depth and texture behind content
0 / 2
▼
Film GrainSVG noise overlay adds analogue texture
⧉
Parallax LayersHero elements move at different speeds for depth
⁕·⁕·⁕
Canvas Particles40–60 drifting dots connect into a live network
CSS BlobOrganic shape morphs slowly in the background
▣
GlassmorphismCards use backdrop-blur for frosted glass effect
Gradient MeshMulti-point animated colour gradient fills the hero
E
UI Moment
The one interaction that surprises and delights
0 / 1
▼
⊞→⬛
Gallery LightboxClick image to expand full-screen with navigation
◧⇔◨
Before / After SliderDrag a handle to reveal two states side-by-side
☰+
Accordion DetailsCards expand to reveal detail and pricing
⊙
Floating WidgetFixed button expands to contact card bottom-right
〔A〕B
Tab ContentTabbed panels for services or portfolio categories
▶ BRAND
Loading IntroBranded screen splits to reveal site on first visit
06
Step 6 of 7 · Content

Quick content
details

No long answers needed — these shape the structure and copy direction of your build prompt.

Services or offerings to feature

Team or people to feature

3 key stats

Target audience

Tone of voice (pick up to 2)

Photography

Primary call-to-action

✓
Complete · Your Brief is Ready

Your website
brief

A complete specification — share with your developer, or paste directly into Claude Code to build it.

Your Business
Industry

Interactive Features

    Included Sections

      Content Summary

        FULL SPECIFICATION