Content elements

DraftIn reviewActiveExpires in 9 daysRevokedAIOn-premisesClassifiedv1.3.8

Badges

Short status, never decoration

  • One or two words, in sentence case, describing state: Active, Expires in 9 days, Revoked.
  • Colour comes from status tokens and always matches the word. A dot can lead for live states.
  • The AI badge marks AI-generated content and AI activity; it is never used for anything else.
  • Counts use the round counter: 3 (red only for unread or errors; neutral inside tabs).
BadgeMeaning
DraftNeutral, default
In reviewInformation, in progress
ActiveSuccess, healthy
ExpiringNeeds attention soon
FailedError, blocked, revoked
AIProduced by or involving AI
NewEmphasis on a new item

Pills, chips and tags

Pills, chips and tags

PillsOn-premises128 usersArabic
Filter chips
Input chipslayla.haddad@example.govMinistry of Water
Tagsv1.3.8on-prem/llama-70bGST
ElementShapeUse
PillFull radius, panel fill, 28pxRead-only attributes and metadata
Filter chipFull radius, outline, 32px; selected = filled MidnightToggle filters; multiple can be on
Input chipFilter chip with a remove buttonValues entered in a field: recipients, tags
Tag4px radius, outline, mono textVersions, IDs, model names, technical values

Avatars

People and agents

LHARSKLHARSK+4

People get initials on Dawn, Oasis or Gulf tints (assigned by a hash of the name, never by role). Agents always get the Midnight avatar with the agent icon in Oasis, so people and AI are never confused.

Cards

Cards

Analysis

Water security outlook 2030

6 lenses · 14 sources · updated 2 h ago

Interactive

Port capacity scenarios

Hover me: shadow 2

Selected

Skipper · Llama 70B

On-premises · 41 ms

  • 16px radius, 1px border, 24px padding, white (raised) surface. Shadow appears on hover only for interactive cards.
  • Selected cards get a 2px action-coloured border, not a background flood.
  • A whole-card click target has one link; secondary actions inside use buttons that stop propagation.

Lists

Lists

Bullet list

  • Files stay on the machine.
  • Every model call goes through Admiral.
  • Classified analyses fail closed.

Numbered list (steps)

  1. Create the user in NorthStar Admiral Console.
  2. Issue a licence with the right modules.
  3. The user signs in with the Admiral URL.

Nested numbered list

  1. Prepare the server
    1. Open UDP 51820
    2. Install the certificate
  2. Run the smoke test

Check list and description list

  • Licence valid
  • Gateway reachable
Version
1.3.8
Residency
On-premises only
ListUse
BulletsUnordered facts. Midnight 50 markers, 6px between items, ≤ 7 items
Numbered (circles)Steps that must happen in order. Numerals in 24px Panel circles, tabular figures
Nested numberedSub-steps: 1 → a → i. Two levels at most
Check listRequirements met or included features
Description listKey–value properties: caption-coloured keys, heading-coloured values

Code snippets

Formatted for reading and copying

  • Midnight 95 block in light and dark mode, 16px radius, JetBrains Mono 13.5px, line height 1.65.
  • A header shows the file name or language on the left and the copy button on the right.
  • Syntax colours from the palette: keys Oasis 30, strings Dawn 40, numbers Gulf 20, comments Midnight 40 italic.
  • Line numbers in Midnight 50, not selectable. Highlighted lines get a faint Oasis band and a 2px Oasis edge.
  • Wrap off; scroll horizontally. Inline code uses the panel background with 4px radius.
  • Shell commands omit the prompt so copied text runs as-is; show output in a separate block.
admiral.env
1# NorthStar Admiral Server
2ADMIRAL_URL=https://admiral.example.gov
3TRUSTED_PROXY_HOPS=14LICENCE_CHECK_MINUTES=15
5OFFLINE_GRACE_HOURS=48

Collapsible content

Accordion

Where does my data go?
Files stay on the machine. Model calls go through your own NorthStar Admiral Server.
Can Mai send emails by itself?
No. Consequential actions pause for your approval.
What happens offline?
NorthStar keeps working for up to 48 hours without a connection to Admiral.
  • Built on native <details> / <summary> so it works without JavaScript.
  • The chevron sits at the trailing edge and rotates 180° in 220ms.
  • Open the first item when the content answers the most common question; never hide the only content on a page.
  • Use “Show more” links for long text inside a card instead of an accordion.

Tooltips and hints

Short help, in the right place

  • Tooltip: names an icon or explains a control in a few words. Appears after 400ms hover or immediately on focus; Midnight bubble (Snow in dark mode), 12.5px.
  • Hint: persistent helper text under a field, with an info icon.
  • Help icon: a “?” that opens a popover with a sentence or two and a link.
  • Never put essential information only in a tooltip: touch users can't hover.
Copy keyResidency gate Runs inside your perimeter.

Keyboard keys, dividers and scrollbars

Kbd, dividers, scroll area

Open the command palette with ⌘ K, or Ctrl K on Windows.

or continue with

Audit event 1: licence check passed

Audit event 2: licence check passed

Audit event 3: licence check passed

Audit event 4: licence check passed

Audit event 5: licence check passed

Audit event 6: licence check passed

Audit event 7: licence check passed

Audit event 8: licence check passed

Audit event 9: licence check passed

Audit event 10: licence check passed

  • Scrollbars are thin (10px), Steel 30 thumbs with a 3px inset, transparent track; they appear in scroll areas, never on the page body.
  • Long scroll areas fade the last 32px to show more content below.
  • Dividers are 1px border colour. Labelled dividers separate alternatives (“or”).

Code

<span class="n-badge n-badge--success"><span class="n-badge__dot"></span>Active</span>
<button class="n-chip" aria-pressed="true">Classified</button>
<details class="n-accordion"><summary>Question</summary><div class="n-accordion__body">Answer</div></details>
<div class="n-code"><div class="n-code__head"><span>file.env</span><button class="n-copy">Copy</button></div><pre><code>…</code></pre></div>

Dos and don'ts

Do

  • Use status colours only for status.
  • Mark AI content with the AI badge.
  • Give code blocks a copy button and a file name.
  • Use native details/summary for collapsible content.

Don't

  • Use badges as decoration or for long text.
  • Give people and agents the same avatar style.
  • Hide essential information in tooltips.
  • Style page scrollbars.

Last updated on 14 October 2026