95 lines
3.0 KiB
Markdown
95 lines
3.0 KiB
Markdown
|
---
|
||
|
|
name: <SLUG>-design-system
|
||
|
|
description: Design system for the <PROJECT NAME> project. Color tokens, typography, spacing, radii, shadows, motion durations, and component vocabulary. Load and apply whenever building UI for this project — generating mocks, writing components, picking colors, configuring Tailwind, styling native screens, building themes, designing CSS, or making any visual decision. The canonical visual reference for this project; if anything visible is being touched, this skill should be in context. Pairs with <SLUG>-interaction-design.
|
||
|
|
---
|
||
|
|
|
||
|
|
# <PROJECT NAME> design system
|
||
|
|
|
||
|
|
> **Status: <draft | reviewed | locked>**
|
||
|
|
> Generated by Composer's `ui-system` phase. Re-running that phase
|
||
|
|
> updates this skill (with confirmation).
|
||
|
|
|
||
|
|
## How to use this skill
|
||
|
|
|
||
|
|
Whenever you generate or edit UI for this project — a mock, a real
|
||
|
|
component, a theme, a CSS file — read this SKILL.md and the sidecar
|
||
|
|
files first, then use the tokens. Do not hardcode values. Do not
|
||
|
|
introduce new components without proposing them here first.
|
||
|
|
|
||
|
|
Sidecar files in this skill directory:
|
||
|
|
- `tokens.ts` — machine-readable token export. Import in mocks/code.
|
||
|
|
- `components.md` — component vocabulary with anatomy.
|
||
|
|
|
||
|
|
## Visual posture
|
||
|
|
|
||
|
|
<!-- One or two sentences describing the feel. "Quiet, dense, monochromatic with a single brand accent." Or "Playful, generous spacing, expressive type." -->
|
||
|
|
|
||
|
|
<TBD: visual posture>
|
||
|
|
|
||
|
|
## Color
|
||
|
|
|
||
|
|
### Brand
|
||
|
|
- Primary: `<#hex>` — <name>
|
||
|
|
- (Secondary, if any): `<#hex>` — <name>
|
||
|
|
|
||
|
|
### Neutrals
|
||
|
|
- Tone: <warm | cool | true>
|
||
|
|
- Scale: 50 / 100 / 200 / 300 / 400 / 500 / 600 / 700 / 800 / 900 / 950
|
||
|
|
|
||
|
|
### Semantic
|
||
|
|
| Role | Value |
|
||
|
|
|---|---|
|
||
|
|
| Success | `<#hex>` |
|
||
|
|
| Warning | `<#hex>` |
|
||
|
|
| Error | `<#hex>` |
|
||
|
|
| Info | `<#hex>` |
|
||
|
|
|
||
|
|
### Dark mode
|
||
|
|
<TBD: yes / no / system-following + token mapping>
|
||
|
|
|
||
|
|
## Typography
|
||
|
|
|
||
|
|
- **Display family**: <name>, weights <list>
|
||
|
|
- **Body family**: <name>, weights <list>
|
||
|
|
- **Scale base**: <px>, ratio <1.125 | 1.2 | 1.25 | 1.333>
|
||
|
|
- **Sizes**: xs / sm / base / lg / xl / 2xl / 3xl / 4xl
|
||
|
|
- **Line-height**: tight for display, normal for body, relaxed for long-form prose
|
||
|
|
|
||
|
|
See `tokens.ts` for exact px values.
|
||
|
|
|
||
|
|
## Spacing
|
||
|
|
|
||
|
|
- **Base unit**: <4px | 8px>
|
||
|
|
- **Scale (in base units)**: 0, 0.5, 1, 1.5, 2, 3, 4, 6, 8, 12, 16, 24
|
||
|
|
|
||
|
|
## Radii
|
||
|
|
|
||
|
|
- `sm`, `md`, `lg`, `pill`, `full` — values in `tokens.ts`.
|
||
|
|
|
||
|
|
## Shadows
|
||
|
|
|
||
|
|
- `xs / sm / md / lg / xl` — values in `tokens.ts`.
|
||
|
|
- (Or: "flat — no shadows" if the posture is flat.)
|
||
|
|
|
||
|
|
## Visual motion
|
||
|
|
|
||
|
|
- **Default duration**: <ms>
|
||
|
|
- **Default easing**: <named curve or cubic-bezier>
|
||
|
|
|
||
|
|
Behavioral motion (when things animate, what does and doesn't) lives
|
||
|
|
in the interaction-design skill.
|
||
|
|
|
||
|
|
## Components
|
||
|
|
|
||
|
|
See `components.md` in this directory for the full vocabulary and
|
||
|
|
anatomy. The TL;DR list:
|
||
|
|
|
||
|
|
- Button (primary / secondary / ghost / destructive / link)
|
||
|
|
- Input (text / textarea / select / checkbox / radio / toggle)
|
||
|
|
- Card / Surface
|
||
|
|
- (project-specific components from `ia.md`)
|
||
|
|
|
||
|
|
## TBD on return
|
||
|
|
|
||
|
|
- <TBD: anything the placeholder pass couldn't answer>
|