Design Packages — 44 complete design systems, local
What this is
44 self-contained design systems stored in this folder, one directory each. They are ART DIRECTIONS to pick from — not components. For ColdIQ house rules, see the design-pack skill; for sourcing animated components from external galleries, see design-stack.
Structure of every package
<name>/
├── DESIGN.md # written spec: concept, type, color, spacing, motion rules
├── metadata.json # name + one-line description
├── css/system.css # the complete CSS system, ready to adapt
├── html/preview.html + cover.html # full demo pages
└── images/ or screenshots/
Workflow
- Browse: read
INDEX.md here — one line per package (name, description, size).
- Shortlist 2–3 directions matching the brief's tone (e.g. finance SaaS →
verda-finance, lumenwave-finance, voltline-analytics; editorial/studio → folio, boldcase, frame-field; dark technical → forge, cairn-2, fuzzy-duck-40-*).
- Read the shortlisted
DESIGN.mds — they contain the reasoning, not just tokens.
- Preview: open
html/preview.html (or screenshot it headless) to judge visually.
- Apply: port tokens and patterns from
css/system.css into the project's stack — adapt naming to the codebase, keep the system's proportions, type pairings, and motion constants intact.
Rules
- Never mix two packages' tokens on one page — pick one direction and commit.
- These are starting systems, not brand law: ColdIQ brand constraints (see
design-pack) win on conflicts.
- When the user asks "montre-moi des directions", present 3 contrasting options with one-line rationales, not the full list of 44.
1---2name: design-packages3description: Use when choosing an art direction, visual style, or complete design system for a new page, landing, or site — or when the user asks to browse, compare, or apply one of the 44 local design packages (frosted glass, retro terminal, editorial bento, dark infrastructure, paper-and-ink…). Each package ships a full CSS system and HTML preview.4---56# Design Packages — 44 complete design systems, local78## What this is91044 self-contained design systems stored in this folder, one directory each. They are ART DIRECTIONS to pick from — not components. For ColdIQ house rules, see the `design-pack` skill; for sourcing animated components from external galleries, see `design-stack`.1112## Structure of every package1314```15<name>/16├── DESIGN.md # written spec: concept, type, color, spacing, motion rules17├── metadata.json # name + one-line description18├── css/system.css # the complete CSS system, ready to adapt19├── html/preview.html + cover.html # full demo pages20└── images/ or screenshots/21```2223## Workflow24251. **Browse**: read `INDEX.md` here — one line per package (name, description, size).262. **Shortlist 2–3** directions matching the brief's tone (e.g. finance SaaS → `verda-finance`, `lumenwave-finance`, `voltline-analytics`; editorial/studio → `folio`, `boldcase`, `frame-field`; dark technical → `forge`, `cairn-2`, `fuzzy-duck-40-*`).273. **Read the shortlisted `DESIGN.md`s** — they contain the reasoning, not just tokens.284. **Preview**: open `html/preview.html` (or screenshot it headless) to judge visually.295. **Apply**: port tokens and patterns from `css/system.css` into the project's stack — adapt naming to the codebase, keep the system's proportions, type pairings, and motion constants intact.3031## Rules3233- Never mix two packages' tokens on one page — pick one direction and commit.34- These are starting systems, not brand law: ColdIQ brand constraints (see `design-pack`) win on conflicts.35- When the user asks "montre-moi des directions", present 3 contrasting options with one-line rationales, not the full list of 44.
cold-iq