Typography
The type scale, tabular figures, and heading styles used across the platform.
Typeface Inter — used across every weight and role in the system.
Semantic scale — size · line-height · weight baked into one token
- Energy that adds up
- text-display · 36 / 40 · 700
- Energy that adds up
- text-heading · 24 / 30 · 600
- Energy that adds up
- text-title · 18 / 24 · 600
- Energy that adds up
- text-body-lg · 16 / 24
- Energy that adds up
- text-body · 14 / 22
- Energy that adds up
- text-caption · 12 / 16 · 500
Tabular figures —
tabular utility aligns numeric columns (meter readouts, KPIs)default1,284.05 kWh942.10 kWh37,001.98 kWh
.tabular1,284.05 kWh942.10 kWh37,001.98 kWh
Headings
Energy that adds up
- h1 · text-4xl font-extrabold
Peak demand at a glance
- h2 · text-3xl font-semibold
Site overview
- h3 · text-2xl font-semibold
Meter details
- h4 · text-xl font-semibold
Prose
Track consumption, cost, and emissions across every facility.
- lead · text-xl
A demand charge is based on the highest 15-minute average load recorded during the billing period. Shaving that peak by even a few percent can meaningfully lower the bill.
- p · leading-7
“You can’t manage what you don’t measure.”
- blockquote
Text styles
1.24 MW current load
- large · text-lg font-semibold
Updated 2 minutes ago
- small · text-sm font-medium
Averaged over 15-minute intervals.
- muted · text-sm
Set the threshold with
--demand-threshold.- inline code
Examples — styles composed into real UI (hover any line for its token)
Site report · July 2026
Peak demand at a glance
Track consumption, cost, and emissions across every facility in one view.
Current load1.24 MW↓ 12% vs. last peak
Understanding demand charges
A demand charge is based on the highest 15-minute average load recorded during the billing period. Shaving that peak by even a few percent can meaningfully lower the bill.
Updated 2 minutes ago