# Imagery: star, gradients, patterns, illustration, photography, icons

North brand guidelines for AI agents · https://identity.north.ae/AGENTS/imagery · Updated 2026-10-14
Use when: Choosing or creating visuals: backgrounds, illustrations, photos, icons, the North star device.
Rules that always apply: https://identity.north.ae/AGENTS

## The North star (graphic device)
- Four points, concave sides; top/left/right equal, lower point 1.6× longer; always upright, long point down.
- Snow (or sub-brand signal colour) on dark, Midnight on light; never gradient-filled, rotated or outlined in marketing.
- Uses: the single light in a dark composition (on a third line, soft Oasis glow), a highlight on the one key figure, a constellation hub (≤ 5 labelled nodes, fine dashed lines), a bullet in short lists (3–5 items).
- Not an AI sparkle. Never use sparkle icons next to it. One prominent star per layout.
- Files: `/assets/logos/north-star-{midnight,snow,oasis,dawn}.svg`; icon `/assets/icons/north-star.svg`.

## Gradients and patterns
- Aurora (light hero): Dawn 20 → Dune 05 → Oasis 30 → Gulf 60, built as soft radial glows; covers, app icons, light heroes; one per layout.
- Horizon: Midnight 80 → #1D6EC4 → Gulf 60 → Oasis 50; thin bars (2–8px), progress, dividers; never behind text or full-page.
- Night: Midnight 95 → Midnight 80 vertical, with the star and faint Dawn horizon glow; dark covers, wallpapers.
- Patterns (SVG/PNG at `/assets/media/patterns/<name>.svg`): contours-dune, contours-midnight, starfield-midnight, compass-dune, compass-midnight, aurora, horizon, night-sky. Low contrast behind content; one per layout; never combine pattern + gradient + photo.

## Illustration
- Style: linocut print — hand-carved lines, ink grain, slight misregistration, warm paper; one centred subject; regional timeless imagery (desert, sea, sky, falcon, dhow, star); technology as simple objects.
- Palette only: Midnight ink #273156, Dawn #FFE3D3, Oasis #95ECF1, Gulf #227ED1, paper #FFF9F3.
- Library (`/assets/illustrations/<name>.jpg`, 16:6 banners): shaheen (strategy), get-started (beginnings), agents (collaboration), residency (data location), security (trust), license (access), install (setup), issues (support/systems).
- Never recolour, filter, add gradients, crop through the subject, put body text over it, or mix with 3D/stock vectors. No clichés (glowing brains, robot hands, hooded hackers).
- Image-generation prompt: "Linocut print illustration of [ONE SUBJECT]. Hand-carved lines, visible ink grain and slight misregistration, printed on warm cream paper (#FFF9F3). Strictly limited palette: deep navy ink (#273156), soft peach (#FFE3D3), aqua (#95ECF1), medium blue (#227ED1). Single centred subject, calm composition, generous empty paper. Flat lighting, no gradients, no glow, no text, no logos. Wide banner, 16:6." New illustrations need brand-team approval.

## Photography
- Real people (UAE/region) in real workplaces, mid-task, in command of technology; place (dunes, coast, city at dusk, daylight interiors); detail (one object, shallow depth).
- Warm natural light, soft warm grade, lifted shadows, muted scenes. Duotone Midnight→Dune for backgrounds behind text.
- Screens show real North products with sample data only. Consent from everyone recognisable. Never classified environments or documents. Never AI-generated people presented as real.
- No clichés: hooded hackers, binary rain, padlocks on circuits, people pointing at transparent screens, neon/cold blue imagery.

## Filters and effects
- Backdrop blur: sticky headers 88% canvas + saturate(1.4) blur(14px); scrims --n-scrim + blur(4px); floating controls over images Midnight 95 at 64% + blur(8px). Always a solid fallback.
- Blur is not redaction: replace sensitive data with sample data or a solid Steel bar; never blur names/numbers/classified content in screenshots.
- Grayscale: one-colour logo walls (prefer official one-colour files), 60% for archived/inactive imagery; never on our logo, illustrations or people in case studies.
- Behind text: duotone first; else brightness 0.72 plus a Midnight gradient where text sits.
- Only decorative effect: the Oasis glow (one per view, on dark). No drop-shadow filters, glows on UI, or stacked effects.

## Icons
- Spec: 24×24 grid, 2px padding, 1.75px stroke (1.5 at 16px, 2 at 32px+), round caps and joins, outline only, Midnight 80 on light, Snow on dark, currentColor in code.
- Sizes 16/20/24/32; one size and colour per group; always with a text label for anything that matters; on photos put the icon in a white rounded box anchored to a corner; ≤ 2 icons on a photo.
- Files: `/assets/icons/<name>.svg`; sprite `/assets/icons/north-icons-sprite.svg` (`<use href="…#n-<name>">`). North originals: chevron-left, thumbs-up, thumbs-down, bookmark, clock, plug, stop, north-star, agent, residency, sovereign-cloud, model-garden, human-in-command, edge-inference, dune. Others restyled from Lucide (ISC).

### Icons by group
- North originals: chevron-left, thumbs-up, thumbs-down, bookmark, clock, plug, stop, north-star, agent, residency, sovereign-cloud, model-garden, human-in-command, edge-inference, dune
- Interface: search, settings, menu, x, check, plus, minus, chevron-right, chevron-down, arrow-right, arrow-left, arrow-up-right, external-link, download, upload, filter, ellipsis, bell, house, log-in, log-out, trash-2, pencil, copy, eye, eye-off, lock, lock-open, info, circle-alert, circle-check, circle-help, refresh-cw, share-2, link, paperclip, mic, send
- People and work: user, users, user-check, user-cog, building-2, landmark, briefcase, calendar, mail, message-square, messages-square, phone, file-text, files, folder, notebook-pen, clipboard-list, kanban, presentation, graduation-cap, handshake, headset, contact
- AI and data: bot, brain, sparkles, workflow, network, database, server, cpu, cloud, cloud-cog, hard-drive, activity, chart-column, chart-line, chart-pie, gauge, layers, boxes, git-branch, terminal, code, zap, scan-search, list-checks, bot-message-square, brain-circuit, wand-sparkles, sparkle, audio-lines, scan-text, text-search, atom, lightbulb, bot-off, message-square-dashed, orbit, radar, sigma, square-function, book-open-check, scan-face
- Security and sovereignty: shield, shield-check, shield-alert, key-round, fingerprint, scan-eye, file-lock, globe, map-pin, flag, badge-check, scale, history, archive
- Workflows: git-fork, git-merge, git-pull-request, route, split, merge, repeat, shuffle, list-todo, list-ordered, square-check-big, circle-play, circle-pause, circle-stop, timer, hourglass, calendar-clock, milestone, square-split-horizontal, arrow-right-left
- Workspace: layout-grid, layout-list, panel-left, panels-top-left, columns-2, app-window, folder-open, folder-tree, pin, tag, inbox, settings-2, sliders-horizontal, star-off, grip-vertical, maximize, minimize
- Office: printer, file-spreadsheet, file-chart-column, file-pen-line, file-plus, file-search, file-check, clipboard-check, stamp, signature, scissors, receipt, calculator, notebook-tabs, sticky-note, book-open, library
- Communications: mail-open, mail-check, message-circle, message-square-text, phone-call, video, voicemail, at-sign, megaphone, rss, radio, bell-ring, reply, reply-all, forward, languages, share, podcast
- Computer: monitor, laptop, memory-stick, router, wifi, wifi-off, bluetooth, usb, mouse, power, cable, ethernet-port, server-cog, hard-drive-download, monitor-check, monitor-cog, plug-zap, binary
- Devices: smartphone, tablet, watch, headphones, camera, webcam, speaker, tv, gamepad-2, scan-line, nfc, battery, battery-charging, monitor-smartphone, tablet-smartphone, printer-check, projector, qr-code
- Keyboard: keyboard, command, option, corner-down-left, arrow-big-up, arrow-big-up-dash, delete, arrow-right-to-line, space, mouse-pointer-click, text-cursor-input, keyboard-off, undo-2, redo-2, clipboard-paste, arrow-up-from-line
- Dashboard: layout-dashboard, chart-bar, chart-area, chart-scatter, chart-no-axes-combined, chart-spline, chart-candlestick, chart-gantt, chart-network, trending-up, trending-down, target, goal, table-2, percent, badge-percent, list-filter, calendar-range
- Shapes and arrows: square, circle, triangle, diamond, hexagon, octagon, pentagon, rectangle-horizontal, rectangle-vertical, circle-dot, square-dashed, box, cylinder, cone, circle-plus, arrow-up, arrow-down, arrow-up-left, arrow-down-right, arrow-down-left, arrow-up-down, arrow-left-right, arrow-big-right, corner-up-right, chevron-up, chevrons-up-down, chevrons-right, move, rotate-cw, refresh-ccw, maximize-2, minimize-2
- North world: compass, navigation, map, sun, sunrise, moon, star, anchor, sailboat, mountain, wind, telescope, waves, tent