araharah-executor
0009cc47e4
- DESIGN.md: 3-line SUPERSEDED-FOR-SPECIFICS banner at very top (D-05) — token package is the single source of truth; conflicting typography claims (Helvetica/Inter, 5-color palette) explicitly superseded; Rams philosophy prose kept - README.md: Design system section — theme/ token package, consume via theme/src/tokens.css import or npm run build; no numeric values restated (D-07)
1.7 KiB
⚠ 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. Conflicting typography claims in this document (Helvetica/Inter, 5-color palette) are superseded by the token package.
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
Helvetica Neue / Inter
Regular for body, Bold for emphasis
Sizes: 14px body, 18px headings, 24px titles
Line height: 1.4× font size
Color Palette
Signal Orange (#EB8008)
Functional Red (#ED3F1C)
Olive Green (#736B1E)
Soft Beige (#D9D2C6)
Matte Black (#1A1A1A)
Usage:
Background: Soft Beige
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: /report accident → bot confirms → stored in DB → broadcast nearby
Navigation: /navigate origin → destination → OSRM route → text directions + map snapshot
Feedback: Minimal confirmation messages
Accessibility
High contrast text
Clear icons
Simple hierarchy
Motto
"Good design is as little design as possible." — Dieter Rams