Bernt
78436cecc2
- FOUNDATIONS-v1.0.md: - Freeze contract for Landvex Design System - Scope: Motion, AI Principles, Semantic Colors, Grid, Elevation, Typography, RFC Template, Definition of Done - Reference components: Button, Input, Select, Card (all ~83%) - Invariants: token rules, component rules, accessibility rules, AI rules - Change policy: no new foundation concepts without v2.0 RFC - Versioning: 1.0.x patches, 1.x.0 new components, 2.0.0 new foundations - Compatibility matrix for all foundations and components - Directory reorganization: - docs/design/foundations/ → frozen foundation documents - docs/design/components/ → component RFCs - docs/design/README.md → navigation and structure - Foundation documents moved: - TOKEN_PHILOSOPHY, SEMANTIC_COLOR_SYSTEM, GRID_ELEVATION - AI_DESIGN_PRINCIPLES, COMPONENT_TEMPLATE, RFC_DEFINITION_OF_DONE - DESIGN_ANTI_PATTERNS, COMPONENT_DECISION_TREE, GLOSSARY - BRAND_PALETTE, RELEASE_DEFINITION, SEMANTIC_COLOR_SYSTEM_REVIEW - Component RFCs moved: - RFC-002-Input, RFC-003-Select, RFC-004-Card Rationale: Clear separation between foundations (stable platform) and components (built on top). Foundations v1.0 frozen — components can be added freely within v1.x, but foundations require v2.0 RFC to change. This prevents gradual erosion of the design system architecture.
144 lines
2.4 KiB
Markdown
144 lines
2.4 KiB
Markdown
# 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]
|
|
|
|
---
|
|
|
|
### Related Components
|
|
|
|
- [Component A] — [relationship]
|
|
- [Component B] — [relationship]
|
|
|
|
---
|
|
|
|
### DDR References
|
|
|
|
- DDR-XXX: [Decision rationale]
|