Singapore Swimming Academy Cockpit

Brand system

Brand guide

Working brand rules for the SSA site. Grounded in the SSA logo, the current live site and the enquiry-driven business model — not a new brand invention. Source of truth: singaporeswimming/audits/brand-guide.md.

Colour

Logo palette leads. SSA lime is a legacy accent (header, short bars, price underline, labels, selected states) — not the dominant colour. Backgrounds stay white; avoid large tinted panels.

Logo palette

Near-black
#0C0809
Logo outline, ink.
Orange
#F0A324
Logo word fill. Pantone 1375 C.
Sky blue
#76BCD6
Logo fill; primary buttons. Pantone 297 U.
Light blue
#89CCE7
Highlight.
Coral pink
#CB7684
Logo fill. Pantone 709 U/C.
Muted red
#CE6C67
Logo shadow/fill.

Web implementation

SSA lime
#B3CF32
Legacy accent: header, bars, underline, labels.
Lime dark
#4F6F16
Kickers, accent text on white.
Ink
#16202A
Headings, body.
Muted
#5B6673
Body / secondary text.
Soft ground
#F7FAF3
Light section background.
White
#FFFFFF
Main page ground.

Print / master reference: Orange Pantone 1375 C · Blue Pantone 297 U · Pink Pantone 709 U/C.

Typography

Primary font Poppins (Arial/Helvetica fallback). Friendly, rounded, school-like with controlled weights. Root 20px desktop / 18px mobile.

Body 400 · headings & labels 700 · nav, lede & breadcrumb 600. Avoid decorative serif/italic. Don't make nav, buttons, pills and lede all heavy in one view — Poppins thickens fast. Full live scale on the Typography page →

Layout

The page should read quickly.

Use

  • Clear section starts with short SSA lime accent bars.
  • Strong headings with generous spacing before the next section.
  • Soft dividers only inside lists or repeated items.
  • Cards only when a group needs to be visibly contained (e.g. Popular classes).

Avoid

  • Many same-weight divider lines that flatten the hierarchy.
  • Floating decorative cards inside cards.
  • Over-designed backgrounds behind simple information.
  • Split-section layouts that make mobile feel like a long document.

Components

Header. Lime green background, SSA logo prominent, dark nav text. Main enquiry button can stay dark for contrast.

Popular classes. Keep the original class icons large and recognisable. Do not put the class icons inside circles. Preserve the hand-drawn lime zig-zag underline for "Now ..." price highlights.

Section dividers. A simple SSA lime bar. No green-to-blue gradient unless a future brand decision explicitly adds blue as a divider colour.

Buttons. Primary enquiry button can use sky blue where it improves recognition; secondary/header CTA dark ink. Avoid multiple competing CTA colours in one viewport.

Hard guardrails

The rules that keep the refreshed site from drifting.

Do not