Product visuals
Mai · docked on Emails
Reply to the Ministry of Planning
Recipients outside your organisation: 0 · Attachments: 1
Showing our products in action
Our products are serious tools for serious work. Product visuals should make them look exactly that: clear, calm, trustworthy and real.
We show products in two ways, depending on the story.
| UI-first | In context | |
|---|---|---|
| What it is | The real interface, cleaned up and cropped to the point | A simplified UI moment combined with an illustration, the night sky or a photo |
| Use when | Explaining a feature, documentation, technical and sales content | Campaigns, social, covers and keynotes, where the story matters more than the detail |
| Detail | Real labels and sample data, legible at the final size | One message or card; grey bars instead of small text |
UI-first compositions
Real interface, one clear point
- Use real product UI as the base, captured at 2× resolution.
- Crop to the part that explains the point: a whole window is rarely needed.
- Replace personal data with the sample data set below.
- Place windows on Aurora (light) or Midnight (dark) backgrounds, with shadow 4.
- Annotate with a single Oasis or Gulf callout, not arrows everywhere.
Strategic brief · Classified · On-premises only
Water security outlook 2030
Admin and operator products
NorthStar Admiral, NorthCloud consoles and NorthEdge Observe are operator tools. Show them in light mode, with tables and settings at a size people can actually read. Make the action obvious: one primary button.
Licences
Department of Planning
| User | Modules | Models | Status |
|---|---|---|---|
| a.rahman | Mai, Emails, Shaheen | 4 on-prem | Active |
| s.khalil | Mai, Calendar | 2 on-prem | Active |
| m.saeed | All modules | 4 on-prem, 2 cloud | Expires in 9 days |
| n.obaid | Mai | 1 on-prem | Revoked |
In-context compositions
One moment, beautifully framed
For storytelling, lift one moment out of the product and frame it. A single approval card over the night sky says more about “human in command” than a full screenshot.
- Keep the UI simpler than the real one: one card, one message.
- Replace small text with grey bars.
- Use a library illustration, the night sky or Aurora behind it.
- Never more than two UI elements in one composition.
Regional lens · 14 sources · Classified
Sample data
Believable, never real
Product visuals must never contain real customer data, real employee names, real classified markings or real email addresses. Use the North sample set.
layla.haddad@example.gov
ahmed.rahman@example.gov
sara.khalil@example.gov
| Field | Sample |
|---|---|
| People | Layla Haddad, Ahmed Rahman, Sara Khalil, Mariam Saeed, Noura Obaid |
| Organisations | Department of Planning, Ministry of Water, Central Archive |
| Emails | firstname.lastname@example.gov (reserved domain) |
| Analyses | Water security outlook 2030, Port capacity scenarios |
| Classification | “Classified” label only, never real marking schemes |
Devices and frames
- Desktop apps (NorthStar Desktop, Admiral Console) in a simple window frame with three neutral dots, 12px radius. No real OS chrome, no browser address bars.
- Mobile (NorthStar Admiral Mobile) in a minimal rounded frame, no specific phone model.
- Never show a competitor device or app, or a laptop with a visible brand logo.
- Window shadow:
--n-shadow-4. Window radius: 12px.
Dos and don'ts
Do
- Use real UI with sample data.
- Keep each composition to one takeaway.
- Check legibility at the final size.
- Show human approval and control where relevant.
Don't
- Fake dashboards or UI that does not exist.
- Cram several features into one screen.
- Show real names, emails or classified content.
- Use more than two UI windows alongside other imagery.
- Tilt windows in 3D perspective.
Last updated on 14 October 2026