> ⚠ SUPERSEDED FOR SPECIFICS — the centralized token set is the single source of truth for all numeric values (colors, sizes, spacing).
> This document is kept for Rams design philosophy only. Consult the token package (see README.md) for specific value definitions.
> The token package defines 55 color tokens (8 Rams brand colors + Material-style neutrals); palette and typography specifics in this document are superseded.

DESIGN.md

Design Philosophy

Maximum Dieter Rams–inspired design. Functional clarity, accented colors, timeless restraint.

Layout & Grid

8px baseline grid

Left-aligned text, center-aligned icons

Generous whitespace

Typography

Geist (body) / Space Grotesk (headings and telemetry numbers) — per the token package; no Helvetica/Inter anywhere in the design system

Regular for body, Bold for emphasis

Sizes come from the --type-* tokens: 14px body (body-md), 20px/32px headings (headline-md/lg), display-lg 48px — exact scale lives in theme/src/tokens.css

Line heights are per-token absolute leading (ratios ~1.08–1.43), defined in theme/src/tokens.css

Color Palette

Signal Orange (#EB8008)

Functional Red (#ED3F1C)

Olive Green (#736B1E)

Soft Beige (#D9D2C6)

Matte Black (#1A1A1A)

Usage:

Background: --color-background #FFF8F0 (warm white); Soft Beige #D9D2C6 remains a surface/accent token, not the background

Text: Matte Black

Highlights: Orange

Alerts: Red

Success: Olive Green

Iconography

Line-based, geometric, monochrome with accent strokes

Accident = Red triangle

Traffic = Orange car

Speed Cam = Green circle

Components

Buttons: Flat, rectangular, accented colors

Cards: Beige background, black text, icon + title + subtitle

Map Snapshots: Grayscale tiles with accent overlays

Interaction Flows

Report Event (target flow, not built): /report accident → bot confirms → stored in DB → broadcast nearby — no /report command exists yet (implemented commands: /start + /mula, /help, /privacy + /privasi)

Navigation (target flow, not built): /navigate origin → destination → OSRM route → text directions + map snapshot — no /navigate command and no routing engine wired in yet (routing-adjacent stack today: MapLibre GL + OpenFreeMap tiles); validated future stack is Valhalla + Photon

Feedback: Minimal confirmation messages

Accessibility

High contrast text

Clear icons

Simple hierarchy

Motto

"Good design is as little design as possible." — Dieter Rams