annettforcier.com
The living reference for the site — type scale, colour variables, spacing rhythm, corner radii and the reusable pieces. Values here mirror the Webflow build, so this is the page to check before adding anything new.
Eksell Display for headings and numerals · Maison Neue for body, labels and UI. Sizes shown desktop → phone.
Body copy runs in Maison Neue at a comfortable measure — around sixty characters a line — so longer passages stay easy to read on any screen.
Section eyebrow
Grouped by role, with where each colour is used. Every colour is a Webflow variable — the Brand collection unless noted (White lives in the Base collection).
Neutrals · foundation
The warm, quiet base the whole site sits on — background, surface, text tiers and hairlines.
Ground
Background--_brand---ground
#FAF7F0
The page background across the whole site — warm off-white paper.
White
Surface--white · Base
#FFFFFF
Card and raised-surface fills sitting on the Ground.
Ink
Text · dark--_brand---ink
#161418
Headings and primary text; also dark surfaces (studio strip, ink button).
Body
Text--_brand---body
#57534C
Body copy and longer reading passages.
Muted
Text · muted--_brand---muted
#8F897F
Eyebrows, captions, meta and secondary labels.
Line
Border--_brand---line
#ECE7DD
Hairlines, card borders and dividers.
Accents
Three accents, one job each — Blush for emphasis, Turquoise for links and utility, Mustard for highlights. Used sparingly, one at a time.
Blush
Accent · primary--_brand---blush
#E06287
Highlighted headline words and the primary accent throughout.
Turquoise
Link · utility--_brand---turquoise
#008EAA
Inline text links (with the ↗ arrow) and utility CTAs.
Mustard
Highlight · fill--_brand---mustard
#FFB500
Gold numerals and the highest-emphasis button fills.
Accent tints
The soft version of each accent — for backgrounds, pills and callouts, never for text.
Blush Light
Accent · bg--_brand---blush-light
#F9E0E7
Soft blush fills — e.g. the award / recognition pill background.
Turquoise Light
Accent · bg--_brand---turquoise-light
#CFE9EE
Soft teal tint backgrounds.
Mustard Light
Highlight · bg--_brand---mustard-light
#FFF1CD
Soft gold pill and callout backgrounds.
Interaction · state
Derived hover / active shades — used only in interaction states, not Brand variables (see the Hover section below).
Ink · hover
Button hoverderived from Ink
#37333F
Primary / ink button on hover (with +2px lift).
Gold · hover
Button hoverderived from Mustard
#EAA700
Gold button on hover (deepens).
Teal wash
Utility hoverderived from Turquoise
#EAF6F8
White utility button on hover (light teal fill).
Link · hover
Link hoverglobal a:hover
#32343A
Text links on hover — near-black, no underline.
Layout & grid
Every page centres on one content column with even side gutters; inside it a 12-column grid carries the common layouts. Keep new sections on these tracks and gutters rather than inventing new ones.
Content max-width 1200px · 60px page gutters · 12 columns · 24px gap
Common layouts — how sections map onto the 12 columns
Full — 12
Halves — 6 + 6
Thirds — 4 + 4 + 4
Quarters — 3 + 3 + 3 + 3
Split — 4 + 8 (the 1fr / 2fr sidebar layout)
Every section opens the same way — a small-caps eyebrow, a 10px gap, then the heading. Consistent across all section headers and breakpoints.
Section eyebrow
The heading sits here
↕ 10px gapEverything that isn't a pill — cards, photos, buttons, surfaces — uses one 14px radius; pills stay fully round. That's the whole system.
Pill
border-radius: 999px (full)
Everything else
border-radius: 14px
Fully-round chips (999px) pair a label with an 8px dot; the dot colour signals the group. Chips size to their content and stay on one line so labels never collide.
Buttons round to 14px and end in a ↗ arrow to signal action. Primary is ink; gold is reserved for the highest-emphasis moment.
Inline text links use Turquoise (#008EAA) and carry a small ↗ arrow.
Interactive states
Buttons darken and lift, the gold button deepens, and text links turn near-black with no underline — all in a 0.2s ease. Each is shown at rest and on hover.
Primary · ink
→ #37333F + lift
Gold
→ #EAA700
Outline
→ ink border + lift
The buttons and links in the sections above respond live — hover to see the transition.
The standards every page is held to. These are commitments, not audit results — new work, and every new colour, is checked against them before it ships.
Every link, button, and field shows a clear focus ring when tabbed to, so keyboard and screen-reader users never lose their place.
Body text meets 4.5:1 against its background; large text and UI elements meet 3:1. Applies to every colour pairing, status colours included.
Buttons, links, and controls give at least a 44 × 44px hit area — easy to tap on touch and forgiving for motor control.
Meaningful images carry descriptive alt text and decorative ones are left empty. Link text makes sense on its own — never “click here”.
Transitions stay subtle and short, and honour the visitor’s reduced-motion setting so nothing distracts or disorients.
The building blocks of a written piece — body copy, a quote, a list, links, and an image with a caption.
Body copy sets in Maison Neue at a comfortable measure — around sixty-five characters a line, with generous line spacing so long reads stay easy. Emphasis stays light: an inline link takes the turquoise text-link colour and turns near-black on hover.
A pull-quote lifts one line out of the flow — centred, in Eksell Display, beneath a teal quotation mark.
Lists break a sequence into scannable points:
The contact form’s fields — a 14px radius, a hairline border, and Maison text. Shown at rest, focused, and disabled.
An error state isn’t shown yet — it needs a dedicated status colour, which the palette doesn’t have. It’ll be added with the proper design system.
Photography is warm and unfiltered. The treatment is deliberately light — one radius, filling its column, and a caption only when it adds something.
The headshot is the one exception — its name tag is a rounded 14px pill that overlaps the image corner and casts a soft shadow, rather than sitting inside the frame.
Every photo uses the one 14px radius — the same as cards and surfaces. No other rounding.
Images cover their container and scale fluidly with the column — never stretched or letterboxed.
Location and label captions sit in a white, semi-transparent pill with a soft shadow, bottom-left on the image.
Meaningful photos carry descriptive alt text; purely decorative ones are left empty. (See Accessibility.)
The writing sounds like Annett: warm, plain-spoken, and modest. It under-claims, skips the hype, and stays concrete — Canadian English throughout.
Friendly and direct, never corporate or salesy. Plain connectors, measured complete sentences.
Under-claims. No hype adjectives, no “excited to announce” — the facts carry it.
Specific examples instead of buzzwords. Soft hedges like “things like…” keep it unpretentious.
Canadian spelling, but keep -ize endings (organize, personalization). Never change code identifiers.
Avoid: marketing gloss and hype, choppy fragments, and the rhetorical-question-then-one-line-reveal (“So how much can we automate? Some of it.”) — fold the question into a plain sentence instead.
The website design system — the living reference for type, colour, spacing and components. Kept in step with the Webflow build as tokens change.
