Turning the brand into correct, repeatable interface decisions.

0.1Relationship to the brand styleguide (parent / child)

Conflict ruling: Where this directive and the brand styleguide conflict on an identity-level matter (logo, wordmark, core palette, master typography, brand voice), the brand styleguide wins. Where the conflict is digital-application-specific and the brand book is silent (interaction states, theming, density, tokens, motion, elevation), this directive governs. Edge cases are adjudicated by the Design Authority (§1.4) in consultation with PADI’s brand sign-off owner, and the ruling is recorded so it does not have to be re-litigated.

Canonical brand styleguide

Source of truth for all inherited identity decisions: PADI UI Designs — brand styleguide (Figma).

Inherited brand assets — analyzed from the Brand & Extended Palette (dev view)

No type specimen is published in the brand palette file. Per client 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.

0.2Scope

This engagement operationalizes PADI’s existing brand into a digital design language for padi.com (web). It does not redesign the brand, and it does not deliver the app, authenticated, or operational surfaces this phase.

0.3Brand values → digital translation

1.1Design pillars / principles

3–5 north-star tenets every decision ladders up to. Each pairs with an actionable do/don’t so it’s a tie-breaker, not a poster. The core tension to encode for PADI is adventure × trust — aspirational enough to sell the dream, credible enough to be trusted with a life-safety certification.

Each pillar carries a tie-breaker — the one sentence a designer can quote to settle a disagreement between two defensible options.

1.2Audience & context of use

The same person shows up in different modes; the physical context is unusually demanding. This drives contrast, touch-target, and legibility decisions — so it’s a constraint, not background.

Per-segment summary — goals, friction, context, and the one job the interface must nail

Cross-cutting constraints apply to every segment: the multi-role reality (a person graduates across segments over time) and the physical context (bright sun, wet/gloved hands, mobile-first) — these set the contrast, touch-target, and legibility floors in §2.1, §2.3, and §3.2. Lens detail lives in §3.4; surface scope in §0.2.

1.3Emotional / experiential intent

Mood-boarding lives here — but anchored to felt outcomes and tied to the pillar each reference serves, so the board is an argument, not a Pinterest dump. Note: the team has explicitly stated practical application on real pages beats abstract mood boards — keep this section tight and validate it against real archetypes.

Four target felt states balance the adventure × trust tension. Each maps to a pillar and one concrete interface move — so a mood reference is an argument, not decoration.

Awe / wonder

“The ocean pulls me in.”

Full-bleed imagery and color lead; generous space lets media breathe (§2.6, §2.3).

Pillar 01 · Ocean is the hero

Calm confidence

“I feel safe and certain, not anxious.”

Steady layouts, plain language, transparent cost / time, restrained motion (§3.1, §3.2, §2.7).

Pillars 02 & 04 · Fear / clarity

Earned momentum

“I’m progressing, and I know what’s next.”

Visible progress and milestones; an always-clear next step; motion reinforces advancement (§2.9, §2.7).

Transformative value · §0.3

Belonging

“People like me dive — I’m part of this.”

Authentic, diverse representation; inclusive language; warm empty & first-run states (§2.6, §3.1).

Pillar 05 · Inclusive by default

Validate these against real page explorations, not abstract mood boards (the team’s stated preference): every homepage / template exploration should be readable as serving one or more of these felt states, and each lens (§3.4) dials their intensity — the Immersive lens leans into awe, Utility into calm efficiency.

1.4Design authority & governance

The most under-specified area in most directives, and what keeps this document alive instead of stale in a quarter.

Ownership

Assign named individuals to these roles at project kickoff.

Decision rights

Contribution model

Versioning & deprecation

Deprecation: mark it, name the replacement, support for one major version, then remove — never silently. Breaking changes ship with migration notes and advance notice to the web (and future mobile, §0.2) build team.

Cadence

Align all three to the actual sprint calendar so governance rides the existing rhythm rather than competing with it.

2.1Color

Not a palette — a semantic system. Brand hues are inherited (🔒); functional roles are defined here.

• Architecture: two layers — the inherited brand hexes (listed in §0.1) and the semantic roles defined here that draw from them. Components reference a role (“primary action”), never a raw hex.
• Inherited palette: 🔒 Locked the full set of brand hexes is catalogued in §0.1 (Primary, Secondary, Accent, Neutrals). This section assigns them to roles; it never edits the values.
• Status colors are partly functional — where a brand hue can’t meet the contrast floor for text, a darkened functional value is defined and flagged below.
• 🎚 Flex which roles dominate per lens (the Immersive lens leans expressive; Utility leans functional). 🔒 Locked the hex values and contrast floors themselves.

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

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:

Data visualization

Never encode data by color alone — direct-label series and keep adjacent series separable (≥3:1 or a dividing stroke). Verify the categorical set against common color-vision deficiencies.

Light / dark posture

Light theme is the default and primary surface. On a bright boat deck, maximum screen brightness with dark-on-light is the most legible option, and PADI’s color + ocean imagery read best on light. Dark theme is a first-class opt-in for low-light contexts (night dives, evening trip planning), OLED battery saving, and user preference — built on deep ocean surfaces (#05283E / #043A47) with near-white text, expressing elevation via lighter surface tint rather than shadow (§2.8). Both themes meet the AA floor; safety-critical content holds AAA in both. Respect the OS prefers-color-scheme setting, with a manual override.

Contrast targets — the floor (§3.2)

2.2Typography

• Type scale & hierarchy logic: a 1.25 (major third) modular scale on a 16px base, mobile-first; display/H1 step up at the ≥768px breakpoint. Roles, sizes, weights and metrics are specified in the ramp and table below.
• Pairing: Nunito Sans (display / headings) + Inter (body, UI, data, dense operational views). Rationale: Nunito Sans carries brand warmth and approachability (supports “dissolve the fear”); Inter maximizes legibility at small sizes and in data-dense screens (supports “clarity under pressure”).
• Multilingual rendering: PADI is global — the scale must survive long German compounds, CJK, and RTL without breaking hierarchy. Note: neither Nunito Sans nor Inter covers CJK or Arabic/RTL scripts, so define a script fallback stack (a Noto family) that preserves the same weights and rhythm — specified under Font stacks below.
• 🔒 Locked scale & hierarchy logic once set. 🎚 Flex emphasis/weight usage 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. Available weights — Nunito Sans 400/600/700/800, Inter 400/500/600/700. Body Large (Inter) and H5 (Nunito Sans) share 20px but read differently by face and weight.

Font loading & localisation

• Loading: self-host and subset; ship only the weights above. Preload the two most-used weights (Nunito Sans 800, Inter 400) and swap with a metrics-matched fallback so font loading doesn’t shift layout.
• Localisation: for CJK and RTL locales, fall back to a matching Noto face rather than restyling the scale — sizes, weights, and line-heights stay constant across languages.

2.3Layout & spatial system

Largely what greyscale wireframes already encode implicitly — make it explicit and named.

• Grid: a mobile-first responsive grid — 4 / 8 / 12 columns across breakpoints; content caps at 1200px (container max 1280px), with full-bleed permitted for immersive imagery. Gutters & margins per the grid table below.
• Spacing scale: an 8px base system with a 4px half-step — 0 · 4 · 8 · 12 · 16 · 24 · 32 · 40 · 48 · 64 · 80 · 96 · 128. Every margin, padding, and gap comes from this scale; no arbitrary values.
• Density philosophy: one scale, three density modes — Spacious (Immersive) → Comfortable (Editorial / Catalog, default) → Compact (Utility). A lens chooses which steps a component uses; it never invents new ones.
• Breakpoints: mobile-first — Mobile / Tablet / Desktop / Wide at 768 · 1024 · 1440. Type display/H1 step up at the Tablet (≥768px) breakpoint, matching §2.2.
• Whitespace is an intentional tool, not leftover space. 🔒 Locked grid + spacing scale. 🎚 Flex density per lens.

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.

Responsive grid & breakpoints mobile-first · columns scale with the viewport

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

• Personality: soft-geometric — rounded enough to feel approachable and echo Nunito Sans’ curves, restrained enough to still read as expert and precise. Friendly, not bubbly.
• Corner-radius scale: 0 · 4 · 8 · 12 · 20 · 999 px. Buttons and controls default to 8px; cards/surfaces to 12px; pills (999) for actions, filters, and status; sharp (0) for full-bleed media, data tables, and dividers.
• Concentric rule: a nested radius equals its parent’s minus the gap between them (inner = outer − padding), so corners stay parallel.
• Stroke: 1px hairline borders by default; 1.5–2px for emphasis and focus rings (focus styling in §3.2).
• 🔒 Locked across lenses — radius scale + silhouette are cheap to get inconsistent and high-impact on brand feel; lenses never change shape.

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: a flexible UI icon set we own, and regulated dive symbology we reproduce verbatim.

UI icon set

Outlined, geometric, friendly — drawn on a 24×24 grid with a 2px stroke, round caps and joins, echoing the soft-geometric shape language (§2.4).

✓ Do keep one consistent metaphor system and optical weight; align to the pixel grid. 🎚 Flex stroke emphasis (filled vs. outline) may shift by lens.

Regulated dive symbology

2.6Imagery & art direction

For PADI this is the primary brand carrier — more than any single rule or color.

Treatment recipe — immersive header with legibility scrim

Scrim → text ≥ AA (§3.2) Start Diving

Begin where the light gets in

The locked recipe: natural, true-to-life color grade (no heavy filters), a generous crop that lets the scene breathe, and a bottom-up dark gradient scrim so overlaid text always clears the §3.2 contrast floor. 🔒 Locked treatment recipe & diversity standard.

Photography vs. illustration

Imagery intensity per lens 🎚 Flex full-bleed immersion → restrained / functional

Immersive lensFull-bleed, immersive

Editorial / CatalogSupporting, framed

No hero

Utility lensRestrained — content leads

People & diversity

When not to use a hero image

Sourcing, licensing & alt text

• Sourcing: prefer PADI’s own licensed library and real community/ambassador imagery over stock; every asset needs cleared rights and model releases.
• Alt text: every meaningful image carries descriptive alt text; decorative images are marked empty so screen readers skip them (ties to §3.2).

2.7Motion & interaction

Motion orients, connects, and confirms — calm and purposeful, never decorative. It carries the calm confidence felt state (§1.3), so nothing bounces on safety content.

Easing curves

Duration scale

What motion may — and may not — do

2.8Elevation & depth

• Metaphor: light from above, over ocean depth. Surfaces are flat planes lifted off a deep background; depth reads through soft, cool, navy-tinted shadows — never hard black drop shadows.
• Elevation scale: six levels (0–5), each pairing a shadow level with a z-index band — see the table below.
• Dark mode: express elevation with a lighter surface tint rather than shadow (shadows read poorly on dark) — higher elevation = lighter surface.
• Stacking discipline: never hand-pick z-index; use the named bands. Safety-critical alerts ride the overlay / toast bands so they can never be occluded (ties to §3.2).
• 🔒 Locked across lenses — the shadow scale + z-index bands are fixed; shadow is decorative and never the only signal of state.

Elevation scale

2.9Data, progress & credential visualization

PADI interfaces are data-rich — certifications, dive logs, learning progress, Club tier, trips, NPS. Ignore this and it fragments fast.

Credential / certification display

Cert level, progress, and “what’s next” read consistently across the web journeys — built to carry into MyPADI and the app later. Level uses the §2.1 progression ramp as a supportive accent, always beside a label and a numeric value (never color alone).

Progress & momentum

Show the path and the next nudge at the moments that matter — certification, progress, and lapse. Momentum is visible, never a dead end (the Transformative value, §0.3).

Charts & data color

Use the §2.1 data-viz ramps (categorical · sequential · diverging). Three rules hold everywhere:

• Never encode by color alone — direct-label series and add a non-color cue; verify against color-vision deficiencies.
• Numerics align: use Inter tabular figures (§2.2) so columns of dives, depths, and prices line up.
• States included: design empty, loading, and single-data-point states, not just the happy path.

Pro / Dive-Center dashboard data

Dense, operational, scannable — high information density on the compact end of §2.3. Deferred this phase (§0.2); captured here as forward intent so the language is ready when the dashboard lands.

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.

Voice in UI

The inherited brand voice, set to an interface register: confident and human, expert without lecturing. Four attributes guide every string:

Tone spectrum

Same voice, dialed by lens (§3.4): inviting and evocative in the Immersive lens; terse, exact, and scannable in Utility and data-dense views.

Terminology policy

Microcopy patterns

Inclusive language & reading level: write inclusively and plainly — aim for roughly a Grade 8 reading level, and simpler still for safety-critical copy, which must be unmissable and unambiguous (§3.2).

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.1), never as a retrofit.

What we design for

3.3Responsive & cross-platform parity

This phase is web-only (§0.2); the rules below make responsive web the deliverable and keep cross-platform decisions parity-ready for the deferred app.

• Mobile-first responsive web: design at the smallest breakpoint first, then enhance. Single-column flows stack and a sticky CTA anchors the screen on mobile; cards go 2-up at Tablet and into the full 12-column grid at Desktop (§2.3). Touch targets ≥ 44px throughout for wet, gloved hands.
• Parity-ready (app deferred, §0.2): keep colour, type, spacing, shape, and component logic platform-neutral and portable, so the future app inherits the same decisions. This phase enforces consistency within web, not across platforms yet.
• Channel intent (forward context): web skews to longer lead times and course bookings; the future app will skew to shorter lead times and fun-dive bookings. Where intent diverges, the language flexes by lens (§3.4) rather than forking — note those divergences now so the app phase starts informed.

3.4The design lens model (hook to the separate lens framework)

A design lens is a UI approach — a controlled way of applying the one visual system to a surface. Same color, type, spacing, shape, elevation, and components; what changes is how strongly each is dialed. A lens is never a new brand or a re-skin.

Lens axes (the degrees of freedom): Expression ↔ Utility · Imagery intensity · Density · Motion budget · Color emphasis.

The four lenses — sliders run utility / restrained (left) → expression / immersive (right)

A single journey usually moves through several lenses by section — e.g. an Immersive homepage hero leading into a Catalog of courses and an Editorial “what to expect,” then a Utility checkout. The lens changes how the system is dialed, never the locked foundations.

Worked examples — each a complete page applying the same visual system one way:

Full per-lens specifications, allowed axis ranges, and lens-combination rules live in the Design Lens Framework — build next.