Listen first
Begin by understanding what is happening.
Internal Documentation — Direction A
Brand Identity
The Little Big Journeys brand is rooted in warmth, safety, and natural growth — like a walk along the Fleurieu Peninsula coastline at golden hour. This living document defines how those values translate into design decisions.
01. Logo & Mark System
Graphic Mark
Branch + pale sage circle
Little Big Journeys
Wordmark
Nurturing Relationship Journeys
Tagline
Louise Flaherty | Counsellor
Credential Line
Little Big Journeys
Horizontal (Header Default)
Little Big Journeys
Nurturing Relationship Journeys
Stacked (Standard)
Little Big Journeys
Nurturing Relationship Journeys
Louise Flaherty | Counsellor
Stacked (Full Lockup)
Little Big Journeys
Nurturing Relationship Journeys
Louise Flaherty | Counsellor
Stacked (Inverted / Footer)
The Mark: The graphic mark is an inline SVG branch with a soft sage-grey circle. It inherits colour through CSS variables so it can invert cleanly in the footer and dark mode.
Text System: The live website uses real text for the wordmark, tagline, and credential line, styled with site.json values. Standalone SVG exports are stored in /assets/logo/.
Clear Space: Always allow breathing room around the logo equivalent to the height of the circular mark. Never crowd it with navigation, borders, or photography edges.
02. Colour Palette
Sage
#4A6741
Primary brand colour — hero sections, CTAs, headings
Terracotta
#B0654A
Accent — links, interactive elements, highlights
Warm Clay
#D4A88C
Secondary — decorative elements, muted accents
Warm Stone
#F5F0EB
Background — page canvas, light mode base
Rich Earth
#3D3229
Text — body copy, headings in light mode
Warm Grey
#8B7D6B
Neutral — secondary text, borders, muted labels
Dark Mode Adaptation
Sage (Dark)
#5B8852
Brighter sage for dark mode legibility
Terracotta (Dark)
#C97B5D
Brighter accent for dark mode
Background (Dark)
#1C1C1E
Deep neutral for low-sensory experience
Text (Dark)
#F5F0EB
Warm light text on dark background
03. Typography
Heading Font
DM Serif Display
Weights: Regular (400), Italic
Sizes: 48px (H1 hero), 36px (H2), 24px (H3), 20px (H4)
Used for: Headings, hero titles, section headers
Body Font
Inter
Weights: 300 (Light), 400 (Regular), 500 (Medium), 600 (Semibold), 700 (Bold)
Sizes: 18px (intro), 16px (body), 14px (small), 12px (caption)
Line-height: 1.7 for readability
Modular Type Scale
The type scale follows a major third (1.25) ratio, ensuring consistent visual rhythm between every heading level. This means each step is 1.25× the size of the one below it.
| Level | Size | Line-height | Ratio | Usage |
|---|---|---|---|---|
| H1 Hero | 3rem / 48px |
1.1 | 1.33× | Homepage hero, landing page titles |
| H2 | 2.25rem / 36px |
1.2 | 1.5× | Section headers, page titles |
| H3 | 1.5rem / 24px |
1.3 | 1.2× | Card titles, section subtitles |
| H4 | 1.25rem / 20px |
1.4 | 1.25× | Minor headings, feature titles |
| Intro | 1.125rem / 18px |
1.5 | 1.125× | Lead paragraphs, hero subtext |
| Body | 1rem / 16px |
1.7 | — | Body text, paragraphs |
| Small | 0.875rem / 14px |
1.5 | — | Secondary text, metadata |
| Caption | 0.75rem / 12px |
1.4 | — | Labels, captions, footnotes |
Line-height formula: calc(1em + 0.7rem) for body text (currently 1.7 at 16px). Headings use progressively tighter line-heights as size increases (1.1 → 1.4) to maintain visual density. Body line-height is relaxed (1.7) for long-form readability — ideal for therapy content.
Vertical Rhythm
Margins and padding use Tailwind's 4px (0.25rem) base grid. Common spacing values are always multiples of this base:
Section padding
py-20 = 80px
Card padding
p-6 = 24px
Grid gap
gap-8 = 32px
Content max-width
max-w-4xl = 896px
Spacing formula: Always use the 4px grid. Multiply by 2, 4, 6, 8, 12, 16, 20 for consistent increments. Never use odd or arbitrary values.
04. Dark Mode System
System Preference
Dark mode respects prefers-color-scheme by default. If the user's OS is set to dark mode, the site loads in dark mode automatically.
Manual Toggle
A sun/moon toggle in the header allows manual override. The user's choice is persisted in localStorage and takes priority over system preference.
CSS Variables
All brand colours are defined as CSS custom properties (--sage, --terracotta, --warm-stone, etc.) and swap automatically between light and dark values.
05. UI Elements
Primary Buttons
Primary CTAs use the semantic CTA background token with an accessible foreground colour in both light and dark mode.
Inline Links
Learn about our therapies »Links use Terracotta with hover opacity transition. No underlines — the colour alone signals interactivity.
Service Cards
Cards use white surface with a subtle border. Heading uses Sage, body text uses Warm Grey.
06. Modern Visual Treatment System
SectionWash + MotifBackground
Warm editorial calm
Soft radial washes and tone-on-tone branch/contour motifs add authorship without making counselling content feel decorative or trendy.
Editorial callout
Use emphasis to reassure, not to sell.
Treatment rule
PathSteps / reassurance flow
Choose tools
Select a method only after the need is clear.
Move gently
Build practical change at the client's pace.
07. Photography Direction
Natural Light, Authentic Connection.
Images should feel warm, soft, and natural — like a quiet moment on the Fleurieu Peninsula coast in the late afternoon. Focus on genuine connection, not staged poses.
- Do: Use warm, golden-hour natural lighting.
- Do: Feature coastal and bush settings — Fleurieu Peninsula coastline, bush trails.
- Do: Capture authentic, unposed connection between people.
- Don't: Use cold, clinical lighting or white studio backdrops.
- Don't: Rely on heavily edited or staged stock photography.
Golden Hour / Coastal Setting
Authentic Connection
Organic / Nature Detail
Warm Colour Treatment
08. Tone of Voice
Nurturing
Gentle, supportive language. Never clinical or cold. Speak directly to the reader ("you") and acknowledge that reaching out for help is a brave step.
✓ "We're here to support you."
✗ "Treatment plan commences."
Grounded
Evidence-based, no hype. Use clear, simple phrasing over flowery or overly academic psychological jargon. Language should feel steady and calm.
✓ "Gottman Method is one of the most researched approaches."
✗ "Transform your relationship instantly."
Accessible
Plain language, no jargon. Therapy concepts should be explained in everyday terms. Warm, approachable paragraphs that invite reading.
✓ "Session fees are $XXX."
✗ "Please remit payment prior to tele-health."
ACA-Compliant
Counsellors adhere to the Australian Counselling Association Code of Ethics. No testimonials, no guarantees. Describe what the therapy does, not what past clients have experienced. Trust is built through transparency and respect.
✓ "Gottman Method helps couples improve communication."
✗ "Our clients say this saved their marriage."
Little Big Journeys — Direction A: Earthy & Nurturing
Prepared by Sanctum Digital · June 2026