Carbon accounting,
set in type.
One typeface. One color. Generous whitespace. Numbers as nouns. A system built so every screen feels inevitable — not minimal, not decorated. Edited.
Seven rules we don't break.
One brand color. Disciplined neutrals.
Deep green is sacred. Amber is functional, only. There are no gradients.
Inter does everything.
One family. Three weights (400, 500, 600). Tabular numbers always on.
One primary per view.
Forms that never apologize.
Status, not decoration.
Numbers as nouns.
The product is mostly tables.
| Vendor | Description | Method | Spend (CHF) | kgCO₂e | Confidence | Status |
|---|---|---|---|---|---|---|
| Migros AG | Diesel B7, 200 L | Physical | 412.00 | 534 | Verified | |
| SBB Cargo | Rail freight, Basel → Lugano | Physical | 1,240.00 | 38 | Verified | |
| EWZ | Electricity, Swiss market mix | Physical | 2,180.00 | 12 | Verified | |
| Office Depot | Stationery, mixed | Spend | 340.00 | 87 | Needs review | |
| Lufthansa | Flight ZRH → BER, economy | Physical | 218.00 | 142 | Draft |
Three parts. No illustrations.
A Swiss bank, not a launch party.
Calm, precise, slightly formal. Statements, not exclamations. No emojis.
| Context | Wrong | Right |
|---|---|---|
| Empty state | No invoices yet — let's get started! | No invoices uploaded. |
| Loading | Hold tight, working on it… | Processing. |
| Success | Great job! Your report is ready. | Report ready. Download below. |
| Error | Oops! Something went wrong. | Upload failed. The file exceeded 25 MB. |
| Confirm | Are you sure? | Delete this line item? Logged in the audit trail. |
Naming what's not in the system.
No gradients. No glassmorphism. No drop shadows on text. No stacked shadows. No emoji as UI. No exclamation marks. No multiple primaries. No rainbow charts. No carousels. No more than one typeface. No more than three weights. No pure black, no pure white.
Tokens
Ink-blue replaces amber as the audit accent. Amber now means danger only. Cool grey is reserved for locked/sealed state.
Status families
Stat card
Default, locked (sealed period), and surface-accent variants. Trend pill inside the sub-row.
Data card
Baseline-anchored header, divided footer, flex body.
Buttons
Primary · Secondary · Ghost · Danger. btn-danger is outline by default; solid only inside modal actions.
Form row
Label / control grid with addon slot. Collapses to single column under 820px.
Evidence table
Selectable, sortable, sticky first + last columns, density variants, evidence-link affordance, frozen-row state. Resize narrow to verify horizontal scroll.
| Description | Vendor | Date | Spend | kgCO₂e | Factor | Evidence | |
|---|---|---|---|---|---|---|---|
| HDiesel — fleet Q1 | Migrol AG | 2026-02-14 | CHF 4'820 | 12'480 | DEFRA | PDF ↗ | |
| Electricity — HQ mains | EWZ Zürich | 2026-02-28 | CHF 18'440 | 4'420 | BAFU | PDF ↗ | |
| Natural gas — boiler | Erdgas Zürich | 2026-03-02 | CHF 6'210 | 10'920 | BAFU | PDF ↗ | |
| Business travel — ZRH→LHR | Lufthansa | 2026-03-08 | CHF 2'140 | 930 | DEFRA | PDF ↗ | |
| Electricity — warehouse (Q4 2025) | EKZ | 2025-12-29 | CHF 9'110 | 2'190 | sealed | ||
| Refrigerant R-410A refill | Klima-Service GmbH | 2026-01-22 | CHF 980 | 3'540 | IPCC | PDF ↗ | |
| Waste — mixed commercial | ERZ Entsorgung | 2026-02-04 | CHF 420 | 180 | BAFU | PDF ↗ | |
| Water — municipal mains | WVZ | 2026-02-19 | CHF 310 | 40 | ecoinvent | PDF ↗ | |
| Packaging — cardboard | PAWI Verpackungen | 2026-03-11 | CHF 1'140 | 220 | ecoinvent | PDF ↗ | |
| Cloud compute — AWS eu-central-1 | Amazon Web Services | 2026-03-31 | CHF 3'820 | 410 | EPA | PDF ↗ | |
| Totals · Q1 2026 | 35'330 | 10 line items · 42 in full period | |||||
Status pill
Neutral · info · success · warning · danger · frozen · draft. Solid variants for tinted backgrounds.
Sidebar nav item
2px active hairline, sub-item indent for Sprint 3 hierarchical nav.
Breadcrumb
Three-level navigation; current step carries aria-current.
Tab bar
Active underline tracks surface accent. Count pill nests inside label.
Modal
Two sizes. Imperative API; backdrop + ESC close; focus trap; motion-collapse under reduced motion.
Toast
Four semantic variants. 4.5s auto-dismiss. Danger gets role=alert.
Combobox
Tab → Enter opens. Type to filter. ↑/↓ navigate, Enter selects, Esc closes.