@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.
- package/README.md +1 -0
- 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
|
@@ -7,22 +7,25 @@ materials:
|
|
|
7
7
|
vessel-light is Vessel without the React package: the design language as a
|
|
8
8
|
steering packet for agents writing raw HTML and CSS.
|
|
9
9
|
|
|
10
|
-
Style only with the tokens. Compose only with the closed sets the
|
|
11
|
-
|
|
10
|
+
Style only with the tokens. Compose only with the closed sets the foundations
|
|
11
|
+
enumerate. Use the examples when the task matches; they are not a framework.
|
|
12
12
|
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
13
|
+
Foundations carry Vessel's load-bearing decisions. Their role logic survives
|
|
14
|
+
adaptation; the answered shape, palette, type, and temperature values stand
|
|
15
|
+
until you replace them. `standard.model-defaults` is shared guidance: prune a
|
|
16
|
+
Default only when explicit brand guidance replaces it, then adapt its paired
|
|
17
|
+
check in the same change. Contexts — editorial, email, data-density, and
|
|
18
|
+
conversation — name the situations where parts of the default contract bend;
|
|
19
|
+
pull only the nodes whose conditions match the task, because guidance from the
|
|
20
|
+
wrong context is contamination.
|
|
19
21
|
|
|
20
|
-
Monochrome comes first. Status color is functional language — danger,
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
22
|
+
Monochrome comes first. Status color is functional language — danger, success,
|
|
23
|
+
warning, information — never atmosphere. Atmosphere is catered: a five-hue
|
|
24
|
+
expression palette whose volume rises with the context, from charts-only in
|
|
25
|
+
product to two hues in editorial, and never on controls.
|
|
24
26
|
|
|
25
27
|
Name the reader's job before composing anything. The job picks the example and
|
|
26
|
-
the
|
|
27
|
-
do not invent a new styling system. Before anything ships, run the
|
|
28
|
-
pass: every element names what breaks if it goes, and the view arrives
|
|
28
|
+
the context, never the topic. When no example fits, compose from the
|
|
29
|
+
foundations; do not invent a new styling system. Before anything ships, run the
|
|
30
|
+
deletion pass: every element names what breaks if it goes, and the view arrives
|
|
31
|
+
settled.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"check-scaffold.d.ts","sourceRoot":"","sources":["../../src/scan/check-scaffold.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"check-scaffold.d.ts","sourceRoot":"","sources":["../../src/scan/check-scaffold.ts"],"names":[],"mappings":"AA8BA,MAAM,WAAW,eAAe;IAC9B,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,OAAO,EAAE,MAAM,EAAE,CAAC;CACnB;AAED,0EAA0E;AAC1E,wBAAsB,YAAY,CAChC,UAAU,EAAE,MAAM,GACjB,OAAO,CAAC,eAAe,CAAC,CAoC1B"}
|
|
@@ -5,6 +5,13 @@ import { GHOST_CHECKS_DIR } from "./check-files.js";
|
|
|
5
5
|
import { loadPayloadFile } from "./packed-payloads.js";
|
|
6
6
|
const EXAMPLE_CHECK_FILENAME = "example.md.example";
|
|
7
7
|
const MEDIAN_TELLS_FILENAME = "median-tells.md";
|
|
8
|
+
/**
|
|
9
|
+
* Node ids that carry the measured model-defaults floor. The packed
|
|
10
|
+
* median-tells check references the current id; when a package still uses a
|
|
11
|
+
* legacy id, the references are rewritten so the scaffolded check resolves.
|
|
12
|
+
*/
|
|
13
|
+
const MODEL_DEFAULTS_NODE_ID = "standard.model-defaults";
|
|
14
|
+
const LEGACY_MODEL_DEFAULTS_NODE_IDS = ["cliche.median"];
|
|
8
15
|
const EXAMPLE_CHECK_CONTENT = `---
|
|
9
16
|
name: logo-clearspace-holds
|
|
10
17
|
description: Logo usage preserves clearspace, lockup integrity, and glyph rules.
|
|
@@ -26,12 +33,17 @@ export async function addChecksDir(packageDir) {
|
|
|
26
33
|
const written = [];
|
|
27
34
|
const skipped = [];
|
|
28
35
|
await mkdir(checksDir, { recursive: true });
|
|
29
|
-
|
|
30
|
-
|
|
36
|
+
const modelDefaultsId = await findModelDefaultsNode(packageDir);
|
|
37
|
+
if (modelDefaultsId !== undefined) {
|
|
38
|
+
let check = await loadPayloadFile("median", MEDIAN_TELLS_FILENAME);
|
|
39
|
+
if (modelDefaultsId !== MODEL_DEFAULTS_NODE_ID) {
|
|
40
|
+
check = check.replaceAll(MODEL_DEFAULTS_NODE_ID, modelDefaultsId);
|
|
41
|
+
}
|
|
42
|
+
await writeFile(join(checksDir, MEDIAN_TELLS_FILENAME), check, "utf-8");
|
|
31
43
|
written.push(MEDIAN_TELLS_FILENAME);
|
|
32
44
|
}
|
|
33
45
|
else {
|
|
34
|
-
skipped.push(`${MEDIAN_TELLS_FILENAME} (no
|
|
46
|
+
skipped.push(`${MEDIAN_TELLS_FILENAME} (no ${MODEL_DEFAULTS_NODE_ID} node)`);
|
|
35
47
|
}
|
|
36
48
|
await writeFile(join(checksDir, EXAMPLE_CHECK_FILENAME), EXAMPLE_CHECK_CONTENT, "utf-8");
|
|
37
49
|
written.push(EXAMPLE_CHECK_FILENAME);
|
|
@@ -41,6 +53,16 @@ export async function addChecksDir(packageDir) {
|
|
|
41
53
|
skipped,
|
|
42
54
|
};
|
|
43
55
|
}
|
|
56
|
+
async function findModelDefaultsNode(packageDir) {
|
|
57
|
+
for (const id of [
|
|
58
|
+
MODEL_DEFAULTS_NODE_ID,
|
|
59
|
+
...LEGACY_MODEL_DEFAULTS_NODE_IDS,
|
|
60
|
+
]) {
|
|
61
|
+
if (await exists(join(packageDir, `${id}.md`)))
|
|
62
|
+
return id;
|
|
63
|
+
}
|
|
64
|
+
return undefined;
|
|
65
|
+
}
|
|
44
66
|
async function exists(path) {
|
|
45
67
|
try {
|
|
46
68
|
await access(path);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"check-scaffold.js","sourceRoot":"","sources":["../../src/scan/check-scaffold.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AACjC,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACzC,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AACpD,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAEvD,MAAM,sBAAsB,GAAG,oBAAoB,CAAC;AACpD,MAAM,qBAAqB,GAAG,iBAAiB,CAAC;AAEhD,MAAM,qBAAqB,GAAG;;;;;;;;;;;CAW7B,CAAC;AAQF,0EAA0E;AAC1E,MAAM,CAAC,KAAK,UAAU,YAAY,CAChC,UAAkB;IAElB,MAAM,SAAS,GAAG,IAAI,CAAC,UAAU,EAAE,gBAAgB,CAAC,CAAC;IACrD,IAAI,MAAM,MAAM,CAAC,SAAS,CAAC,EAAE,CAAC;QAC5B,MAAM,IAAI,UAAU,CAAC,6BAA6B,SAAS,GAAG,CAAC,CAAC;IAClE,CAAC;IAED,MAAM,OAAO,GAAa,EAAE,CAAC;IAC7B,MAAM,OAAO,GAAa,EAAE,CAAC;IAE7B,MAAM,KAAK,CAAC,SAAS,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;IAC5C,
|
|
1
|
+
{"version":3,"file":"check-scaffold.js","sourceRoot":"","sources":["../../src/scan/check-scaffold.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AACjC,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACzC,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AACpD,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAEvD,MAAM,sBAAsB,GAAG,oBAAoB,CAAC;AACpD,MAAM,qBAAqB,GAAG,iBAAiB,CAAC;AAEhD;;;;GAIG;AACH,MAAM,sBAAsB,GAAG,yBAAyB,CAAC;AACzD,MAAM,8BAA8B,GAAG,CAAC,eAAe,CAAC,CAAC;AAEzD,MAAM,qBAAqB,GAAG;;;;;;;;;;;CAW7B,CAAC;AAQF,0EAA0E;AAC1E,MAAM,CAAC,KAAK,UAAU,YAAY,CAChC,UAAkB;IAElB,MAAM,SAAS,GAAG,IAAI,CAAC,UAAU,EAAE,gBAAgB,CAAC,CAAC;IACrD,IAAI,MAAM,MAAM,CAAC,SAAS,CAAC,EAAE,CAAC;QAC5B,MAAM,IAAI,UAAU,CAAC,6BAA6B,SAAS,GAAG,CAAC,CAAC;IAClE,CAAC;IAED,MAAM,OAAO,GAAa,EAAE,CAAC;IAC7B,MAAM,OAAO,GAAa,EAAE,CAAC;IAE7B,MAAM,KAAK,CAAC,SAAS,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;IAC5C,MAAM,eAAe,GAAG,MAAM,qBAAqB,CAAC,UAAU,CAAC,CAAC;IAChE,IAAI,eAAe,KAAK,SAAS,EAAE,CAAC;QAClC,IAAI,KAAK,GAAG,MAAM,eAAe,CAAC,QAAQ,EAAE,qBAAqB,CAAC,CAAC;QACnE,IAAI,eAAe,KAAK,sBAAsB,EAAE,CAAC;YAC/C,KAAK,GAAG,KAAK,CAAC,UAAU,CAAC,sBAAsB,EAAE,eAAe,CAAC,CAAC;QACpE,CAAC;QACD,MAAM,SAAS,CAAC,IAAI,CAAC,SAAS,EAAE,qBAAqB,CAAC,EAAE,KAAK,EAAE,OAAO,CAAC,CAAC;QACxE,OAAO,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC;IACtC,CAAC;SAAM,CAAC;QACN,OAAO,CAAC,IAAI,CACV,GAAG,qBAAqB,QAAQ,sBAAsB,QAAQ,CAC/D,CAAC;IACJ,CAAC;IAED,MAAM,SAAS,CACb,IAAI,CAAC,SAAS,EAAE,sBAAsB,CAAC,EACvC,qBAAqB,EACrB,OAAO,CACR,CAAC;IACF,OAAO,CAAC,IAAI,CAAC,sBAAsB,CAAC,CAAC;IAErC,OAAO;QACL,GAAG,EAAE,SAAS;QACd,OAAO;QACP,OAAO;KACR,CAAC;AACJ,CAAC;AAED,KAAK,UAAU,qBAAqB,CAClC,UAAkB;IAElB,KAAK,MAAM,EAAE,IAAI;QACf,sBAAsB;QACtB,GAAG,8BAA8B;KAClC,EAAE,CAAC;QACF,IAAI,MAAM,MAAM,CAAC,IAAI,CAAC,UAAU,EAAE,GAAG,EAAE,KAAK,CAAC,CAAC;YAAE,OAAO,EAAE,CAAC;IAC5D,CAAC;IACD,OAAO,SAAS,CAAC;AACnB,CAAC;AAED,KAAK,UAAU,MAAM,CAAC,IAAY;IAChC,IAAI,CAAC;QACH,MAAM,MAAM,CAAC,IAAI,CAAC,CAAC;QACnB,OAAO,IAAI,CAAC;IACd,CAAC;IAAC,MAAM,CAAC;QACP,OAAO,KAAK,CAAC;IACf,CAAC;AACH,CAAC"}
|
package/dist/scan/templates.js
CHANGED
|
@@ -21,7 +21,7 @@ function gitignoreFile() {
|
|
|
21
21
|
const SKELETON_FILE_ORDER = new Map([
|
|
22
22
|
"glossary.md",
|
|
23
23
|
"brand.md",
|
|
24
|
-
"
|
|
24
|
+
"standard.model-defaults.md",
|
|
25
25
|
"foundation.composition.md",
|
|
26
26
|
"foundation.color.md",
|
|
27
27
|
"foundation.type.md",
|
|
@@ -33,7 +33,7 @@ const SKELETON_FILE_ORDER = new Map([
|
|
|
33
33
|
].map((path, index) => [path, index]));
|
|
34
34
|
const SKELETON_TEMPLATE = {
|
|
35
35
|
name: "skeleton",
|
|
36
|
-
description: "Naked skeleton: a brand cover, foundation chapters with open questions, and the
|
|
36
|
+
description: "Naked skeleton: a brand cover, foundation chapters with open questions, and the shared model-defaults floor.",
|
|
37
37
|
async files() {
|
|
38
38
|
const skeletonFiles = [
|
|
39
39
|
...(await loadPackedPayload("skeleton")),
|
|
@@ -48,8 +48,8 @@ const SKELETON_TEMPLATE = {
|
|
|
48
48
|
};
|
|
49
49
|
async function medianTemplateFile() {
|
|
50
50
|
return {
|
|
51
|
-
relativePath: "
|
|
52
|
-
content: await loadPayloadFile("median", "
|
|
51
|
+
relativePath: "standard.model-defaults.md",
|
|
52
|
+
content: await loadPayloadFile("median", "standard.model-defaults.md"),
|
|
53
53
|
};
|
|
54
54
|
}
|
|
55
55
|
const TEMPLATES = new Map([
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"templates.js","sourceRoot":"","sources":["../../src/scan/templates.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EACL,qBAAqB,EACrB,4BAA4B,GAC7B,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAoB1E,SAAS,YAAY,CAAC,KAAc;IAClC,OAAO;QACL,YAAY,EAAE,cAAc;QAC5B,OAAO,EAAE,WAAW,oBAAoB,gBAAgB,KAAK,CAAC,CAAC,CAAC,UAAU,KAAK,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE;KAC3F,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,SAAS,aAAa;IACpB,OAAO;QACL,YAAY,EAAE,YAAY;QAC1B,OAAO,EAAE,GAAG,qBAAqB,KAAK,4BAA4B,IAAI;KACvE,CAAC;AACJ,CAAC;AAED,MAAM,mBAAmB,GAAG,IAAI,GAAG,CACjC;IACE,aAAa;IACb,UAAU;IACV,
|
|
1
|
+
{"version":3,"file":"templates.js","sourceRoot":"","sources":["../../src/scan/templates.ts"],"names":[],"mappings":"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"}
|
|
@@ -41,8 +41,9 @@ Do not call it a pull packet or review packet.
|
|
|
41
41
|
|
|
42
42
|
Keep it to three parts:
|
|
43
43
|
|
|
44
|
-
1. Up to five non-negotiables, each cited to a pulled node id.
|
|
45
|
-
the positive replacement, never just the rejection.
|
|
44
|
+
1. Up to five non-negotiables, each cited to a pulled node id. Guidance from a
|
|
45
|
+
`Never` section states the positive replacement, never just the rejection.
|
|
46
|
+
Include conditional
|
|
46
47
|
guidance only when its stated situation actually holds, including guidance
|
|
47
48
|
whose kind has scoped meaning in the glossary.
|
|
48
49
|
2. One readiness color: Green when the surface is covered by inspected concrete
|
|
@@ -19,6 +19,27 @@ the guidance is for, never an audience. Read it alone: if it fits every brand
|
|
|
19
19
|
or almost every task, it will not help selection. Put what to do and why in
|
|
20
20
|
the body.
|
|
21
21
|
|
|
22
|
+
## The default body shape
|
|
23
|
+
|
|
24
|
+
Unless the package's glossary declares another vocabulary, structure a node
|
|
25
|
+
body with three semantic sections, each a home for one type of claim, plus an
|
|
26
|
+
optional `## Skeleton` (always last):
|
|
27
|
+
|
|
28
|
+
- `## Usage` — the worldview and decision logic that help the model handle
|
|
29
|
+
decisions the author did not anticipate.
|
|
30
|
+
- `## Rules` — observable requirements a reviewer can assess in the finished
|
|
31
|
+
artifact, one per bullet. Exact values where useful. Put a known gap inside
|
|
32
|
+
the rule it affects: name the gap and state that the model must not invent
|
|
33
|
+
a value.
|
|
34
|
+
- `## Never` — selective, high-value failure modes, each paired with its
|
|
35
|
+
replacement: "never X — instead Y."
|
|
36
|
+
|
|
37
|
+
Route each claim to one home. Can a reviewer observe it in the artifact?
|
|
38
|
+
Rules. Does it reject a plausible move and name the replacement? Never. Does
|
|
39
|
+
it shape decisions not covered by either? Usage. None of these? Cut it.
|
|
40
|
+
A claim gets one home; do not repeat it as worldview, rationale, and rule.
|
|
41
|
+
Include only the sections the node needs; a short node may be plain prose.
|
|
42
|
+
|
|
22
43
|
Altitude lives in prose:
|
|
23
44
|
|
|
24
45
|
- State universal guidance plainly.
|
|
@@ -60,11 +81,13 @@ Everything bound is a template. Nothing bound is vibes. Use a Skeleton only
|
|
|
60
81
|
when the opening structure itself must arrive verbatim; see
|
|
61
82
|
[materials.md](materials.md).
|
|
62
83
|
|
|
63
|
-
##
|
|
84
|
+
## Never sections replace
|
|
64
85
|
|
|
65
|
-
A strong
|
|
86
|
+
A strong `Never` entry says **not X; instead Y; recognize the switch by Z**.
|
|
66
87
|
Negation alone makes the rejected default more salient without committing the
|
|
67
|
-
replacement.
|
|
88
|
+
replacement. Put shared, measured model behavior in `standard.model-defaults`;
|
|
89
|
+
put a brand-specific rejection in the applicable foundation, context, or
|
|
90
|
+
pattern node.
|
|
68
91
|
|
|
69
92
|
```markdown
|
|
70
93
|
---
|
|
@@ -78,7 +101,7 @@ SaaS dashboard behind.
|
|
|
78
101
|
```
|
|
79
102
|
|
|
80
103
|
Purge the rejected pattern from examples and starter structures. Use checks to
|
|
81
|
-
catch the hard regression; do not make
|
|
104
|
+
catch the hard regression; do not make `Never` prose carry review alone.
|
|
82
105
|
|
|
83
106
|
## Explain examples
|
|
84
107
|
|
|
@@ -124,7 +147,7 @@ canonical; human curation does.
|
|
|
124
147
|
| --- | --- |
|
|
125
148
|
| missing guidance | sharper `for` payload; universal guidance may belong on the cover |
|
|
126
149
|
| inventing values | a material-backed node with exact vocabulary |
|
|
127
|
-
| producing generic output |
|
|
150
|
+
| producing generic output | a reject-and-replace `Never` entry plus a well-explained example |
|
|
128
151
|
| choosing the wrong structure | bound/open pattern and, when needed, a Skeleton |
|
|
129
152
|
| crossing a hard line | invariant prose plus a review check |
|
|
130
153
|
| applying guidance too broadly | a condition or reversal condition |
|
|
@@ -136,4 +159,4 @@ canonical; human curation does.
|
|
|
136
159
|
- Never make a node a container for observations or implementation inventory.
|
|
137
160
|
- Never duplicate API documentation unless the API itself is the guidance.
|
|
138
161
|
- Never use a broad `for` payload to compensate for unrelated decisions in one body.
|
|
139
|
-
- Never ship a blacklist-only
|
|
162
|
+
- Never ship a blacklist-only `Never` section; name the replacement.
|
|
@@ -34,6 +34,11 @@ cover as a warning, and a cover body over 1500 bytes as a warning.
|
|
|
34
34
|
node's id is its filename minus `.md`; its kind is the first dotted filename
|
|
35
35
|
segment. A bare filename has no kind. Undeclared kind prefixes warn.
|
|
36
36
|
|
|
37
|
+
The starter vocabulary is `standard` (shared guidance, each rule an
|
|
38
|
+
Obligation or a replaceable Default), `foundation` (the brand's load-bearing
|
|
39
|
+
decisions), and `context` (what bends in a named situation). A package may
|
|
40
|
+
declare any vocabulary; the glossary is the only kind authority.
|
|
41
|
+
|
|
37
42
|
## Nodes
|
|
38
43
|
|
|
39
44
|
```markdown
|
|
@@ -38,9 +38,9 @@ Report first:
|
|
|
38
38
|
| --- | --- | --- | --- |
|
|
39
39
|
| Retrieval | strong / weak | `for` payloads, ids, cover | sharpen `for` payloads or move universal guidance to the cover |
|
|
40
40
|
| Concreteness | strong / thin | materials, fenced examples, Skeletons | add concrete locators, examples, or opening structures |
|
|
41
|
-
|
|
|
41
|
+
| Replacements | present / missing / vague | `Never` sections, `standard.model-defaults`, review packet | write not-X-instead-Y replacements and material locators |
|
|
42
42
|
| Consistency | clean / conflicting | guidance vs concrete material | update or remove stale material |
|
|
43
|
-
| Stance | present / missing | cover, `
|
|
43
|
+
| Stance | present / missing | cover, `foundation.*` | write forced-choice foundations |
|
|
44
44
|
| Materials | present / missing | `materials`, inspect-pointers | point at real assets/components/tokens |
|
|
45
45
|
| Patterns | bound-open / loose / missing | `pattern.*`, Skeletons | state applies / bound / open and add a Skeleton when opening structure matters |
|
|
46
46
|
| Checks | covered / partial / missing | checks/, review packet | add checks for high-risk invariants |
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@design-intelligence/ghost",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.31.1",
|
|
4
4
|
"description": "ghost CLI for portable .ghost/ packages of brand guidance your agent reads before it builds, with advisory review after",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"author": "Block, Inc.",
|
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
for: Any work applying this brand's signature.
|
|
3
|
-
---
|
|
4
|
-
|
|
5
|
-
These are the near-misses of Vessel's own signature: outputs that got close
|
|
6
|
-
enough to cite the brand and still missed it. Each reject names its
|
|
7
|
-
replacement. When a tell fires, the fix direction is always toward the
|
|
8
|
-
token, the role, or deletion — never toward adding a compensating style on
|
|
9
|
-
top of the miss.
|
|
10
|
-
|
|
11
|
-
Reject rectangular buttons. A rectangular button is not a variant; it is a
|
|
12
|
-
different design system → controls take `--radius-control`, the pill.
|
|
13
|
-
|
|
14
|
-
Reject swapped radius roles: the surface radius on a control, the pill on a
|
|
15
|
-
surface, or 20px cells in a data table → `--radius-control` on what you
|
|
16
|
-
click, `--radius-surface` on what contains, small radius on data cells.
|
|
17
|
-
|
|
18
|
-
Reject expression hues on interactive controls, an invented sixth hue, or a
|
|
19
|
-
tinted gray posing as monochrome → the five named expression hues at their
|
|
20
|
-
register's volume, and a true gray spine. An invented hue is not a bolder
|
|
21
|
-
Vessel; it is a different brand.
|
|
22
|
-
|
|
23
|
-
Reject custom shadows that sit near a tier → the exact tier — card, popover,
|
|
24
|
-
or modal — chosen by interaction importance.
|
|
25
|
-
|
|
26
|
-
Reject borrowing `--shadow-btn` for layout → component shadows belong to the
|
|
27
|
-
primitives that own them; layout elevation comes from the three tiers.
|
|
28
|
-
|
|
29
|
-
Reject editorial display type in product UI, and product type timidity in
|
|
30
|
-
editorial → each register keeps its own vocabulary; a modal title is not a
|
|
31
|
-
poster, and a hero at product scale reads as timid.
|
|
32
|
-
|
|
33
|
-
Reject borders around assistant text → the assistant speaks as plain text on
|
|
34
|
-
the page surface; use space, tone, and type hierarchy instead.
|
|
35
|
-
|
|
36
|
-
Fidelity note: pills and fluid clamp display headings are medians Vessel
|
|
37
|
-
deliberately shares — their presence is fidelity, not drift. Convergence is
|
|
38
|
-
not the crime; surrendering the choice is.
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
for: Choosing or applying color.
|
|
3
|
-
materials:
|
|
4
|
-
- materials/tokens.css
|
|
5
|
-
---
|
|
6
|
-
|
|
7
|
-
The token file is the source of truth. An agent may combine tokens, but it
|
|
8
|
-
may not author around them. Raw color values are implementation detail, never
|
|
9
|
-
product language.
|
|
10
|
-
|
|
11
|
-
Author with semantic roles: `background`, `foreground`, `card`, `popover`,
|
|
12
|
-
`primary`, `secondary`, `muted`, `border`, `input`, `ring`, and the status
|
|
13
|
-
roles. If a container needs a color, it first needs a role.
|
|
14
|
-
|
|
15
|
-
The status roles — destructive, success, warning, info — exist only when
|
|
16
|
-
meaning demands them. Destructive means destructive or error. Success means
|
|
17
|
-
success. Warning means warning. Info means information. None of them are
|
|
18
|
-
brand accents, and they never moonlight as atmosphere, in any register.
|
|
19
|
-
|
|
20
|
-
One view should not perform a color palette. If a status color is present,
|
|
21
|
-
let the rest of the view stay on the base roles. Richness beyond this is
|
|
22
|
-
register-gated: a closed expression set (`--expression-*`) exists, but its
|
|
23
|
-
size, members, and volume ladder are a brand answer — see the palette
|
|
24
|
-
signature — and each register caps how loud they may be.
|
|
25
|
-
|
|
26
|
-
The constant that holds across every register: expression never touches what
|
|
27
|
-
you click. Buttons, inputs, and links stay on the base roles everywhere. A
|
|
28
|
-
colored control is a different design system.
|
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
for: Any AI thread, agent console, review assistant, or prompt composer.
|
|
3
|
-
materials:
|
|
4
|
-
- materials/examples/composition.conversation.html
|
|
5
|
-
---
|
|
6
|
-
|
|
7
|
-
Conversation UI is not chat cosplay. The assistant speaks on the page surface
|
|
8
|
-
as plain text: no bubble, no border, no fill.
|
|
9
|
-
|
|
10
|
-
User turns are compact muted surfaces aligned right. They mark authorship
|
|
11
|
-
without turning the thread into alternating balloons.
|
|
12
|
-
|
|
13
|
-
Assistant hierarchy comes from prose, spacing, and type. Wrapping assistant
|
|
14
|
-
messages in cards makes the system look defensive and wastes density.
|
|
15
|
-
|
|
16
|
-
Tool calls are operational evidence. Collapse them to a labeled one-line
|
|
17
|
-
summary with status. Expand only when the user asks for detail, then show
|
|
18
|
-
mono content inside the disclosed area.
|
|
19
|
-
|
|
20
|
-
The prompt input is one bordered surface. The textarea region stays empty of
|
|
21
|
-
controls so writing remains the focus. Attachments, model choices, secondary
|
|
22
|
-
tools, and send live in a single row below it.
|
|
23
|
-
|
|
24
|
-
There is one primary send action. Stop and send are mutually exclusive states
|
|
25
|
-
of the same action area, not two competing primary buttons.
|
|
26
|
-
|
|
27
|
-
Use the conversation reference when building any AI thread, agent console,
|
|
28
|
-
review assistant, or prompt composer. It carries the grammar that agents most
|
|
29
|
-
often get wrong.
|
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
for: The final pass over any composition, or whenever a view feels crowded, busy, or dressed up.
|
|
3
|
-
---
|
|
4
|
-
|
|
5
|
-
Restraint is not a mood; it is a test every element has to pass. Before a
|
|
6
|
-
view ships, run the pass: each label, divider, icon, caption, and helper
|
|
7
|
-
line must name what breaks if it is removed. If nothing breaks, delete it.
|
|
8
|
-
Convention is not a reason — "forms usually have this" keeps nothing.
|
|
9
|
-
|
|
10
|
-
The test has a direction. When a view is crowded, or two elements compete
|
|
11
|
-
for attention, the fix is always demotion or deletion — never adding
|
|
12
|
-
emphasis to the loser. Raising the volume of one element to beat another
|
|
13
|
-
starts an arms race the composition always loses; removing the weaker claim
|
|
14
|
-
ends it.
|
|
15
|
-
|
|
16
|
-
Some deletions we have already made, permanently: no decorative dividers
|
|
17
|
-
where a gap step states the relationship; no icons that restate their
|
|
18
|
-
adjacent label; no tooltips explaining obvious controls; no onboarding
|
|
19
|
-
chrome on routine views; no credibility costume — a small factual source or
|
|
20
|
-
timestamp line beats a dashboard of gauges.
|
|
21
|
-
|
|
22
|
-
A view also arrives settled. No skeleton loaders, no placeholder shimmer
|
|
23
|
-
promising content that is not there — a fake page is hedging rendered as UI.
|
|
24
|
-
While work is genuinely pending, show the smallest true statement (a quiet
|
|
25
|
-
loading state, per the motion doctrine's loop exception) and nothing else.
|
|
26
|
-
When content lands, it lands in its final position: no reflow, no staggered
|
|
27
|
-
construction, no element arriving late to shift its neighbors.
|
|
28
|
-
|
|
29
|
-
Do: a settings page whose every row survives the what-breaks question, with
|
|
30
|
-
one primary action and gaps doing the dividing. Never: the same page with
|
|
31
|
-
icon-per-row decoration, a divider under every group, a progress shimmer on
|
|
32
|
-
load, and a bolded second CTA competing for the eye.
|
|
33
|
-
|
|
34
|
-
After everything deletable is gone, whatever remains is unmistakably the
|
|
35
|
-
point.
|
|
@@ -1,56 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
for: Any view containing text or actions.
|
|
3
|
-
materials:
|
|
4
|
-
- materials/primitives.css
|
|
5
|
-
- materials/examples/composition.form.html
|
|
6
|
-
---
|
|
7
|
-
|
|
8
|
-
Hierarchy is a closed vocabulary, not a size slider. Every piece of text and
|
|
9
|
-
every control picks from a named set; anything outside the set is a broken
|
|
10
|
-
primitive, not a variant.
|
|
11
|
-
|
|
12
|
-
The text variants are exactly six: display, headline, title, body, label,
|
|
13
|
-
mono. Variant names are jobs, not decoration. Display leads a rare editorial
|
|
14
|
-
moment. Headline names a section. Title anchors a card, dialog, or compact
|
|
15
|
-
region. Body carries reading. Label names structure — category tags, field
|
|
16
|
-
labels, bylines, metadata, compact status. Mono carries code and machine
|
|
17
|
-
detail. Do not fake hierarchy with arbitrary font sizes; choose the tier that
|
|
18
|
-
matches the job, then use tone, weight, and spacing for the rest.
|
|
19
|
-
|
|
20
|
-
The tones are exactly seven: default, muted, inverse, success, warning, info,
|
|
21
|
-
destructive. Tone is part of the message. Default is the main reading plane.
|
|
22
|
-
Muted carries secondary information. Inverse is for dark or primary surfaces.
|
|
23
|
-
The four status tones appear only when the words have that state meaning.
|
|
24
|
-
Hierarchy starts with tone and weight before size — a secondary note usually
|
|
25
|
-
wants muted body or label, not a smaller custom font. If the prose needs
|
|
26
|
-
emphasis, improve the sentence before adding a style.
|
|
27
|
-
|
|
28
|
-
The control emphasis ladder is exactly five rungs: primary, secondary,
|
|
29
|
-
outline, ghost, link. At most one primary action per view is the rule
|
|
30
|
-
(`--primary-budget: 1`); everything else steps down the ladder. Primary is
|
|
31
|
-
for the action the screen exists to complete — if two buttons both look
|
|
32
|
-
primary, the hierarchy failed. And some views honestly earn none: a steady
|
|
33
|
-
status view or an open comparison has no action the screen exists to
|
|
34
|
-
complete, and promoting one anyway puts the system's thumb on the scale.
|
|
35
|
-
Zero is a valid spend.
|
|
36
|
-
Destructive is a meaning, not a rung: it is rare, it names the destructive
|
|
37
|
-
act directly, and it is never borrowed for urgency, emphasis, or brand heat.
|
|
38
|
-
|
|
39
|
-
Fields are quiet until they are active: hairline border, muted placeholder,
|
|
40
|
-
clear label, and a focused ring when the user engages. The focus ring is
|
|
41
|
-
guidance, not decoration. Errors state facts next to the field that caused
|
|
42
|
-
them — do not hide field errors in modals, toasts, or generic banners when
|
|
43
|
-
the user needs to fix one input.
|
|
44
|
-
|
|
45
|
-
Figures that will be compared or scanned — amounts, counts, dates in
|
|
46
|
-
columns, any metric — set in tabular numerals (`--numeric-tabular`), with
|
|
47
|
-
the unit tight to the number. Proportional figures in a data column wobble,
|
|
48
|
-
and a wobbling column reads as sloppy arithmetic. Mono already carries this
|
|
49
|
-
for machine detail; the rule extends to any numeric data in product UI.
|
|
50
|
-
|
|
51
|
-
Balanced text is for headings and compact statements. Do not balance long
|
|
52
|
-
body copy into jagged reading.
|
|
53
|
-
|
|
54
|
-
The form reference shows the intended decision order: stacked labels and
|
|
55
|
-
fields, compact helper text, one submit, secondary escape. Copy the decision
|
|
56
|
-
order before adjusting surface detail.
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
for: Any transition, animation, or hover treatment.
|
|
3
|
-
materials:
|
|
4
|
-
- materials/tokens.css
|
|
5
|
-
---
|
|
6
|
-
|
|
7
|
-
Motion is evidence of a state change. It confirms hover, press, reveal,
|
|
8
|
-
collapse, entrance, exit, and spatial movement. It does not entertain.
|
|
9
|
-
|
|
10
|
-
The entire vocabulary is three duration roles and one ease. Fast is for hover
|
|
11
|
-
and press. Normal is for reveals, fades, and small state changes. Slow is
|
|
12
|
-
reserved for spatial transitions where the user needs to understand movement.
|
|
13
|
-
Do not introduce novelty easings because a surface feels static; the ease's
|
|
14
|
-
character is a brand answer — see the temperature signature.
|
|
15
|
-
|
|
16
|
-
Nothing loops except explicit loading states. A spinner may continue because
|
|
17
|
-
work continues. Decorative pulsing, floating, glowing, and attention-seeking
|
|
18
|
-
keyframes are off-language.
|
|
19
|
-
|
|
20
|
-
Prefer opacity and small transform changes. If removing an animation does not
|
|
21
|
-
reduce comprehension, the animation was decoration.
|
|
22
|
-
|
|
23
|
-
Condition: marketing and editorial surfaces may stage entrances — scroll reveals and
|
|
24
|
-
section transitions are part of editorial rhythm, still built from the three
|
|
25
|
-
durations and the one ease. In product UI the same staging is decoration.
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
for: Laying out any view.
|
|
3
|
-
materials:
|
|
4
|
-
- materials/primitives.css
|
|
5
|
-
---
|
|
6
|
-
|
|
7
|
-
All layout is stacks. Rhythm comes from relationships between siblings, not
|
|
8
|
-
from isolated margins pasted onto whichever element was last touched.
|
|
9
|
-
|
|
10
|
-
The gap steps are exactly five: `--gap-xs`, `--gap-sm`, `--gap-md`,
|
|
11
|
-
`--gap-lg`, `--gap-xl`. Choose the gap that states the relationship. Do not
|
|
12
|
-
tune by single pixels to make a screenshot pass.
|
|
13
|
-
|
|
14
|
-
The default is column, medium gap, stretch alignment, start justification.
|
|
15
|
-
That is the ordinary reading rhythm.
|
|
16
|
-
|
|
17
|
-
Columns are for almost everything: forms, cards, message lists, modal bodies,
|
|
18
|
-
settings, empty states, and page sections. A column lets the user scan.
|
|
19
|
-
|
|
20
|
-
Rows are conditional. Use them for controls, metadata lines, compact status,
|
|
21
|
-
and paired label/value moments. If a row starts wrapping awkwardly, it
|
|
22
|
-
probably wanted to be a column.
|
|
23
|
-
|
|
24
|
-
Ad-hoc margins between siblings are forbidden because they hide the rhythm.
|
|
25
|
-
When spacing feels wrong, change the stack gap or split the stack.
|
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
for: Any card, popover, modal, dialog, scrim, or bordered container.
|
|
3
|
-
materials:
|
|
4
|
-
- materials/primitives.css
|
|
5
|
-
- materials/examples/composition.overlay.html
|
|
6
|
-
---
|
|
7
|
-
|
|
8
|
-
Surface is the only way an element gets a background, border, radius, or
|
|
9
|
-
shadow. If a container needs visual treatment, it first needs a surface role.
|
|
10
|
-
|
|
11
|
-
The vocabulary is closed: role, padding, radius, border, and elevation. These
|
|
12
|
-
axes create enough range for page flow, cards, popovers, muted blocks,
|
|
13
|
-
accents, and dark moments without inventing one-off boxes.
|
|
14
|
-
|
|
15
|
-
The default surface is flat: no border, no shadow. We do not outline
|
|
16
|
-
everything to prove layout exists.
|
|
17
|
-
|
|
18
|
-
The elevation tiers are exactly three: card, popover, modal. Elevation
|
|
19
|
-
implies hierarchy — a card sits in the document flow, a popover floats above
|
|
20
|
-
the flow, a modal interrupts the task. Pick the tier that matches the
|
|
21
|
-
interaction; never write a custom shadow because the composition feels flat,
|
|
22
|
-
and never pair a low tier with an interrupting role or give a routine card
|
|
23
|
-
modal gravity. Component shadows belong to the primitives that own them;
|
|
24
|
-
never borrow them for layout.
|
|
25
|
-
|
|
26
|
-
Borders are structural, especially for inputs and overlays. They are not
|
|
27
|
-
decorative frames around ordinary text — reject borders as decoration,
|
|
28
|
-
especially around assistant text, and use space, tone, and type hierarchy
|
|
29
|
-
instead.
|
|
30
|
-
|
|
31
|
-
The overlay reference shows the interrupting end of the system: background
|
|
32
|
-
scrim, modal radius, modal shadow, compact header, clear footer. Copy its
|
|
33
|
-
hierarchy when a user must stop and decide.
|
|
@@ -1,39 +0,0 @@
|
|
|
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
|
-
Data density inverts the settings-page rhythm. Operators need scan speed
|
|
12
|
-
before they need breathing room.
|
|
13
|
-
|
|
14
|
-
Use the two smallest gap steps (`--gap-xs`, `--gap-sm`) where forms use the
|
|
15
|
-
medium step. Tight adjacency is meaning when rows compare against rows.
|
|
16
|
-
|
|
17
|
-
Numerals are mono so columns align. A ragged amount column is a broken
|
|
18
|
-
instrument.
|
|
19
|
-
|
|
20
|
-
Hierarchy is muted-first. Data is the default plane, labels are muted, and
|
|
21
|
-
emphasis is rare enough to stay useful.
|
|
22
|
-
|
|
23
|
-
Data surfaces take the small radius. A surface-radius table cell is costume —
|
|
24
|
-
the signature radius (see signature.shape) belongs on cards, not cells.
|
|
25
|
-
|
|
26
|
-
Status is a text label with at most one functional color family per view.
|
|
27
|
-
|
|
28
|
-
Charts inside a console follow the product carve-out from the palette
|
|
29
|
-
signature: expression hues live inside the plot area only. Outside the plot,
|
|
30
|
-
the one-status-hue cap holds — chart color never leaks into rows, badges, or
|
|
31
|
-
headers. More status color turns monitoring into confetti.
|
|
32
|
-
|
|
33
|
-
No zebra striping. Hairline borders carry rows with less noise and more
|
|
34
|
-
trust.
|
|
35
|
-
|
|
36
|
-
Hover confirmation uses the fast duration. It should acknowledge targeting,
|
|
37
|
-
not animate the table.
|
|
38
|
-
|
|
39
|
-
Generous whitespace is drift here. Wasted density makes operators scroll.
|
|
@@ -1,41 +0,0 @@
|
|
|
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
|
-
Editorial surfaces invert the product type rules. Display scale is not an
|
|
12
|
-
indulgence here; it is the job.
|
|
13
|
-
|
|
14
|
-
Use the `--heading-display-*` tokens — size, line height, and weight — when
|
|
15
|
-
the words are the composition. The display tier belongs to this register (see
|
|
16
|
-
signature.type for the scale's character).
|
|
17
|
-
|
|
18
|
-
Section rhythm uses `--section-padding-vertical`, not a product stack
|
|
19
|
-
stretched until it looks important.
|
|
20
|
-
|
|
21
|
-
The sanctioned dramatic moment is the full-bleed dark section. Use the
|
|
22
|
-
`--surface-dark-*` family and let contrast carry the scene.
|
|
23
|
-
|
|
24
|
-
Pull quotes are visual punctuation for longform. They interrupt reading with
|
|
25
|
-
judgment, not decoration.
|
|
26
|
-
|
|
27
|
-
The tracked uppercase label is the kicker grammar. It gives the page a hard
|
|
28
|
-
editorial edge before the headline lands.
|
|
29
|
-
|
|
30
|
-
Monochrome remains the spine, but editorial is the loud end of the expression
|
|
31
|
-
ladder (see signature.palette): up to two expression hues per page as
|
|
32
|
-
atmosphere — a tinted dark section, a colored pull-quote accent, a duotone
|
|
33
|
-
image moment. Commit to few colors at scale; variety is where expression
|
|
34
|
-
collapses into decoration.
|
|
35
|
-
|
|
36
|
-
There is one primary action per page, and it keeps the control radius from
|
|
37
|
-
signature.shape. Editorial confidence does not excuse competing calls to
|
|
38
|
-
action.
|
|
39
|
-
|
|
40
|
-
A hero built at product scale reads as timid. Timidity is drift here, exactly
|
|
41
|
-
as spectacle is drift in product UI.
|