Metaphor - Style Guide

Internal reference. Not linked in site navigation.

Colors

Typography

Buttons

• Primary: navy fill, white text, 0px outline, 10px corner radius. Main actions (Get in touch, Schedule call).
• Secondary: navy outline (1px), navy text, transparent fill, 10px corner radius. Lower-emphasis actions.
• Tertiary: underline shape, no fill or border box. Lightest-weight links.
• Tertiary hover state: background fills with brand navy, text switches to white - converts from underline-only to a solid filled button on hover.
• Font on all buttons: Nunito Sans, 400, 1rem. Padding: S.

Form fields

• Shape: square
• Fill: on (light fill inside inputs)
• Border: none
• Padding: S

Logo

• Nav logo (desktop): 100px max-height.
• Nav logo (mobile): 80px max-height
• Width: auto, max-width 100% - mark scales proportionally, no distortion.
• Source file is roughly 1:1 square (892×892 in Figma); the lockup's actual on-screen proportions come from the exported image, not the artboard.

Components

• Persona / pain-point card - ranked by relevance, not an equal-weight grid. Top 1–2 personas larger and above the fold; secondary ones smaller or collapsed under "see more."
• Pricing card - badge, title, description, divider, price, CTA button, in that order. One badge style per tier (Always free / Start here / Go deeper / Long-term support).
• FAQ accordion - grouped by stage (e.g. "Before you book" / "How sessions work"), one panel open at a time, click to expand.
• Room hotspot widget - illustrated scene with clickable info-markers revealing short answers. Navy markers, gold marker text, white answer panel below the scene. Used for reducing pre-booking anxiety through self-directed exploration rather than a linear FAQ list.
• Sticky CTA bar - persistent booking prompt, bottom-right, navy fill. Currently visually distinct from Primary button; confirm final decision on whether to merge styling.

Voice and copy rules

• Commas over em dashes. Regular hyphens, not em dashes, throughout.
• "Practitioner," not "clinical," when addressing Between Sessions audience.
• No diagnosis-adjacent language in client-facing marketing copy.
• One consistent CTA phrase per audience type, never five variants for one action.
• Show the process in plain language rather than naming the framework or methodology.

Structural patterns

• Persona and pain-point cards: ranked by relevance, not flat equal-weight grids.
• FAQ: accordion, grouped by stage (before booking / how sessions work).
• Pricing: tiered cards, WhatsApp-linked CTAs, clear "start here" flag on the recommended tier.