trails/openspec/changes/visual-redesign/specs/design-system/spec.md
Ullrich Schäfer 0b9b99984e Fix all OpenSpec validation failures (36/36 passing)
- Add ## Purpose sections and convert delta headers to ## Requirements
  on all 25 specs
- Add SHALL keywords to requirements missing them (gpx-import,
  planner-session, planner-journal-handoff)
- Convert prose GPX format section to proper scenarios (no-go-areas)
- Create specs/ delta files for 7 changes that were missing them
  (activity-photos, local-dev-stack, multi-day-routes, route-discovery,
  route-sharing, visual-redesign, waypoint-notes)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-06 22:17:52 +02:00

40 lines
1.7 KiB
Markdown

## ADDED Requirements
### Requirement: Design token system
The Planner SHALL use CSS custom properties for colors, typography, and spacing with Tailwind config extensions.
#### Scenario: Consistent styling
- **WHEN** a component is styled
- **THEN** it uses project design tokens (warm off-whites, sage green accent, earthy tones) via Tailwind classes
#### Scenario: Typography
- **WHEN** text is rendered
- **THEN** body text uses Outfit font and statistics use Geist Mono
### Requirement: Redesigned topbar
The Planner topbar SHALL include a logo, segmented color mode toggle, participant avatars, and export controls.
#### Scenario: Topbar layout
- **WHEN** a user is in a planning session
- **THEN** the topbar shows: logo with mountain mark, color mode toggle, participant avatars with names, and Export GPX button
### Requirement: Redesigned sidebar
The Planner sidebar SHALL display a route summary header with stats, collapsible day breakdown, and waypoints nested inside days.
#### Scenario: Route summary
- **WHEN** a route is computed
- **THEN** the sidebar header shows route name, distance, ascent, and estimated duration
### Requirement: Redesigned map markers
Map waypoint markers SHALL use olive/dark numbered circles with overnight badges on stop waypoints.
#### Scenario: Marker styling
- **WHEN** waypoints are displayed on the map
- **THEN** they appear as dark numbered circles instead of default blue markers
### Requirement: Mobile responsive layout
The Planner SHALL use a bottom sheet pattern on mobile instead of a hidden sidebar.
#### Scenario: Mobile view
- **WHEN** the Planner is viewed on a mobile device
- **THEN** a bottom sheet replaces the sidebar with swipeable tabs (Days/Waypoints/Notes)