Foundations — the “why”
1.1Relationship to the brand styleguide (parent / child)
An overall brand refresh is explicitly out of scope for this engagement. PADI has an existing styleguide and brand guidelines; this directive is a child of that brand book — it inherits and obeys identity-level decisions and is sovereign only over digital-specific concerns the brand book never had to address.
| The brand styleguide governs (inherited here) | This directive governs (digital-specific) |
|---|---|
| Logo, wordmark, clear space | Interaction & state (hover/focus/active/disabled/loading/empty/error) |
| Core brand color palette | Semantic color roles, theming, light/dark posture |
| Core brand values & voice | UI density, layout, responsive behavior |
| Master typography & brand marks | Design tokens, component architecture, motion, elevation |
Conflict ruling — who wins when the two disagree
⚖ Edge cases are adjudicated by the Design Authority with PADI’s brand sign-off owner — and every ruling is recorded so it never has to be re-litigated.
The following are pulled directly from PADI’s brand file and inherited without change. This directive assigns these hues to semantic roles (§2.1) but never edits the values themselves.
Color Collections 🎚 Flex seasonal · may change per campaign — not locked inheritance
Sets aligned to the oceans and seasons. Use a single collection rather than mixing — also handy for matching text to imagery or expanding a palette.
The master logo is the PADI globe + wordmark, with the “Seek Adventure · Save the Ocean” tagline lockup. Logo colors must not be changed (“it is not permitted to change the color of our logos”). The full-color logo appears only on Primary backgrounds; the reversed (white) logo is used on Secondary, Accent, and Neutral backgrounds.
#00ADE5), AWARE Foundation, AmbassaDiver. Colors must remain as outlined.#0B395A), Mermaid, TecRec, Public Safety Diver, Emergency First Response, ReActivate. Colors must remain as outlined.No type specimen is published in the brand palette file. Per PADI input, PADI digital uses a Nunito Sans + Inter pairing — Nunito Sans for display / headings and Inter for body, UI, and data. Full scale and hierarchy are defined in §2.2.
1.2Design injections
The handful of non-negotiables injected into every design decision. Each carries an actionable do/don’t and a one-line tie-breaker to settle close calls between two defensible options. Together they hold PADI’s core tension — dive experience × trust: aspirational enough to sell the dream, credible enough for a life-safety certification.
UI recedes; content and imagery lead. Color and ocean imagery are the brand promise — the interface is their stage, not their rival.
Discovery must reduce the misconception that diving is as risky as skydiving. Trust is shown, not claimed — and the Start journey is the highest conversion priority.
Any entry point feels unmistakably part of one system. This work replaces three fragmented libraries — consistency is the point.
Safety-, skill-, and money-related information is never ambiguous. A life-safety certification must be trustworthy at a glance.
The accessible, representative option is the default — not an add-on or an edge case. It ships in the first pass, not a later retrofit.
The Visual System — the “what”
Nine building blocks, one system. Each is defined below with a rule, rationale, do/don’t, and a locked / flex marking — jump straight in:
For every element below: state the rule, the rationale, a do/don’t, and mark each parameter 🔒 Locked (fixed across all lenses) or 🎚 Flex (a lens may tune it). The locked/flex split is what stops the system fragmenting back into the three design libraries this work is replacing.
2.1Color
Not a palette — a semantic system. Brand hues are inherited (🔒); functional roles are defined here.
Color works in two layers. The brand hues are inherited and locked (§1.1) — the ocean’s palette, untouchable. On top sits a semantic layer defined here: roles like primary action, danger, or surface that draw from those hues. Components only ever speak in roles, never a raw hex — so one token change can re-theme the whole system.
Semantic roles light theme · each role draws from an inherited hue
Status — functional; text tuned to pass AA
PADI Red (#F23D4E) is brand-reserved — used only as the Error fill / icon; Error text uses the darkened #C2182B to clear 4.5:1. Never signal status by color alone — always pair with an icon and text.
Safety & certification encoding
Safety-critical and certification information must carry an icon + text label (and a numeric value where one exists — depth, level, count), with color as reinforcement only. Safety-critical text targets AAA (7:1). There is no official PADI per-level colour taxonomy, so do not invent one that could be mistaken for an identity standard.
Where a sense of progression helps (entry → pro), a supportive ocean-depth ramp may tint a credential’s accent — always alongside its label, never replacing it:
#77C5DD
Open Water #2EC3E7
Advanced #0070D3
Rescue / DM #10497C
Pro #05283E
Contrast targets — the floor (§3.2)
| Content | Target | Ratio |
|---|---|---|
| Body & UI text | WCAG 2.2 AA | 4.5:1 (normal) · 3:1 (large ≥24px / ≥18.7px bold) |
| Safety-critical text | AAA 🔒 | 7:1 |
| Non-text (icons, borders, controls, focus ring) | WCAG 2.2 AA | ≥3:1 vs adjacent colors |
| Disabled elements | Exempt | Pair with a non-color state cue |
2.2Typography
The earlier open question on the display face is resolved: PADI digital uses a Nunito Sans + Inter pairing. Nunito Sans is the display / headline face — rounded and warm, the “chunkier” character the brand team wanted; Inter is the body, UI, and data face — neutral and highly legible at small sizes. Scale & hierarchy logic is still to be finalized below.
One scale ties them together: a 1.25 (major third) ramp on a 16px base, mobile-first — Display and H1 step up at the ≥768px breakpoint. 🔒 Locked scale & hierarchy logic once set; 🎚 Flex weight & emphasis per lens.
Type scale & hierarchy
Visual ramp (renders in Nunito Sans / Inter where installed; degrades to the system fallback otherwise). Sizes shown are the desktop step.
Steps follow the 1.25 ratio from a 16px base: 10 · 13 · 16 · 20 · 25 · 31 · 39 · 49 · 61. Display/Hero leads (Nunito 800, −0.02em); Body is Inter 400 at 16px / 1.6; numerics use Inter tabular-nums so columns align. Micro / Legal (11px) is never used for safety-critical copy.
Font loading & localisation
Self-host and subset; ship only the weights above. Preload the two most-used (Nunito Sans 800, Inter 400) and swap with a metrics-matched fallback so loading never shifts layout.
Neither face covers CJK or Arabic / RTL — fall back to a matching Noto family that keeps the same weights and rhythm. Sizes, weights and line-heights stay constant across long German compounds, CJK and RTL.
2.3Layout & spatial system
Largely what greyscale wireframes already encode implicitly — make it explicit and named.
One rule governs the whole system: nothing is arbitrary. An 8px spacing scale (with a 4px half-step for optical fixes only). Three density modes — Spacious → Comfortable → Compact — change which steps a component reaches for, never the steps themselves. 🔒 Locked spacing scale; 🎚 Flex density per lens. Whitespace is a tool, not leftover space.
Spacing scale — 8px base, 4px half-step
The scale shares the type scale’s rhythm — 16 / 24 / 32 map to body, H5/Body-L, and H3 line boxes — so spacing and text sit on the same 8px beat. The 4px half-step is for optical fixes only, never layout structure.
Density modes — same scale, different steps (ties to the lenses, §3.4)
Same content, three rhythms — padding 32–40 → 16–24 → 8–12px, gap 24 → 16 → 8px, section spacing 80–96 → 64 → 32px. The lens picks which steps; the scale never changes.
2.4Shape & form language
Soft-geometric — rounded enough to feel approachable and echo Nunito Sans’ curves, restrained enough to still read as expert. Friendly, not bubbly. Controls round at 8px, cards at 12, pills at 999; sharp (0) stays for full-bleed media, data tables and dividers. Nest concentrically — inner radius = outer − padding — so corners stay parallel, and keep strokes to 1px hairlines (1.5–2px for focus, §3.2). 🔒 Locked across lenses; shape never changes by lens.
Corner-radius scale
Do: keep one radius family per component set; nest concentrically. Don’t: mix radii inside a single card, pill-shape content containers, or restyle regulated dive symbology to match (see §2.5).
2.5Iconography & pictography
Two families that must never be confused: the general UI icon set — an open decision we frame below — and regulated dive symbology, which we always reproduce verbatim.
Choosing the icon system — a decision for PADI & Axelerant to make together
How PADI sources its UI icons shapes brand fit, accessibility, performance, and ongoing cost — so rather than pre-pick a set, this section frames four directions to choose between together. Whatever we land on, two rules hold: every icon meets the §2.4 shape spec (24×24 grid, 2px stroke, round joins) and carries an accessible name (§3.2).
e.g. Font Awesome, IcoMoon, Material Icons (font)
✓ Good fit: huge ready-made sets; size & recolor with plain CSS; tiny markup; fastest to ship.
⚠ Watch-outs: icon-font a11y quirks (must hide + label); whole-font payload unless subset; soft pixel-alignment; licensing tiers; hard to tune glyphs to brand.
Best when breadth & speed matter more than bespoke iconography.
e.g. Lucide, Feather, Phosphor, Heroicons, Material Symbols (SVG)
✓ Good fit: crisp at any size; tree-shake to ship only what’s used; easy a11y & currentColor; several sets already match a 24px / 2px-stroke look.
⚠ Watch-outs: cross-set consistency varies; still need a few dive-specific icons; needs a sprite / build pipeline.
Best when we want crisp, accessible, lightweight icons with little custom work — a strong default.
bespoke, drawn for PADI to the §2.4 shape language
✓ Good fit: perfect brand fit + dive-specific metaphors (regulator, BCD, depth); full control of optical weight; unmistakably “One PADI.”
⚠ Watch-outs: highest cost + ongoing maintenance; slowest to broad coverage; needs a clear owner & governance.
Best when iconography is a brand signature and the set is bounded, with design capacity to maintain it.
off-the-shelf SVG base + custom for dive / brand-critical icons
✓ Good fit: library breadth & speed, plus brand fit where it matters; controls cost; scales as needs grow.
⚠ Watch-outs: must enforce one grid / stroke / optical spec so both sources read as one family; light governance to decide “library vs custom” per icon.
Best when we want a pragmatic balance — where most teams land.
- How icon-led is PADI’s brand expression — a signature, or functional wayfinding?
- Budget & timeline for any bespoke work, and who owns the set long-term?
- Coverage needed now (web) vs later (app), and licensing preferences (open-source only? paid tiers OK?).
- Which dive-specific metaphors do we need — and which are regulated (below) vs decorative?
- Performance & a11y bar: subsetting / tree-shaking, accessible names, and never meaning by icon alone (§3.2).
Regulated dive symbology — unaffected by the choice above
Standardized safety symbols — dive flags, certification marks, and hand-signal references — are regulated meaning, not brand decoration. Reproduce them to their official specification (correct colors, proportions, and clear space); never recolor, round, or restyle them to match the UI set, and never substitute a UI icon where a regulated symbol is required.
official red + white — exact
“diver down, keep clear”
2.6Imagery & art direction
This section is being developed and will be detailed in a later revision.
2.7Motion & interaction
This section is being developed and will be detailed in a later revision.
2.8Elevation & depth
Light from above, over ocean depth. Surfaces are flat planes lifted off a deep background, and depth reads through soft, cool, navy-tinted shadows — never hard black. Six levels (0–5) each pair a shadow with a z-index band (below). In dark mode, elevation shows as a lighter surface tint, not shadow. Never hand-pick z-index — use the named bands, and keep safety-critical alerts on the overlay / toast bands so they can never be occluded (§3.2). 🔒 Locked across lenses; shadow is never the only signal of state.
Elevation scale
| Level | z-index band | Used for |
|---|---|---|
| 0 · flush | Base (0) | Flush surfaces, data tables, page-background panels |
| 1 · at rest | Base (0) | Cards at rest, list items |
| 2 · raised | Sticky (100) | Hover / active cards, sticky bars |
| 3 · overlay | Dropdown (1000) | Dropdowns, popovers, menus |
| 4 · modal | Modal (1200) | Dialogs, sheets (scrim at Overlay 1100) |
| 5 · max | Toast (1300) | Toasts, snackbars, command palette |
2.9Progress & momentum
The pull from curiosity to confident diver is PADI’s core promise — so the interface keeps the path and the next step visible. Surface the next nudge at the moments that matter (certification, progress, lapse); momentum is always shown, never a dead end (the Transformative anchor, §3.1).
✓ Do celebrate milestones and always offer a clear next step; ✗ Don’t leave a dead end after a milestone or hide the path forward.
Application & Systematization — the “how”
What makes the directive operational rather than aspirational — how the language becomes content, accessibility, responsive behavior, and tuned interpretations.
3.1Content & tonality in the interface
Tone is part of the visual language because words and type render together — and for PADI it flexes across the same expressive↔utility spectrum as the visuals.
Tonal anchors — the five brand values, translated to interface consequences
| Tonal anchor | What it must mean in the interface | Do | Don’t |
|---|---|---|---|
| Authentic | Real divers, real places, real conditions over staged stock; honest about cost, time, and effort. | ✓ Lead with documentary imagery of actual divers & sites; state full cost, duration & prerequisites before the CTA. | ✗ Clichéd “perfect beach” stock; hidden fees or “contact us” pricing; implying diving is effortless. |
| Expert | Precise and unambiguous, especially anything safety-, skill-, or money-related. Authority through clarity, not jargon. | ✓ State safety/skill info in exact, plain language at AAA contrast (§2.1, §3.2); gloss dive terms for non-divers; show prerequisites explicitly. | ✗ Hedge on safety (“should be fine”); bury requirements; signal safety or cert by color alone. |
| Environmentally Active | Ocean conservation is a visible, actionable commitment woven through the experience — not a decorative badge. | ✓ Surface real conservation actions at relevant moments; give conservation a genuine, recurring place in the experience; make “save the ocean” tangible (learn / act / donate). | ✗ Reduce conservation to a sticker icon; use ocean imagery purely decoratively; overstate impact (greenwash). |
| Inclusive | Genuine global diversity of the diving community; usable by everyone; safe across languages and scripts. | ✓ Show authentic diversity of bodies, ages, ethnicities & abilities; meet WCAG 2.2 AA everywhere (§3.2); survive long translations, CJK & RTL (§2.2). | ✗ Default to a narrow young / athletic / Western cast; ship inaccessible or color-only components; assume English-length layouts. |
| Transformative | Conveys momentum and growth — the pull from curiosity to confident diver — with progress always visible. | ✓ Make progress & “what’s next” visible; use motion to reinforce continuity and advancement; celebrate milestones; always offer a clear next step. | ✗ Leave a dead end after a milestone; hide the path forward; gimmicky animation on safety content. |
Recommended voice in UI
The inherited brand voice, set to an interface register: confident and human, expert without lecturing. Four attributes guide every string:
Microcopy patterns
3.2Accessibility (pillar, not checklist)
Accessibility is mission-fit, not compliance: safety-critical information must be unmissable by anyone. It ships in the first pass (pillar 05, §1.2), never as a retrofit.
Verified three ways: automated checks in CI (axe / Lighthouse) on every template; manual keyboard-only and screen-reader passes before sign-off; and a periodic audit in the quarterly health check (§4.2). Safety-critical text targets AAA (7:1).
What we design for
tabindex; modals & sheets trap focus and return it on close; every page offers a skip-to-content link.aria-label or visually-hidden text. The visible label is part of that name (label-in-name), and link purpose is clear from its text or context — never a bare “click here.”prefers-reduced-motion as a first-class path; never tie meaning to motion alone.<title> and one logical h1→h6 outline (§3.1) — orientation for screen readers and search alike.3.3Responsive & cross-platform parity
The rules below anchor from a mobile-first approach, making responsive web the deliverable and keeping cross-platform decisions parity-ready for the unified PADI mobile app.
Mobile-first, then enhance — design at the smallest breakpoint, layer up
Colour, type, spacing, shape and component logic stay platform-neutral and portable, so padi.com and the unified PADI mobile app draw from one source of truth. The same tokens and components express on both — varied by lens (§3.4), never forked per platform.
Web and app share the system but lead with different intent. Where they diverge, the language flexes by lens (§3.4) rather than forking — so both platforms stay unmistakably one PADI.
3.4Design lenses
Four complete mobile homepage directions — the same brand, palette, type and components from this directive, expressed four distinct ways.
Immersion
Dark & cinematic. Deep navy and near-black backgrounds, full-bleed photography, and glowing Caribbean-blue accents. Type is large and quiet; the imagery does the talking. Scrolling feels like a descent.
- Navy→black canvas, edge-to-edge images
- Caribbean-blue glow on a single CTA
- Depth markers, full-screen panels, carousels
First Breath
Light & airy. White and soft-aqua tints, teal as the colour of trust, generous whitespace, big rounded cards and gentle shadows. Calm and human — the opposite mood to Immersion, from the same palette.
- White / soft-aqua tints, lots of breathing room
- Teal accents, 16–26px rounded corners
- Soft shadows, friendly chips & step cards
Currents
Editorial & confident. Oversized navy display headlines on paper white, with full-bleed photography in soft-cornered cards. A single warm burnt-orange accent is held back for section eyebrows and primary calls-to-action — used sparingly, per the brand’s accent rule — with orange only on small marks such as ratings. Magazine-grade hierarchy on a working homepage: courses, destinations, stats and trending dives.
- Oversized uppercase navy headlines, generous white space
- Photo cards with neutral navy / white badges
- Warm accent reserved for eyebrows & primary CTAs
Momentum
Vibrant & energetic. Bright PADI-blue gradients, angular diagonal section cuts, big numerals, progress bars and Caribbean-blue energy tags. The most kinetic direction — the same blues as the others, pushed loud and forward-moving.
- Bold blue gradients, diagonal clip-paths
- Progress timeline, big stat numerals
- Caribbean tags, energetic course cards