nrgonDeveloper My Account

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

teal#19647A
links, primary actions, the brand
teal soft#7FC4CF
fills, secondary marks
ink#1C3238
text
slate#77909B
secondary text
grey#8CA3A8
labels, metadata
hair#E3EBEB
borders, rules
emerald#3FA37A
healthy, available, savings
amber#E8A13C
price, tariff, caution
red#C25450
failure, outage
blue#3E7BB6
charging, 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.

compute
container
redis
bucket
drive
edge
device
cloud
user
live
dump
doc
photo
config
report
components
apps
check

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.