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)
90 lines
1.7 KiB
Markdown
90 lines
1.7 KiB
Markdown
> ⚠ 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
|