Style guide

This page renders every element the theme styles. It doubles as a visual regression check: toggle the color mode in the navbar and everything here should stay legible and on-brand in both themes.

The theme is driven by the design tokens copied from the product app — see src/css/tokens.css, src/css/themes.css and the adapter in src/css/custom.css.

Headings

The prose scale sits one step below the marketing scale in tokens.css; the display sizes are reserved for the homepage hero.

Heading level 2

Heading level 3

Heading level 4

Text

Body copy is Instrument Sans at 16px with a 1.7 line height. It supports bold, italic, strikethrough, inline code, and internal links as well as external ones.

A blockquote, for quoting a source or setting a passage apart from the surrounding argument.

• Unordered list item
• Another item
  • A nested item
  • And another

1. Ordered list item
2. Second item
3. Third item

---

Admonitions

Five variants, each mapped to a signal color from the design system.

note

Neutral aside. Context a reader can take or leave.

tip

The recommended path. Use this for the advice you would give in person.

info

Clarifies how something works. Facts, not advice.

warning

Something that will bite. Consequences, prerequisites, irreversible actions.

danger

Data loss or a security consequence. Use sparingly — overuse dulls it.

Code

Code blocks stay on the cool ink surface in both color modes, matching the app's inverse surfaces and the sidebar rail.

src/shared/api/client.ts

export const apiClient: AxiosInstance = axios.create({
  baseURL: env.VITE_API_BASE_URL,
  timeout: 300_000,
  withCredentials: true,
})

curl -X POST 'https://<host>/api/v1/auth/login' \
  -H 'Content-Type: application/x-www-form-urlencoded' \
  --data-urlencode 'email=user@example.com'

{
  "status": true,
  "message": null,
  "data": {"size": 2, "data": [{"id": 1}, {"id": 2}]}
}

Tabs

Linux

sudo systemctl status lumen-edge-sensor

Windows

Get-Service -Name LumenEdgeSensor

Tabs remember their choice

groupId syncs every tab group with the same id across the site and persists the selection, so a reader who picks "Windows" once keeps it on every page.

Tables

Column	Type	Description
id	integer	Primary identifier
hostname	string	Reported hostname
lastSeen	timestamp	Last contact from any source
sources	array	Contributing integrations

Tables get a rounded border, an uppercase mono-ish header row and row hover. Wide tables scroll horizontally rather than widening the page.

Collapsible sections

What belongs in a collapsed section?

Detail that most readers can skip: edge cases, long enumerations, background justification. Anything a reader needs should not be hidden behind a click.

Diagrams

Mermaid renders natively and follows the color mode.

Writing conventions

A few house rules for these docs:

Rule	Why
Sentence case for headings	Matches the app's own UI copy
Second person ("you")	Docs address a reader doing a task
Admonitions for consequences, prose for explanation	Keeps callouts meaningful
Link the first mention of a concept	Readers arrive mid-site from search
TODO admonitions for known gaps	Honest, and greppable before a release

TODO

That last convention is what the :::note TODO blocks throughout this site are. Grep for TODO before cutting a documentation release.