# Product UI, layout, motion and accessibility

North brand guidelines for AI agents · https://identity.north.ae/AGENTS/ui · Updated 2026-10-14
Use when: Building screens, web pages, components or prototypes for NorthStar, NorthCloud, NorthEdge or North sites.
Rules that always apply: https://identity.north.ae/AGENTS

## Foundations
- Use semantic tokens (see /AGENTS/tokens); every component must work in light and dark.
- Light: canvas white/Dune 05, headings Midnight 90, body Midnight 60, links and primary buttons Gulf 70 with white text. Dark: canvas Midnight 95, headings Snow, body Midnight 20, links and primary buttons Oasis 30 with Midnight 90 text.
- Buttons: 40px high (32 small, 48 large; touch targets ≥ 44×44), radius 8, Text Medium 15px, one primary action per view; secondary = outlined.
- Focus: 3px outline in --n-focus, 2px offset, on every interactive element. Never remove it.
- Radius grows with size: xs 4 (tags), sm 8 (buttons, inputs), md 12 (menus), lg 16 (cards), xl 24 (panels, bento), 2xl 32; nested radius = outer − padding.
- Shadows tinted Midnight: 1 resting, 2 hover/dropdown, 3 popover, 4 dialog; glow only for live AI states on dark.

## Layout
- Grid: 12 columns ≥1280px (gutter 32, margin 64), 8 columns 960–1279px (24/32), 4 columns < 960px (16/16). Max content width 1280px; reading width ≤ 68ch.
- Spacing on the 4px scale: 4–16 inside components, 24–48 between components, 64–128 between sections.
- One hero per layout. Bento: ≤ 5 boxes, one at least 2× the others, 16px gaps, 24px radius (12/16 on mobile); no charts inside bentos.
- Arabic: mirror with CSS logical properties (see /AGENTS/arabic).

## Motion
| Token | Value | Use |
|---|---|---|
| instant | 80ms | Colour changes, toggles. |
| fast | 140ms | Hovers, small reveals. |
| base | 220ms | Menus, accordions, tabs. |
| slow | 360ms | Panels, drawers, page transitions. |
| deliberate | 600ms | Hero moments, the star rise. Once per screen. |
| standard | cubic-bezier(0.2, 0, 0, 1) | Most UI movement. |
| enter | cubic-bezier(0, 0, 0.2, 1) | Elements arriving. |
| exit | cubic-bezier(0.4, 0, 1, 1) | Elements leaving. |
| rise | cubic-bezier(0.22, 1, 0.36, 1) | Signature ease: a long, calm settle, like a star rising. |
- Motion explains a change; no bounces, spins, overshoot or scroll-triggered animation everywhere.
- Exits faster than entrances. The "rise" easing is for one hero moment per screen.
- Agent working: a thinking orb whose state names the work (searching, solving, composing…), with a status line; no spinners for AI tasks (/AGENTS/feedback).
- Respect prefers-reduced-motion: fades instead of movement, stop loops.

## Accessibility (WCAG 2.2 AA)
- Contrast: body ≥ 4.5:1, large text/UI graphics ≥ 3:1. Never colour alone; status = icon + text.
- Keyboard access to everything, logical order; dialogs trap and return focus; icon-only buttons have aria-label; decorative icons aria-hidden.
- Text reflows at 200% zoom; set lang and dir correctly (ar = rtl).
- Alt text for meaningful images; captions (EN + AR) for video; charts have a summary and data table.

## Product visuals and sample data
- UI-first: real UI at 2×, cropped to the point, on Aurora (light) or Midnight (dark), window radius 12, shadow 4, simple frame with three neutral dots; no OS chrome, no 3D tilt.
- In-context: one simplified card over an illustration, night sky or Aurora; ≤ 2 UI elements; grey bars for unreadable small text.
- Sample data only: Layla Haddad, Ahmed Rahman, Sara Khalil, Mariam Saeed, Noura Obaid; Department of Planning, Ministry of Water, Central Archive; firstname.lastname@example.gov; "Classified" label only. Never real customer data.
- Show human approval and control: AI drafts, people approve.