feat: design system v1.0.0 — reconcile tokens from cross-repo audit
Extracted real production usage from 8 KDC repos and consolidated the consensus (kdcsurveyadd / kdcvault / kdc_void_planner) into the canonical design.md + tokens. Highlights: - brand.ink #000000 -> #1A1530 (purple-tinted, matches real usage) - brand.canvas #F5F4F0 -> #F7F4ED (warm) - neutral ramp rebuilt around ink (purple-tinted, not cold slate) - semantic palette retuned for warm canvas + soft tints - elevation shadows retinted with brand-ink rgb - new accent.gold (product) and accent.mint (marketing) tokens - real themes/light, themes/dark, themes/high-contrast - fleshed out every component + foundation README - docs/consolidation-2026-05.md captures the full audit + drift inventory Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -1,8 +1,43 @@
|
||||
# Foundations · Motion
|
||||
|
||||
Reference documentation for the **motion** foundation. The canonical token values
|
||||
live in [`../../design.md`](../../design.md) and the machine-readable export
|
||||
in [`../../tokens/`](../../tokens/).
|
||||
Motion is functional, not decorative — it provides feedback (state change), continuity (route / modal transitions), and confirmation (success / commit).
|
||||
|
||||
This page is for human-facing rationale: when to use which token, examples,
|
||||
and platform notes.
|
||||
## Durations
|
||||
|
||||
| Token | ms | Use |
|
||||
|-------|-----|-----|
|
||||
| `instant` | 0 | Reset / disable |
|
||||
| `fast` | 120 | Hover, focus, control state |
|
||||
| `base` | 200 | Tooltips, dropdowns |
|
||||
| `slow` | 320 | Modals, sheets, route transitions |
|
||||
| `slower` | 480 | Hero animations, marketing |
|
||||
|
||||
## Easing
|
||||
|
||||
| Token | Curve | Use |
|
||||
|-------|-------|-----|
|
||||
| `standard` | `cubic-bezier(0.2, 0, 0, 1)` | Default — most state changes |
|
||||
| `enter` | `cubic-bezier(0, 0, 0.2, 1)` | Enter-only (decelerate to rest) |
|
||||
| `exit` | `cubic-bezier(0.4, 0, 1, 1)` | Exit-only (accelerate away) |
|
||||
| `emphasis` | `cubic-bezier(0.2, 0, 0, 1.2)` | Overshoot — success, commit, attention |
|
||||
|
||||
## Signature animation
|
||||
|
||||
`kdc-fade-up` — used on the product family for content reveal:
|
||||
|
||||
```css
|
||||
@keyframes kdc-fade-up {
|
||||
from { opacity: 0; transform: translateY(6px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
.kdc-fade-up { animation: kdc-fade-up 360ms cubic-bezier(0.2, 0, 0, 1) both; }
|
||||
```
|
||||
|
||||
Stagger children at 40–60ms intervals.
|
||||
|
||||
## Rules
|
||||
|
||||
- ✅ Respect `prefers-reduced-motion: reduce` — collapse all transitions to ≤ 10ms.
|
||||
- ✅ Use `fast` for state, `base` for surfaces, `slow` for layout shifts.
|
||||
- ❌ Don't animate `width` / `height` — animate `transform` and `opacity`.
|
||||
- ❌ Don't bounce or spin without reason. Loading spinners are the only exception.
|
||||
|
||||
Reference in New Issue
Block a user