Susan Gamache

Design Guidelines

Colour, type, and the small decisions underneath them — read directly off this site's own stylesheet, so this page can't say something the site doesn't already do.

Draft v0.1 Built by Lara Kroeker Interactive

01 — Foundation

Purpose

“I do everything in my power to help individuals, couples and families develop strength and resilience when faced with life and/or relationship challenges.”

Mission

“I work to integrate ideas that provide spring boards to better life choices, communication, problem-solving, parenting practices, and overall well-being.”

Vision

“...these ‘marital transitions’ [are] an area where I felt I could make a difference” — for a society that still struggles to support people through separation and divorce as a mainstream life event.

02 — Logo

03 — Photography

Post-Separation Conflict
REACH Family Intervention Program
Collaborative Divorce Coaching
Parenting and Co-parenting
General Consultation
Stepfamily Consultation and Counselling
Reconciliation
Couples on the Edge ©

04 — Colour

Surface

White
--sg-white

Base background
Neutral
--sg-neutral (= Grey 5)

Alt sections, cards on white
Dark
--sg-dark (= Grey 1)

Text + dark sections

Primary

Blue
--sg-blue

Brand accent — links, icons, focus

Greys

Five even steps, dark to light, tinted toward the brand rather than neutral. Grey 1 and 2 are safe for body text. Grey 3 needs to be large. Grey 4 and 5 are fills and borders, never type.

Grey 1
--sg-grey-1

Any text
Grey 2
--sg-grey-2

Body text
Grey 3
--sg-grey-3

Large text only
Grey 4
--sg-grey-4

Fills and dividers
Grey 5
--sg-grey-5

Hairline borders

CTA

Default
--sg-cta

Buttons, links asking to be clicked
Pressed
--sg-cta-press (derived)

Hover / pressed state
Light tint
--sg-cta-light (derived)

Tinted background wash

Additional

⚠️ No illustration/editorial colour exists on the live site. Open decision — add one when a real use case appears; nothing invented here.

Semantic

⚠️ No error/success/info states exist on the live site. Open decision — nothing invented here.

05 — Type

Aa

Inter — Light 300, Regular 400, Bold 700. The only family in use on the live site.

Hero
— (hero embeds only) --type-hero-size 64px
H1
h1 --type-h1-size 48–64px
H2
h2 --type-h2-size 38–48px
H3
h3 --type-h3-size 24–28px
H4
h4 --type-h4-size 18–19px
Body Large
— (per component) --type-body-lg-size 28.8px
Body
body --type-body-size 16px
Body Small
— (per component) --type-body-sm-size 14px
Main Menu
.primary-menu a --type-menu-size 11.2px

Layout

06 — Space. Shape. Depth.

Usage below is read directly from sg.css, not asserted.

Spacing

120 Not yet used
96 Not yet used
80 Section padding, large grid gaps
64 Section padding — the default
56 Not yet used
48 Card padding, section gaps
40 Grid gaps, before a subsection
32 Grid gutters
24 Container padding — the default gap
20 Not yet used
16 Gaps between inline elements
12 Button padding (vertical)
8 Small margins, list spacing
4 Tight list spacing
2 Not yet used

Radius

The one real value on the live site — checked against every real button instance, not a Kit default.

3px
Buttons — the only real radius on the live site

⚠️ Recommended scale — not scraped from the live site; a standard-practice suggestion for future components.

0 Square — dense data tables
4px Dense UI — inputs, chips
8px Cards
16px Image wells, large surfaces
999px CTAs (recommended — real CTAs use 3px today)

Elevation

Flat

No shadow — the default everywhere else on the site.

Image shadow --shadow-image

Used on real content images (About page sidebar, Self-Evaluation LAND photos) — not rendered on this card itself, to keep this page's own cards flat.