Brand system

Typography

The SSA type system, rendered live at true desktop sizes. Source of truth: brand-guide.md + the SSA stylesheet. Primary font Poppins (Arial/Helvetica fallback). Root size 20px desktop, 18px below 680px.

Type scale

Each sample is rendered at its real size. Use weight contrast selectively — Poppins gets heavy quickly, so don't make every label, button and heading bold in the same view.

Learn to swim with confidence

Hero H1clamp(2.1rem, 5vw, 3.2rem) · 700 · 42–64px · true hero titles only

About Singapore Swimming Academy

Page H1 · spec only2rem–2.2rem · 700 · in brand-guide.md but not implemented — the site uses Hero H1 for all page titles. Listed for completeness.

Find a swimming pool near you

Section H2clamp(1.42rem, 2.2vw, 1.8rem) · 700 · 28–36px · reading sections

A pool for every level

H3 / card title1rem–1.04rem · 700 · 20–21px · cards, quick facts

Singapore's public swimming complexes are run by ActiveSG and spread across every region. Entry fees are low, and you can pick your area to see each pool's closure day and the lessons we run there.

Body0.9rem–0.92rem · 400 · 18–18.4px · line-height 1.7

KIDS SWIMMING LESSONS

Nav / pill / caption0.72rem–0.9rem · 600–700 · 14.4–18px · uppercase labels, nav

Weights

Body 400 · headings & labels 700 · nav, lede & breadcrumb 600. Reserve 800 for rare small emphasis. Avoid 900 in UI — the logo already carries the loud display personality.

400 · Regular · body

500 · Medium

600 · Semibold · nav, lede

700 · Bold · headings, labels

800 · ExtraBold · rare emphasis

Brand motifs & tokens

The recurring SSA marks, and the typographic tokens now driving the live site (change once, every page follows).

At a glance

Lime section kicker (uppercase, --ssa-green-dark) + short lime accent bar (--ssa-green). Use bars for section starts, not full dividers.

Now $120 per month

The hand-drawn lime underline — reserved for price highlights. Don't replace with straight bars or generic squiggles.

Theme tokens (in :root, single source of truth): --kicker-color · --kicker-size: 0.72rem · --note-color · --note-size: 0.82rem. Change a token once and every kicker/note on every page follows — no per-page edits.