Branding Guideline

We communicate authority, trust, and clarity. Cobalt blue signals action and focus. Slate neutrals provide document‑like calm. Semantics are strict and predictable.

“We are professional, trusted, and recognized globally — but also digital‑first, modern, and accessible.”

Typography

Headings use Lato. Body uses Noto Sans. All line‑heights and section spacing snap to a 1.25rem vertical rhythm.

Palette

Primary = Cobalt (actions), Secondary = Teal (support), Neutrals = Slate (surfaces), Info = Cobalt, Success = Emerald, Warning = Amber, Error = Red. Accent Green = marketing only.

Brand Guardrails

Cobalt = Primary (actions/links). Hover: primary-700, Active: primary-800.
Neutral surfaces: white, neutral‑50/100. Avoid blue “painted” backgrounds.
Semantic purity: success/emerald, warning/amber, error/red; info = cobalt.
Accent restraint: bright green is marketing only (never actions/success).
Focus visibility: focus:ring-primary-600/80 focus:ring-2 focus:ring-offset-2.
Links: text-primary-600 underline hover:text-primary-700 visited:text-primary-800.

Government‑like Without Pretending to Be Government

Blue = official authority (modernized).
Greys = document‑like surfaces (safe, calm, trusted).
Strict semantics → predictable feedback.
Accent restraint respects users’ trust and time.

Why Design Tokens

Consistency: Every style decision is encoded and reused.
Communication: Shared language between design & development.
Scalability: Update a token once → changes cascade across components.
Accessibility: Semantic tokens bake in inclusive defaults.
Cross‑platform: Same tokens for web, mobile, marketing, docs.

Design Tokens (Code)

    
      /* InternationalDriversAssociation.com — Design Tokens (v0.2)
      Load before Tailwind CDN. Tailwind will read `tailwind.config`.
   */
   tailwind.config = {
       theme: {
         extend: {
           /* ------------------------------ COLORS (Tokens) ------------------------------ */
           colors: {
             primary: {
               50:'#F2F7FF',100:'#E6F0FF',200:'#CDE0FF',300:'#A9C9FF',400:'#7FAEFF',
               500:'#4C8DFF',600:'#1E66FF',700:'#1554E1',800:'#1442B0',900:'#122E7D'
             },
             info: { /* alias to cobalt to keep action/info in one hue */
               50:'#F2F7FF',100:'#E6F0FF',200:'#CDE0FF',300:'#A9C9FF',400:'#7FAEFF',
               500:'#4C8DFF',600:'#1E66FF',700:'#1554E1',800:'#1442B0',900:'#122E7D'
             },
             secondary: { /* Teal (supporting) */
               50:'#F0FDFA',100:'#CCFBF1',200:'#99F6E4',300:'#5EEAD4',400:'#2DD4BF',
               500:'#14B8A6',600:'#0D9488',700:'#0F766E',800:'#115E59',900:'#134E4A'
             },
             neutral: { /* Slate (document-like surfaces) */
               50:'#F8FAFC',100:'#F1F5F9',200:'#E2E8F0',300:'#CBD5E1',400:'#94A3B8',
               500:'#64748B',600:'#475569',700:'#334155',800:'#1F2937',900:'#0F172A'
             },
             success:{100:'#ECFDF5',300:'#34D399',500:'#10B981',700:'#047857'},
             warning:{100:'#FEF3C7',300:'#FBBF24',500:'#F59E0B',700:'#B45309'},
             error:{100:'#FEE2E2',300:'#FCA5A5',500:'#EF4444',600:'#DC2626'},
             accent:{500:'#9FE870'} /* marketing-only pop; never actions or success */
           },
     
           /* ------------------------------ TYPOGRAPHY ---------------------------------- */
           fontFamily: {
             heading: ['Lato','system-ui','-apple-system','"Segoe UI"','Roboto','"Helvetica Neue"','Arial','"Noto Sans"','"Apple Color Emoji"','"Segoe UI Emoji"','sans-serif'],
             sans: ['"Noto Sans"','system-ui','-apple-system','"Segoe UI"','Roboto','"Helvetica Neue"','Arial','"Apple Color Emoji"','"Segoe UI Emoji"','sans-serif'],
             mono: ['ui-monospace','SFMono-Regular','Menlo','Monaco','Consolas','"Liberation Mono"','"Courier New"','monospace']
           },
           /* Vertical rhythm base = 1.25rem (20px). Scales snap line-height to rhythm. */
           fontSize: {
             h1:['3.052rem',{lineHeight:'3.75rem',fontWeight:'700'}],
             h2:['2.441rem',{lineHeight:'3.75rem',fontWeight:'700'}],
             h3:['1.953rem',{lineHeight:'2.5rem', fontWeight:'700'}],
             h4:['1.562rem',{lineHeight:'2.5rem', fontWeight:'700'}],
             h5:['1.25rem', {lineHeight:'1.875rem',fontWeight:'700'}],
             h6:['1.125rem',{lineHeight:'1.25rem', fontWeight:'700'}],
             base:['1rem',   {lineHeight:'1.25rem', fontWeight:'400'}],
             sm:['0.875rem',{lineHeight:'1.25rem', fontWeight:'400'}],
             xs:['0.8125rem',{lineHeight:'1.25rem', fontWeight:'400'}],
             lg:['1.125rem',{lineHeight:'1.875rem',fontWeight:'400'}]
           },
     
           /* ----------------------------- SPACING (4‑pt) ------------------------------ */
           spacing: {
             0:'0rem',0.5:'0.125rem',1:'0.25rem',1.5:'0.375rem',2:'0.5rem',2.5:'0.625rem',
             3:'0.75rem',3.5:'0.875rem',4:'1rem',5:'1.25rem',6:'1.5rem',7:'1.75rem',
             8:'2rem',9:'2.25rem',10:'2.5rem',11:'2.75rem',12:'3rem',14:'3.5rem',
             16:'4rem',20:'5rem',24:'6rem',28:'7rem',32:'8rem'
           },
     
           /* ------------------------------ RADII & BORDERS ---------------------------- */
           borderRadius:{ none:'0px', xs:'2px', sm:'4px', md:'8px', lg:'12px', xl:'16px', full:'9999px' },
           borderWidth:{ DEFAULT:'1px', 0:'0', 2:'2px', 4:'4px' },
     
           /* -------------------------------- SHADOWS ---------------------------------- */
           boxShadow:{
             0:'none',
             1:'0 1px 2px 0 rgb(0 0 0 / 0.06)',
             2:'0 2px 6px -1px rgb(0 0 0 / 0.08), 0 1px 3px 0 rgb(0 0 0 / 0.06)',
             3:'0 8px 16px -4px rgb(0 0 0 / 0.10), 0 4px 6px -2px rgb(0 0 0 / 0.08)',
             4:'0 16px 32px -6px rgb(0 0 0 / 0.12), 0 8px 12px -4px rgb(0 0 0 / 0.10)',
             5:'0 24px 48px -8px rgb(0 0 0 / 0.18), 0 10px 16px -6px rgb(0 0 0 / 0.12)'
           },
     
           /* -------------------------------- Z-INDEX ---------------------------------- */
           zIndex:{ '-1':'-1', 0:'0', 1:'1', 10:'10', 20:'20', 30:'30', 40:'40', 50:'50', 100:'100', 1000:'1000', 9999:'9999' },
     
           /* -------------------------------- OPACITY ---------------------------------- */
           opacity:{5:'0.05',10:'0.10',20:'0.20',30:'0.30',40:'0.40',50:'0.50',60:'0.60',70:'0.70',80:'0.80',90:'0.90',100:'1'},
     
           /* ------------------------- TRANSITIONS & EASING ---------------------------- */
           transitionDuration:{ instant:'75ms', fast:'150ms', base:'200ms', slow:'300ms', deliberate:'500ms' },
           transitionTimingFunction:{
             standard:'cubic-bezier(0.2, 0, 0, 1)',
             emphasized:'cubic-bezier(0.3, 0, 0.2, 1)',
             in:'cubic-bezier(0.4, 0, 1, 1)',
             out:'cubic-bezier(0, 0, 0.2, 1)'
           },
     
           /* -------------------------------- BREAKPOINTS ------------------------------ */
           screens:{ sm:'640px', md:'768px', lg:'1024px', xl:'1280px', '2xl':'1536px' }
         }
       }
     };

Design Tokens (Code)

    
      # InternationalDriversAssociation.com — **Design System** (v0.2)  
      **File:** `design-system.md` · **Audience:** humans & LLMs · **North Star:** *InternationalDriversAssociation.com — Design System Definition (v0.2)*  
      **Goal:** Provide a **single source of truth** that an engineer or AI can follow to design and build UI that is authoritative, accessible, and consistent—**government‑like without pretending to be government**.
      
      ---
      
      ## 0) How to use this document (for humans & LLMs)
      
      - **Tokens-first, mobile-first.** Always use the tokens and utilities below. Do not hard‑code colors, spacing, or sizes. Start from mobile layouts and progressively enhance.
      - **Only Tailwind utilities + extended tokens.** No bespoke CSS classes. When non‑Tailwind is unavoidable (e.g., third‑party embed), use the provided CSS variables.
      - **Authority without misrepresentation.** Use blue for actions and highlights; keep surfaces neutral. Always include the disclaimer “Not government affiliated” in footers and legal copy when relevant.
      - **Accessibility is non‑negotiable.** Enforce color contrast, keyboard navigation, focus visibility, target sizes ≥44×44 px, and reduced‑motion preferences.
      - **When in doubt:** prefer neutrality, clarity, and predictable semantics.
      
      ---
      
      ## 1) Brand Positioning & Guardrails
      
      ### Government‑like Without Pretending to Be Government
      You’re not government affiliated, but you want the perception of legitimacy. The palette and typographic system achieve this by:
      - **Blue = official authority** (modernized cobalt for action).
      - **Greys = document‑like surfaces** (safe, calm, trusted “paper”).
      - **Strict semantic system** (success=green, warning=amber, error=red, info=blue) for predictability.
      - **Accent restraint** signals respect for the user’s trust and time.
      
      **Promise communicated:**  
      “We are professional, trusted, and recognized globally — but also digital‑first, modern, and accessible.”
      
      **Do**
      - Use blue for links, primary buttons, key focus states.
      - Keep pages light, neutral, and calm; elevate with shadows, not dark fills.
      - Map all styles to tokens.
      
      **Don’t**
      - Paint backgrounds blue (except small banners or info strips).
      - Use accent green for “success” or actions (marketing/data viz only).
      - Introduce new hues for system semantics.
      
      ---
      
      ## 2) Design Tokens (Authoritative Source)
      
      > **All decisions map to tokens.** Tailwind theme keys are extended to include our brand naming. When generating UI, prefer these names over raw values.
      
      ### 2.1 Color Tokens
      
      **Core brand (Cobalt / Primary & Info)**  
      Scale: 50–900 (HEX)  
      `primary` (and `info` alias the same cobalt scale)
      
      | Token                | Hex      | Usage                                    |
      |---------------------|----------|------------------------------------------|
      | `primary-50`        | #F2F7FF  | Tinted surfaces                          |
      | `primary-100`       | #E6F0FF  | Tinted surfaces                          |
      | `primary-200`       | #CDE0FF  | Selections, subtle focus backgrounds     |
      | `primary-300`       | #A9C9FF  | Tints, charts                            |
      | `primary-400`       | #7FAEFF  | Icons/titles (large), not body text      |
      | `primary-500`       | #4C8DFF  | Icons, badges                            |
      | `primary-600`       | #1E66FF  | **Default action & link color**          |
      | `primary-700`       | #1554E1  | Hover/visited for links; hover for CTA   |
      | `primary-800`       | #1442B0  | Active/pressed                           |
      | `primary-900`       | #122E7D  | Rare accents, high‑contrast text         |
      
      **Secondary (Teal) — supporting**  
      `secondary-700 #0F766E` for solid secondary buttons (white text passes).
      
      **Neutrals (Slate) — UI backbone**  
      `neutral-50 #F8FAFC` (paper), `neutral-900 #0F172A` (body text), borders `neutral-200/300`.
      
      **Semantics**  
      - `success-100 #ECFDF5`, `success-300 #34D399`, `success-500 #10B981`, `success-700 #047857`  
      - `warning-100 #FEF3C7`, `warning-300 #FBBF24`, `warning-500 #F59E0B`, `warning-700 #B45309`  
      - `error-100 #FEE2E2`, `error-300 #FCA5A5`, `error-500 #EF4444`, `error-600 #DC2626`  
      - **Info** uses cobalt (`primary`).
      
      **Marketing accent (limited use)**  
      `accent-500 #9FE870` — use with dark text; not for actions or system success.
      
      **Contrast checks (WCAG)**
      - `primary-600` on white ≈ 4.77:1 (AA normal text)  
      - `primary-700/800` on white ≈ 6.2–8.6:1 (AAA normal text)  
      - White on teal‑700 / amber‑700 / red‑600 / emerald‑700 ≥ 4.8:1.
      
      ### 2.2 Typography Tokens
      
      - **Families:**  
        - Headings: `"Lato"`, fallbacks: `system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", sans-serif`  
        - Body: `"Noto Sans"` (+ same fallbacks)  
        - Code: `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace`
      - **Scale (best‑practice type scale; vertical rhythm aligned to 1.25rem/20px line grid):**
        - `h1` 3.052rem / 3.75rem / 700  
        - `h2` 2.441rem / 3.75rem / 700  
        - `h3` 1.953rem / 2.5rem / 700  
        - `h4` 1.562rem / 2.5rem / 700  
        - `h5` 1.25rem / 1.875rem / 700  
        - `h6` 1.125rem / 1.25rem / 700  
        - `base` 1rem / 1.25rem / 400  
        - `lg` 1.125rem / 1.875rem / 400  
        - `sm` 0.875rem / 1.25rem / 400  
        - `xs` 0.8125rem / 1.25rem / 400
      - **Weights guidance:** Use 2–3 weights at once. Keep headings bold (700). Use `font-medium` (500) for labels/table headings sparingly. Avoid using weight alone for meaning; prefer structure, spacing, or bullets.
      
      ### 2.3 Spacing, Sizing, Grid
      
      - **Base unit:** 4px (4‑pt).  
      - **Vertical rhythm base:** `1.25rem` (20px) — all type line‑heights and key spacings align to this rhythm.  
      - **Preferred multiple:** 8px for layout, gutters, and section spacing.  
      - **Mobile:** 4px increments OK for compact adjustments.  
      - **Desktop:** 8px multiples for a predictable, “official” cadence.
      
      **Spacing scale** (Tailwind `spacing`): `0, 0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 5, 6, 7, 8, 9, 10, 11, 12, 14, 16, 20, 24, 28, 32`.
      
      **Containers**  
      Use Tailwind max‑width containers (e.g., `max-w-screen-lg|xl|2xl`) with responsive padding (`px-4 sm:px-6 lg:px-8`).
      
      ### 2.4 Borders, Radius, Shadows, Z‑index, Opacity
      
      - **Radius:** `xs 2px`, `sm 4px`, `md 8px`, `lg 12px`, `xl 16px`, `full`.  
      - **Border width:** `0, 1px (DEFAULT), 2px, 4px`.  
      - **Shadows:**  
        - `shadow-1` subtle (cards), `shadow-2/3` for elevation, `shadow-4/5` for modals/popovers.  
      - **Z‑index layers:** 0 content, 40 headers/sticky, 50 drawers, 100 modals, 1000 toasts, 9999 emergencies.  
      - **Opacity scale:** 5–100 in 10% steps.
      
      ### 2.5 Motion Tokens (Transitions & Easing)
      
      - **Durations:** `instant 75ms`, `fast 150ms`, `base 200ms`, `slow 300ms`, `deliberate 500ms`.  
      - **Easing:** `standard`, `emphasized`, `in`, `out` (cubic‑bezier in Tailwind `transitionTimingFunction`).  
      - **Reduce motion:** Respect `prefers-reduced-motion`; disable non‑essential animations.
      
      ### 2.6 Breakpoints (mobile‑first)
      
      - `sm 640px`, `md 768px`, `lg 1024px`, `xl 1280px`, `2xl 1536px`.
      
      ### 2.7 Focus & Link Tokens
      
      - **Focus ring:** `focus:ring-primary-600/80 focus:ring-2 focus:ring-offset-2`.  
      - **Links:** `text-primary-600 underline hover:text-primary-700 visited:text-primary-800`.
      
      ---
      
      ## 3) Token Implementations (Tailwind + CSS variables)
      
      > **LLMs:** When asked to produce code, include the config exactly or assume it exists.
      
      ### 3.1 `tailwind.config` (for CDN or build)
      ```js
      tailwind.config = {
        theme: {
          extend: {
            colors: {
              primary:{50:'#F2F7FF',100:'#E6F0FF',200:'#CDE0FF',300:'#A9C9FF',400:'#7FAEFF',500:'#4C8DFF',600:'#1E66FF',700:'#1554E1',800:'#1442B0',900:'#122E7D'},
              info:{50:'#F2F7FF',100:'#E6F0FF',200:'#CDE0FF',300:'#A9C9FF',400:'#7FAEFF',500:'#4C8DFF',600:'#1E66FF',700:'#1554E1',800:'#1442B0',900:'#122E7D'},
              secondary:{50:'#F0FDFA',100:'#CCFBF1',200:'#99F6E4',300:'#5EEAD4',400:'#2DD4BF',500:'#14B8A6',600:'#0D9488',700:'#0F766E',800:'#115E59',900:'#134E4A'},
              neutral:{50:'#F8FAFC',100:'#F1F5F9',200:'#E2E8F0',300:'#CBD5E1',400:'#94A3B8',500:'#64748B',600:'#475569',700:'#334155',800:'#1F2937',900:'#0F172A'},
              success:{100:'#ECFDF5',300:'#34D399',500:'#10B981',700:'#047857'},
              warning:{100:'#FEF3C7',300:'#FBBF24',500:'#F59E0B',700:'#B45309'},
              error:{100:'#FEE2E2',300:'#FCA5A5',500:'#EF4444',600:'#DC2626'},
              accent:{500:'#9FE870'}
            },
            fontFamily:{
              heading:['Lato','system-ui','-apple-system','"Segoe UI"','Roboto','"Helvetica Neue"','Arial','"Noto Sans"','"Apple Color Emoji"','"Segoe UI Emoji"','sans-serif'],
              sans:['"Noto Sans"','system-ui','-apple-system','"Segoe UI"','Roboto','"Helvetica Neue"','Arial','"Apple Color Emoji"','"Segoe UI Emoji"','sans-serif'],
              mono:['ui-monospace','SFMono-Regular','Menlo','Monaco','Consolas','"Liberation Mono"','"Courier New"','monospace']
            },
            fontSize:{
              h1:['3.052rem',{lineHeight:'3.75rem',fontWeight:'700'}],
              h2:['2.441rem',{lineHeight:'3.75rem',fontWeight:'700'}],
              h3:['1.953rem',{lineHeight:'2.5rem',fontWeight:'700'}],
              h4:['1.562rem',{lineHeight:'2.5rem',fontWeight:'700'}],
              h5:['1.25rem',{lineHeight:'1.875rem',fontWeight:'700'}],
              h6:['1.125rem',{lineHeight:'1.25rem',fontWeight:'700'}],
              base:['1rem',{lineHeight:'1.25rem',fontWeight:'400'}],
              lg:['1.125rem',{lineHeight:'1.875rem',fontWeight:'400'}],
              sm:['0.875rem',{lineHeight:'1.25rem',fontWeight:'400'}],
              xs:['0.8125rem',{lineHeight:'1.25rem',fontWeight:'400'}]
            },
            spacing:{0:'0rem',0.5:'0.125rem',1:'0.25rem',1.5:'0.375rem',2:'0.5rem',2.5:'0.625rem',3:'0.75rem',3.5:'0.875rem',4:'1rem',5:'1.25rem',6:'1.5rem',7:'1.75rem',8:'2rem',9:'2.25rem',10:'2.5rem',11:'2.75rem',12:'3rem',14:'3.5rem',16:'4rem',20:'5rem',24:'6rem',28:'7rem',32:'8rem'},
            borderRadius:{none:'0',xs:'2px',sm:'4px',md:'8px',lg:'12px',xl:'16px',full:'9999px'},
            borderWidth:{DEFAULT:'1px',0:'0',2:'2px',4:'4px'},
            boxShadow:{0:'none',1:'0 1px 2px 0 rgb(0 0 0 / 0.06)',2:'0 2px 6px -1px rgb(0 0 0 / 0.08), 0 1px 3px 0 rgb(0 0 0 / 0.06)',3:'0 8px 16px -4px rgb(0 0 0 / 0.10), 0 4px 6px -2px rgb(0 0 0 / 0.08)',4:'0 16px 32px -6px rgb(0 0 0 / 0.12), 0 8px 12px -4px rgb(0 0 0 / 0.10)',5:'0 24px 48px -8px rgb(0 0 0 / 0.18), 0 10px 16px -6px rgb(0 0 0 / 0.12)'},
            zIndex:{'-1':'-1',0:'0',1:'1',10:'10',20:'20',30:'30',40:'40',50:'50',100:'100',1000:'1000',9999:'9999'},
            opacity:{5:'0.05',10:'0.10',20:'0.20',30:'0.30',40:'0.40',50:'0.50',60:'0.60',70:'0.70',80:'0.80',90:'0.90',100:'1'},
            transitionDuration:{instant:'75ms',fast:'150ms',base:'200ms',slow:'300ms',deliberate:'500ms'},
            transitionTimingFunction:{standard:'cubic-bezier(0.2, 0, 0, 1)',emphasized:'cubic-bezier(0.3, 0, 0.2, 1)',in:'cubic-bezier(0.4, 0, 1, 1)',out:'cubic-bezier(0, 0, 0.2, 1)'},
            screens:{sm:'640px',md:'768px',lg:'1024px',xl:'1280px','2xl':'1536px'}
          }
        }
      }
      ```
      
      ### 3.2 CSS variables (for non‑Tailwind contexts)
      Expose key tokens at `:root` (see `app.css` example in previous messages). Prefer Tailwind utilities whenever possible.
      
      ---
      
      ## 4) Content & Tone
      
      - **Tone:** Calm, professional, service‑oriented; avoid hype. Write for scanning.  
      - **Headings:** Use heading tokens for headings; not for emphasis in paragraphs.  
      - **Links:** Always underlined; use hover/visited tokens.  
      - **Legal clarity:** Prominently include “Not government affiliated” where appropriate (e.g., footer).  
      - **Microcopy examples:**  
        - Primary CTA: “Start application”, “Continue”, “Submit”.  
        - Secondary: “Learn more”, “Check requirements”, “Save and exit”.
      
      ---
      
      ## 5) Accessibility Baselines
      
      - **Contrast:** Meet WCAG AA (AAA where feasible). Use the contrast‑checked tokens above.  
      - **Focus:** Always visible (`focus:ring-primary-600/80` + offset).  
      - **Keyboard:** All interactive elements reachable and operable via keyboard.  
      - **Targets:** Hit area ≥44×44 px (use `min-h-11`, `px-3`, `py-2`).  
      - **Forms:** Associate labels, use `aria-invalid` and inline error text; provide error **summary** linking to fields.  
      - **Motion:** Respect `prefers-reduced-motion`.  
      - **Language:** Provide language toggle (EN/FR), set `lang` attribute.
      
      ---
      
      ## 6) Component System (canonical specs)
      
      > **Rules for all components**  
      > - **Use only Tailwind utilities and theme tokens.** E.g., `bg-primary-600`, `text-neutral-900`, `shadow-1`.  
      > - **States:** default, hover, active/pressed, focus, disabled, error (forms), success/info/warn (feedback).  
      > - **Sizes:** where relevant (`sm`, `md`, `lg`).  
      > - **A11y:** labels, roles, ARIA as indicated.
      
      ### 6.1 Buttons
      **Types:** Primary (cobalt), Secondary (bordered neutral), Ghost (text‑only).  
      **Sizes:** `sm` (.text-sm .px-3 .py-1.5), `md` (.px-4 .py-2), `lg` (.px-5 .py-3).  
      **Primary example**
      ```html
      
      ```
      **Secondary**
      ```html
      
      ```
      **Ghost**
      ```html
      
      ```
      
      ### 6.2 Form Inputs (text, email, password)
      ```html
      Email
      
      ```
      - **Error state:** `aria-invalid="true"`, border `error-300`, focus `error-600`, helper text in `error-700`.
      
      ### 6.3 Textarea
      ```html
      Message
      
      ```
      
      ### 6.4 Select
      ```html
      Country
      
      ```
      
      ### 6.5 Checkboxes & Radios
      ```html
      
         Receive updates
      
      
         Email
      
      ```
      
      ### 6.6 Fieldset & Legend
      ```html
      
        Contact method
        
      
      ```
      
      ### 6.7 Date Input
      ```html
      Date of birth
      
      ```
      
      ### 6.8 File Uploader
      ```html
      Upload license scan
      
      Max 10MB. Accepted: JPG, PNG, PDF.
      ```
      
      ### 6.9 Error Message & Error Summary
      ```html
      
      Enter a valid email (e.g., name@example.com).
      
      
      
        There is a problem
        
          Email is missing or invalid
        
      
      ```
      
      ### 6.10 Details (Disclosure)
      ```html
      
        
          What documents do I need?
        
        Driver’s license, passport photo, and a passport scan.
      
      ```
      
      ### 6.11 Header (Top Navigation)
      ```html
      
        
          
            I
            IDA
          
          
            Guides
            Styles
            Components
          
        
      
      ```
      
      ### 6.12 Footer
      ```html
      
        
          © InternationalDriversAssociation.com · Not government affiliated.
          
            Privacy
            Terms
            Help
          
        
      
      ```
      
      ### 6.13 Side Navigation (Section Index)
      ```html
      
        
          Overview
          Applications
          Documents
        
      
      ```
      
      ### 6.14 Cards
      - **Outlined:** `border border-neutral-200 bg-white shadow-0`  
      - **Elevated:** `bg-white shadow-2`
      
      ### 6.15 Modals (example patterns may use Alpine.js)
      - **Overlay:** `bg-neutral-900/80`  
      - **Panel:** `bg-white rounded-md shadow-4 p-6`  
      - **Focus management:** return focus to opener on close; trap focus while open.
      
      ### 6.16 Tabs
      - **Active tab:** `bg-primary-50 text-primary-800 border-primary-200`  
      - **Panels:** `role="tabpanel"`, labeled by tab `id`.
      
      ### 6.17 Pagination
      - Neutral buttons with primary highlight for the current page.
      
      ### 6.18 Alerts & Badges
      - **Success/Warning/Error/Info** map directly to semantic tokens.  
      - **Solid banners:** dark tone (e.g., `success-700`) with white text.  
      - **Tints:** `*-100` background with `*-700` text.
      
      ### 6.19 Tooltips
      - Minimal, high‑contrast, respect reduced motion. Prefer native titles on mobile or avoid.
      
      ### 6.20 Progress & Loaders
      - **Progress bar:** neutral track, colored indicator (`primary`, `success`, etc.).  
      - **Spinner:** single color (`primary-600`) with accessible `aria-live` where meaningful.
      
      ### 6.21 Search
      - Input with leading icon, `role="search"` on form.
      
      ### 6.22 Language Toggle
      - Two‑button group (EN/FR). Use pressed state styling (`bg-primary-600 text-white`) for active language.
      
      ### 6.23 Signature
      - Typed signature input + optional image upload. Include attestation checkbox.
      
      ### 6.24 Stepper
      - Numbered circles (`bg-primary-600 text-white` for complete/current), neutral for upcoming. Provide textual labels; don’t rely on color alone.
      
      ### 6.25 Container (Layout token)
      - Centered wrapper using Tailwind max‑width classes and responsive padding.
      
      ### 6.26 Date Modified
      ```html
      Date modified: September 22, 2025
      ```
      
      ### 6.27 Link & Heading
      - **Link:** `text-primary-600 underline hover:text-primary-700 visited:text-primary-800`.  
      - **Headings:** Use heading tokens (`text-h1…text-h6` via Tailwind `fontSize` extension).
      
      ### 6.28 Theme & Topic Menu (Mega‑menu light)
      - Grid of topic cards on a neutral surface; activate with button. Use `shadow-3` and `border-neutral-200`.
      
      ### 6.29 Upload Photo/Documents & Scan License
      - **Upload:** accept `.pdf,.jpg,.jpeg,.png`, size limits, helper text.  
      - **Scan:** `accept="image/*" capture="environment"` on mobile; guidance list (flat surface, all corners visible).
      
      ---
      
      ## 7) Layout Patterns
      
      - **Top Nav + Sidebar Docs Layout:** Fixed sidebar on md+; collapsible on mobile.  
      - **Grid:** 2‑column at `sm`, 3‑column at `md`, 4‑column at `lg+`.  
      - **Elevation for hierarchy:** prefer `shadow-1/2` over darker fills.
      
      ---
      
      ## 8) Content Structure & IA
      
      - **Page header:** Breadcrumbs → H1 → short intro → primary/secondary actions.  
      - **“On this page” aside:** In‑page nav for long docs.  
      - **Forms:** Chunk into logical sections; include save/exit affordance.
      
      ---
      
      ## 9) Iconography
      
      - Use inline SVGs sized with Tailwind (`w-5 h-5`, `w-6 h-6`).  
      - Single color; inherit from text color (`currentColor`).  
      - Keep stroke/fill simple for clarity; avoid decorative complexity.
      
      ---
      
      ## 10) QA & Acceptance Checklist
      
      **Visual & Brand**
      - [ ] Actions use cobalt (`primary-600/700/800`); surfaces are neutral.  
      - [ ] Accent green used only in marketing/data viz, not actions/success.  
      
      **Tokens & Code**
      - [ ] No raw hex/RGB values; all styles via tokens/utilities.  
      - [ ] Typography uses Lato (headings) and Noto Sans (body).  
      
      **Accessibility**
      - [ ] Contrast AA met.  
      - [ ] Focus visible on all interactive controls.  
      - [ ] Keyboard navigation complete (including dialogs and menus).  
      - [ ] Hit targets ≥44×44 px.  
      - [ ] Forms have labels, `aria-invalid`, error text, and error summary when needed.  
      - [ ] Respects `prefers-reduced-motion`.
      
      **Content**
      - [ ] Clear, calm microcopy.  
      - [ ] “Not government affiliated” present where appropriate.  
      - [ ] EN/FR language toggle available in supported contexts.
      
      ---
      
      ## 11) Example Scaffolds (LLM recipes)
      
      ### 11.1 Page Template (skeleton)
      - **Header** (logo, primary nav, language toggle)  
      - **Main**: Breadcrumbs → H1 → lead → actions → content grid (8/4)  
      - **Footer**: legal links, note of non‑affiliation
      
      Use the scaffold provided in `index.html` (see previous “HTML scaffolding” section). When generating new pages, keep the same structure and tokens.
      
      ### 11.2 Form Section (canonical)
      - Label → Control → Help/Error text  
      - Required fields indicated in label text (avoid asterisks if possible).  
      - Submit button uses primary; secondary for “Save and exit”.
      
      ---
      
      ## 12) Naming & Conventions Summary
      
      - **Colors:** `primary`, `secondary`, `neutral`, `success`, `warning`, `error`, `info`, `accent`.  
      - **Typography:** `font-heading` (Lato), `font-sans` (Noto Sans), scale `text-h1…text-h6`, `text-base`, `text-sm`, `text-xs`, `text-lg`.  
      - **Focus:** `focus:ring-primary-600/80 focus:ring-2 focus:ring-offset-2`.  
      - **Spacing:** 4‑pt base; 8‑pt preferred for layout.  
      - **Shadows:** `shadow-1…shadow-5` per elevation.  
      - **Breakpoints:** `sm md lg xl 2xl`.  
      - **Motion:** `duration-fast|base|slow`, `ease-[standard|emphasized|in|out]`.  
      - **No custom classes.** If unavoidable (integration), define style via CSS variables; never re‑invent utilities.
      
      ---
      
      ## 13) What to Avoid (hard rules)
      
      - No blue page backgrounds; keep cobalt for interaction and emphasis.  
      - No non‑semantic color usage for status.  
      - No mixing extra hues beyond the defined palette.  
      - No using font weight as the only differentiator of meaning.  
      - No removing focus outlines.  
      - No hard‑coded pixel values for colors or typography outside tokens.
      
      ---
      
      ## 14) Versioning & Evolution
      
      - **This file:** `design-system.md` (v0.2).  
      - **Changes:** Introduce new tokens as aliases of existing semantic names where possible. Avoid breaking changes; deprecate with an alias window.  
      - **Testing:** Run the acceptance checklist before merging UI changes.
      
      ---
      
      ## 15) Quick Copy‑Paste Snippets (for LLM output)
      
      **Primary link:**  
      `class="text-primary-600 underline hover:text-primary-700 visited:text-primary-800"`
      
      **Primary button:**  
      `class="inline-flex items-center rounded-md bg-primary-600 text-white px-4 py-2 hover:bg-primary-700 active:bg-primary-800 focus:outline-none focus:ring-2 focus:ring-primary-600/80 focus:ring-offset-2"`
      
      **Form input:**  
      `class="block w-full rounded-md border-neutral-300 focus:border-primary-600 focus:ring-primary-600/80"`
      
      **Card (outlined):**  
      `class="rounded-md border border-neutral-200 bg-white p-5"`
      
      **Alert (info tint):**  
      `class="rounded-md border border-primary-200 bg-primary-50 text-primary-900 p-4"`
      
      **Modal overlay/panel:**  
      Overlay: `class="fixed inset-0 bg-neutral-900/80"`  
      Panel: `class="bg-white rounded-md shadow-4 p-6"`
      
      ---
      
      ### Final Notes
      - This system draws inspiration from **GOV.UK** and **Canada.ca**: clear hierarchy, legibility, and simplicity—expressed through cobalt actions, slate surfaces, and strict semantics.
      - Headings use **Lato**; body uses **Noto Sans**; vertical rhythm is **20px**.  
      - All UI must feel **authoritative, predictable, and calm**, while clearly stating **not government affiliated**.
      
      > **Ready for AI ingestion:** This document contains the exact tokens, rules, and patterns to generate compliant, production‑ready UI using Tailwind + token extensions.

Styleguide

Token demonstrations for colors, typography, spacing & sizing. All classes use Tailwind utilities bound to our extended theme tokens.

Colors

Primary — Cobalt

Secondary — Teal

H3 · 1.953rem · lh 2.5rem · 700

H4 · 1.562rem · lh 2.5rem · 700

H5 · 1.25rem · lh 1.875rem · 700

H6 · 1.125rem · lh 1.25rem · 700

Body · 1rem · lh 1.25rem · 400 — Default paragraph text.

Body Large · 1.125rem · lh 1.875rem · 400 — Lead paragraphs.

Body Small · 0.875rem · lh 1.25rem · 400 — Meta, captions.

Label · font-medium (500)

Use italics sparingly, e.g., when citing Canadian law such as Accessible Canada Act.

Spacing & Sizing

4‑pt micro‑grid; rhythm unit = 1.25rem. Use 8‑pt multiples for page layout.

Spacing scale (px)

Sizing utilities

w-8 h-8

w-12 h-12

w-16 h-16

w-24 h-10

Components Library

Components are user interface building blocks that address specific user objectives. Each includes reusable code, best practices, and accessibility guidance. All mapped to tokens.

Checkboxes

Receive updates by email Receive SMS alerts Disabled option

Container

Use responsive max-widths and horizontal padding to center content.

.max-w-screen-lg .mx-auto .p-4 — centered content container

Date input

Date of birth

Use native date input; provide format help if needed.

Date modified

Date modified: September 22, 2025

Details

What documents do I need?

A valid driver’s license, a passport photo, and a digital passport scan (if available).

Error message

Enter an email address in the correct format, like name@example.com.

Error summary

Fieldset

Contact method

Email Phone

File uploader

Use for PDFs or images. Provide accepted types and size guidance.

Accepted: PDF, JPG, PNG · Max 10MB each

Footer

Header

I IDA

Heading

Page title (H1)

Use heading tokens only for headings. Keep hierarchy logical.

Icon

check

x-circle

info

alert

chevron

upload

Input

Full name

Language toggle

English selected.

Français sélectionné.

Link

Standard link

Search

Select

Country

Signature

Typed signature with legal attestation. Optionally allow image upload below.

Type your full name

Signature

I certify that the information provided is true and correct.

Upload signature image (optional)

Stepper

1 Start
2 Details
3 Review

Text area

Additional information

Max 500 characters.

Theme & topic menu

Licensing International travel Payments Compliance Support FAQs

Upload Photo/Documents

Provide clear guidance on accepted types, size, and purpose.

Upload photo or document

Accepted: PDF, JPG, PNG · Max 10MB each · Use bright, flat lighting.

Scan License

On mobile, opening the camera is recommended. Use back camera for clarity.

Scan or capture your license

Place on a flat, contrasting surface.
Ensure all corners are visible and readable.

Layouts & Navigation

Neutral, document‑like surfaces; Cobalt accents; predictable semantics.

Cards

Outlined Card

Neutral border; use for standard content blocks.

Elevated Card

Subtle elevation for emphasis or interactivity.

Learn more

Grids

2‑col (sm+)

3‑col (md+)

Modals & Tabs

Tab one content. Use tokens for spacing and color.

Tab two content. Keep semantics predictable.

Tab three content. Neutral surfaces, blue accents.

Navigation (Examples)

‹ 1 2 3 ›

Extended UI Patterns

Accessible, minimal interactions using Alpine.js and tokenized Tailwind.

Accordion

Named variables capturing visual decisions (color, type, spacing). Components map to semantic tokens — never raw values.

Aligns text and spacing to even 20px steps for scannability, calmness, and predictable document‑like rhythm.

Branding Guideline

Typography

Palette

Brand Guardrails

Government‑like Without Pretending to Be Government

Why Design Tokens

Design Tokens (Code)

Design Tokens (Code)

There is a problem

Styleguide

Colors

Primary — Cobalt

Secondary — Teal

Neutrals — Slate

Success — Emerald

Warning — Amber

Error — Red

Info — Cobalt

Typography

Spacing & Sizing

Spacing scale (px)

Sizing utilities

Components Library

Checkboxes

Container

Date input

Date modified

Details

Error message

Error summary

There is a problem

Fieldset

File uploader

Footer

Header

Heading

Page title (H1)

Icon

Input

Language toggle

Link

Search

Select

Side navigation

Signature

Stepper

Text area

Theme & topic menu

Top navigation

Upload Photo/Documents

Scan License

Layouts & Navigation

Cards

Outlined Card

Elevated Card

Grids

Modals & Tabs

Navigation (Examples)

Extended UI Patterns

Accordion