Files
boc/docs/design/foundations/COMPONENT_TEMPLATE.md
T
Bernt edf1e6e0d6 docs: Foundation Freeze v1.0 complete + Experience Audit + Core Principle Check
- FOUNDATIONS-v1.0.md updated:
  - Added Landvex Core Principle and Design Constitution to frozen foundations
  - Added Core Principle Rules to invariants (2.4)
  - Reordered component priority: Modal, Search, Map Panel, Navigation, Table, Data Grid
  - Reflects business value: search and maps are central to Landvex

- EXPERIENCE_AUDIT.md (v1.0, LOCKED):
  - Four questions for every screen:
    1. Can purpose be understood in 3 seconds?
    2. Is 'Reality → Decision' visible?
    3. Is it obvious what the user should do?
    4. Does everything contribute to the decision?
  - Three-second rule levels with verification method
  - Audit process: select screens → apply questions → prioritize fixes → verify
  - Example audit format
  - Core Principle Check for RFCs: 4 questions before approval

- COMPONENT_TEMPLATE.md updated:
  - Added Core Principle section to template
  - Requires: decision support, cognitive load reduction, 3-second understanding

- RFC_DEFINITION_OF_DONE.md updated:
  - Added Core Principle as criterion #2 (was 12 criteria, now 13)
  - Exit criteria: must pass all 13

Rationale: Freeze foundation with Core Principle as highest authority.
Experience audit ensures all screens support decision-making.
Core Principle Check prevents components that don't serve the user.
Business-value prioritization: search and maps before tables.
2026-07-02 11:28:08 +00:00

2.6 KiB

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.

Core Principle: How does this component support "From Reality → Decision"?

  • What decision does it help the user make?
  • How does it reduce cognitive load?
  • Can it be understood in 3 seconds?

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]