Design system
Colours
Night, Sun and Day.
Night
For the sky, the menu and dark sections.
Night/Deep
Top of the sky and the darkest sections.
Night/Sky
The sky gradient and the footer.
Night/Horizon
Dark sections and call-to-action cards.
Night/Blue Hour
Dark sections lower on the Home.
Night/Indigo
The seam between dark sections on the Home.
Night/Violet
The end of dark gradients.
Night/Plum
Small dark accents.
Night/Mauve
The end of the call-to-action card gradient.
Night/Dusk
The sky gradient, just above the sunrise.
Night/Text
Headings and text on night.
Night/Text Soft
Intros and secondary text on night.
Night/Line
Borders and dividers on night.
Night/Line Strong
Outlined buttons on night.
Night/Panel
See-through panels on night.
Night/Glass
The floating menu.
Night/Scrim
Captions over photos.
Night/Tint
Faint fills on night.
Night/Hover
Hover fill for buttons on night.
Sun
Warm accents. Use them sparingly: one sun, one main button per view.
Sun/Apricot
Main buttons, the sun and small dots.
Sun/Apricot Hover
Main button hover.
Sun/Dawn
Warm accents and numbers on night. Not for text on paper.
Sun/Peach
Hills and soft warm fills.
Sun/Ember
The bottom of the sky gradient.
Sun/Glow
The bright centre of a sun.
Sun/Ring
Rings around portraits.
Day
For the paper pages below the sunrise.
Day/Paper
The main light background.
Day/Paper Warm
Alternate light sections.
Day/Blush
The warm end of light gradients.
Day/Card
Cards on paper.
Day/Glass
Cards on warm gradients.
Day/Field
Form fields.
Day/Text
Headings and text on paper.
Day/Text Soft
Intros and secondary text on paper.
Day/Line
Borders and dividers on paper.
Day/Line Strong
Form field borders.
Day/Line Bold
Outlined buttons and chips on paper.
Day/Rust
Numbers and links on paper. Readable on Paper.
Day/Crisis
The crisis bar.
Day/Crisis Line
Crisis card borders.
Day/Hover
Hover fill for buttons on paper.
Status
For the “taking new clients” dot.
Status/Open
The dot next to a therapist who is taking new clients.
Status/Open Deep
Text next to the open dot.
Type
Fraunces for headings, Figtree for reading.
Hero
The Home title only. One per site.
Calm, steady care.
Heading
Page titles in the header (as h1) and section titles (as h2).
Therapy that meets you where you are.
Quote
Large quotes on the Home and on profiles.
“You don’t need the words yet.”
Title
Titles inside a section, above a group of cards.
How the first month goes
Card Title
Card headings (h3).
A short first call
Article Heading
Headings inside Journal notes and bios. Set by the CMS text fields.
What a first session feels like
Brand
The practice name in the menu.
Calder House
Price
Prices and big numbers. Rust on paper, Dawn on night.
$160
Crisis Number
Phone numbers on the Crisis resources page.
988
Footer Wordmark
The big name in the footer.
Calder
Lead
The intro under a heading. Up to about 520 px wide.
A small practice in Portland for adults, couples and families.
Body
Paragraphs.
We keep our caseloads small, so there is time to think between sessions.
Article
Paragraphs inside Journal notes and bios. Set by the CMS text fields.
Most people arrive at a first session unsure what to say. That is fine.
Small
Card text, details and notes.
Fifty minutes, in the room or online.
Caption
Photo captions and fine print.
The waiting room on Exchange Street.
Label
Short uppercase labels.
Where
Eyebrow
The short line with a sun dot above a heading.
Our practice
Button
Inside the Button component only.
Book a free 15-minute call
Nav
Menu links.
Therapists
Field Label
Form field labels.
What would you like help with?
Links
Three link styles.
Night Link: the menu, the footer and text links on night.
Day Link: text links on paper. Turns rust on hover and on the current page.
Underline: links inside a paragraph.
Components
Reuse these. Don’t build new ones.
Buttons on night
Sun: the main action. One per view.
Sun Small: the menu and tight spaces.
Line Night: a second action on night.
Buttons on paper
Ink: the main action on paper.
Line Day: a second action on paper.
Forms and filters
Submit Button · Default
Submit Button · Loading
Submit Button · Success
Submit Button · Error
Topic Chip · Default
Topic Chip · Active
Submit Button goes inside a form only; the form switches it to Loading, Success and Error. Topic Chips are the filter buttons on the Journal; they are made from CMS → Topics.
Navigation
The floating menu, the drawer on tablet and phone, and the clock. It has Desktop, Tablet, Phone, Tablet Open, Phone Open and Large variants.
Where
Pages → Main Layout. Never add a second menu to a page.
Night Sky
The moving stars behind every page header and the Home.
Settings
Top and bottom colour, stars, density, glow and where it fades.
Sun
Rises behind the Home portrait and in each page header. Sits still in call-to-action cards.
Settings
Core, middle and edge colours, glow, how far it rises and over how much scroll.
Horizon
The hills at the bottom of every page header.
Settings
Far hill and near hill colours.
Nav Dial
The clock in the menu. It runs from 05:12 to 08:40 as you scroll.
Settings
Start and end times, sun, horizon and text colours.
Breathing Sun
The one-minute breathing exercise on the Home.
Settings
Rounds, seconds per step, every word on it, colours and fonts.
Therapist Matcher
The three-question quiz on the Home.
Settings
Questions, answers and up to four therapists, colours and fonts. Keep the therapists in step with CMS → Therapists.
Sliding Scale
The fee slider on the Home and on the Fees page.
Settings
Fee range, bands, currency, open places, colours and fonts.
Steps Arc
The sun arc over “How it starts” on the Home.
Settings
Number of steps and colours.
FAQ
Questions and answers on the Home and on the Fees page.
Settings
Up to eight questions and answers, the first one open or closed, colours and fonts.
Layout
Spacing, sizes and motion.
Pages
Every page uses Main Layout, which brings the menu, the 988 crisis bar and the footer. A new page opens with a Page Header and ends with a Call to Action.
Sections
Full width, with the content in a frame of up to 1240 px (1840 px on Large). Padding: 112/64 px on Desktop, 96/48 Laptop, 84/24 Tablet, 72/16 Phone, 140/80 Large.
Screen sizes
Large 1800 px and up, Desktop 1440, Laptop 1200, Tablet 810, Phone 390. Edit Desktop first. On Tablet and Phone, side-by-side content stacks.
Spacing
Heading to content: 40–56 px. Card grids: 20 px gap (24 on Large, 14 on Tablet, 12 on Phone). Inside cards: 12 px between lines.
Corners
Buttons and pills 999 px. Call-to-action card 32 px. Cards 24 px. Photos 20 px. Portraits sit in an arch: 999 px on top, 18 px at the bottom.
Backgrounds
Night at the top of the page, Day below it. Alternate Paper and Paper Warm between sections, or use a Paper → Blush gradient for a warm one.
Motion
Sections fade up 28 px over 0.9 s as they scroll into view. Header text starts at 0.01 opacity so it shows at once. Nothing else moves except the effects.
Photos
Real photos with alt text. Every photo uses the withLazyImage code override so it loads when needed. The Home and profile portraits use withHomeArch and withProfileArch.
Accessibility
One h1 per page: the header title. Text on paper uses Day/Text or Day/Text Soft. Numbers and links on paper use Rust, never Dawn.
Patterns
Sections to copy.
Page Header
Night sky, a rising sun and the hills, with an eyebrow, a Heading title (h1), a Lead intro and up to two buttons.
Example
The top of this page, or any inner page.
Section heading
An eyebrow with a sun dot, a Heading (h2) on the left and a Lead intro on the right. Stacks on Tablet and Phone.
Example
Right below.
Card grid
Two or three columns of Card or Glass cards: a Rust number, a Card Title and Small text.
Example
Right below, and on the Template Guide.
CMS list
Therapists, notes and specialties come from the CMS. Add an item there instead of copying a card.
Example
Therapists, Journal and Specialties pages.
Call to Action
A night card with a sun, a Heading, a Lead line and one or two buttons. Every page ends with one.
Example
The bottom of this page.
How it starts
Three small steps.
01
A short first call
Fifteen minutes on the phone to see if we are a good fit. No cost, no forms.
02
Your first session
Fifty minutes, in the room or online. We talk about what brought you here.
03
Find your rhythm
Weekly at first, then whatever helps. You can stop or switch at any time.
Build the next page from here.
Ask the Framer agent with /design-system, or duplicate a section from the page closest to the one you need.