forked from c-fu/arah2
araharah-executor
91ad0c9d93
- New: docs/ARCHITECTURE.md, docs/GETTING-STARTED.md, docs/DEVELOPMENT.md, docs/TESTING.md, docs/CONFIGURATION.md (colored mermaid diagrams, quoted labels) - Regenerated README.md (arah² / arah2bot naming, canonical clone URL) - New per-package READMEs: theme/, bot/, web/ - Verified 13 docs against the live codebase (2 fix iterations + 2 residual corrections); corrected 56 stale claims across AGENTS/DESIGN/IDEAS/GSD_FIX
90 lines
2.4 KiB
Markdown
90 lines
2.4 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.
|
||
> 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
|