Foundations

Spec: m3.material.io/foundations. Destination UX still governs hierarchy and trip chrome — this page is the visual contract, not a second product.

1. Design tokens

   Adopt

   Single source: --md-sys-* in wod-m3-tokens.css, with --wod-* aliases. Dark remaps roles once. Do not add a third palette.

2. Interaction

   Adopt

   Buttons, icon buttons, chips use ::before state layers + cyan focus ring (--md-sys-focus-ring-color). Filled CTAs scale 1→1.02 on hover (spatial spring). Pill radius stays on press.

3. Gestures

   Partial

   Keep: horizontal scroll-snap, event swipe-nav, /plan HTML5 drag. Reject: custom swipe-only IA with no visible handle (Jakob + Norman affordance).

4. Inputs

   Adopt

   Outlined fields 56dp (.wod-field) rest on surface-lowest + outline-variant. Search bar full-shape 56dp (.wod-search) — not a gray well. Date cells 40dp.

5. Selection

   Adopt

   Filter chips: secondary-container when selected; .wod-chip--emphasis uses volt tertiary for “new” CMS markers. Day chips: secondary-container when active. One filled CTA per view.

6. States

   Adopt

   Enabled, hovered, focused, pressed, dragged (16%), disabled (38%). Error uses error / error-container. Dragged is a state layer + elevation, not a 55% ghost.

7. Layout — overview & scaffold

   Adopt

   Window, bars, body (#main), pane, spacer, rulers. Bottom nav at every breakpoint — no rail, no drawer.

8. Grids, spacing, breakpoints

   Adopt

   4 / 8 / 12 columns. Micro ≤370 margin 12dp; compact 16 / medium+ 24 / XL 32. Feed 1–4 cards. Minimum supported viewport: 370px.

9. Bidirectionality & RTL

   Partial

   New layout uses padding-inline / margin-inline / inset-inline. Site lang is en; do not hardcode left/right for chrome or fields.

10. Canonical examples

    Adopt

    Feed = listings. List–detail = /plan from 840dp. Supporting pane = /near-me full page. Single pane = passport, submit, reading.

11. Usability

    Adopt (product)

    48dp targets, one primary CTA, empty states with a next step, Dark as toolbar not prefers-color-scheme. Destination books still trump decoration.

12. Color system / roles / schemes

    Adopt

    Primary lavender #B593FF with black labels. Secondary cyan for focus ring + selected nav. Tertiary volt for “new” chips only. Engagement purple via --md-ref-color-engagement. Dark is a11y toolbar (aubergine surface).

13. Color — advanced / resources

    Reject extras

    No content/fidelity/expressive scheme variants, no MCU in the bundle. Tone mapping lives in tokens; /design/color is the role chart.

14. Elevation

    Tonal first

    surface-container* for lists and bands. --md-sys-elevation-0–5 only for overlays, nav, FAB, and drag. Do not shadow every card.

15. Icons

    Adopt

    Material Symbols Rounded via MdSymbol. Idle FILL 0, FILL 1 when aria-pressed, aria-current, or .is-selected. Subset icon_names stays sorted.

16. Motion

    Adopt (web)

    Emphasized easing, dual-declare springs on CTAs, press 0.96, prefers-reduced-motion. No hold-to-squash morph. No GSAP.

17. Shape

    Adopt

    Full buttons, extra-large cards (28), medium fields (12), small chips (8). Web keeps pill radius on press.

18. Typography

    Adopt

    Fifteen roles in wod-typescale.css. Brand = Inter Tight (Display/Headline); plain = Inter (Body/Label/buttons). Prefer .wod-type-* over one-off font-size.

State layers (live)

Hover, focus, and press are CSS overlays on on-surface / currentColor — not a darker hex. Disabled is 38% opacity.