# Kualifi website style guide

## Experience principles
1. Show progress before complexity.
2. Explain requirements in plain language.
3. Put the next action within reach.
4. Make evidence and methodology visible.
5. Never blur readiness with certification.

## Layout
Use a 12-column grid, maximum content width 1200 px, 24 px mobile gutters and 40–64 px desktop gutters. Use 96–144 px between major desktop sections and 64–96 px on mobile.

## Components
- Primary CTA: cobalt pill, white label. Focus state: a 3 px navy focus ring (with an optional lime glow behind it). Do **not** use a lime-only focus ring — lime on white measures 1.32:1 and fails the WCAG 2.2 non-text-contrast minimum of 3:1.
- Secondary CTA: navy text on transparent background with a directional arrow.
- Cards: white on warm canvas, 16 px radius, quiet navy-tinted border.
- Progress: numeric score plus label and explanation; never colour alone.
- Forms: one decision per screen when possible; persistent progress and save state.
- Evidence: show source, review status, owner and next review date.
- Alerts: explain consequence and a specific recovery action.

## Photography and illustration
Prioritise genuine Malaysian SME environments, product UI and simple editorial diagrams. Avoid handshakes, wind turbines, leaf overlays and staged "green business" imagery.

## Motion
Use restrained 180–240 ms transitions to reveal progress or hierarchy. Respect reduced-motion settings.

## Accessibility
Target WCAG 2.2 AA. Keep body copy at 16 px minimum, preserve keyboard focus, label every field, use semantic headings and provide text equivalents for scores and charts. Verified contrast notes:
- Navy `#0B1739` and Ink `#17213B` on canvas: 16.1:1 and 14.6:1 — use for body copy.
- Cobalt `#3157F6`: 5.5:1 on white, 5.0:1 on canvas — safe for links, and for white text on a cobalt fill.
- Teal `#0C9B8E` with white: 3.45:1 — **large text and UI only**. Use navy or ink for body copy on teal.
- Slate `#667085` on canvas: 4.56:1 — passes AA but is borderline; reserve for secondary text, not long body passages.
- Lime `#B7F34A`: an accent on navy/dark only (13.3:1 on navy). Never white-on-lime or lime-on-white for text or focus indicators.

## Language and spelling
- Use British spelling throughout: organise, prioritise, recognise, colour, behaviour, licence (noun).
- No Oxford comma: "prepare, improve and stay ready".
- Em dashes are unspaced: "ready—without getting lost".
- "ESG" is always capitalised; expand to "environmental, social and governance" on first mention in long-form copy.
- Follow the SIRIM and readiness-claim rules in the brand guidelines: readiness is never described as certification, and "SIRIM" never appears inside a Kualifi badge.