Light/Dark modes
Model hosting
Residency before capability
Every model request goes through your own NorthStar Admiral Server. Desks never hold provider keys. Read about data flows
Open the garden
Model hosting
Residency before capability
Every model request goes through your own NorthStar Admiral Server. Desks never hold provider keys. Read about data flows
Open the gardenBringing the right sky
Light and dark are two times of day under the same sky. Choose the one that tells your story, not the one that looks cooler.
Light mode is morning: open, warm and human. Dark mode is night: focused, technical and precise. Both are fully North. What matters is that the choice is deliberate and consistent across a piece of work.
Light vs. dark
| Light mode | Dark mode | |
|---|---|---|
| Tone | Warm, open, human | Focused, technical, confident |
| Feels | Clear, friendly, accessible | Precise, calm, sophisticated |
| Best for | Brand storytelling, proposals, everyday communication, documentation | Product depth, architecture, security, AI and data storytelling, keynotes |
| Canvas | White or Dune 05 | Midnight 95 or Midnight 80 |
| Action colour | Gulf 70 with white text | Oasis 30 with Midnight text |
| Logo | Midnight | Snow, with the signal-colour star |
Colour roles
Products and the web use semantic tokens, never raw colours. Each role has a light and a dark value, so a component written once works in both modes. These are the values; the CSS variables switch automatically with prefers-color-scheme or data-theme.
| Role | Light | Dark | Use |
|---|---|---|---|
--n-bg-canvas | Page background. | ||
--n-bg-subtle | Section bands, warm backgrounds. | ||
--n-bg-panel | Visual containers, cards on Cream. | ||
--n-bg-inverse | Dark bands inside a light layout. | ||
--n-surface-raised | Cards, menus, dialogs. | ||
--n-text-heading | Titles and headings. | ||
--n-text-body | Body copy. | ||
--n-text-caption | Captions, metadata, helper text. | ||
--n-text-strong | Bold emphasis inside body copy. | ||
--n-text-link | Inline links. | ||
--n-text-on-action | Text on the action colour. | ||
--n-action | Primary buttons, CTAs. | ||
--n-action-hover | Primary button hover. | ||
--n-accent | Warm glow, highlights, illustration. | ||
--n-border | Default border on warm surfaces. | ||
--n-border-ui | Default border in product UI. | ||
--n-focus | Keyboard focus ring. | ||
--n-diagram-canvas | Diagram background. | ||
--n-diagram-line | Connectors, arrows and node borders. | ||
--n-diagram-line-strong | Primary path, emphasised connectors. | ||
--n-diagram-node | Default node fill (system, service, step). | ||
--n-diagram-node-alt | Secondary node fill (external system, actor). | ||
--n-diagram-group | Group container fill. | ||
--n-diagram-zone | Trust boundary / on-premises zone fill. | ||
--n-diagram-zone-border | Trust boundary dashed border. | ||
--n-diagram-ai | AI agent and model accents. | ||
--n-diagram-human | Human approval and review accents. | ||
--n-diagram-flow | Highlighted main flow. | ||
--n-diagram-label | Node titles. | ||
--n-diagram-caption | Edge labels, captions, metadata. | ||
--n-skeleton-base | Skeleton placeholder fill. | ||
--n-skeleton-shine | Shimmer highlight that sweeps across skeletons. | ||
--n-scrim | Overlay behind dialogs and drawers. | ||
--n-row-hover | Table row hover. | ||
--n-row-selected | Selected table row / list item. | ||
--n-table-header | Table header background. | ||
--n-status-success | Success text and icons. | ||
--n-status-success-bg | Success background. | ||
--n-status-warning | Warning text and icons. | ||
--n-status-warning-bg | Warning background. | ||
--n-status-danger | Error text, icons and danger actions. | ||
--n-status-danger-bg | Error background. | ||
--n-status-info | Information text and icons. | ||
--n-status-info-bg | Information background. | ||
--n-text-on-danger | Text on danger buttons. |
Text colour
From light to dark
When the background goes dark, the text inverts, and the highlight changes hue to keep its contrast.
- Headings: Midnight 90 → Snow
- Body: Midnight 60 → Midnight 20
- Captions: Midnight 50 → Midnight 30
- Links: Gulf 70 → Oasis 30
Logo in light and dark
Midnight on light, Snow on dark
Use the Midnight logo on light backgrounds. On dark backgrounds use the Snow logo; for sub-brands, the star takes the signal colour.
Never place the Snow logo on a light background, or a signal-colour star on light.
Calls to action
Action is Gulf by day, Oasis by night
On light surfaces the primary button is Gulf 70 with white text. On dark surfaces it becomes Oasis 30 with Midnight text: the action turns into the light of the star. Secondary buttons are outlined in both modes.
Imagery in light and dark
Aurora by day, the night sky by night
Light layouts use the Aurora gradient, Dune and the warm illustrations. Dark layouts use the night sky, Midnight and the star. In both, keep one point of light — a glow, the star or a highlight — so the layout never feels flat.
Glow
A soft point of light
The Oasis glow (--n-shadow-glow) is a soft halo used on dark surfaces to mark something alive: the star, a running agent, a live result, a selected data point.
- One glow per view.
- Only on dark backgrounds.
- Never behind body text.
Shaheen is running 6 lenses
Strategic brief · step 3 of 5
Try it
Switch the whole hub between modes with the moon and sun button in the header. Every component on this site is built from the semantic tokens above.
Dos and don'ts
Do
- Match the mode to the message and the audience.
- Use semantic tokens in product, so both modes come for free.
- Keep one point of light in every layout.
- Use Midnight 95, not black, for dark backgrounds.
Don't
- Mix light and dark cards in one view without a reason.
- Use Gulf 70 buttons on dark or Oasis buttons on light.
- Let dark layouts become a black hole: add the star, a glow or an illustration.
- Put dark-mode product screenshots in light marketing layouts, or the reverse.
Last updated on 14 October 2026