Koyo catalog
Koyo Card
Koyo Card documents product containers for grouped content, metrics, settings, and media.
Reference scope
Base/store card nodes are reference only for shell anatomy and content slots.
Variants
Implemented variants and confirmed Figma notes; uncertain mapping details stay explicit.
Token Notes
Token decisions that should stay visible while the catalog is migrated.
- Figma Card variants are slot-driven: 1 Slot, 2 Slots, and 3 Slots.
- Use card foreground and background tokens rather than neutral one-off colors.
- Preserve the shared border and shadow treatment for quiet product surfaces.
- Slot spacing should map to Figma spacing tokens before adding per-card overrides.
Code Targets
Files the docs entry points at today, ready for later catalog linking.
Card source
src/components/ui/card.tsxKoyo catalog route
src/app/(pages)/docs/koyo/page.tsx
Figma Mapping
Base/store nodes are reference only. The Koyo component is the docs and implementation target.
- Page
- Card (842:49175)
- Base/store reference
- Frame Card (288:122714), component set Card (179:29234)
- Koyo-owned target
- Second Card frame (3280:28990), component set Card (3280:28996)
- Confidence
- high