@design-intelligence/ghost 0.30.0 → 0.31.0
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.
- package/dist/init-payloads/median/median-tells.md +27 -26
- package/dist/init-payloads/{vessel-light/anti-goal.median.md → median/standard.model-defaults.md} +7 -3
- package/dist/init-payloads/skeleton/brand.md +7 -3
- package/dist/init-payloads/skeleton/context.conversation.md +22 -13
- package/dist/init-payloads/skeleton/foundation.color.md +33 -28
- package/dist/init-payloads/skeleton/foundation.composition.md +14 -15
- package/dist/init-payloads/skeleton/foundation.controls.md +20 -15
- package/dist/init-payloads/skeleton/foundation.layout.md +29 -28
- package/dist/init-payloads/skeleton/foundation.motion.md +19 -16
- package/dist/init-payloads/skeleton/foundation.type.md +32 -28
- package/dist/init-payloads/skeleton/foundation.voice.md +13 -11
- package/dist/init-payloads/skeleton/glossary.md +33 -21
- package/dist/init-payloads/vessel-light/checks/conversation-grammar.md +2 -2
- package/dist/init-payloads/vessel-light/checks/median-tells.md +25 -25
- package/dist/init-payloads/vessel-light/checks/motion-restraint.md +2 -2
- package/dist/init-payloads/vessel-light/checks/relationships.md +4 -4
- package/dist/init-payloads/vessel-light/checks/shape-matches-job.md +9 -9
- package/dist/init-payloads/vessel-light/checks/values.md +6 -6
- package/dist/init-payloads/vessel-light/context.conversation.md +53 -0
- package/dist/init-payloads/vessel-light/context.data-density.md +51 -0
- package/dist/init-payloads/vessel-light/context.editorial.md +53 -0
- package/dist/init-payloads/vessel-light/context.email.md +53 -0
- package/dist/init-payloads/vessel-light/foundation.color-roles.md +41 -0
- package/dist/init-payloads/vessel-light/foundation.deletion.md +53 -0
- package/dist/init-payloads/vessel-light/foundation.hierarchy.md +73 -0
- package/dist/init-payloads/vessel-light/{grammar.job.md → foundation.job.md} +39 -28
- package/dist/init-payloads/vessel-light/foundation.motion.md +46 -0
- package/dist/init-payloads/vessel-light/foundation.palette.md +57 -0
- package/dist/init-payloads/vessel-light/foundation.rhythm.md +39 -0
- package/dist/init-payloads/vessel-light/foundation.shape.md +39 -0
- package/dist/init-payloads/vessel-light/foundation.surfaces.md +45 -0
- package/dist/init-payloads/vessel-light/foundation.tells.md +39 -0
- package/dist/init-payloads/vessel-light/{signature.temperature.md → foundation.temperature.md} +31 -13
- package/dist/init-payloads/vessel-light/{signature.type.md → foundation.type.md} +27 -12
- package/dist/init-payloads/vessel-light/glossary.md +27 -30
- package/dist/init-payloads/vessel-light/index.md +18 -15
- package/dist/scan/check-scaffold.d.ts.map +1 -1
- package/dist/scan/check-scaffold.js +25 -3
- package/dist/scan/check-scaffold.js.map +1 -1
- package/dist/scan/templates.js +4 -4
- package/dist/scan/templates.js.map +1 -1
- package/dist/skill-bundle/references/ground.md +3 -2
- package/dist/skill-bundle/references/nodes.md +29 -6
- package/dist/skill-bundle/references/schema.md +5 -0
- package/dist/skill-bundle/references/steering-audit.md +2 -2
- package/package.json +1 -1
- package/dist/init-payloads/vessel-light/anti-goal.tells.md +0 -38
- package/dist/init-payloads/vessel-light/grammar.color-roles.md +0 -28
- package/dist/init-payloads/vessel-light/grammar.conversation.md +0 -29
- package/dist/init-payloads/vessel-light/grammar.deletion.md +0 -35
- package/dist/init-payloads/vessel-light/grammar.hierarchy.md +0 -56
- package/dist/init-payloads/vessel-light/grammar.motion.md +0 -25
- package/dist/init-payloads/vessel-light/grammar.rhythm.md +0 -25
- package/dist/init-payloads/vessel-light/grammar.surfaces.md +0 -33
- package/dist/init-payloads/vessel-light/register.data-density.md +0 -39
- package/dist/init-payloads/vessel-light/register.editorial.md +0 -41
- package/dist/init-payloads/vessel-light/register.email.md +0 -43
- package/dist/init-payloads/vessel-light/signature.palette.md +0 -45
- package/dist/init-payloads/vessel-light/signature.shape.md +0 -27
- /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
|
|
11
|
-
composition, the rules for assembling them into a view. Each
|
|
12
|
-
node is a chapter: usage
|
|
13
|
-
turn out to be, the brand's open questions (unanswered in this
|
|
14
|
-
marked as decisions only a human can make), and the chapter's
|
|
15
|
-
Follow the
|
|
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.
|
|
23
|
-
|
|
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
|
|
37
|
-
into a real ghost package: write the cover, answer each
|
|
38
|
-
|
|
39
|
-
|
|
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
|
-
-
|
|
7
|
-
-
|
|
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
|
-
-
|
|
7
|
-
-
|
|
8
|
-
-
|
|
9
|
-
-
|
|
10
|
-
-
|
|
11
|
-
-
|
|
12
|
-
-
|
|
13
|
-
-
|
|
14
|
-
-
|
|
15
|
-
-
|
|
16
|
-
-
|
|
17
|
-
-
|
|
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 `
|
|
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
|
-
(`
|
|
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. (`
|
|
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. (`
|
|
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. (`
|
|
42
|
+
and gradient-filled buttons. (`standard.model-defaults > Gradients`)
|
|
43
43
|
|
|
44
44
|
Flag `backdrop-filter: blur` used for glassmorphism cards.
|
|
45
|
-
(`
|
|
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. (`
|
|
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. (`
|
|
56
|
+
diff. (`standard.model-defaults > Cream surface`)
|
|
57
57
|
|
|
58
58
|
Flag assistant messages rendered as bubbles with initials-circle avatars.
|
|
59
|
-
(`
|
|
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
|
-
(`
|
|
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
|
-
(`
|
|
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
|
-
(`
|
|
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. (`
|
|
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
|
-
-
|
|
7
|
-
-
|
|
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
|
-
-
|
|
7
|
-
-
|
|
8
|
-
-
|
|
9
|
-
-
|
|
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
|
-
-
|
|
7
|
-
-
|
|
8
|
-
-
|
|
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. (`
|
|
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. (`
|
|
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. (`
|
|
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. (`
|
|
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
|
-
(`
|
|
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
|
-
(`
|
|
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
|
-
-
|
|
7
|
-
-
|
|
8
|
-
-
|
|
9
|
-
-
|
|
10
|
-
-
|
|
11
|
-
-
|
|
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.
|