# Design tokens

North brand guidelines for AI agents · https://identity.north.ae/AGENTS/tokens · Updated 2026-10-14
Use when: Writing CSS, components, Tailwind config, charts or any code that needs brand values.
Rules that always apply: https://identity.north.ae/AGENTS

## Files
- Source of truth (W3C DTCG JSON): `/assets/tokens/north.tokens.json`
- CSS custom properties (light + dark semantic roles, `.n-theme-light` / `.n-theme-dark` islands, `.n-type-*` classes): `/assets/tokens/north-tokens.css`
- SCSS: `/assets/tokens/north-tokens.scss` · ES module: `/assets/tokens/north-tokens.mjs` · Flat JSON: `/assets/tokens/north-tokens.flat.json` · Tailwind preset: `/assets/tokens/tailwind.preset.cjs`

## Tiers and naming
- Primitive (`--n-color-gulf-70`) → semantic role (`--n-action`) → component (`button.primary.bg → action`, defined in product code).
- **Components use semantic roles**, which switch with light/dark (`prefers-color-scheme`, or `<html data-theme="dark|light">`). Use primitives only when no role fits.
- CSS names: `--n-<category>-<item>-<step>`; colour steps 02 (lightest) → 95 (darkest); space keys are ×4px (`--n-space-6` = 24px).

## Usage
```css
@import url("https://identity.north.ae/assets/tokens/north-tokens.css");
.button-primary {
  background: var(--n-action); color: var(--n-text-on-action);
  border-radius: var(--n-radius-sm); padding: var(--n-space-3) var(--n-space-5);
  font: var(--n-font-weight-medium) 15px/1 var(--n-font-family-text);
  transition: background var(--n-motion-duration-fast) var(--n-motion-easing-standard);
}
.button-primary:hover { background: var(--n-action-hover); }
.button-primary:focus-visible { outline: var(--n-border-focus) solid var(--n-focus); outline-offset: 2px; }
```
```js
// tailwind.config.js
module.exports = { presets: [require('./tailwind.preset.cjs')] }; // bg-gulf-70, rounded-lg, shadow-2, ease-rise
```

## Semantic roles
| 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-diagram-canvas` | #FFFFFF | #121624 | Diagram background. |
| `--n-diagram-line` | #3D4870 | #A3AAC6 | Connectors, arrows and node borders. |
| `--n-diagram-line-strong` | #1B223D | #FCFCFC | Primary path, emphasised connectors. |
| `--n-diagram-node` | #FFFFFF | #1B223D | Default node fill (system, service, step). |
| `--n-diagram-node-alt` | #FFF9F3 | #273156 | Secondary node fill (external system, actor). |
| `--n-diagram-group` | #FAF2E8 | #1A2033 | Group container fill. |
| `--n-diagram-zone` | #F0FDFD | #14242E | Trust boundary / on-premises zone fill. |
| `--n-diagram-zone-border` | #1A98B3 | #4ECAE6 | Trust boundary dashed border. |
| `--n-diagram-ai` | #1A98B3 | #95ECF1 | AI agent and model accents. |
| `--n-diagram-human` | #F08A5D | #FDB48D | Human approval and review accents. |
| `--n-diagram-flow` | #1B6AB1 | #6AAAE4 | Highlighted main flow. |
| `--n-diagram-label` | #1B223D | #FCFCFC | Node titles. |
| `--n-diagram-caption` | #58628A | #A3AAC6 | Edge labels, captions, metadata. |
| `--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+). |

## All primitive tokens (CSS variable: value)
```
--n-color-midnight-10: #E4E7F0
--n-color-midnight-20: #C8CDE0
--n-color-midnight-30: #A3AAC6
--n-color-midnight-40: #7C85A8
--n-color-midnight-50: #58628A
--n-color-midnight-60: #3D4870
--n-color-midnight-70: #2F3A63
--n-color-midnight-80: #273156
--n-color-midnight-90: #1B223D
--n-color-midnight-95: #121624
--n-color-midnight-05: #F3F4F8
--n-color-dune-10: #FAF2E8
--n-color-dune-20: #F0E5D7
--n-color-dune-30: #E2D3C1
--n-color-dune-40: #C9B9A6
--n-color-dune-60: #8E8274
--n-color-dune-80: #5C574F
--n-color-dune-90: #2E2B27
--n-color-dune-95: #1A1816
--n-color-dune-02: #FFFCF9
--n-color-dune-05: #FFF9F3
--n-color-dawn-10: #FFEDE2
--n-color-dawn-20: #FFE3D3
--n-color-dawn-30: #FFCDB2
--n-color-dawn-40: #FDB48D
--n-color-dawn-60: #F08A5D
--n-color-dawn-80: #B4532D
--n-color-dawn-05: #FFF6F0
--n-color-oasis-10: #DDF9FA
--n-color-oasis-20: #C0F4F7
--n-color-oasis-30: #95ECF1
--n-color-oasis-50: #4ECAE6
--n-color-oasis-70: #1A98B3
--n-color-oasis-85: #0E6476
--n-color-oasis-05: #F0FDFD
--n-color-gulf-10: #E2EFFA
--n-color-gulf-20: #C3DDF4
--n-color-gulf-30: #9FC9EE
--n-color-gulf-40: #6AAAE4
--n-color-gulf-60: #227ED1
--n-color-gulf-70: #1B6AB1
--n-color-gulf-80: #165792
--n-color-gulf-90: #0F3D68
--n-color-gulf-05: #F1F7FD
--n-color-steel-10: #ECEEF2
--n-color-steel-20: #DADEE6
--n-color-steel-30: #C1C7D2
--n-color-steel-50: #8A92A3
--n-color-steel-70: #545C6E
--n-color-steel-90: #22262F
--n-color-steel-05: #F6F7F9
--n-color-base-snow: #FCFCFC
--n-color-base-white: #FFFFFF
--n-color-base-black: #000000
--n-color-status-success: #18794E
--n-color-status-success-bg: #E3F5EC
--n-color-status-warning: #9A5B00
--n-color-status-warning-bg: #FFF1D6
--n-color-status-danger: #C0352F
--n-color-status-danger-bg: #FDE7E6
--n-color-status-info: #1B6AB1
--n-color-status-info-bg: #E2EFFA
--n-color-dataviz-light-1: #227ED1
--n-color-dataviz-light-2: #E0703F
--n-color-dataviz-light-3: #159A9C
--n-color-dataviz-light-4: #D29B1F
--n-color-dataviz-light-5: #7562C9
--n-color-dataviz-light-6: #C2477A
--n-color-dataviz-dark-1: #3A8EE0
--n-color-dataviz-dark-2: #D9693A
--n-color-dataviz-dark-3: #17999B
--n-color-dataviz-dark-4: #B8861A
--n-color-dataviz-dark-5: #8C7BDB
--n-color-dataviz-dark-6: #D35C8C
--n-gradient-aurora: linear-gradient(120deg, #FFE3D3 0%, #FFF9F3 38%, #95ECF1 72%, #227ED1 100%)
--n-gradient-horizon: linear-gradient(120deg, #273156 0%, #1D6EC4 38%, #227ED1 62%, #4ECAE6 100%)
--n-gradient-night: linear-gradient(120deg, #121624 0%, #273156 100%)
--n-brand-north-signal: #273156
--n-brand-northstar-signal: #95ECF1
--n-brand-northcloud-signal: #227ED1
--n-brand-northedge-signal: #FDB48D
--n-font-family-display: "Helvetica Now Display", "Helvetica Neue", Arial, sans-serif
--n-font-family-text: "Helvetica Now Text", "Helvetica Neue", Arial, sans-serif
--n-font-family-arabic: "IBM Plex Sans Arabic", "Noto Sans Arabic", Tahoma, sans-serif
--n-font-family-mono: "JetBrains Mono", SFMono-Regular, Menlo, Consolas, monospace
--n-font-weight-light: 300
--n-font-weight-regular: 400
--n-font-weight-medium: 500
--n-font-weight-bold: 700
--n-font-weight-extrabold: 800
--n-arabic-size-ratio: 1.08
--n-arabic-line-height-body: 1.8
--n-arabic-line-height-heading: 1.35
--n-arabic-letter-spacing: 0
--n-arabic-weight-heading: 600
--n-space-0: 0px
--n-space-1: 4px
--n-space-2: 8px
--n-space-3: 12px
--n-space-4: 16px
--n-space-5: 20px
--n-space-6: 24px
--n-space-8: 32px
--n-space-10: 40px
--n-space-12: 48px
--n-space-16: 64px
--n-space-20: 80px
--n-space-24: 96px
--n-space-32: 128px
--n-space-40: 160px
--n-space-0-5: 2px
--n-radius-none: 0px
--n-radius-xs: 4px
--n-radius-sm: 8px
--n-radius-md: 12px
--n-radius-lg: 16px
--n-radius-xl: 24px
--n-radius-2xl: 32px
--n-radius-full: 9999px
--n-border-hairline: 1px
--n-border-strong: 2px
--n-border-focus: 3px
--n-shadow-0: none
--n-shadow-1: 0 1px 2px rgba(27,34,61,.06), 0 1px 1px rgba(27,34,61,.04)
--n-shadow-2: 0 4px 12px rgba(27,34,61,.08), 0 1px 3px rgba(27,34,61,.06)
--n-shadow-3: 0 12px 32px rgba(27,34,61,.12), 0 2px 6px rgba(27,34,61,.06)
--n-shadow-4: 0 24px 64px rgba(27,34,61,.18), 0 4px 12px rgba(27,34,61,.08)
--n-shadow-glow: 0 0 0 1px rgba(149,236,241,.4), 0 0 32px rgba(149,236,241,.35)
--n-motion-duration-instant: 80ms
--n-motion-duration-fast: 140ms
--n-motion-duration-base: 220ms
--n-motion-duration-slow: 360ms
--n-motion-duration-deliberate: 600ms
--n-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1)
--n-motion-easing-enter: cubic-bezier(0, 0, 0.2, 1)
--n-motion-easing-exit: cubic-bezier(0.4, 0, 1, 1)
--n-motion-easing-rise: cubic-bezier(0.22, 1, 0.36, 1)
--n-breakpoint-sm: 640px
--n-breakpoint-md: 960px
--n-breakpoint-lg: 1280px
--n-breakpoint-xl: 1600px
--n-grid-columns-mobile: 4
--n-grid-columns-tablet: 8
--n-grid-columns-desktop: 12
--n-grid-gutter-mobile: 16px
--n-grid-gutter-desktop: 32px
--n-grid-margin-mobile: 16px
--n-grid-margin-desktop: 64px
--n-grid-max-width: 1280px
--n-grid-measure: 68ch
--n-z-base: 0
--n-z-raised: 10
--n-z-sticky: 100
--n-z-overlay: 1000
--n-z-modal: 1100
--n-z-toast: 1200
--n-opacity-disabled: 0.4
--n-opacity-muted: 0.64
--n-opacity-scrim: 0.72
--n-size-control-sm: 32px
--n-size-control-md: 40px
--n-size-control-lg: 48px
--n-size-touch-min: 44px
--n-size-icon-sm: 16px
--n-size-icon-md: 20px
--n-size-icon-lg: 24px
--n-size-table-row: 44px
--n-filter-blur-scrim: 4px
--n-filter-blur-sm: 8px
--n-filter-blur-md: 14px
--n-filter-blur-lg: 40px
--n-filter-grayscale: 1
--n-filter-grayscale-muted: 0.6
--n-filter-dim: 0.72
--n-filter-saturate-backdrop: 1.4
--n-diagram-grid: 8px
--n-diagram-stroke: 1.5px
--n-diagram-stroke-strong: 2.5px
--n-diagram-node-radius: 8px
--n-diagram-group-radius: 16px
--n-diagram-zone-radius: 24px
--n-diagram-node-min-width: 144px
--n-diagram-node-height: 56px
--n-diagram-node-padding: 12px 16px
--n-diagram-gap: 48px
--n-diagram-dash: 6 4
--n-diagram-dot: 1.5 4
--n-diagram-arrow-size: 8px
--n-diagram-label-size: 14px
--n-diagram-caption-size: 12px
--n-diagram-icon-size: 20px
```