Home
DESIGN.mdStar on GitHub
Copied!

AI-powered Observability

Intelligent observability that resolves issues at scale — before they impact your bottom line.

Colors
Primary
Ink
#080F11
Page, deep surfaces
Cream
#E5E4D8
Paper, text on dark
Teal
#008C99
Accent, latency
Green
#00AC69
Healthy, throughput
Surfaces — Dark (real near-black)
Page
#080F11
Background
Surface
#141A20
Cards
Elevated
#1D252C
Raised, tiles
Border
#293338
Dividers
Data-viz & Semantic
Throughput
#00AC69
Green
Latency
#17B8C4
Teal
Errors
#F5544E
Red
Apdex
#8B7BF0
Purple
Text & Light
Secondary
#9AA4A6
Muted text
Page Light
#F1F0E4
Warm light bg
Warning
#F0B400
Degraded
Border (light)
#D8D7CA
Dividers
Typography — Mona Sans · Geist Mono
h1
Full-stack observability
40px700Mona Sans
h2
Golden signals at a glance
27px600lh 1.1
h3
Distributed tracing
20px600lh 1.3
body
Monitor every layer of your stack — from the browser to the database — in a single, connected platform.
15px400lh 1.6
nrql
SELECT rate(count(*), 1 minute) FROM Transaction
13pxGeist Mono
Signature — Golden Signals
checkout-service · production Operational
Components
Buttons
NRQL
Service Health
Operational Degraded Critical
Signals
Throughput Latency Errors
Guardrails
DO
Pair near-black #080F11 with warm cream #E5E4D8 — that contrast is the brand
Use green for throughput, teal for latency, red for errors — consistently
Set metrics, NRQL, and IDs in Geist Mono
Give every chart a current value, unit, and delta
Show the time range on any time-series view
DON'T
Don't cool the cream to plain white — the warmth is the identity
Don't invent dark surfaces; anchor on the real near-black #080F11
Don't reuse a data-viz color for an unrelated signal
Don't set metric values in a proportional font
Don't show a sparkline without its scale / current value