Files

T

Bernt 1e40d384ca 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.

2026-07-02 08:53:20 +00:00

2.4 KiB

Raw Blame History

COMPONENT TEMPLATE

Template for All Component Specifications


Version	1.0
Status	LOCKED
Scope	All Landvex & quiXzoom components

Instructions

Copy this template for each new component. Remove sections that do not apply. Add sections that are component-specific.

[Component Name]

Purpose: One sentence describing what this component does.

Design Goal: One sentence describing the ideal user experience.

Tier: [1 (Canonical) / 2 (Derived) / 3 (Domain)]

Inherits From: [Parent component, or "—" if canonical]

Token Dependencies

Token	Semantic Reference	Usage
`component-token-1`	`semantic-token-1`	Description
`component-token-2`	`semantic-token-2`	Description

Layout

Dimensions
Padding
Margins
Border radius
Internal structure

Sizes

Size	Dimensions	Usage
Small	[dimensions]	[context]
Default	[dimensions]	[context]
Large	[dimensions]	[context]

Variants

Variant	Visual	Usage
Variant 1	[description]	[context]
Variant 2	[description]	[context]

States

State	Visual	Motion
Default	[description]	[animation]
Hover	[description]	[animation]
Focus	[description]	[animation]
Active	[description]	[animation]
Disabled	[description]	[animation]
Loading	[description]	[animation]
Error	[description]	[animation]

Keyboard

Key	Action
`Tab`	[behavior]
`Enter` / `Space`	[behavior]
`Escape`	[behavior]
Arrow keys	[behavior]

Touch

Touch target size
Active state behavior
Gesture support (if any)

Accessibility

ARIA roles
ARIA states
Screen reader behavior
Focus management

Motion

Transition	Animation	Duration	Easing
[state change]	[description]	[duration]	[easing]

Acceptance Criteria

Criterion 1
Criterion 2
Criterion 3

Anti-Patterns

❌ [What not to do]
❌ [What not to do]

[Component A] — [relationship]
[Component B] — [relationship]

DDR References

DDR-XXX: [Decision rationale]

2.4 KiB Raw Blame History