# Diagrams, flowcharts and architecture drawings North brand guidelines for AI agents · https://identity.north.ae/AGENTS/diagrams · Updated 2026-10-14 Use when: Drawing any diagram, flowchart, sequence, architecture or data-flow figure (SVG, Mermaid, draw.io, slides). Rules that always apply: https://identity.north.ae/AGENTS ## Principles - One message per diagram; the title states the takeaway. - Flow in reading direction: left→right or top→bottom (right→left in Arabic). - ≤ 12 nodes; otherwise group or split into overview + detail. - Shapes and colours only carry their defined meaning; add a legend when > 3 element types. - No shadows, gradients, 3D, isometric clip art, tilted perspective, or decorative icons. ## Elements | Element | Shape | Use | |---|---|---| | Service / step | Rect, radius 8, fill diagram-node, 1.5px diagram-line border | Systems, services, components, process steps | | External system | Rect, fill diagram-node-alt | Things we do not own: customer systems, third parties, cloud providers | | Person / role | Pill (radius = h/2), fill diagram-node-alt, person icon | Users, operators, organisations | | Data store | Cylinder | Databases, file stores, indexes | | AI agent / model | Rect + 3px diagram-ai accent bar on the leading edge (draw.io: 2px diagram-ai border) | Where AI acts | | Human approval | Rect + 3px diagram-human accent bar (draw.io: 2px border) | Where a named person reviews/approves | | Decision | Diamond, label is a question; outgoing lines labelled Yes/No | Branches | | Start / end | Pill filled diagram-line-strong, text diagram-canvas | Single entry/exit of a flowchart | | Instances | Up to 3 rects offset 6px; subtitle "× n" | Many of the same thing | | Note | diagram-group fill, folded corner, caption text | Context outside the flow | ## Connectors | Line | Means | |---|---| | Solid 1.5px diagram-line | Request, call, data flow | | Solid 2.5px diagram-line-strong | Primary path | | Solid 2.5px diagram-flow | Highlighted flow (one per diagram) | | Dashed 6 4 | Async, optional, conditional | | Dotted 1.5 4 (round caps) | Dependency, reference, configuration | | Solid diagram-ai | Action taken by AI | - Orthogonal routing only, 8px rounded elbows; no diagonals or curves. - One filled arrowhead (8px long) at the receiving end; two only for real two-way exchanges. - Attach to the middle of a side; offset parallel lines on one side by 16–20px; avoid crossings. - Edge labels: 12px caption colour, sentence case, on the line with a 5px canvas-coloured halo (paint-order: stroke). Verbs or protocols ("Signs in", "HTTPS"). - Numbered step badges (20px Midnight circle, white bold 11px number) only for real sequences. ## Containers - Zone (trust/residency boundary, e.g. on-premises): fill diagram-zone, dashed 6 4 diagram-zone-border, radius 24. - Group (belongs together, no boundary): fill diagram-group, no border, radius 16. - Outline (external/optional set, e.g. approved cloud): no fill, dashed diagram-line, radius 16. - Label top-left (top-right in RTL) at 16px inset: 12px bold uppercase +0.06em (zone label in diagram-zone-border colour; group label in caption colour). Arabic labels: no caps, no tracking. - Nest ≤ 2 levels; 24px between container edge and inner nodes. ## Text, icons, logos - Node title: Helvetica Now Text Medium 14px diagram-label; subtitle 12px diagram-caption; one line each. - Exact product names; never abbreviations. - One 20px North icon per node on the leading edge (icon x+14, text x+44), stroke 1.75 in diagram-label (diagram-ai / diagram-human for those nodes). - Third-party logos only in external nodes, 20px high, one-colour Midnight (Snow on dark). No North logos inside diagrams. ## Colour roles (light / dark) | Role (CSS variable) | Light | Dark | Use | |---|---|---|---| | `--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. | ## Geometry tokens | Token | Value | Use | |---|---|---| | --n-diagram-grid | 8px | Snap every node and connector to an 8px grid. | | --n-diagram-stroke | 1.5px | Node borders and connectors. | | --n-diagram-stroke-strong | 2.5px | Primary path and emphasised connectors. | | --n-diagram-node-radius | 8px | Nodes (boxes). | | --n-diagram-group-radius | 16px | Group containers. | | --n-diagram-zone-radius | 24px | Zones and trust boundaries. | | --n-diagram-node-min-width | 144px | Minimum node width. | | --n-diagram-node-height | 56px | Default single-line node height (two lines: 72px). | | --n-diagram-node-padding | 12px 16px | Inner padding of a node. | | --n-diagram-gap | 48px | Minimum gap between nodes along a flow. | | --n-diagram-dash | 6 4 | Dashed line pattern (async, optional, boundaries). | | --n-diagram-dot | 1.5 4 | Dotted line pattern (dependency, reference). | | --n-diagram-arrow-size | 8px | Arrowhead length. | | --n-diagram-label-size | 14px | Node title (Helvetica Now Text Medium). | | --n-diagram-caption-size | 12px | Edge labels and captions (Helvetica Now Text Regular). | | --n-diagram-icon-size | 20px | Icon inside a node. | ## Tooling - draw.io / diagrams.net shape library: `/assets/diagrams/north-diagrams.drawio.xml` (File → Open library). - Reference SVGs (light/dark): `/assets/diagrams/north-{catalogue,architecture,flowchart,grouping}-{light,dark}.svg`. Kit ZIP: `/assets/downloads/north-diagram-kit.zip`. - Mermaid theme (light and dark): `/assets/diagrams/north-mermaid-theme.json`. Light init line: ``` %%{init: {"theme":"base","themeVariables":{"fontFamily":"\"Helvetica Now Text\", Helvetica, Arial, sans-serif","fontSize":"14px","background":"#FFFFFF","primaryColor":"#FFFFFF","primaryBorderColor":"#3D4870","primaryTextColor":"#1B223D","secondaryColor":"#FFF9F3","secondaryBorderColor":"#3D4870","secondaryTextColor":"#1B223D","tertiaryColor":"#FAF2E8","tertiaryBorderColor":"#3D4870","tertiaryTextColor":"#1B223D","lineColor":"#3D4870","textColor":"#1B223D","mainBkg":"#FFFFFF","nodeBorder":"#3D4870","clusterBkg":"#F0FDFD","clusterBorder":"#1A98B3","titleColor":"#1B223D","edgeLabelBackground":"#FFFFFF","noteBkgColor":"#FAF2E8","noteBorderColor":"#FAF2E8","noteTextColor":"#1B223D","actorBkg":"#FFF9F3","actorBorder":"#3D4870","actorTextColor":"#1B223D","actorLineColor":"#3D4870","signalColor":"#1B223D","signalTextColor":"#1B223D","labelBoxBkgColor":"#FAF2E8","labelBoxBorderColor":"#3D4870","labelTextColor":"#1B223D","loopTextColor":"#58628A","activationBkgColor":"#F0FDFD","activationBorderColor":"#1A98B3","sequenceNumberColor":"#FFFFFF"},"themeCSS":".node rect, .node .label-container { rx: 8px; ry: 8px; } .cluster rect { rx: 16px; ry: 16px; stroke-dasharray: 6 4; stroke-width: 1.5px; } .edgePath .path, .flowchart-link { stroke-width: 1.5px; } .edgeLabel { font-size: 12px; } .node .label { font-weight: 500; }"} }%% ``` - Mermaid example (flowchart): ```mermaid flowchart LR start([Start]) --> plan[Plan] plan --> ok{Approved?} ok -- Yes --> spec[[Specialists run]] ok -. No .-> plan spec --> val[Validate] --> rev[Human review] --> done([Deliver]) subgraph perimeter [On-premises] val rev end ``` ## Minimal SVG pattern (light) ```svg NorthStar Desktop HTTPS Admiral Server ```