design-system

Solid

Token-strategy core — OKLCH color rules, neutral tinting, accent-commitment levels, type scale, 8pt spacing grid, touch targets, and the canonical output format of design-system.md (the file the harness gates on). This is routing step 1 of design-method/SKILL.md — read it before design-web/design-webapp/design-ios/design-android, before picking or auditing a single color/type/spacing value.

Web & Frontend 22 stars 3 forks Updated 2 days ago MIT

Install

View on GitHub

Quality Score: 88/100

Stars 20%
45
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
50
License 10%
100
Description 5%
100

Skill Content

<!-- Grounding: grounding-corpus.md §B (thresholds), §H (kept anchors); harness-contract.md invariant #2 (design-system.md format) + #3 (this file's read-path triggers harness phase 1). --> # Design System — Token Core Single source for token **strategy** — not values, values live in `references/*.md` and are read from there, never re-derived here. `design-method/SKILL.md` reads this file **unconditionally as routing step 1**, once per task, before dispatching to any move or target skill — that read is also what advances the harness past phase 0. If a design question is purely about a token (a color, a type pair, a spacing value) this file plus its reference index already answers it; otherwise continue back into `design-method`'s routing. ## Color strategy - **OKLCH only** for new tokens: `oklch(L% C H)`. Never hex/HSL/RGB for anything you're defining fresh (existing legacy tokens in an inherited codebase are a different problem — don't rewrite what wasn't asked for). - **Neutrals** — tint every neutral toward the brand hue, chroma **0.005–0.015**. Never a pure gray (chroma 0), never `#000`/`#fff`. - **Accent commitment** — pick the strategy BEFORE picking hues: - **Restrained** — tinted neutrals + one accent ≤10% of surface. Product register default. - **Committed** — one saturated color carries 30–60% of surface. Brand register default. - **Full palette** (3–4 named roles) / **Drenched** (surface IS the color) — brand campaigns, product data-viz. See `de...

Details

Author
fusengine
Repository
fusengine/agents
Created
6 months ago
Last Updated
2 days ago
Language
TypeScript
License
MIT

Similar Skills

Semantically similar based on skill content — not just same category