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