Web patterns

NorthStar

Your desk. Your data. Your models.

A local-first agentic workspace for confidential work.

Pages built from bands

North web pages are stacks of full-width bands. Each band has one job and one background, and bands alternate between light and dark so the page has a rhythm.

Band	Background	Job
Hero	Night sky (sub-brand glow) or Aurora	Say what it is and who it's for; one primary CTA
Feature grid	White or Dune 05	3–6 benefits with icon, title, one sentence
Product band	Dune 05 with a product visual	Show the product doing one thing
Stat band	Midnight 80	2–4 proof points as big numbers
Logo strip	White	Partners and technologies (one-colour)
Testimonial	Dune 05 or night	One quote, one person, one organisation (approved)
FAQ	White	Accordion of 4–8 real questions
CTA band	Aurora	One action to close the page
Footer	Midnight 90	Navigation, legal, contact

Section spacing: 96px top and bottom on desktop, 64px on mobile. Content max width 1280px; text max 68 characters.

Hero

Headline: Display Bold 56–84px, two lines at most; subline Display Light 20–22px; one primary and one secondary CTA.
Sub-brand pages use the night sky with their signal-colour glow; north.ae uses the star alone or Aurora.
No carousels. No autoplay video with sound.

Feature grid

Data stays home

Files never leave the machine; models run inside your perimeter.

People approve

Consequential actions pause for a named person's go-ahead.

Agents that do the work

Plan, call tools, delegate — and show every step.

Stat band

48h

offline grace period

15 min

licence check interval

provider keys on desks

Only real, sourced numbers. Display ExtraBold, −0.04em; label in Display Regular, Midnight 20.

Logo strip

Logo strip (technology)

Works with the models you approve

One-colour logos at equal optical size, generous spacing, no links. For partner and customer logos follow the Partner logos page and get written approval for every customer logo.

Testimonial

“The analysts stay in charge. Shaheen does the reading; we make the calls.”

MSMariam Saeed
Director of Strategy, Department of Planning (sample)

FAQ and CTA band

Does NorthStar need the internet?

Only to reach your own NorthStar Admiral Server. It keeps working offline for up to 48 hours.

Which models can we use?

On-premises models through NorthStar Skipper, and approved cloud models when policy allows.

See NorthStar with your own data

Request a briefing

FAQ questions are real questions customers ask, in their words.
The CTA band repeats the hero's primary action. One button.
Footer: Midnight 90, logo and one line, columns of links (business units, enablers, company), legal line with the copyright. The official company name appears in the legal line only if required.

Comparison tables

Use the grid table style with grouped headers, a check icon for included features and an em dash for not included. Highlight the recommended column with a 2px action-coloured outline, not a background flood. On mobile, compare one plan at a time with a segmented control.

Dos and don'ts

Do

Give each band one job.
Alternate light and dark bands.
Use real, sourced proof points.
End with one clear CTA.

Don't

Use carousels or autoplay video.
Stack two dark bands.
Show customer logos without approval.
Put more than two CTAs in a hero.

Last updated on 14 October 2026