# Web and marketing page patterns

North brand guidelines for AI agents · https://identity.north.ae/AGENTS/web-patterns · Updated 2026-10-14
Use when: Building north.ae, sub-brand or campaign web pages and landing pages.
Rules that always apply: https://identity.north.ae/AGENTS

## Bands
| Band | Background | Job |
|---|---|---|
| Hero | night sky with sub-brand glow, or Aurora | what it is + who for; one primary CTA (+ one secondary) |
| Feature grid | white / Dune 05 | 3–6 benefits: 44px icon tile, Display Medium 18px title, one sentence |
| Product band | Dune 05 + product visual | the product doing one thing |
| Stat band | Midnight 80 | 2–4 real, sourced numbers (Display ExtraBold 52px, −0.04em) |
| Logo strip | white | one-colour technology/partner logos, equal optical size |
| Testimonial | Dune 05 or night | one approved quote, Display Light 26px, avatar + name + role + org |
| FAQ | white | accordion of 4–8 real questions |
| CTA band | Aurora | repeat the hero action, one button |
| Footer | Midnight 90 | navigation, legal line, contact |
- Section padding 96px desktop / 64px mobile; content max 1280px; text ≤ 68ch. Alternate light and dark bands; never two dark bands in a row.
- Hero headline Display Bold 56–84px, ≤ 2 lines; subline Display Light 20–22px. No carousels, no autoplay video with sound.
- Comparison tables: grid style, grouped headers, check icon / em dash, recommended column outlined 2px action colour; mobile compares one plan at a time via segmented control.