trails/openspec/changes/visual-redesign/specs/design-system/spec.md at 0b9b99984ead3e86f2dc8f9ed59dac2d8db28609

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

1.7 KiB

Raw Blame History

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)

1.7 KiB Raw Blame History