@design-intelligence/ghost 0.30.0 → 0.31.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (61) hide show
  1. package/README.md +1 -0
  2. package/dist/init-payloads/median/median-tells.md +27 -26
  3. package/dist/init-payloads/{vessel-light/anti-goal.median.md → median/standard.model-defaults.md} +7 -3
  4. package/dist/init-payloads/skeleton/brand.md +7 -3
  5. package/dist/init-payloads/skeleton/context.conversation.md +22 -13
  6. package/dist/init-payloads/skeleton/foundation.color.md +33 -28
  7. package/dist/init-payloads/skeleton/foundation.composition.md +14 -15
  8. package/dist/init-payloads/skeleton/foundation.controls.md +20 -15
  9. package/dist/init-payloads/skeleton/foundation.layout.md +29 -28
  10. package/dist/init-payloads/skeleton/foundation.motion.md +19 -16
  11. package/dist/init-payloads/skeleton/foundation.type.md +32 -28
  12. package/dist/init-payloads/skeleton/foundation.voice.md +13 -11
  13. package/dist/init-payloads/skeleton/glossary.md +33 -21
  14. package/dist/init-payloads/vessel-light/checks/conversation-grammar.md +2 -2
  15. package/dist/init-payloads/vessel-light/checks/median-tells.md +25 -25
  16. package/dist/init-payloads/vessel-light/checks/motion-restraint.md +2 -2
  17. package/dist/init-payloads/vessel-light/checks/relationships.md +4 -4
  18. package/dist/init-payloads/vessel-light/checks/shape-matches-job.md +9 -9
  19. package/dist/init-payloads/vessel-light/checks/values.md +6 -6
  20. package/dist/init-payloads/vessel-light/context.conversation.md +53 -0
  21. package/dist/init-payloads/vessel-light/context.data-density.md +51 -0
  22. package/dist/init-payloads/vessel-light/context.editorial.md +53 -0
  23. package/dist/init-payloads/vessel-light/context.email.md +53 -0
  24. package/dist/init-payloads/vessel-light/foundation.color-roles.md +41 -0
  25. package/dist/init-payloads/vessel-light/foundation.deletion.md +53 -0
  26. package/dist/init-payloads/vessel-light/foundation.hierarchy.md +73 -0
  27. package/dist/init-payloads/vessel-light/{grammar.job.md → foundation.job.md} +39 -28
  28. package/dist/init-payloads/vessel-light/foundation.motion.md +46 -0
  29. package/dist/init-payloads/vessel-light/foundation.palette.md +57 -0
  30. package/dist/init-payloads/vessel-light/foundation.rhythm.md +39 -0
  31. package/dist/init-payloads/vessel-light/foundation.shape.md +39 -0
  32. package/dist/init-payloads/vessel-light/foundation.surfaces.md +45 -0
  33. package/dist/init-payloads/vessel-light/foundation.tells.md +39 -0
  34. package/dist/init-payloads/vessel-light/{signature.temperature.md → foundation.temperature.md} +31 -13
  35. package/dist/init-payloads/vessel-light/{signature.type.md → foundation.type.md} +27 -12
  36. package/dist/init-payloads/vessel-light/glossary.md +27 -30
  37. package/dist/init-payloads/vessel-light/index.md +18 -15
  38. package/dist/scan/check-scaffold.d.ts.map +1 -1
  39. package/dist/scan/check-scaffold.js +25 -3
  40. package/dist/scan/check-scaffold.js.map +1 -1
  41. package/dist/scan/templates.js +4 -4
  42. package/dist/scan/templates.js.map +1 -1
  43. package/dist/skill-bundle/references/ground.md +3 -2
  44. package/dist/skill-bundle/references/nodes.md +29 -6
  45. package/dist/skill-bundle/references/schema.md +5 -0
  46. package/dist/skill-bundle/references/steering-audit.md +2 -2
  47. package/package.json +1 -1
  48. package/dist/init-payloads/vessel-light/anti-goal.tells.md +0 -38
  49. package/dist/init-payloads/vessel-light/grammar.color-roles.md +0 -28
  50. package/dist/init-payloads/vessel-light/grammar.conversation.md +0 -29
  51. package/dist/init-payloads/vessel-light/grammar.deletion.md +0 -35
  52. package/dist/init-payloads/vessel-light/grammar.hierarchy.md +0 -56
  53. package/dist/init-payloads/vessel-light/grammar.motion.md +0 -25
  54. package/dist/init-payloads/vessel-light/grammar.rhythm.md +0 -25
  55. package/dist/init-payloads/vessel-light/grammar.surfaces.md +0 -33
  56. package/dist/init-payloads/vessel-light/register.data-density.md +0 -39
  57. package/dist/init-payloads/vessel-light/register.editorial.md +0 -41
  58. package/dist/init-payloads/vessel-light/register.email.md +0 -43
  59. package/dist/init-payloads/vessel-light/signature.palette.md +0 -45
  60. package/dist/init-payloads/vessel-light/signature.shape.md +0 -27
  61. /package/dist/init-payloads/{median/cliche.median.md → vessel-light/standard.model-defaults.md} +0 -0
@@ -1,39 +1,51 @@
1
1
  ---
2
2
  kinds:
3
+ - name: standard
3
4
  - name: foundation
4
5
  - name: context
5
- - name: cliche
6
6
  ---
7
7
 
8
+ # standard
9
+
10
+ Shared guidance that is not specific to this brand. Every rule carries one of
11
+ two authority labels. An **Obligation** is a requirement brand preference
12
+ cannot waive — accessibility, safety, honesty, functional integrity; the
13
+ brand controls how it is expressed, not whether it holds. A **Default** is a
14
+ recommended starting position that protects unsteered work from generic model
15
+ behavior; explicit brand guidance in the cover, a foundation, or a matching
16
+ context may deliberately replace it. When a default with a paired check is
17
+ overridden, adapt or remove the check flag in the same change.
18
+
8
19
  # foundation
9
20
 
10
- The core elements — color, type, controls, layout, motion, voice — plus
11
- composition, the rules for assembling them into a view. Each foundation
12
- node is a chapter: usage rules that hold no matter what the brand values
13
- turn out to be, the brand's open questions (unanswered in this starter,
14
- marked as decisions only a human can make), and the chapter's misuse list.
15
- Follow the usage rules as written. Never fill in an open value and present
16
- it as the brand's.
21
+ The brand's load-bearing decisions — color, type, controls, layout, motion,
22
+ voice, and composition, the rules for assembling them into a view. Each
23
+ foundation node is a chapter: usage law that holds no matter what the brand
24
+ values turn out to be, the brand's open questions (unanswered in this
25
+ starter, marked as decisions only a human can make), and the chapter's
26
+ rejected moves. Follow the rules as written. Never fill in an open value and
27
+ present it as the brand's. A brand carries only the foundations its evidence
28
+ supports; these chapters are subjects, not mandatory slots.
17
29
 
18
30
  # context
19
31
 
20
32
  Where the defaults bend: a context names a situation — an AI conversation
21
33
  thread, a data-dense console, a transactional email — and states only what
22
- inverts there. Read a context only when its situation matches the task.
23
- Rules from the wrong context are contamination, not guidance.
24
-
25
- # cliche
26
-
27
- The defaults a generative model falls back on when no brand is steering it.
28
- These are nobody's brand. Each entry pairs the tired move with the honest
29
- replacement. Gather before styling anything greenfield; enforced by paired
30
- checks at review.
34
+ inverts there. A situation may combine surface, channel, modality, audience,
35
+ or moment. Read a context only when its situation matches the task. Rules
36
+ from the wrong context are contamination, not guidance.
31
37
 
32
38
  ---
33
39
 
40
+ Node bodies in this package follow one shape: `## Usage` carries the
41
+ worldview and decision logic; `## Rules` carries observable requirements a
42
+ reviewer can assess in the finished artifact; `## Never` pairs each rejected
43
+ move with its replacement; an optional `## Skeleton` (always last) carries
44
+ literal opening structure. A node includes only the sections it needs.
45
+
34
46
  The cover node (`brand.md`, declared in the manifest) is the one page always
35
47
  in context: what the brand is, its temperature, and the refusals only it
36
- makes. The ghost skill's `authoring` recipe explains how to grow this skeleton
37
- into a real ghost package: write the cover, answer each
38
- chapter's open question, prune the cliches your chapters absorb, then add
39
- materials and examples.
48
+ makes. The ghost skill's `authoring` recipe explains how to grow this starter
49
+ into a real ghost package: write the cover, answer each chapter's open
50
+ question, prune the shared defaults your chapters absorb, then add materials
51
+ and examples.
@@ -3,8 +3,8 @@ name: Conversation grammar
3
3
  description: Flags conversation UI that breaks plain assistant text, prompt-input structure, primary-action discipline, or collapsed tool output.
4
4
  severity: high
5
5
  references:
6
- - grammar.conversation
7
- - grammar.surfaces
6
+ - context.conversation
7
+ - foundation.surfaces
8
8
  ---
9
9
 
10
10
  Apply this check to diffs that touch AI threads, agent consoles, prompt composers, chat messages, or tool-call rendering.
@@ -3,60 +3,60 @@ name: Median tells
3
3
  description: Flags the measured defaults of unsteered generation and current model-signature tells — hover-lift, default accents, unprompted dark theme, gradient text, frequency tells, and per-model signatures.
4
4
  severity: high
5
5
  references:
6
- - anti-goal.median > Hover-lift
7
- - anti-goal.median > Indigo accent
8
- - anti-goal.median > Dark theme
9
- - anti-goal.median > Gradients
10
- - anti-goal.median > Glassmorphism
11
- - anti-goal.median > Side-stripe
12
- - anti-goal.median > Cream surface
13
- - anti-goal.median > Chat bubbles
14
- - anti-goal.median > Stock copy
15
- - anti-goal.median > Celebration
16
- - anti-goal.median > Hero metric
17
- - anti-goal.median > Eyebrow kicker
6
+ - standard.model-defaults > Hover-lift
7
+ - standard.model-defaults > Indigo accent
8
+ - standard.model-defaults > Dark theme
9
+ - standard.model-defaults > Gradients
10
+ - standard.model-defaults > Glassmorphism
11
+ - standard.model-defaults > Side-stripe
12
+ - standard.model-defaults > Cream surface
13
+ - standard.model-defaults > Chat bubbles
14
+ - standard.model-defaults > Stock copy
15
+ - standard.model-defaults > Celebration
16
+ - standard.model-defaults > Hero metric
17
+ - standard.model-defaults > Eyebrow kicker
18
18
  ---
19
19
 
20
20
  This is Vessel's adaptation of the shared median check; the fidelity carve-outs
21
21
  below are the body's own. These flags target the measured convergence patterns
22
22
  of unsteered model generation, plus tells specific to individual models. Each
23
- is mechanically detectable in a diff. Pruning a rule from `anti-goal.median`
23
+ is mechanically detectable in a diff. Pruning a rule from `standard.model-defaults`
24
24
  orphans its paired reference here — `ghost validate` warns; delete the flag and
25
25
  its reference together.
26
26
 
27
27
  Flag `transform` with `translateY` inside a `:hover` rule on cards, buttons,
28
28
  or list items, especially paired with a shadow increase. Hover confirmation
29
29
  in Vessel is color and background change, not lift.
30
- (`anti-goal.median > Hover-lift`)
30
+ (`standard.model-defaults > Hover-lift`)
31
31
 
32
32
  Flag accent values in the indigo/blue/purple default family (`#4f46e5`,
33
33
  `#6366f1`, `#2563eb`, `#3b82f6`, `#8b5cf6`, and close neighbors) unless the
34
34
  diff shows the user asked for them. They are model defaults, not palette
35
- members. (`anti-goal.median > Indigo accent`)
35
+ members. (`standard.model-defaults > Indigo accent`)
36
36
 
37
37
  Flag whole-page dark backgrounds when the ask did not request dark mode.
38
38
  Dark surfaces in Vessel are the editorial dark band or an explicit `.dark`
39
- theme, never an unprompted default. (`anti-goal.median > Dark theme`)
39
+ theme, never an unprompted default. (`standard.model-defaults > Dark theme`)
40
40
 
41
41
  Flag `linear-gradient` or `radial-gradient` as page or section backgrounds,
42
- and gradient-filled buttons. (`anti-goal.median > Gradients`)
42
+ and gradient-filled buttons. (`standard.model-defaults > Gradients`)
43
43
 
44
44
  Flag `backdrop-filter: blur` used for glassmorphism cards.
45
- (`anti-goal.median > Glassmorphism`)
45
+ (`standard.model-defaults > Glassmorphism`)
46
46
 
47
47
  Flag `background-clip: text` (with or without the `-webkit-` prefix) paired
48
48
  with a gradient. Emphasis comes from weight or size in a single solid color.
49
49
 
50
50
  Flag a thick colored border on one side of an element (`border-left` or a
51
51
  `border-l-*` utility at 2px or more in a non-neutral color) while the other
52
- sides stay thin. (`anti-goal.median > Side-stripe`)
52
+ sides stay thin. (`standard.model-defaults > Side-stripe`)
53
53
 
54
54
  Flag warm off-white page backgrounds in the cream/sand/beige band, and token
55
55
  names like `--cream`, `--sand`, `--parchment`, `--linen` introduced by the
56
- diff. (`anti-goal.median > Cream surface`)
56
+ diff. (`standard.model-defaults > Cream surface`)
57
57
 
58
58
  Flag assistant messages rendered as bubbles with initials-circle avatars.
59
- (`anti-goal.median > Chat bubbles`)
59
+ (`standard.model-defaults > Chat bubbles`)
60
60
 
61
61
  Flag emoji used as icons or imagery in interface chrome. Text labels carry
62
62
  meaning.
@@ -64,22 +64,22 @@ meaning.
64
64
  Flag stock template copy in headings: "Simple, transparent pricing",
65
65
  "Welcome back", and interchangeable-with-a-competitor phrasing. Recommend
66
66
  copy that states what this product specifically does.
67
- (`anti-goal.median > Stock copy`)
67
+ (`standard.model-defaults > Stock copy`)
68
68
 
69
69
  Flag exclamation-marked success copy, confetti language, and celebratory UI
70
70
  ("You did it!", "Awesome!"). Confirmation is quiet and factual.
71
- (`anti-goal.median > Celebration`)
71
+ (`standard.model-defaults > Celebration`)
72
72
 
73
73
  Flag the hero-metric template — a big number, small label, and supporting
74
74
  stats as default proof — unless the metric shows real user data. Recommend
75
75
  evidence specific to the product, or nothing.
76
- (`anti-goal.median > Hero metric`)
76
+ (`standard.model-defaults > Hero metric`)
77
77
 
78
78
  Frequency tells — the crime is repetition, not the move (advisory):
79
79
 
80
80
  Flag three or more uppercase, tracked eyebrow kickers above section headings
81
81
  in one page. One named kicker is voice; a kicker on every section is model
82
- grammar. (`anti-goal.median > Eyebrow kicker`)
82
+ grammar. (`standard.model-defaults > Eyebrow kicker`)
83
83
 
84
84
  Flag five or more em-dashes in body copy in one view.
85
85
 
@@ -3,8 +3,8 @@ name: Motion restraint
3
3
  description: Flags non-token motion, looping decoration, and keyframes that do not explain state change.
4
4
  severity: medium
5
5
  references:
6
- - grammar.motion
7
- - signature.temperature
6
+ - foundation.motion
7
+ - foundation.temperature
8
8
  ---
9
9
 
10
10
  Review changed transitions and animations for vocabulary first.
@@ -3,10 +3,10 @@ name: Relationship discipline
3
3
  description: Flags structural violations of the grammar — emphasis-ladder breaks, sibling margins, decorative borders, nested cards. These rules survive any adaptation.
4
4
  severity: high
5
5
  references:
6
- - grammar.hierarchy
7
- - grammar.rhythm
8
- - grammar.surfaces
9
- - anti-goal.median > Nested cards
6
+ - foundation.hierarchy
7
+ - foundation.rhythm
8
+ - foundation.surfaces
9
+ - standard.model-defaults > Nested cards
10
10
  ---
11
11
 
12
12
  These assertions test relationships between token roles, not the values behind
@@ -3,9 +3,9 @@ name: Shape matches the job
3
3
  description: Flags views composed for the wrong reader job — a form styled as a table, an announcement headline over a reviewable artifact, a live state presented as settled fact, a second primary, or a skeleton loader standing in for content.
4
4
  severity: high
5
5
  references:
6
- - grammar.job
7
- - grammar.deletion
8
- - grammar.hierarchy
6
+ - foundation.job
7
+ - foundation.deletion
8
+ - foundation.hierarchy
9
9
  ---
10
10
 
11
11
  Apply this check to diffs that add or restructure a view. Classify the
@@ -17,27 +17,27 @@ not fit.
17
17
  Flag a view whose job routes to one example but whose composition imitates
18
18
  another — a submit-and-done task laid out as a dashboard of cards, a
19
19
  records-scanning task rendered as prose sections, a stop-and-decide moment
20
- inlined into the page instead of interrupting it. (`grammar.job`)
20
+ inlined into the page instead of interrupting it. (`foundation.job`)
21
21
 
22
22
  Flag an announcement headline in display or headline type above an artifact
23
23
  the reader will review — "Here's your draft", "Your plan is ready", "All
24
24
  set". The artifact opens the view; status lives in quiet metadata or
25
- nowhere. (`grammar.job`)
25
+ nowhere. (`foundation.job`)
26
26
 
27
27
  Flag a live or ongoing value presented without its freshness — no timestamp
28
28
  or "updated" line in muted metadata near the figure. A moving value styled
29
- as a settled fact misleads. (`grammar.job`)
29
+ as a settled fact misleads. (`foundation.job`)
30
30
 
31
31
  Flag recommendation or verdict framing where the decision belongs to the
32
32
  reader and the system cannot honestly rank the options. Present the
33
- material; withhold the verdict. (`grammar.job`)
33
+ material; withhold the verdict. (`foundation.job`)
34
34
 
35
35
  Flag a second primary-variant action in a view, and flag a promoted primary
36
36
  on a view that honestly earns none — a steady status view, an open
37
37
  comparison. Zero is a valid spend of `--primary-budget`.
38
- (`grammar.hierarchy`)
38
+ (`foundation.hierarchy`)
39
39
 
40
40
  Flag skeleton loaders, placeholder shimmer, or staged construction where
41
41
  content will land — and any element that cannot name what breaks if it is
42
42
  removed. The fix is demotion or deletion, never more emphasis.
43
- (`grammar.deletion`)
43
+ (`foundation.deletion`)
@@ -3,12 +3,12 @@ name: Value discipline
3
3
  description: Flags off-signature values — non-pill controls, off-palette hues, raw color literals, expression over budget. Adapting the dials rewrites this check alongside the signature nodes.
4
4
  severity: high
5
5
  references:
6
- - signature.shape
7
- - signature.palette
8
- - grammar.color-roles
9
- - register.data-density
10
- - register.editorial
11
- - register.email
6
+ - foundation.shape
7
+ - foundation.palette
8
+ - foundation.color-roles
9
+ - context.data-density
10
+ - context.editorial
11
+ - context.email
12
12
  ---
13
13
 
14
14
  These assertions test Vessel's current answers to the signature dials. A
@@ -0,0 +1,53 @@
1
+ ---
2
+ for: Any AI thread, agent console, review assistant, or prompt composer.
3
+ materials:
4
+ - materials/examples/composition.conversation.html
5
+ ---
6
+
7
+ ## Usage
8
+
9
+ Conversation UI is not chat cosplay. The assistant speaks on the page surface
10
+ as plain text: no bubble, no border, no fill.
11
+
12
+ Assistant hierarchy comes from prose, spacing, and type. Wrapping assistant
13
+ messages in cards makes the system look defensive and wastes density.
14
+
15
+ Tool calls are operational evidence. The prompt input is one bordered
16
+ surface; the textarea region stays empty of controls so writing remains the
17
+ focus.
18
+
19
+ Use the conversation reference when building any AI thread, agent console,
20
+ review assistant, or prompt composer. It carries the grammar that agents most
21
+ often get wrong.
22
+
23
+ ## Rules
24
+
25
+ - The assistant speaks on the page surface as plain text: no bubble, no
26
+ border, no fill.
27
+ - User turns are compact muted surfaces aligned right. They mark authorship
28
+ without turning the thread into alternating balloons.
29
+ - Tool calls collapse to a labeled one-line summary with status. Expand only
30
+ when the user asks for detail, then show mono content inside the disclosed
31
+ area.
32
+ - The prompt input is one bordered surface, with the textarea region empty
33
+ of controls. Attachments, model choices, secondary tools, and send live in
34
+ a single row below it.
35
+ - There is one primary send action. Stop and send are mutually exclusive
36
+ states of the same action area.
37
+
38
+ ## Never
39
+
40
+ - Never wrap assistant messages in cards — it makes the system look
41
+ defensive and wastes density; instead draw assistant hierarchy from prose,
42
+ spacing, and type.
43
+ - Never turn the thread into alternating balloons — instead mark authorship
44
+ with compact muted user surfaces aligned right and plain-text assistant
45
+ turns.
46
+ - Never expand tool calls by default — instead collapse them to a labeled
47
+ one-line summary with status, expanding only when the user asks for
48
+ detail.
49
+ - Never put controls inside the textarea region — instead keep writing the
50
+ focus and place attachments, model choices, secondary tools, and send in a
51
+ single row below it.
52
+ - Never show stop and send as two competing primary buttons — instead treat
53
+ them as mutually exclusive states of the same action area.
@@ -0,0 +1,51 @@
1
+ ---
2
+ for: Tables, dashboards, logs, monitoring, or other data-dense consoles.
3
+ materials:
4
+ - materials/examples/composition.table.html
5
+ - materials/primitives.css
6
+ ---
7
+
8
+ Condition: this node applies to data-dense surfaces — tables, dashboards,
9
+ transaction logs, and admin consoles.
10
+
11
+ ## Usage
12
+
13
+ Data density inverts the settings-page rhythm. Operators need scan speed
14
+ before they need breathing room.
15
+
16
+ Tight adjacency is meaning when rows compare against rows. A ragged amount
17
+ column is a broken instrument. Hierarchy is muted-first: data is the default
18
+ plane, labels are muted, and emphasis is rare enough to stay useful.
19
+
20
+ Generous whitespace is drift here. Wasted density makes operators scroll.
21
+
22
+ ## Rules
23
+
24
+ - Use the two smallest gap steps (`--gap-xs`, `--gap-sm`) where forms use
25
+ the medium step.
26
+ - Numerals are mono so columns align.
27
+ - Data is the default plane, labels are muted, and emphasis is rare enough
28
+ to stay useful.
29
+ - Data surfaces take the small radius.
30
+ - Status is a text label with at most one functional color family per view.
31
+ - Charts inside a console follow the product carve-out from the palette
32
+ signature: expression hues live inside the plot area only. Outside the
33
+ plot, the one-status-hue cap holds.
34
+ - Hairline borders carry rows.
35
+ - Hover confirmation uses the fast duration. It should acknowledge
36
+ targeting, not animate the table.
37
+
38
+ ## Never
39
+
40
+ - Never give a table cell the surface radius — a surface-radius table cell
41
+ is costume; the signature radius (see foundation.shape) belongs on cards,
42
+ not cells — instead data surfaces take the small radius.
43
+ - Never let chart color leak into rows, badges, or headers — more status
44
+ color turns monitoring into confetti; instead keep expression hues inside
45
+ the plot area and hold the one-status-hue cap outside it.
46
+ - Never zebra stripe — instead let hairline borders carry rows with less
47
+ noise and more trust.
48
+ - Never animate the table on hover — instead acknowledge targeting with the
49
+ fast duration.
50
+ - Never spend generous whitespace here — it is drift, and wasted density
51
+ makes operators scroll; instead use the two smallest gap steps.
@@ -0,0 +1,53 @@
1
+ ---
2
+ for: Heroes, marketing pages, pull quotes, or full-bleed dark moments.
3
+ materials:
4
+ - materials/examples/composition.editorial.html
5
+ - materials/tokens.css
6
+ ---
7
+
8
+ Condition: this node applies to marketing, landing, and editorial surfaces —
9
+ never to product UI.
10
+
11
+ ## Usage
12
+
13
+ Editorial surfaces invert the product type rules. Display scale is not an
14
+ indulgence here; it is the job.
15
+
16
+ Pull quotes are visual punctuation for longform. They interrupt reading with
17
+ verdicts, not decoration. The tracked uppercase label is the kicker grammar.
18
+ It gives the page a hard editorial edge before the headline lands.
19
+
20
+ Monochrome remains the spine, but editorial is the loud end of the expression
21
+ ladder (see foundation.palette). Commit to few colors at scale; variety is
22
+ where expression collapses into decoration.
23
+
24
+ A hero built at product scale reads as timid. Timidity is drift here, exactly
25
+ as spectacle is drift in product UI.
26
+
27
+ ## Rules
28
+
29
+ - Use the `--heading-display-*` tokens — size, line height, and weight —
30
+ when the words are the composition. The display tier belongs to this
31
+ context (see foundation.type for the scale's character).
32
+ - Section rhythm uses `--section-padding-vertical`.
33
+ - The sanctioned dramatic moment is the full-bleed dark section. Use the
34
+ `--surface-dark-*` family and let contrast carry the scene.
35
+ - Up to two expression hues per page as atmosphere — a tinted dark section,
36
+ a colored pull-quote accent, a duotone image moment.
37
+ - There is one primary action per page, and it keeps the control radius from
38
+ foundation.shape.
39
+
40
+ ## Never
41
+
42
+ - Never stretch a product stack until it looks important — instead use
43
+ `--section-padding-vertical` for section rhythm.
44
+ - Never use pull quotes as decoration — instead let them interrupt reading
45
+ with a verdict; they are visual punctuation for longform.
46
+ - Never let variety carry the expression — that is where expression
47
+ collapses into decoration; instead commit to few colors at scale, up to
48
+ two hues per page.
49
+ - Never allow competing calls to action — editorial confidence does not
50
+ excuse them; instead keep one primary action per page.
51
+ - Never build a hero at product scale — it reads as timid, and timidity is
52
+ drift here exactly as spectacle is drift in product UI; instead let the
53
+ display scale do its job.
@@ -0,0 +1,53 @@
1
+ ---
2
+ for: Transactional email only.
3
+ materials:
4
+ - materials/examples/email.html
5
+ ---
6
+
7
+ Condition: this node applies only to email. In any other medium, everything
8
+ below is a violation.
9
+
10
+ ## Usage
11
+
12
+ Email clients do not honor the web contract. Custom properties, external
13
+ stylesheets, flex layout, and webfonts are unreliable materials here.
14
+
15
+ Email inverts the material contract deliberately. Transcribe token values by
16
+ hand instead of referencing tokens — every hex below is a transcription of
17
+ `materials/tokens.css`, which stays the single source; if a token changes,
18
+ re-transcribe. Hardcoding hex here is fidelity, not drift. The check
19
+ exemption is the condition itself.
20
+
21
+ Email fidelity is made from boring structure. The soul survives the body
22
+ swap: monochrome spine, quiet factual copy, one primary action, no
23
+ celebration. A receipt is allowed one degree of warmth; it is not allowed a
24
+ palette.
25
+
26
+ ## Rules
27
+
28
+ - Use `#1a1a1a` (`--color-gray-900`, foreground) for text, `#999999`
29
+ (`--color-gray-500`, muted) for muted text, and `#e8e8e8`
30
+ (`--color-gray-200`, border) for borders when the email needs the Vessel
31
+ palette.
32
+ - Keep the surface radius on cards and the control radius on buttons (see
33
+ foundation.shape). The values survive even when the token names cannot
34
+ travel.
35
+ - Build with table layout, a 600px wrapper, predictable cells, and
36
+ bulletproof buttons.
37
+ - HK Grotesk falls back to the system stack. The voice must survive without
38
+ the font file.
39
+ - Email gets exactly one expressive moment: a header band or the figure that
40
+ matters, in one expression hue, transcribed by hand like every value
41
+ here — amber is `#f6b44a` (`--expression-1`). One moment, one hue.
42
+
43
+ ## Never
44
+
45
+ - Never reference tokens directly in email — custom properties are
46
+ unreliable materials here; instead transcribe token values by hand from
47
+ `materials/tokens.css`, and re-transcribe if a token changes.
48
+ - Never add further color to compensate for email constraints — constraint
49
+ is not permission to perform; instead hold to the one expressive moment in
50
+ one hue.
51
+ - Never apply anything in this node outside email — in any other medium it
52
+ is a violation; instead use the token-referencing contract the other
53
+ contexts require.
@@ -0,0 +1,41 @@
1
+ ---
2
+ for: Choosing or applying color.
3
+ materials:
4
+ - materials/tokens.css
5
+ ---
6
+
7
+ ## Usage
8
+
9
+ The token file is the source of truth. An agent may combine tokens, but it
10
+ may not author around them. Raw color values are implementation detail, never
11
+ product language.
12
+
13
+ If a container needs a color, it first needs a role. The status roles —
14
+ destructive, success, warning, info — exist only when meaning demands them.
15
+ None of them are brand accents.
16
+
17
+ One view should not perform a color palette. If a status color is present,
18
+ let the rest of the view stay on the base roles. Richness beyond this is
19
+ context-gated: a closed expression set (`--expression-*`) exists, but its
20
+ size, members, and volume ladder are a brand answer — see the palette
21
+ foundation — and each context caps how loud they may be.
22
+
23
+ ## Rules
24
+
25
+ - Author with semantic roles: `background`, `foreground`, `card`, `popover`,
26
+ `primary`, `secondary`, `muted`, `border`, `input`, `ring`, and the status
27
+ roles.
28
+ - Destructive means destructive or error. Success means success. Warning
29
+ means warning. Info means information.
30
+ - The constant that holds across every context: expression never touches
31
+ what you click. Buttons, inputs, and links stay on the base roles
32
+ everywhere.
33
+
34
+ ## Never
35
+
36
+ - Never let a status role moonlight as atmosphere, in any context — status
37
+ colors keep their meanings everywhere; use the expression set at the
38
+ context's sanctioned volume instead.
39
+ - Never author around the tokens with raw color values — combine tokens.
40
+ - Never put a color on a colored control — a colored control is a different
41
+ design system; controls stay on the base roles.
@@ -0,0 +1,53 @@
1
+ ---
2
+ for: The final pass over any composition, or whenever a view feels crowded, busy, or dressed up.
3
+ ---
4
+
5
+ ## Usage
6
+
7
+ Restraint is not a mood; it is a test every element has to pass. Before a
8
+ view ships, run the pass: each label, divider, icon, caption, and helper
9
+ line must name what breaks if it is removed. If nothing breaks, delete it.
10
+ Convention is not a reason — "forms usually have this" keeps nothing.
11
+
12
+ The test has a direction. When a view is crowded, or two elements compete
13
+ for attention, the fix is always demotion or deletion — never adding
14
+ emphasis to the loser. Raising the volume of one element to beat another
15
+ starts an arms race the composition always loses; removing the weaker claim
16
+ ends it.
17
+
18
+ Do: a settings page whose every row survives the what-breaks question, with
19
+ one primary action and gaps doing the dividing.
20
+
21
+ After everything deletable is gone, whatever remains is unmistakably the
22
+ point.
23
+
24
+ ## Rules
25
+
26
+ - Every label, divider, icon, caption, and helper line must name what breaks
27
+ if it is removed; if nothing breaks, delete it.
28
+ - A view arrives settled: when content lands, it lands in its final
29
+ position — no reflow, no staggered construction, no element arriving late
30
+ to shift its neighbors.
31
+ - While work is genuinely pending, show the smallest true statement (a quiet
32
+ loading state, per the motion doctrine's loop exception) and nothing else.
33
+
34
+ ## Never
35
+
36
+ - Never fix a crowded view or an attention contest by adding emphasis to the
37
+ loser — instead demote or delete the weaker claim.
38
+ - Never add a decorative divider where a gap step states the relationship —
39
+ instead let the gap do the dividing.
40
+ - Never add an icon that restates its adjacent label — instead delete the
41
+ icon.
42
+ - Never add a tooltip explaining an obvious control — instead delete the
43
+ tooltip.
44
+ - Never add onboarding chrome to routine views — instead delete it.
45
+ - Never dress a view in credibility costume — instead use a small factual
46
+ source or timestamp line; it beats a dashboard of gauges.
47
+ - Never ship skeleton loaders or placeholder shimmer promising content that
48
+ is not there — a fake page is hedging rendered as UI; instead show the
49
+ smallest true statement while work is pending.
50
+ - Never ship the settings page with icon-per-row decoration, a divider under
51
+ every group, a progress shimmer on load, and a bolded second CTA competing
52
+ for the eye — instead run the deletion pass until every row survives the
53
+ what-breaks question.