Add local-first refactor foundation

documentations/refactor/06-visual-design-direction.md

@@ -0,0 +1,123 @@
+# Visual Design Direction
+
+## Summary
+
+The visual direction should be F1-native without falling into generic dashboard
+habits. The app should feel like an operations room for following a race
+weekend: technical, fast, sharp, and legible. It should avoid AI-slop patterns
+such as endless decorative cards, vague gradient panels, giant generic hero
+sections, and meaningless visual chrome.
+
+## Design North Star
+
+Use the phrase "F1 Ops Room" as the working direction.
+
+Qualities:
+
+- Dense but controlled.
+- High signal.
+- Fast to scan.
+- Precise typography.
+- Strong hierarchy.
+- Team color used as information, not decoration.
+- Good on phone and iPad, not just desktop.
+
+## Density
+
+Density should be configurable:
+
+- Compact: timing-wall mode, maximum data per viewport.
+- Comfortable: default mode for most users.
+- Touch: larger hit targets and panel spacing for phone/iPad.
+
+Density affects:
+
+- Table row height.
+- Visible columns.
+- Panel spacing.
+- Chart label detail.
+- Header size.
+- Control grouping.
+
+## Timing-Wall Ergonomics
+
+Live timing should prioritize scan speed:
+
+- Position and driver identity must be easy to locate.
+- Gap/interval changes should be visually distinct.
+- Pit state, retired state, and tyre state should be obvious.
+- Race-control alerts should interrupt without becoming noisy.
+- Pinned drivers should remain available across live views.
+
+## Team Color Discipline
+
+Team colors are useful data, but they can quickly become visual noise.
+
+Rules:
+
+- Use team color for identity markers, row accents, chart lines, and selected
+  driver focus.
+- Avoid flooding large surfaces with saturated team color.
+- Always preserve contrast and legibility.
+- Avoid making the whole interface a rainbow unless the context is explicitly
+  comparative.
+
+## Layout Principles
+
+Prefer:
+
+- Full-width information bands.
+- Dense tables with strong alignment.
+- Split panes.
+- Sticky session headers.
+- Bottom navigation on phone.
+- Clear panel switching on smaller screens.
+- Charts that explain race state, not just decorate.
+
+Avoid:
+
+- Card sludge: every concept boxed into a decorative card.
+- Floating cards inside cards.
+- Generic SaaS dashboard grids.
+- Purple/blue gradient panels with no product meaning.
+- Decorative orbs, bokeh, or random glow effects.
+- Vague hero sections.
+- Overly large typography inside operational surfaces.
+
+## F1-Native References To Research
+
+Research should study:
+
+- Official F1 timing tower ergonomics.
+- Broadcast graphics hierarchy.
+- FIA timing/result sheet density.
+- Race control message formatting.
+- Pit wall and telemetry workstation patterns.
+- Motorsport data overlays.
+
+The goal is not to copy official F1 branding. The goal is to understand the
+information hierarchy and pacing of motorsport interfaces.
+
+## Mobile And iPad
+
+The app should work well on phone and iPad because those are likely primary
+second-screen devices during race sessions.
+
+Phone:
+
+- Prioritize Live Timing, alerts, pinned drivers, and quick switching.
+- Use stacked panels and sticky status.
+- Keep interactions thumb-friendly.
+
+iPad:
+
+- Use two-pane and three-pane layouts.
+- Keep charts inspectable.
+- Make side panels easy to swap.
+
+Desktop:
+
+- Allow dense multi-panel layouts.
+- Show more simultaneous context.
+- Preserve keyboard and pointer efficiency.
+