Design guidelines
VERSION 0.1 · 2026-10-12 · developer.nrgon.net/design
Rules for everything nrgon publishes: portals, apps, PDFs, this site.
Type
| use | face | size |
|---|---|---|
| body | Inter | 15 px, line height 1.6 |
| headings | Space Grotesk, bold | 34 / 20 / 16 px |
| numbers, codes, identifiers, labels | JetBrains Mono | 11 to 13 px, letter-spaced for labels |
Numbers are always monospace and always carry their unit. Identifiers such as device ids, bucket names and keys are set in monospace so a reader sees them as names.
Colour
#19647Alinks, primary actions, the brand
#7FC4CFfills, secondary marks
#1C3238text
#77909Bsecondary text
#8CA3A8labels, metadata
#E3EBEBborders, rules
#3FA37Ahealthy, available, savings
#E8A13Cprice, tariff, caution
#C25450failure, outage
#3E7BB6charging, energy flowing in
Colour means state, not decoration. Teal is the brand and the action. Emerald, amber, red and blue each mean one thing and are not used for anything else. White ground for documents and portals; the dark operations theme is for live consoles only.
Layout
- Content column 680 px for text, 1080 px for tables and consoles.
- 32 px side gutter on desktop, 18 px on a phone. No horizontal scrolling.
- One hairline between sections. No boxes around text, no shadows on documents.
- Tables over prose wherever the content is a list of facts.
- A diagram is hairline boxes and arrows, a line icon and text inside, no colour fills.
Writing
- Short sentences. One idea each. Plain words; most readers are not native English speakers.
- Section names are nouns: Scope, Cost, Schedule, Open items.
- Facts with a source. An estimate is marked as one.
- No closing summary lines. No sentence that only restates the list above it.
- A document says what it is in its first line.
Icons
Line icons, 24 px grid, 1.5 px stroke, rounded caps, no fills, teal on white. One icon per service, data kind and component, used the same way on every page.
Logo
The wordmark is used as supplied, at 28 px height in a header, on white. In a white-on-
teal context the single n mark is used. No outlines, no effects, no recolouring.
