# Design — outsidetheboxadhdcoach.com.au ## colour - **Palette:** ground `#F3F7E2` (warm cream from the logo ring and credential badge ground) · ink `#2D3234` (warm slate charcoal for soft, high-contrast readability) · accent `#95D5D9` (pale teal primary from the logo disc) ## type - **Type:** display Runalto · body Montserrat Light · the move: the headline set huge across the negative space of the hero photograph, paired with a short 2-word Bright Sunshine script flourish. ## button - **Variant:** Solid pill, recoloured to its band - **Looks:** A full-round pill with no border; filled in pale teal accent `#95D5D9` on warm cream grounds with the label in slate ink `#2D3234`, and filled in slate ink `#2D3234` on photographic or tinted bands with the label in warm cream `#F3F7E2`; the label set in Montserrat Light, small, uppercase, and tracked. - **Why:** Delivers a soft, unhurried focal point that honors the circular mark and warm photographic direction while spending the pale teal accent on a single calm, pressure-free action. ## hero - **Variant:** Headline huge across the photo - **How it looks:** - Desktop: `portrait-01` fills the band edge to edge at full viewport height, touching the top, bottom, left, and right edges. Carolyn occupies the right third of the frame against the cobalt door and terracotta wall, keeping her face and posture fully visible in clear daylight. Depth in three layers: `portrait-01` as the base; a soft tinted scrim across the left two-thirds of the frame to ensure WCAG AA contrast against the architectural wall; and the headline `pos-1` paired with `pos-2` set in display Runalto across two lines in ground `#F3F7E2`, landing squarely in the spacious left negative space without crossing Carolyn's face. Directly beneath the headline in the same left zone sits the supporting description `pos-3` in ground `#F3F7E2`, followed by the action `off-8` styled as a solid slate ink `#2D3234` pill button with ground `#F3F7E2` label. The nav sits in its own dedicated band above the photograph on ground `#F3F7E2`. - Phone: `portrait-01` fills the viewport width with Carolyn framed centrally; the headline `pos-1` and `pos-2` breaks across three lines in ground `#F3F7E2` over the lower half of the frame on the scrim, with description `pos-3` and button `off-8` stacked beneath it at the foot. - **Uses:** portrait-01 · pos-1, pos-2, pos-3, off-8 ## about - **Variant:** Portrait between two columns - **How it looks:** - Desktop: flat, on the warm cream ground `#F3F7E2`. Centred at the top, a title stack set in warm slate ink `#2D3234`: `abt-1` as a quiet statement in display Runalto, with a small byline in Montserrat Light naming Carolyn. Under it, the opening prose of `abt-1` set in slate ink `#2D3234`, justified, about two-thirds of the band's width. Then the band splits into three: a column on the left carrying `abt-2`, `portrait-02` plated clean in the middle showing Carolyn with her dogs on the grass against the river, and a column on the right carrying `abt-3` with the credential figure `num-1` woven below it. The two text columns match the width of `portrait-02` and align straight along their outer edges, level with the top of the photo plate. The solid pill button in pale teal `#95D5D9` sits centred beneath the three-column lockup. Nothing touches or overlaps the photo. - Phone: the title stack and opening paragraph `abt-1`, then the first column `abt-2`, `portrait-02` at full width inside the margins, the second column `abt-3` with `num-1`, and the pale teal button stack in reading order. - **Uses:** `portrait-02` · `abt-1`, `abt-2`, `abt-3`, `num-1` ## offer · beat 5 - **Variant:** Section name across the seam - **How it looks:** - Desktop: The band before ends on warm cream ground `#F3F7E2` and this band transitions into slate ink `#2D3234`. The one-word section title from `off-2` is set in display Runalto at the largest scale across the seam in warm cream `#F3F7E2`, its top half on the light band and its lower half inside the dark band. Under it, plated flat on the slate ink ground right of centre, square photograph `work-02` (Carolyn laughing in the yellow armchair with notebook in lap) sits unboxed and untouched by shadows; to its left, the question heading ("How do we work together one-on-one?") at display scale in warm cream `#F3F7E2`, followed by the one-on-one coaching body copy (`off-2`) in Montserrat Light, and the solid pill button (`off-8`) filled in warm cream `#F3F7E2` with slate ink text below. - Phone: The display section name sits just below the top seam; photograph `work-02`, the section heading, body copy `off-2`, and the solid pill button `off-8` stack in reading order at full width. - **Uses:** `work-02` · `off-2`, `off-8` ## offer · beat 6 - **Variant:** Outlined frames stacked on the dark half of the photo - **How it looks:** - Desktop: Photograph `work-03` (Carolyn at the outdoor timber table with client in teal blouse) extends across the band; in front, over the darker right half of the image, the two offerings (`off-1` for Business Mentoring with cohort metric `num-1`, and `off-3` for Group ADHD Support) sit stacked as two equal outlined frames stroked in a delicate pale teal `#95D5D9` hairline with transparent interiors. Inside each frame, ranged left: the offer title in display Runalto in warm cream `#F3F7E2`, two lines of Montserrat Light description, and the solid pill button (`off-8`) filled in warm cream `#F3F7E2` with slate ink text centred at the foot of each frame. - Phone: Photograph `work-03` sits taller; the two outlined frames for `off-1` (with `num-1`) and `off-3` stack one under the other at near full width with pale teal hairlines over the lower portion of the image, each followed by its solid pill button `off-8`. - **Uses:** `work-03` · `off-1`, `off-3`, `num-1`, `off-8` ## offer · beat 7 - **Variant:** Section name across the seam - **How it looks:** - Desktop: The preceding band transitions into warm cream ground `#F3F7E2`. The section title for mental fitness (`off-5`) is set in display Runalto across the seam in slate ink `#2D3234`. Below, square photograph `portrait-03` (Carolyn on the limestone outcrop by the water with her dogs and the Positive Intelligence badge) sits cleanly plated on the right; the left column holds the question heading ("Can I build mental fitness and overcome self-sabotage?") at display scale, the 6-week mental fitness program description (`off-5`) in Montserrat Light, and the solid pill button (`off-8`) filled in pale teal `#95D5D9` with slate ink text. - Phone: The section title sits beneath the seam; photograph `portrait-03`, the heading, body description `off-5`, and the solid pill button `off-8` stack in reading order at full width. - **Uses:** `portrait-03` · `off-5`, `off-8` ## offer · beat 8 - **Variant:** Checkerboard of photo and panel - **How it looks:** - Desktop: A flat band on warm cream ground `#F3F7E2` opened by the centred question heading ("What tools and free resources can I access?") in display Runalto. Below, a two-column grid with no gutter: square photograph `work-04` (Carolyn laughing with phone at the timber table) fills one cell, while two resource panels for `off-6` (Saboteur Assessment) and `off-7` (ADHD Resource Guides) alternate across the grid on warm cream grounds; each panel carries a small pale teal `#95D5D9` tag naming the resource format, the title in display Runalto, a short paragraph in Montserrat Light, and a solid pill button in pale teal `#95D5D9`. - Phone: Stacks in reading order into a single unboxed column without gutters: photograph `work-04`, the `off-6` resource panel and button, then the `off-7` resource panel and button. - **Uses:** `work-04` · `off-6`, `off-7` ## proof · beat 3 - **Variant:** Marks in rows, names beside - **How it looks:** - Desktop: A short, unhurried flat band on the warm cream ground `#F3F7E2`. The accreditation strip `credentials` sits centred at its native scale, displaying the four formal credential badges (ICF PCC, CATI Certified Neurodiversity Coach, ACO, and aadpa) against the matching ground. Directly beneath the mark strip, the formal credentials and accreditation points (`cred-1` through `cred-6`, `body-1` through `body-4`) sit as two clean columns of small slate caps `#2D3234` under a thin horizontal rule, right-aligned in the right half of the band with the left half left open to maintain spacious, low-cognitive-load breathing room. - Phone: The `credentials` image scales to fit viewport width, centred on the cream canvas; the credential items rewrap into a single column beneath it. - **Uses:** `credentials` · `cred-1`, `cred-2`, `cred-3`, `cred-4`, `cred-5`, `cred-6`, `body-1`, `body-2`, `body-3`, `body-4` ## proof · beat 10 - **Variant:** Quote beside a photo on paper - **How it looks:** - Desktop: A calm, unboxed band on the warm cream ground `#F3F7E2`, arranged in balanced halves. In the left half, `work-05` (Carolyn in unhurried conversation) rests plated over a subtle paper sheet at a gentle angle without touching the viewport borders. In the right half, a quiet category label precedes the active client testimonial (`rev-1` or `rev-2`) set in slate ink `#2D3234` at a size above body scale, anchored by the client attribution (`client-1` through `client-6`) on two small lines beneath. A minimal text control on the right edge softly transitions to the next review, keeping the layout uncluttered and grounded. - Phone: The paper and photo collage sits first at full width, followed by the testimonial, client attribution, and advance control in reading order. - **Uses:** `work-05` · `rev-1`, `rev-2`, `client-1`, `client-2`, `client-3`, `client-4`, `client-5`, `client-6` ## footer - **Variant:** Columns around the mark - **How it looks:** - Desktop: a flat band on the warm cream ground `#F3F7E2` in two strips. The first, tall: the circular brand mark `logo` centred on the page's axis, the band's focal element. Two columns mirror either side of it: at the left, ranged left, the page's beat anchor links one per row, the solid pill button in slate ink `#2D3234` under them, then the Perth location note over a short hairline; at the right, ranged right, the four-badge accreditation strip `credentials`, the credentialed practice note `cred-2`, and the contact invitation over a matching hairline at the same height. The second strip, thin, on a pale teal accent `#95D5D9` ground: the copyright line at the left, the legal links at the right in slate ink `#2D3234`. - Phone: one centred column — the circular mark `logo`, the accreditation strip `credentials`, the credential summary `cred-2`, the page links one per line, the pill button, and the contact and location notes over their hairline; the thin pale teal strip last, its copyright and legal lines stacked and centred. - **Uses:** `logo`, `credentials` · `cred-2` ## motion - **Variant:** Still - **Signature:** none - **Beats:** none - **Hover:** trigger hover · target solid pill buttons · change background colour `#95D5D9` to `#2D3234` with label colour `#2D3234` to `#F3F7E2` on cream grounds, background colour `#2D3234` to `#95D5D9` with label colour `#F3F7E2` to `#2D3234` on photographic and slate grounds, translate 0 -2px · duration 240ms · easing cubic-bezier(0.2, 0.8, 0.2, 1) · stagger none · repeat every time · reduced colour change only with translate 0 0 · trigger hover · target text links and navigation items · change colour `#2D3234` to `#95D5D9`, opacity 0.85 to 1 · duration 200ms · easing ease-out · stagger none · repeat every time · reduced colour change only with no transition - **Why:** A completely still scroll environment honours the quiet, empty art direction, eliminating cognitive overwhelm and executive function fatigue for neurodivergent visitors while letting the expansive architectural portrait and spacious editorial typography anchor trust. ## page - **Order:** 1 nav, 2 hero, 3 proof, 4 positioning, 5 offer, 6 offer, 7 offer, 8 offer, 9 about, 10 proof, 11 cta, 12 footer - **Seams:** 1→2: cut 2→3: ground change, portrait-01 photo scrim to #F3F7E2 3→4: cut 4→5: ground change, #F3F7E2 to #2D3234 with section name across the seam 5→6: ground change, #2D3234 to work-03 full-bleed photo band 6→7: ground change, work-03 full-bleed photo band to #F3F7E2 with section name across the seam 7→8: cut 8→9: cut 9→10: cut 10→11: cut 11→12: cut - **The idea:** The headline set huge across the architectural negative space of Carolyn's opening portrait lands the page's singular visual statement, allowing the rest of the layout to stay unhurried, still, and generously spaced to prevent cognitive fatigue. - **Other beats:** 1 nav: hung from an edge · maps credentials (3), approach (4), offers (5–8), about (9), proof (10), cta (11) · off-8 as the page's button · no photo 4 positioning: side-by-side · work-01 plated on ground · abt-4, abt-5 · the page's button 11 cta: stacked column · no photo · pos-1, off-8 as the page's button - **Why:** Adults seeking ADHD support require immediate reassurance of professional accreditation and grounded calm before exploring coaching formats, building trust through Carolyn's story, and booking without pressure.