# Colour

North brand guidelines for AI agents · https://identity.north.ae/AGENTS/color · Updated 2026-10-14
Use when: Choosing any colour for design, UI, slides, documents or charts.
Rules that always apply: https://identity.north.ae/AGENTS

## Palette roles
- **Midnight** (#273156, primary): logos, headlines, dark surfaces. Present in every layout.
- **Dune** (#FFF9F3 cream, warm neutral): backgrounds, panels. Most of the space.
- **Gulf** (#227ED1 graphics; #1B6AB1 text/buttons): action, links, first chart series.
- **Dawn** (#FFE3D3 peach) and **Oasis** (#95ECF1 aqua): accents, glows, highlights. Never body text on light. ≤ 10% of a layout.
- **Steel**: product UI scaffolding only.
- Proportion guide: Dune/White ~48%, Midnight ~32%, Gulf ~10%, Dawn + Oasis ~10%.
- Sub-brand signal colours (star on dark, accents): NorthStar Oasis 30 #95ECF1, NorthCloud Gulf 40 #6AAAE4, NorthEdge Dawn 40 #FDB48D; North and enablers Midnight.

## Primitives
### Midnight — Primary. The night sky over the desert: depth, trust, sovereignty. Logos, headlines, dark surfaces.
| Step | HEX | Token | Use |
|---|---|---|---|
| 05 | #F3F4F8 | --n-color-midnight-05 | Lightest tint. Table stripes, hover wash on light. |
| 10 | #E4E7F0 | --n-color-midnight-10 | Selected rows, chips, subtle fills. |
| 20 | #C8CDE0 | --n-color-midnight-20 | Borders on tinted panels. Body copy on dark. |
| 30 | #A3AAC6 | --n-color-midnight-30 | Captions on dark. Disabled icons on light. |
| 40 | #7C85A8 | --n-color-midnight-40 | Placeholder text on light (large only). |
| 50 | #58628A | --n-color-midnight-50 | Captions and secondary text on light (5.9:1 on white). |
| 60 | #3D4870 | --n-color-midnight-60 | Body copy on light (8.9:1 on white). |
| 70 | #2F3A63 | --n-color-midnight-70 | Hover state for Midnight surfaces. |
| 80 | #273156 | --n-color-midnight-80 | Core Midnight. The North navy — logos, headlines, primary dark surface. |
| 90 | #1B223D | --n-color-midnight-90 | Headline ink on light. Raised surfaces on dark. |
| 95 | #121624 | --n-color-midnight-95 | Dark-mode canvas. The deepest night. |

### Dune — Warm neutral. Sand and paper — gives North its warmth and stops layouts feeling clinical.
| Step | HEX | Token | Use |
|---|---|---|---|
| 02 | #FFFCF9 | --n-color-dune-02 | Paper. Print stock simulation, long-read backgrounds. |
| 05 | #FFF9F3 | --n-color-dune-05 | Core Dune (Cream). The signature light background. |
| 10 | #FAF2E8 | --n-color-dune-10 | Panels on Cream. Visual containers in guidelines. |
| 20 | #F0E5D7 | --n-color-dune-20 | Dividers on Cream, card borders. |
| 30 | #E2D3C1 | --n-color-dune-30 | Illustration mid-tone, strong dividers. |
| 40 | #C9B9A6 | --n-color-dune-40 | Illustration shadow tone. |
| 60 | #8E8274 | --n-color-dune-60 | Decorative only — not for text. |
| 80 | #5C574F | --n-color-dune-80 | Muted warm text on Cream (6.9:1). |
| 90 | #2E2B27 | --n-color-dune-90 | Warm dark surface (print, merch). |
| 95 | #1A1816 | --n-color-dune-95 | Ink. Warm near-black for long-form body copy and print. |

### Dawn — Accent. First light over the dunes: warmth, humanity, optimism. Used as a glow, never as text.
| Step | HEX | Token | Use |
|---|---|---|---|
| 05 | #FFF6F0 | --n-color-dawn-05 | Faint warm wash. |
| 10 | #FFEDE2 | --n-color-dawn-10 | Callout backgrounds, highlight rows. |
| 20 | #FFE3D3 | --n-color-dawn-20 | Core Dawn (Peach). Aurora gradient start, illustration fills. |
| 30 | #FFCDB2 | --n-color-dawn-30 | Illustration fills, chart backgrounds. |
| 40 | #FDB48D | --n-color-dawn-40 | NorthEdge accent on dark surfaces. |
| 60 | #F08A5D | --n-color-dawn-60 | Ember. Graphic accent; text only on Midnight (5.1:1). |
| 80 | #B4532D | --n-color-dawn-80 | Text-safe Dawn on light (4.98:1 on white). |

### Oasis — Accent. Water in the desert: clarity, intelligence, the agentic spark. NorthStar's signal colour.
| Step | HEX | Token | Use |
|---|---|---|---|
| 05 | #F0FDFD | --n-color-oasis-05 | Faint cool wash. |
| 10 | #DDF9FA | --n-color-oasis-10 | Info backgrounds, selected states on light. |
| 20 | #C0F4F7 | --n-color-oasis-20 | Illustration fills. |
| 30 | #95ECF1 | --n-color-oasis-30 | Core Oasis (Aqua). Links and actions on dark, highlights, focus glow. |
| 50 | #4ECAE6 | --n-color-oasis-50 | Horizon gradient end, illustration accents. |
| 70 | #1A98B3 | --n-color-oasis-70 | Graphic Oasis on light (icons, large text, 3.4:1). |
| 85 | #0E6476 | --n-color-oasis-85 | Text-safe Oasis on light (6.8:1). |

### Gulf — Secondary. The Arabian Gulf: action, links, focus, data. North's action colour on light surfaces.
| Step | HEX | Token | Use |
|---|---|---|---|
| 05 | #F1F7FD | --n-color-gulf-05 | Faint blue wash. |
| 10 | #E2EFFA | --n-color-gulf-10 | Selected backgrounds, info panels. |
| 20 | #C3DDF4 | --n-color-gulf-20 | Focus ring halo, chart gridline accent. |
| 30 | #9FC9EE | --n-color-gulf-30 | Disabled action fill. |
| 40 | #6AAAE4 | --n-color-gulf-40 | Links on dark surfaces (7.3:1 on Midnight 95). |
| 60 | #227ED1 | --n-color-gulf-60 | Core Gulf (Blue). Brand blue for graphics and large type — 4.2:1 on white, so not for small text. |
| 70 | #1B6AB1 | --n-color-gulf-70 | Action. Buttons and links on light (5.6:1 on white). |
| 80 | #165792 | --n-color-gulf-80 | Action hover / pressed. |
| 90 | #0F3D68 | --n-color-gulf-90 | Deep blue for illustration and gradients. |

### Steel — Cool neutral for product UI: borders, disabled states, data scaffolding.
| Step | HEX | Token | Use |
|---|---|---|---|
| 05 | #F6F7F9 | --n-color-steel-05 | Product canvas. |
| 10 | #ECEEF2 | --n-color-steel-10 | Input fills, table headers. |
| 20 | #DADEE6 | --n-color-steel-20 | Borders and dividers. |
| 30 | #C1C7D2 | --n-color-steel-30 | Strong borders, chart axes. |
| 50 | #8A92A3 | --n-color-steel-50 | Disabled text (non-essential). |
| 70 | #545C6E | --n-color-steel-70 | Secondary UI text (6.6:1). |
| 90 | #22262F | --n-color-steel-90 | Dark UI chrome. |

### Base and status
| Token | HEX | Use |
|---|---|---|
| --n-color-base-snow | #FCFCFC | North White. Text and logos on Midnight; avoids the glare of pure white on dark. |
| --n-color-base-white | #FFFFFF | Pure white. Light-mode canvas and cards. |
| --n-color-base-black | #000000 | Pure black. Only for one-colour print and the monochrome logo. |
| --n-color-status-success | #18794E | Success text/icon (5.4:1 on white). |
| --n-color-status-success-bg | #E3F5EC | Success background. |
| --n-color-status-warning | #9A5B00 | Warning text/icon (5.4:1 on white). |
| --n-color-status-warning-bg | #FFF1D6 | Warning background. |
| --n-color-status-danger | #C0352F | Error text/icon (5.5:1 on white). |
| --n-color-status-danger-bg | #FDE7E6 | Error background. |
| --n-color-status-info | #1B6AB1 | Information text/icon (alias of Gulf 70). |
| --n-color-status-info-bg | #E2EFFA | Information background. |

## Semantic roles (use these in UI)
| Role (CSS variable) | Light | Dark | Use |
|---|---|---|---|
| `--n-bg-canvas` | #FFFFFF | #121624 | Page background. |
| `--n-bg-subtle` | #FFF9F3 | #1A2033 | Section bands, warm backgrounds. |
| `--n-bg-panel` | #FAF2E8 | #1B223D | Visual containers, cards on Cream. |
| `--n-bg-inverse` | #273156 | #FFF9F3 | Dark bands inside a light layout. |
| `--n-surface-raised` | #FFFFFF | #1B223D | Cards, menus, dialogs. |
| `--n-text-heading` | #1B223D | #FCFCFC | Titles and headings. |
| `--n-text-body` | #3D4870 | #C8CDE0 | Body copy. |
| `--n-text-caption` | #58628A | #A3AAC6 | Captions, metadata, helper text. |
| `--n-text-strong` | #1B223D | #FCFCFC | Bold emphasis inside body copy. |
| `--n-text-link` | #1B6AB1 | #95ECF1 | Inline links. |
| `--n-text-on-action` | #FFFFFF | #1B223D | Text on the action colour. |
| `--n-action` | #1B6AB1 | #95ECF1 | Primary buttons, CTAs. |
| `--n-action-hover` | #165792 | #C0F4F7 | Primary button hover. |
| `--n-accent` | #FFE3D3 | #FDB48D | Warm glow, highlights, illustration. |
| `--n-border` | #F0E5D7 | #2A3352 | Default border on warm surfaces. |
| `--n-border-ui` | #DADEE6 | #2A3352 | Default border in product UI. |
| `--n-focus` | #227ED1 | #95ECF1 | Keyboard focus ring. |
| `--n-skeleton-base` | #ECEEF2 | #1E2640 | Skeleton placeholder fill. |
| `--n-skeleton-shine` | rgba(255,255,255,0.65) | rgba(255,255,255,0.06) | Shimmer highlight that sweeps across skeletons. |
| `--n-scrim` | rgba(18,22,36,0.72) | rgba(6,8,14,0.78) | Overlay behind dialogs and drawers. |
| `--n-row-hover` | rgba(27,34,61,0.035) | rgba(252,252,252,0.04) | Table row hover. |
| `--n-row-selected` | rgba(27,106,177,0.09) | rgba(149,236,241,0.10) | Selected table row / list item. |
| `--n-table-header` | #F6F7F9 | #1B223D | Table header background. |
| `--n-status-success` | #18794E | #5CC796 | Success text and icons. |
| `--n-status-success-bg` | #E3F5EC | #13301F | Success background. |
| `--n-status-warning` | #9A5B00 | #F2B544 | Warning text and icons. |
| `--n-status-warning-bg` | #FFF1D6 | #33270F | Warning background. |
| `--n-status-danger` | #C0352F | #FF8A84 | Error text, icons and danger actions. |
| `--n-status-danger-bg` | #FDE7E6 | #3A1717 | Error background. |
| `--n-status-info` | #1B6AB1 | #6AAAE4 | Information text and icons. |
| `--n-status-info-bg` | #E2EFFA | #14253D | Information background. |
| `--n-text-on-danger` | #FFFFFF | #1B223D | Text on danger buttons. |
| `--n-ai` | #1A98B3 | #95ECF1 | AI activity and agent presence: thinking orbs, agent avatars, AI markers (graphics, 3:1+). |

## Gradients
- **aurora** (`--n-gradient-aurora`): The North signature. Sunrise to sea: Dawn → Dune → Oasis → Gulf. App icons, covers, hero moments. One per layout. Stops: #FFE3D3 0%, #FFF9F3 38%, #95ECF1 72%, #227ED1 100%.
- **horizon** (`--n-gradient-horizon`): Night to water. Thin bars, progress, dividers and product chrome on dark. Never behind body text. Stops: #273156 0%, #1D6EC4 38%, #227ED1 62%, #4ECAE6 100%.
- **night** (`--n-gradient-night`): Quiet depth for dark-mode heroes, slides and wallpapers. Stops: #121624 0%, #273156 100%.

## Rules
- Use exact values; never eyeball or mix new tints.
- Body text ≥ 4.5:1 contrast, large text and UI graphics ≥ 3:1. Gulf 60 is 4.2:1 on white: not for small text; use Gulf 70.
- Text colours: Midnight 90/60/50 on light, Snow/Midnight 20/30 on dark.
- Dark backgrounds are Midnight 95/80, never pure black.
- Status colours only for system state, always with icon + label.
- Print: CMYK values are calculated starting points; approve a printed proof; match Pantone physically for signage and merchandise.