docs: Motion System v1 + Button gold standard + Component Template + Decision Tree
- Motion System v1 (chapter 5):
- Motion principles: when to animate, when NOT to animate
- Duration scale (instant to slower: 0ms to 500ms)
- Easing functions (linear, in, out, in-out, spring)
- Component-specific motion: Button, Modal, Drawer, Map, Skeleton,
Progress, Error/Success
- Reduced motion support (prefers-reduced-motion)
- Interruption rules (animations must be interruptible)
- Error/success animations (shake, checkmark, pulse)
- Button gold standard (chapter 8.3.1):
- Full specification: purpose, design goal, token dependencies,
layout, sizes, variants, states, keyboard, touch, accessibility,
anti-patterns, related components, DDR references
- Sets the bar for all future component specifications
- COMPONENT_TEMPLATE.md (v1.0, LOCKED):
- Standard template for all component specifications
- Sections: purpose, tokens, layout, sizes, variants, states,
keyboard, touch, accessibility, motion, acceptance criteria,
anti-patterns, related components, DDR references
- COMPONENT_DECISION_TREE.md (v1.0, LOCKED):
- Decision trees for: user actions, information display, user input,
feedback, navigation, Landvex-specific
- Quick reference table mapping needs to components
- Prevents invention of unnecessary components
Rationale: Motion before brand (affects every interaction). Button as
reference implementation. Template ensures consistency. Decision tree
guides AI agents and developers to correct component choice.
Bernt
1e40d384ca