BOCO Brand Guide

Design reference

Generated from the live theme — src/theme/tokens.scss, src/styles.scss, src/styles/_variables.scss. Full written guidance lives in the markdown files alongside this page. Click any swatch to copy its hex.

The five rules

  1. Colors come from tokens — var(--mat-sys-*) or var.$token. Never raw hex in component SCSS.
  2. Quicksand everywhere — it inherits globally; use the global heading scale and Material weight vars.
  3. Round things — pills at 100px/999px, page cards at 32px, nested cards and tiles at 16–20px.
  4. One breakpoint — $mobile-max-width: 1024px. Collapse to a single column below it.
  5. Actions are tertiary slate blue, not the yellow primary. Yellow is brand accent only.

Brand palette

Material 3 theme roles → var(--mat-sys-*)

Primary · BOCO yellow#fec940--mat-sys-primary
Tertiary · action slate#3e556d--mat-sys-tertiary
Secondary · coral#f08071--mat-sys-secondary
Error#a73b21--mat-sys-error
Surface#ffffff--mat-sys-surface
Background#fafafa--mat-sys-background
On surface · text#292524--mat-sys-on-surface
Outline#a0a09f--mat-sys-outline
Primary container#fef7e2--mat-sys-primary-container
Tertiary container#e2e5e9--mat-sys-tertiary-container
Brand gradient#fed466 → #f3998dvar.$brand-gradient

Semantic tokens

SCSS tokens from _variables.scss → var.$token

Small text#474746$small-text-color
Gray text · meta#828281$gray-text-color
Soft gray · tiles#f8f8f8$soft-gray
Divider#e0e0e0$divider-color
Success green#079455$success-green
Error red#d92d20$error-red
Info icon#444ce7$information-icon-color
Info pill bg#eef2fb$pill-info-bg

Typography

Quicksand 300–700, fallback Inter/Roboto. Scale from src/styles.scss.

h1 · 36/44 · medium · -2%

Find your coach

h2 · 20/30 · bold

Section heading

h3 · 20/1.25 · medium

Card heading

h4 · 16/1.15 · regular

Minor heading

p · 16/30 · regular

Body copy connects coaches and clients with seamless session booking.

card body · 14 · $small-text-color

Secondary text inside cards uses 13–14px in small-text gray.

meta · 12–13 · $gray-text-color

Labels, subtitles and meta information.

Buttons

Pre-themed Material: matButton="filled" / "tonal". 100px radius, 52px height, tertiary fill.

Form fields

appearance="outline" → pill shape (999px), 44px height, tertiary focus.

Placeholder text
Focused field

Pills & status

Life coaching Career Mindfulness
Pending Resubmission Approved

Cards, tiles & avatar

Page card 32px radius · nested 16–20px · selectable tile = soft gray + tertiary border when active.

Selectable tiles (click)

30 minIntro sessionFree
60 minDeep diveR 650

Avatar placeholder (gradient ring)

Nested card

Starter package

4 sessions

Bordered, 20px radius, 16px padding.

Radii & spacing

32px · card
20px · nested
16px · tile
100px · pill

Spacing rhythm (px)

4
8
12
16
24
32
48

Breakpoint: single @media (max-width: 1024px) — multi-column layouts collapse to one column.

Copied!