Quiet Nest Design System · v1.0 · May 2026

The Welcomenest Brand Guide

Everything someone would need to design, write, photograph, or build for Welcomenest without asking. Internal reference. Living document. Share the URL with anyone working on the brand.

1 · The brand in one line

Welcomenest is the mum-to-mum journey through every stage of childhood.

Not a kids store. Not a baby brand. A quiet preparation system for the real years of motherhood — built on stage-led navigation, personalisation, and made-to-order craft.

2 · What we are. What we aren’t.

3 · The company we keep

When in doubt about a creative decision, ask: what would these brands do?

• Lovevery — for stage-based product discovery and “right thing, right time” logic
• The Memo (AU) — for curated, mum-trusted essentials
• Nature Baby — for organic softness and natural-light photography
• Mushie — for muted, minimalist baby aesthetics
• Aesop — for editorial restraint and grown-up voice
• Fox & Fallow — for hand-illustrated warmth

When in doubt about what we’re not: anything with confetti, anything with countdown timers, anything that yells.

4 · The four stages

Our entire site, product line, and content strategy is organised by these four stages of motherhood, not by age in years.

Future sub-stages. When product volume justifies, Primary may split into Prep (5–6yr), Early Primary (Y1–2), and Mid Primary (Y3–6). For now, four stages keeps the brand emotionally clean.

5 · Voice & tone

We sound like a trusted friend who’s two years ahead of you in motherhood. Calm. Confident. Specific. Italic when we feel something. Roman when we explain something.

We never sound like

• A sales associate (“Don’t miss out!”)
• An influencer (“You guys, I am OBSESSED with this!”)
• A startup PR voice (“revolutionary”, “game-changing”, “disrupting”)
• A children’s TV character (“Yay! Hooray!”)
• An AI-written product description (“crafted with care”, “perfect for any occasion”)

Word choices

Use	Avoid
Personalised	Custom
Made to order	On-demand
Designed in Melbourne	Australian-made
The journey	The customer experience
Mum	Mom or Parent
Little one	Kiddo
Stage	Age
For one	Custom-made
Hand-finished	Handcrafted

Headline patterns we love

• The question — “Where are you in the journey?”
• The definitive — “The running years.”
• The intimate — “We started where every mum starts — at the gate, with a bag too big or too small.”
• The specific — “Made to order in 5 to 7 days.”

6 · Logo

The Welcomenest wordmark is the brand mark. There is no separate logomark, no monogram, no icon. Just the word, typeset in italic Fraunces, weight 500, ink (#2c2c2c). A small sage accent dot sits to its right as the brand signature.

• Always italic. Roman Fraunces is reserved for headings, not the logo.
• Always with the sage dot. It pulses at 3.6s intervals as a brand signature.
• Letter-by-letter draw-in on first paint of every page.
• Hover triggers a letter wave.
• Minimum height: 24px mobile, 32px desktop.
• Clear space: 1× wordmark height on all sides.

7 · Colour palette

Primary

Accent

Stage gradient progressions

Each stage flows into the next through a warm gradient sequence. This is the colour story of the journey scroll on the homepage.

Stage	From	To
Newborn	Cream #f5efe7	Blush #f5e6db
Toddler	Blush #f5e6db	Oat #efe6d5
Kinder	Oat #efe6d5	Clay #e9e6d9
Primary	Clay #e9e6d9	Sage #e5ebde

What we never use

• Pure white #ffffff — always cream or off-white instead
• Pure black #000000 — always ink #2c2c2c
• Bright primary colours (red, yellow, electric blue)
• Highly saturated pastels (mint green, sky blue, hot pink)
• Cool greys (#888, #999)
• Gradients with more than two stops or contrasting hues

8 · Typography

Headings — Fraunces

• Italic, weight 400–500 for emotional/hero headings
• Roman, weight 500 for structural/utility headings
• Letter-spacing −0.015em to −0.02em (slightly tightened)
• Line-height 1.04–1.15
• Size: clamp(28px, 5.5vw, 68px) for heroes; clamp(24px, 3.6vw, 38px) for sections

Body — Inter or Fraunces italic

• Inter, weight 400 for utility/structural body
• Fraunces italic, weight 400 for emotional body and pull quotes
• Line-height 1.6–1.7
• Size 16–18px

Labels & eyebrows — JetBrains Mono

• Weight 500, size 10–11px
• Letter-spacing 0.22–0.26em
• Uppercase
• Always sage (#8a9a7a) for eyebrows; warm grey for utility

Stage numbers — Fraunces italic, light

The 01 / 02 / 03 / 04 stage numbers are typeset in italic Fraunces weight 300, large (clamp 48–76px), and always coloured clay (#b8967a). They are decorative, not functional — never used outside the stage context.

9 · Photography & illustration

Illustration (commissioned)

• Watercolour, painterly, breathing imperfect linework
• Cream-gradient circular medallion framing inside the image (not a hard CSS clip)
• Diverse skin tones, natural diversity, never tokenism
• Australian native plush companions: koala (newborn/toddler), wombat (kinder), quokka (primary)
• Generated via ChatGPT GPT-Image-1 with the Welcomenest Master Style Guide prompt
• Square 1024×1024 for medallions, landscape 1792×1024 for hero

Illustration: what we never do

• Vector / flat illustration
• Cartoon or anime style
• Photorealistic 3D render
• Cel-shaded or comic-book style
• Bright primary palette
• Named living illustrator references in prompts (triggers moderation)

Photography

• Natural light only — no strobes, no ring lights
• Neutral backgrounds: cream linen, raw oak, wool blanket, soft bedding
• In-context shots: bag on a hook, child’s hand on a buckle, lunch table, morning sunlight on a window seat
• Hands and feet over faces; when faces, profile or candid only
• Aspect ratios: 4:5 portrait, 1:1 square, 16:9 hero landscape

Photography: what we never shoot

• Children posed smiling at the camera
• Studio lighting with white seamless backdrops
• Stock photography
• Flat lays with props in perfect grids
• Trending TikTok-style or aesthetic-of-the-month content

10 · Layout principles

White space is the most important element on every screen. If you’re unsure whether to add or remove something, remove.

• Cards: 22–28px internal padding, 20px radius, 1px sage hairline (18% opacity)
• Sections: 80–100px vertical padding (desktop), 60–80px (mobile)
• Gutters: 16–24px between elements
• Max-widths: 1280px content, 760px text-only, 580px body copy
• Grids: 4-col products, 2-col hero/story (1.05fr / 1fr asymmetric is preferred)
• Shadows are warm, always — clay tone, never grey: rgba(184,150,122,…)
• Border radius scale: 10px buttons, 14px illustrations, 20px cards, 100px pills, 50% medallions

11 · Motion language

Slow. Always slow. Welcomenest moves at the pace of a mum putting a sleeping baby down, not at the pace of a startup launch video.

Easing functions

cubic-bezier(0.16, 1, 0.3, 1)       /* entrances     */
cubic-bezier(0.4, 0, 0.2, 1)        /* transitions   */
cubic-bezier(0.34, 1.56, 0.64, 1)   /* gentle overshoots */

Motion patterns we use

Pattern	Duration	Where
Scroll reveal (fade + rise)	0.95s	Every text block, every card
Card breath	8s loop	Wizard cards at rest
Ken Burns image zoom	22s loop	Hero image
Letter draw-in	0.95s per letter, 0.055s stagger	Logo wordmark
Float drift	18–32s loop	Background blurs
Sparkle twinkle	3–7s loop	Wizard background dots
Sage dot pulse	3.6s loop	Logo accent, badge dots
Parallax	scroll-driven, 0.15–0.3 speed	Journey illustrations
Marquee scroll	45s loop	Brand promise band

What we never do

• Snappy 200ms animations — everything is slower
• Bouncing or springy entrances (except the subtle overshoot easing)
• Scroll-jacking that fights the user
• Auto-playing video with sound
• Confetti, sparkles in primary colours, party effects

Always honour the user’s reduced-motion preference. The site must be fully usable with all animations disabled.

12 · Components

Buttons

• Primary — ink background, cream text, 16px×28px, 10px radius, uppercase tracked label
• Ghost — transparent, ink border, ink text, same dimensions
• Link CTA — underlined sage, 3px underline offset, hover deepens to ink
• Hover: translateY(-1px), background slightly darker; arrow translates 3–4px right

Cards

Off-white background, 1px sage hairline at 18% opacity, 20px radius, 22–26px padding, soft warm shadow. Hover lifts 10px, deepens shadow, and (where applicable) scales internal illustration 1.04.

Eyebrow labels

Mono, 10–11px, 0.22–0.26em letter-spacing, uppercase, sage colour. Used above every section heading.

Stage badges

Mono age range: “0–12 MONTHS”, “1–3 YEARS”, etc. 11px, 0.24em tracking, uppercase, sage. Always paired with a Fraunces italic stage number.

Marquee bands

Slow horizontal scroll (45s loop), italic Fraunces text, sage dot separators. Pauses on hover. Used between hero sections and the journey scroll.

13 · Anti-patterns — the “never” list

These break the brand. If a teammate suggests one of these, push back.

• Hero text larger than 76px
• Countdown timers
• Discount badges (no “% OFF” callouts)
• Multiple CTAs above the fold
• Stock photography
• Icon-heavy interfaces (we use 4 icons, max, ever)
• “SALE” energy of any kind
• Confetti or party effects
• Newsletter pop-ups that block content
• Cookie banners that overlay the wizard
• Star ratings as the primary trust signal
• Influencer-style copy
• Emojis in headlines
• Cartoon graphics
• Pure white or pure black anywhere

14 · Quick reference

COLOUR
Cream      #f5efe7   Base background
Off-white  #fefcf8   Card surfaces
Sage       #8a9a7a   Brand accent, eyebrows
Blush      #e3c4b8   Newborn stage
Oat        #ede4d3   Toddler stage
Clay       #b8967a   Kinder stage, shadows, stage numbers
Ink        #2c2c2c   Body text, primary CTAs
Warm grey  #5c5854   Secondary text

TYPE
Fraunces italic 400-500   Emotional headings
Fraunces roman 500        Structural headings
Fraunces italic 400       Emotional body, pull quotes
Fraunces italic 300       Stage numbers (clay)
Inter 400                 Utility body, buttons
JetBrains Mono 500        Labels, eyebrows, age tags (uppercase, tracked)

MOTION
Enter      cubic-bezier(0.16, 1, 0.3, 1)         duration 0.95s+
Transition cubic-bezier(0.4, 0, 0.2, 1)          duration 0.4-0.55s
Overshoot  cubic-bezier(0.34, 1.56, 0.64, 1)     duration 0.7-0.9s

SURFACE
Hairline   1px solid rgba(138, 154, 122, 0.18)
Shadow sm  0 4px 20px rgba(184, 150, 122, 0.06)
Shadow md  0 16px 40px rgba(184, 150, 122, 0.15)
Shadow lg  0 30px 80px rgba(184, 150, 122, 0.12)
Radius     10px buttons | 14px illustrations | 20px cards | 50% medallions