The UI is cleaner and more responsive than it was, but it still reads like Material widgets styled screen by screen. The next pass must replace the visual grammar—not add another layer of polish.
The navy, indigo, and lavender background are cohesive and worth keeping. Inter, stock Material icons, and familiar card composition are what make the result feel generic.
153 unique Material icons mix rounded, outlined, filled, and plain variants without a documented rule.
Large blocks, stats, rows, banners, dialogs, and actions all rely on radius + border + pale fill.
Athlete shell, athlete tabs, and organization tabs implement navigation independently.
Operational admin tools need denser tables and stronger status scanning; athlete screens need focus and motivation.
Fade/slide effects exist, but state change, navigation, booking confirmation, and timer transitions lack a coherent motion model.
Industrial, editorial, and athletic—built on Wodie’s current navy, indigo, white, and soft lavender background. The aggression moves into typography, hierarchy, icons, density, and deliberate square geometry.
21–15–9 thrusters and pull-ups
Target 4–8 min · high intensity
Barlow Condensed for titles and metrics; Manrope for interface copy; DM Mono for dates, scores, and labels.
2 / 4 / 8 / 12 px. Pills are reserved for status only. Large panels use straight edges or 4 px.
Keep primary #1C2340, indigo #5C6BC0, white surfaces, and the current lavender AppBackground gradient. Semantic colors stay functional.
Phosphor Regular by default, Bold/Fill only for active state. 18 / 20 / 24 px optical scale.
Sharper tech-performance language: cobalt, black, cool whites, clean data cards, monospaced scores, and Lucide-style single-stroke icons.
5 ROUNDS FOR TIME
400 M RUN
15 WALL BALLS
10 BURPEES
Very clear for charts, rankings, timers, and high-density athlete metrics.
Can feel like a generic performance dashboard without custom illustration or motion.
Lucide single-stroke family at consistent 2 px stroke; filled icons are never mixed in.
6 / 8 / 12 px. More approachable than Steel, but still substantially tighter than today.
Club Modern rebuilt with Wodie’s navy, indigo, white, and lavender background. Meta-inspired structure makes dense operations fast; Apple-inspired restraint makes controls, spacing, motion, and responsive behavior feel considered.
Your next session is ready.
Desktop borrows Meta’s strength: persistent workspace navigation, explicit scopes, compact filters, predictable tables, and batch actions. Mobile borrows Apple’s strength: focused content, layered navigation, large readable titles, restrained materials, and one obvious next action.
Meta-inspired page scopes, toolbars, filters, tables, bulk actions, and persistent organizational context.
Apple-inspired spacing, text hierarchy, subtle materials, native-feeling motion, and controls that stay out of the content’s way.
Phosphor Regular throughout, Fill only for selected navigation. No emoji and no mixed Material styles.
Current Wodie colors remain intact: navy, indigo, white surfaces, lavender background, and existing semantic colors.
Do not redesign 77 files independently. Build the design system and navigation shell first, migrate one complete athlete journey, then the organization workspace.
| Decision | Today | Proposed rule | Acceptance signal |
|---|---|---|---|
| Icon family | 153 mixed Material symbols | Phosphor Regular + Bold active states behind AppIcon | No direct feature-level icon imports for migrated screens |
| Color and background | Navy, indigo, white, lavender gradient | Preserve the current identity; refine contrast and usage rules only | Migrated screens remain recognisably Wodie before and after |
| Radii | 185 declarations; 10–20 px common | 2 / 4 / 8 / 12 tokens; pill only for state | No arbitrary radius in migrated features |
| Typography | Inter for every role | Display, body, and data families with explicit jobs | Metric, title, body, label hierarchy survives grayscale |
| Navigation | Three implementations | One role-aware responsive shell and destination registry | Every destination has desktop/mobile parity |
| Surfaces | Most content is carded | Open sections, rows, panels, and cards each have a purpose | Large cards are rare and intentional |
| Motion | Screen-specific fades | 120 / 180 / 260 ms tokens; state-driven motion | Reduced motion supported; no decorative delay chains |
Lock the preserved palette and replace the rest of the global grammar.
Unify role-aware navigation before screen work.
Complete one daily journey end to end.
Build a denser operational workspace.
Close parity and accessibility gaps.
Each release migrates complete journeys and deletes obsolete local styles. No half-migrated screen should mix the old and new visual systems.
Track booking completion, result-entry completion, admin time-to-next-action, navigation discovery, overflow exceptions, and accessibility audit failures.
Foundation + shell + athlete calendar/class detail. It exercises navigation, status, cards/rows, actions, dialogs, responsive behavior, and the most-used booking flow.