design-system

Name: design-system
Author: fusengine

21stars3forks

How to install design-system?

fusengine/agents/design-system

$npx -y skills add fusengine/agents --skill design-system

Installs into the current project.

Summary

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

Files · 1

View on GitHub

SKILL.md

1	<!-- 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). -->
2
3	# Design System — Token Core
4
5	Single source for token strategy — not values, values live in `references/*.md` and are
6	read from there, never re-derived here. `design-method/SKILL.md` reads this file
7	unconditionally as routing step 1, once per task, before dispatching to any move or
8	target skill — that read is also what advances the harness past phase 0. If a design
9	question is purely about a token (a color, a type pair, a spacing value) this file plus its
10	reference index already answers it; otherwise continue back into `design-method`'s routing.
11
12	## Color strategy
13
14	- OKLCH only for new tokens: `oklch(L% C H)`. Never hex/HSL/RGB for anything you're
15	defining fresh (existing legacy tokens in an inherited codebase are a different problem —
16	don't rewrite what wasn't asked for).
17	- Neutrals — tint every neutral toward the brand hue, chroma 0.005–0.015. Never a
18	pure gray (chroma 0), never `#000`/`#fff`.
19	- Accent commitment — pick the strategy BEFORE picking hues:
20	- Restrained — tinted neutrals + one accent ≤10% of surface. Product register default.
21	- Committed — one saturated color carries 30–60% of surface. Brand register default.
22	- Full palette (3–4 named roles) / Drenched (surface IS the color) — brand
23	campaigns, product data-viz. See `design-method/references/register/brand.md` §4 and
24	`register/product.md` §1 for which strategy each register defaults to and when to
25	deviate.
26	- Reduce chroma as lightness approaches 0 or 100 — high chroma at the extremes reads garish.
27	- Mechanics: `references/oklch-system.md`. Concrete per-sector values:
28	`references/sector-palettes.md`. Contrast floors: `references/contrast-ratios.md` — WCAG
29	AA 4.5:1 body text / 3:1 large text + UI components (AAA 7:1 where feasible).
30
31	## Typography scale
32
33	- Ratio ≥1.25 between steps (1.25 major-third is the default, 1.333 for editorial), 6–8
34	sizes max, ≤3 contrast variations per view.
35	- Line-height: body 1.5×, display 1.05–1.15×. Body measure 65–75ch.
36	- Validated pairs: `references/typography-pairs.md`. Forbidden/flagged fonts — canonical
37	list, don't restate it anywhere else in this plugin: `references/forbidden-fonts.md`.
38
39	## Spacing
40
41	- 8pt grid: 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96.
42	- Density profile (Enterprise Dense / Standard / Editorial) chosen per register:
43	`references/spacing-density.md` — product defaults dense, brand defaults editorial (see
44	`register/brand.md` §4 and `register/product.md` §1).
45
46	## Touch targets
47
48	iOS 44×44pt · Android 48×48dp · WCAG 2.5.8 minimum 24×24 CSS px regardless of platform.
49
50	## The `design-system.md` output — canonical format
51
52	This is the generated file the harness gates on (`gates-pipeline.ts` triggers on any read
53	path ending `design-system.md`; `gates.ts` validates its contents). Every requirement below
54	is a present/absent check, not a suggestion — missing one fails the gate silently
55	downstream, with no error surfaced at write time.
56
57	```markdown
58	## Design Reference
59	Inspiration: https://example.com/the-actual-site-browsed-in-generate-step-2
60
61	### Colors
62	--color-accent: oklch(0.62 0.19 250);
63	--color-neutral-900: oklch(0.18 0.01 250);
64	... (full token set — chroma > 0 required on at least the accent token)
65
66	### Typography
67	--font-display: "Fraunces", ui-serif;
68	--font-body: "Public Sans", ui-sans-serif;
69	... (never the four hard-forbidden families below, whichever fonts are actually chosen)
70	```
71
72	The 4 hard requirements (all must hold):
73
74	1. Heading `## Design Reference` present verbatim.
75	2. At least one `https?://` URL — the real inspiration source browsed in
76	`design-web/references/design-inspiration.md` step 2, not a placeholder.
77	3. At least one `oklch(...)` token with chroma > 0 — a chroma-0 neutral alone does not
78	satisfy this; the accent (or any committed-strategy token) must carry chroma.
79	4. Must not contain `Inter`, `Roboto`, `Arial`, or `Open Sans` any

People who liked this also viewed

6 picks

Type

design-system

21stars3forks

View on GitHub

How to install design-system?

fusengine/agents/design-system

$npx -y skills add fusengine/agents --skill design-system

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	<!-- 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). -->
2
3	# Design System — Token Core
4
5	Single source for token strategy — not values, values live in `references/*.md` and are
6	read from there, never re-derived here. `design-method/SKILL.md` reads this file
7	unconditionally as routing step 1, once per task, before dispatching to any move or
8	target skill — that read is also what advances the harness past phase 0. If a design
9	question is purely about a token (a color, a type pair, a spacing value) this file plus its
10	reference index already answers it; otherwise continue back into `design-method`'s routing.
11
12	## Color strategy
13
14	- OKLCH only for new tokens: `oklch(L% C H)`. Never hex/HSL/RGB for anything you're
15	defining fresh (existing legacy tokens in an inherited codebase are a different problem —
16	don't rewrite what wasn't asked for).
17	- Neutrals — tint every neutral toward the brand hue, chroma 0.005–0.015. Never a
18	pure gray (chroma 0), never `#000`/`#fff`.
19	- Accent commitment — pick the strategy BEFORE picking hues:
20	- Restrained — tinted neutrals + one accent ≤10% of surface. Product register default.
21	- Committed — one saturated color carries 30–60% of surface. Brand register default.
22	- Full palette (3–4 named roles) / Drenched (surface IS the color) — brand
23	campaigns, product data-viz. See `design-method/references/register/brand.md` §4 and
24	`register/product.md` §1 for which strategy each register defaults to and when to
25	deviate.
26	- Reduce chroma as lightness approaches 0 or 100 — high chroma at the extremes reads garish.
27	- Mechanics: `references/oklch-system.md`. Concrete per-sector values:
28	`references/sector-palettes.md`. Contrast floors: `references/contrast-ratios.md` — WCAG
29	AA 4.5:1 body text / 3:1 large text + UI components (AAA 7:1 where feasible).
30
31	## Typography scale
32
33	- Ratio ≥1.25 between steps (1.25 major-third is the default, 1.333 for editorial), 6–8
34	sizes max, ≤3 contrast variations per view.
35	- Line-height: body 1.5×, display 1.05–1.15×. Body measure 65–75ch.
36	- Validated pairs: `references/typography-pairs.md`. Forbidden/flagged fonts — canonical
37	list, don't restate it anywhere else in this plugin: `references/forbidden-fonts.md`.
38
39	## Spacing
40
41	- 8pt grid: 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96.
42	- Density profile (Enterprise Dense / Standard / Editorial) chosen per register:
43	`references/spacing-density.md` — product defaults dense, brand defaults editorial (see
44	`register/brand.md` §4 and `register/product.md` §1).
45
46	## Touch targets
47
48	iOS 44×44pt · Android 48×48dp · WCAG 2.5.8 minimum 24×24 CSS px regardless of platform.
49
50	## The `design-system.md` output — canonical format
51
52	This is the generated file the harness gates on (`gates-pipeline.ts` triggers on any read
53	path ending `design-system.md`; `gates.ts` validates its contents). Every requirement below
54	is a present/absent check, not a suggestion — missing one fails the gate silently
55	downstream, with no error surfaced at write time.
56
57	```markdown
58	## Design Reference
59	Inspiration: https://example.com/the-actual-site-browsed-in-generate-step-2
60
61	### Colors
62	--color-accent: oklch(0.62 0.19 250);
63	--color-neutral-900: oklch(0.18 0.01 250);
64	... (full token set — chroma > 0 required on at least the accent token)
65
66	### Typography
67	--font-display: "Fraunces", ui-serif;
68	--font-body: "Public Sans", ui-sans-serif;
69	... (never the four hard-forbidden families below, whichever fonts are actually chosen)
70	```
71
72	The 4 hard requirements (all must hold):
73
74	1. Heading `## Design Reference` present verbatim.
75	2. At least one `https?://` URL — the real inspiration source browsed in
76	`design-web/references/design-inspiration.md` step 2, not a placeholder.
77	3. At least one `oklch(...)` token with chroma > 0 — a chroma-0 neutral alone does not
78	satisfy this; the accent (or any committed-strategy token) must carry chroma.
79	4. Must not contain `Inter`, `Roboto`, `Arial`, or `Open Sans` any

People who liked this also viewed

6 picks

Type