⚠ 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
arah²
Packages
Repo
- Source tree
- API — API
- Deployment — Deployment
- Contributing — Contributing
- Core concepts — Core-Concepts