Monitors

Typography

Mono carries identity and structure; sans carries prose and controls. fonts.css self-hosts IBM Plex. A standalone page without the font installed, such as this one, shows the system fallback.

Families

• --font-monoIdentity, documentation and product page titles and section headings, navigation rails, metadata, captions, code, identifiers, and keys

  ~/filip-stack 0123456789

• --font-uiProse, h3 and below, application section headings, labels, and controls

  Quiet surfaces, clear hierarchy

Size scale

• --text-displayProduct page and tool home title, in mono

  Terminal folio

• --text-display-smThe display title on phones

  Terminal folio

• --text-3xlDocumentation title, in mono

  Design language

• --text-2xlLargest application title

  Quiet surfaces, clear hierarchy

• --text-xlDocumentation section heading, in mono

  Quiet surfaces, clear hierarchy

• --text-lgSubheadings (h3 and below) and large controls

  Quiet surfaces, clear hierarchy

• --text-readingParagraphs and article text, with --leading and --measure

  Quiet surfaces, clear hierarchy

• --text-mdControls and dense application content

  Quiet surfaces, clear hierarchy

• --text-smSecondary text and figure captions

  Quiet surfaces, clear hierarchy

• --text-xsBadges, navigation group labels, and code block headers

  Quiet surfaces, clear hierarchy

• --text-codeInline code, source code, and command plates

  latency_p95 > 300

Line height, weight, and tracking

• --leading-tightHeadings, from the tokens.css base

  Two lines of a heading sit close together

• --leadingBody and reading text

  Two lines of body text leave room to read

• --weight-regular

  Regular body text

• --weight-mediumThe current destination

  Medium current item

• --weight-semiboldHeadings, from the tokens.css base

  Semibold heading

• --tracking-tightHeadings, from the tokens.css base

  Restrained tracking

Roles

• Documentation title--font-mono --text-3xl

  Design language

• Section heading--font-mono --text-xlDocumentation, CLI tool, article, and product pages: a ## mark in --color-accent and a --color-border-subtle rule above

  Typography

• Application title--font-ui --text-2xlOr smaller; the toolbar title on this page uses --text-md

  Monitors

• Application section heading--font-ui --text-lgUp to --text-xl, or smaller in a dense panel. No mark and no rule

  Alerting monitors

• Subheading (h3 and below)--font-ui --text-lg

  Install the command line tool

• Reading text and links--text-reading --leading --measureUnderline links in prose

  A shared language for personal products and tools. The documentation example shows it in a full page.

• Secondary text--text-sm --color-muted

  Updated 4 minutes ago by the nightly sync.

• Inline code--font-mono --text-code

  Set --measure on reading text.

• Shell command--color-command-bg --color-project-darkA command plate tinted with the hue, with the $ prompt drawn by CSS

  pnpm install --frozen-lockfile

• Source code--color-code --color-syntax-*A theme-matched well with syntax colors and no prompt

  // Sample monitor{  "metric": "latency_p95",  "threshold": 300}

Color

Ratios are WCAG contrast against each named background: 4.5:1 for text, and 3:1 for icons, marks, and control edges. A ratio below its target says so in text.

Surfaces

• --color-bgPage canvas
• --color-surfaceWells: code, screenshots, figures
• --color-surface-raisedPanels and floating layers
• --color-surface-mutedNeutral badges, slider and progress tracks, and radio card hover
• --color-wellThe well: segmented and switch tracks, pressed buttons, selected radio cards, and disabled fields
• --color-field-bgField fill: --color-surface-raised in light, the sunk --color-well well in dark. It stays the same on focus
• --color-field-edgeField border at rest: --color-border-subtle in both themes. Focus turns it --color-accent
• --color-control-thumbSecondary buttons and segmented thumbs
• --color-nav-currentCurrent navigation row and selected tab, with --shadow-nav-current
• --color-nav-current-textText on the current row and selected tab: the first of --color-accent, --color-text, black, and white that reaches 4.5:1 on the tinted fill
• --color-segmented-current-textThe selected segmented label: the first of --color-accent, --color-text, black, and white that reaches 4.5:1 on the thumb (3:1 for an icon)
• --color-row-hoverHover on navigation rows, tabs, ghost buttons, and listbox options
• --color-row-selectedChecked option in a select picker
• --color-overlayBackdrop behind dialogs and drawers

Text and lines

• --color-textEssential labels and instructions
• --color-mutedSecondary information and metadata
• --color-border-subtleFigures and dividers
• --color-borderUnchecked checkbox and radio edges; the off switch track mixes it into --color-well

Identity, links, and focus

• --color-projectThe project hue; --color-accent follows it
• --color-project-darkThe hue on the terminal plate
• --color-accentPrimary action fill, marks, current items, checked controls; 4.5:1 where it colors text
• --color-accent-textPrimary button label
• --color-button-hoverPrimary button hover
• --color-accent-hoverAccent hover; no core component reads it
• --color-linkLinks
• --color-focusThe one focus ring on every role but fields: the accent

Status

Status colors mean state and go on icons beside a text label. Alerts use the soft-tint tokens. Badges mix 22% tone over the raised surface and 75% tone with --color-status-ink in light, 85% in dark.

• --color-success
• --color-success-surfaceAlert text on its tint
• --color-warning
• --color-warning-surfaceAlert text on its tint
• --color-error
• --color-error-surfaceAlert text on its tint
• --color-info
• --color-info-surfaceAlert text on its tint
• --color-status-inkWhat a status label mixes with: black in light, so it keeps its contrast whatever a theme's text, and --color-text in dark

Code and terminal

• --color-codeSource code well
• --color-code-text
• --color-syntax-keyword
• --color-syntax-string
• --color-syntax-number
• --color-syntax-comment
• --color-command-bgCommand plate, tinted with the hue, in both themes
• --color-command-borderCommand plate edge; transparent in light
• --color-terminal-textCommand text
• --color-project-darkThe $ prompt on the command plate
• --color-terminalTerminal capture plate, in both themes
• --color-terminal-text
• --color-terminal-borderTerminal plate edge
• --color-terminal-captionStatus-line caption under a terminal capture
• --color-terminal-caption-text

Spacing and size

A 4px rhythm. Use smaller gaps within a group and larger gaps between groups, with flex or grid gap.

• --space-1
• --space-2
• --space-3
• --space-4Side gutter on phones
• --space-5
• --space-6Side gutter
• --space-8Documentation section gap on phones
• --space-12Documentation section gap
• --space-16Product section separation at tablet width
• --space-20
• --space-24Product section separation

Layout widths

• --measure
  Bounds reading text
• --page-max
  Documentation frame
• --page-wide
  Product page frame
• --sidebar
  This page's sidebar
• --rowNavigation and list rows

Control heights

• --control-sm
• --control-md
• --control-lgTouch controls

Shape

Pill buttons, rounded fields and toggle cards, large-radius panels, and inline corners. Cards never take a pill.

• --radius-inlinePlaces and picked rows: navigation rows, tabs, list rows, breadcrumb links, checkboxes, and keyboard keys
• --radius-fieldTyped fields, controls whose label wraps, and one-line controls that are not actions: inputs, selects, textareas, toggle cards, pager links, the project-menu trigger, the labelled contents trigger and its no-JavaScript summary, and the skip link
• --radius-controlPills that act, or set a value in place with every option shown: buttons other than the labelled contents trigger, quiet actions other than the project-menu trigger, segmented controls, and their thumbs
• --radius-panelContainers: wells, plates, panels, radio cards, alerts, and floating layers
• --radius-pillSmall state marks: status badges, switch tracks, slider and progress tracks, and score pips

Borders and dividers

Borders are 1px; bars that mark the current item are 2px. Neither width has a token.

• 1px --color-border-subtleFigures, dividers, and the rule above a section heading
• 1px --color-borderUnchecked checkbox and radio edges
  UncheckedRadio
• 1px --color-textSolid rule below the shared site header
• --color-nav-current, --shadow-nav-currentCurrent page, a section rail's current section, selected tab, and selected list row: a lifted fill with a faint accent tint, --color-nav-current-text, and no border or underline
  OverviewSettings
• 3×14 --color-accent pipCurrent location in a strip or contents list, with medium weight and no fill
  Thresholds
• 1px transparentBorderless controls retain a border for forced colors; pressed segmented thumbs raise without a ring
  ListBoard
• tint without a visible borderAlerts keep a transparent 1px border for forced colors

  No data for 42 minutes.

Elevation

Controls raise, containers take a quiet edge, and dark fields sink; light fields rest flat on the raised surface. Floating layers keep their dialog shadow, including its border.

• --shadow-raiseIdle controls: buttons, unselected radio cards, switch knobs, and segmented thumbs
  Button
• --shadow-surfaceContainers: panels, cards, source code, command plates, and terminal captures
  PanelRaised surface, transparent border
• --shadow-sinkWells: tracks, pressed buttons, selected radio cards, and dark fields
  Well--color-well
• --shadow-fieldFields at rest: none in light, where the white fill and edge carry the shape; --shadow-sink in dark. Disabled fields drop it
  Field--color-field-bg
• --shadow-field-focusA focused field's 2px inset line: the accent at 18%, inside its --color-accent edge
  Focused field--color-accent edge
• --shadow-field-focus-invalidA focused invalid field's inset line: --color-error at 18%, inside its --color-error edge
  Focused invalid field--color-error edge
• --shadow-nav-currentThe lift under the current navigation row and the selected tab
  Monitors
• --shadow-dialogMenus, popovers, pickers, and dialogs
  Floating layerRaised surface, dialog shadow
• --shadow-nav-current-darkThe selected tab's lift in a terminal capture header, which stays dark in both appearances

Focus and motion

• --focus-width solid --color-focusOne ring for every role but fields: buttons, quiet actions, links, tabs, and navigation rows. --color-focus is the accent, at 3:1 or more on every surface. It has no glow and sits over the control's own raise or sink shadow. Pointer hover never draws focus.
  Focused
• --focus-offsetThe gap between a control and its ring
• 1px --color-accent edge, 2px inset lineFields draw no ring. Focus turns the edge --color-accent with a 2px line of the accent at 18% inside it; the fill stays. An invalid field keeps its --color-error edge and line. In forced colors a Highlight outline replaces the line.
• offset -(--focus-width)Only inside a scrolling or clipping parent, or a segmented control, with a comment that names the reason
  OverviewSettings
• --duration-fast
  Hover and press
• --duration
  Menus, panels, and the switch knob
• --ease-out
  Animate opacity or transform only where it explains a state change
• prefers-reduced-motion
  The tokens.css base sets transitions and animations to 0ms and turns off smooth scrolling. A busy spinner slows to 1.4s instead.