@fugood/bricks-ctor 2.24.10 → 2.24.12

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/compile/index.ts CHANGED
@@ -720,6 +720,17 @@ const compileAutomation = (automationMap: AutomationMap) =>
720
720
  }),
721
721
  )
722
722
 
723
+ const buildDefaultExpandedState = (subspace: Subspace) => ({
724
+ brick: false,
725
+ generator: true,
726
+ canvas: (subspace.canvases || []).reduce((acc, canvas) => {
727
+ if (canvas?.id) acc[canvas.id] = false
728
+ return acc
729
+ }, {}),
730
+ property_bank: false,
731
+ property_bank_calc: true,
732
+ })
733
+
723
734
  export const compile = async (app: Application) => {
724
735
  await new Promise((resolve) => setImmediate(resolve, 0))
725
736
  const timestamp = Date.now()
@@ -800,7 +811,7 @@ export const compile = async (app: Application) => {
800
811
  property_bank: !subspace.unexpanded.data,
801
812
  property_bank_calc: !subspace.unexpanded.dataCalculation,
802
813
  }
803
- : undefined,
814
+ : buildDefaultExpandedState(subspace),
804
815
  layout: {
805
816
  width: subspace.layout?.width,
806
817
  height: subspace.layout?.height,
package/package.json CHANGED
@@ -1,13 +1,13 @@
1
1
  {
2
2
  "name": "@fugood/bricks-ctor",
3
- "version": "2.24.10",
3
+ "version": "2.24.12",
4
4
  "main": "index.ts",
5
5
  "scripts": {
6
6
  "typecheck": "tsc --noEmit",
7
7
  "build": "bun scripts/build.js"
8
8
  },
9
9
  "dependencies": {
10
- "@fugood/bricks-cli": "^2.24.10",
10
+ "@fugood/bricks-cli": "^2.24.12",
11
11
  "@huggingface/gguf": "^0.3.2",
12
12
  "@iarna/toml": "^3.0.0",
13
13
  "@modelcontextprotocol/sdk": "^1.15.0",
@@ -26,6 +26,7 @@ This skill covers advanced BRICKS features not in the main project instructions.
26
26
 
27
27
  - **Complex flows**: See [Architecture Patterns](references/architecture-patterns.md) for decomposing multi-step workflows
28
28
  - **Multi-device**: See [Local Sync](references/local-sync.md) for LAN coordination
29
+ - **Fonts**: See [Font Families](references/fonts.md) for supported `fontFamily` names, native fallback behavior, and Google Font fallback guidance
29
30
  - **Cloud data**: See [Remote Data Bank](references/remote-data-bank.md) for sync and API access
30
31
  - **Media assets**: See [Media Flow](references/media-flow.md) for centralized asset management
31
32
  - **AI offloading**: See [Buttress](references/buttress.md) for GPU server delegation
@@ -0,0 +1,322 @@
1
+ # Font Families
2
+
3
+ Use this when choosing or answering questions about `fontFamily` for Text, TextInput, RichText, or nested Items text Bricks.
4
+
5
+ ## Runtime Rules
6
+
7
+ - Use exact family names from the target platform list; BRICKS matches comma-separated fallbacks left-to-right on native platforms.
8
+ - Prefer cross-platform stacks such as `Arial, sans-serif`, `Helvetica, Roboto, sans-serif`, `Times New Roman, serif`, or `Courier New, monospace` when the same project runs on iOS/tvOS and Android.
9
+ - Android supports generic system families plus `Roboto`; iOS/tvOS use the larger built-in Apple font set below.
10
+ - Web keeps the supplied CSS font-family value. Native ignores unsupported names unless a dynamically loaded or Google Font preload resolves them.
11
+ - Google Fonts can be used by setting a Google font family and letting the config preload path materialize it; keep a platform fallback after it, for example `Roboto Mono, monospace`.
12
+
13
+ ## Android
14
+
15
+ - normal
16
+ - notoserif
17
+ - sans-serif
18
+ - sans-serif-light
19
+ - sans-serif-thin
20
+ - sans-serif-condensed
21
+ - sans-serif-medium
22
+ - serif
23
+ - Roboto
24
+ - monospace
25
+
26
+ ## iOS/tvOS
27
+
28
+ - San Francisco
29
+ - Academy Engraved LET
30
+ - AcademyEngravedLetPlain
31
+ - Al Nile
32
+ - AlNile-Bold
33
+ - American Typewriter
34
+ - AmericanTypewriter-Bold
35
+ - AmericanTypewriter-Condensed
36
+ - AmericanTypewriter-CondensedBold
37
+ - AmericanTypewriter-CondensedLight
38
+ - AmericanTypewriter-Light
39
+ - Apple Color Emoji
40
+ - Apple SD Gothic Neo
41
+ - AppleColorEmoji
42
+ - AppleSDGothicNeo-Bold
43
+ - AppleSDGothicNeo-Light
44
+ - AppleSDGothicNeo-Medium
45
+ - AppleSDGothicNeo-Regular
46
+ - AppleSDGothicNeo-SemiBold
47
+ - AppleSDGothicNeo-Thin
48
+ - AppleSDGothicNeo-UltraLight
49
+ - Arial
50
+ - Arial Hebrew
51
+ - Arial Rounded MT Bold
52
+ - Arial-BoldItalicMT
53
+ - Arial-BoldMT
54
+ - Arial-ItalicMT
55
+ - ArialHebrew
56
+ - ArialHebrew-Bold
57
+ - ArialHebrew-Light
58
+ - ArialMT
59
+ - ArialRoundedMTBold
60
+ - Avenir
61
+ - Avenir Next
62
+ - Avenir Next Condensed
63
+ - Avenir-Black
64
+ - Avenir-BlackOblique
65
+ - Avenir-Book
66
+ - Avenir-BookOblique
67
+ - Avenir-Heavy
68
+ - Avenir-HeavyOblique
69
+ - Avenir-Light
70
+ - Avenir-LightOblique
71
+ - Avenir-Medium
72
+ - Avenir-MediumOblique
73
+ - Avenir-Oblique
74
+ - Avenir-Roman
75
+ - AvenirNext-Bold
76
+ - AvenirNext-BoldItalic
77
+ - AvenirNext-DemiBold
78
+ - AvenirNext-DemiBoldItalic
79
+ - AvenirNext-Heavy
80
+ - AvenirNext-HeavyItalic
81
+ - AvenirNext-Italic
82
+ - AvenirNext-Medium
83
+ - AvenirNext-MediumItalic
84
+ - AvenirNext-Regular
85
+ - AvenirNext-UltraLight
86
+ - AvenirNext-UltraLightItalic
87
+ - AvenirNextCondensed-Bold
88
+ - AvenirNextCondensed-BoldItalic
89
+ - AvenirNextCondensed-DemiBold
90
+ - AvenirNextCondensed-DemiBoldItalic
91
+ - AvenirNextCondensed-Heavy
92
+ - AvenirNextCondensed-HeavyItalic
93
+ - AvenirNextCondensed-Italic
94
+ - AvenirNextCondensed-Medium
95
+ - AvenirNextCondensed-MediumItalic
96
+ - AvenirNextCondensed-Regular
97
+ - AvenirNextCondensed-UltraLight
98
+ - AvenirNextCondensed-UltraLightItalic
99
+ - Bangla Sangam MN
100
+ - Baskerville
101
+ - Baskerville-Bold
102
+ - Baskerville-BoldItalic
103
+ - Baskerville-Italic
104
+ - Baskerville-SemiBold
105
+ - Baskerville-SemiBoldItalic
106
+ - Bodoni 72
107
+ - Bodoni 72 Oldstyle
108
+ - Bodoni 72 Smallcaps
109
+ - Bodoni Ornaments
110
+ - BodoniOrnamentsITCTT
111
+ - BodoniSvtyTwoITCTT-Bold
112
+ - BodoniSvtyTwoITCTT-Book
113
+ - BodoniSvtyTwoITCTT-BookIta
114
+ - BodoniSvtyTwoOSITCTT-Bold
115
+ - BodoniSvtyTwoOSITCTT-Book
116
+ - BodoniSvtyTwoSCITCTT-Book
117
+ - Bradley Hand
118
+ - BradleyHandITCTT-Bold
119
+ - Chalkboard SE
120
+ - ChalkboardSE-Bold
121
+ - ChalkboardSE-Light
122
+ - ChalkboardSE-Regular
123
+ - Chalkduster
124
+ - Cochin
125
+ - Cochin-Bold
126
+ - Cochin-BoldItalic
127
+ - Cochin-Italic
128
+ - Copperplate
129
+ - Copperplate-Bold
130
+ - Copperplate-Light
131
+ - Courier
132
+ - Courier New
133
+ - Courier-Bold
134
+ - Courier-BoldOblique
135
+ - Courier-Oblique
136
+ - CourierNewPS-BoldItalicMT
137
+ - CourierNewPS-BoldMT
138
+ - CourierNewPS-ItalicMT
139
+ - CourierNewPSMT
140
+ - Damascus
141
+ - DamascusBold
142
+ - DamascusLight
143
+ - DamascusMedium
144
+ - DamascusSemiBold
145
+ - Devanagari Sangam MN
146
+ - DevanagariSangamMN
147
+ - DevanagariSangamMN-Bold
148
+ - Didot
149
+ - Didot-Bold
150
+ - Didot-Italic
151
+ - DiwanMishafi
152
+ - Euphemia UCAS
153
+ - EuphemiaUCAS-Bold
154
+ - EuphemiaUCAS-Italic
155
+ - Farah
156
+ - Futura
157
+ - Futura-CondensedExtraBold
158
+ - Futura-CondensedMedium
159
+ - Futura-Medium
160
+ - Futura-MediumItalic
161
+ - Geeza Pro
162
+ - GeezaPro-Bold
163
+ - Georgia
164
+ - Georgia-Bold
165
+ - Georgia-BoldItalic
166
+ - Georgia-Italic
167
+ - Gill Sans
168
+ - GillSans-Bold
169
+ - GillSans-BoldItalic
170
+ - GillSans-Italic
171
+ - GillSans-Light
172
+ - GillSans-LightItalic
173
+ - GillSans-SemiBold
174
+ - GillSans-SemiBoldItalic
175
+ - GillSans-UltraBold
176
+ - Gujarati Sangam MN
177
+ - GujaratiSangamMN
178
+ - GujaratiSangamMN-Bold
179
+ - Gurmukhi MN
180
+ - GurmukhiMN-Bold
181
+ - Heiti SC
182
+ - Heiti TC
183
+ - Helvetica
184
+ - Helvetica Neue
185
+ - Helvetica-Bold
186
+ - Helvetica-BoldOblique
187
+ - Helvetica-Light
188
+ - Helvetica-LightOblique
189
+ - Helvetica-Oblique
190
+ - HelveticaNeue-Bold
191
+ - HelveticaNeue-BoldItalic
192
+ - HelveticaNeue-CondensedBlack
193
+ - HelveticaNeue-CondensedBold
194
+ - HelveticaNeue-Italic
195
+ - HelveticaNeue-Light
196
+ - HelveticaNeue-LightItalic
197
+ - HelveticaNeue-Medium
198
+ - HelveticaNeue-MediumItalic
199
+ - HelveticaNeue-Thin
200
+ - HelveticaNeue-ThinItalic
201
+ - HelveticaNeue-UltraLight
202
+ - HelveticaNeue-UltraLightItalic
203
+ - Hiragino Mincho ProN
204
+ - Hiragino Sans
205
+ - HiraginoSans-W3
206
+ - HiraginoSans-W6
207
+ - HiraMinProN-W3
208
+ - HiraMinProN-W6
209
+ - Hoefler Text
210
+ - HoeflerText-Black
211
+ - HoeflerText-BlackItalic
212
+ - HoeflerText-Italic
213
+ - HoeflerText-Regular
214
+ - Iowan Old Style
215
+ - IowanOldStyle-Bold
216
+ - IowanOldStyle-BoldItalic
217
+ - IowanOldStyle-Italic
218
+ - IowanOldStyle-Roman
219
+ - Kailasa
220
+ - Kailasa-Bold
221
+ - Kannada Sangam MN
222
+ - KannadaSangamMN
223
+ - KannadaSangamMN-Bold
224
+ - Khmer Sangam MN
225
+ - Kohinoor Bangla
226
+ - Kohinoor Devanagari
227
+ - Kohinoor Telugu
228
+ - KohinoorBangla-Light
229
+ - KohinoorBangla-Regular
230
+ - KohinoorBangla-Semibold
231
+ - KohinoorDevanagari-Light
232
+ - KohinoorDevanagari-Regular
233
+ - KohinoorDevanagari-Semibold
234
+ - KohinoorTelugu-Light
235
+ - KohinoorTelugu-Medium
236
+ - KohinoorTelugu-Regular
237
+ - Lao Sangam MN
238
+ - Malayalam Sangam MN
239
+ - MalayalamSangamMN
240
+ - MalayalamSangamMN-Bold
241
+ - Marker Felt
242
+ - MarkerFelt-Thin
243
+ - MarkerFelt-Wide
244
+ - Menlo
245
+ - Menlo-Bold
246
+ - Menlo-BoldItalic
247
+ - Menlo-Italic
248
+ - Menlo-Regular
249
+ - Mishafi
250
+ - Noteworthy
251
+ - Noteworthy-Bold
252
+ - Noteworthy-Light
253
+ - Optima
254
+ - Optima-Bold
255
+ - Optima-BoldItalic
256
+ - Optima-ExtraBlack
257
+ - Optima-Italic
258
+ - Optima-Regular
259
+ - Oriya Sangam MN
260
+ - OriyaSangamMN
261
+ - OriyaSangamMN-Bold
262
+ - Palatino
263
+ - Palatino-Bold
264
+ - Palatino-BoldItalic
265
+ - Palatino-Italic
266
+ - Palatino-Roman
267
+ - Papyrus
268
+ - Papyrus-Condensed
269
+ - Party LET
270
+ - PartyLetPlain
271
+ - PingFang HK
272
+ - PingFang SC
273
+ - PingFang TC
274
+ - PingFangHK-Light
275
+ - PingFangHK-Medium
276
+ - PingFangHK-Regular
277
+ - PingFangHK-Semibold
278
+ - PingFangHK-Thin
279
+ - PingFangHK-Ultralight
280
+ - PingFangSC-Light
281
+ - PingFangSC-Medium
282
+ - PingFangSC-Regular
283
+ - PingFangSC-Semibold
284
+ - PingFangSC-Thin
285
+ - PingFangSC-Ultralight
286
+ - PingFangTC-Light
287
+ - PingFangTC-Medium
288
+ - PingFangTC-Regular
289
+ - PingFangTC-Semibold
290
+ - PingFangTC-Thin
291
+ - PingFangTC-Ultralight
292
+ - Savoye LET
293
+ - SavoyeLetPlain
294
+ - Sinhala Sangam MN
295
+ - SinhalaSangamMN
296
+ - SinhalaSangamMN-Bold
297
+ - Snell Roundhand
298
+ - SnellRoundhand-Black
299
+ - SnellRoundhand-Bold
300
+ - Symbol
301
+ - Tamil Sangam MN
302
+ - TamilSangamMN-Bold
303
+ - Telugu Sangam MN
304
+ - Thonburi
305
+ - Thonburi-Bold
306
+ - Thonburi-Light
307
+ - Times New Roman
308
+ - TimesNewRomanPS-BoldItalicMT
309
+ - TimesNewRomanPS-BoldMT
310
+ - TimesNewRomanPS-ItalicMT
311
+ - TimesNewRomanPSMT
312
+ - Trebuchet MS
313
+ - Trebuchet-BoldItalic
314
+ - TrebuchetMS-Bold
315
+ - TrebuchetMS-Italic
316
+ - Verdana
317
+ - Verdana-Bold
318
+ - Verdana-BoldItalic
319
+ - Verdana-Italic
320
+ - Zapf Dingbats
321
+ - ZapfDingbatsITC
322
+ - Zapfino
@@ -31,6 +31,7 @@ const mediaListGenerator: GeneratorMediaFlow = {
31
31
  description: '',
32
32
  property: {
33
33
  boxId: 'promo-box-id',
34
+ passcode: 'box-read-only-passcode',
34
35
  },
35
36
  outlets: {
36
37
  files: () => promoFilesData, // Array of file objects
@@ -40,6 +41,12 @@ const mediaListGenerator: GeneratorMediaFlow = {
40
41
  }
41
42
  ```
42
43
 
44
+ When hand-writing `GENERATOR_MEDIA_FLOW`, do not use a bare `boxId`. The editor
45
+ flow creates the required authorization, but manual config must include either
46
+ `property.passcode` from a Media Box passcode or `property.accessToken`.
47
+ Without one, devices cannot read the box and the generator will report an
48
+ authorization error.
49
+
43
50
  ## Property Kinds for Media
44
51
 
45
52
  Link Data properties to Media Flow for asset selection:
@@ -26,6 +26,15 @@ What does **not** count as done:
26
26
 
27
27
  If any item is unmet, the work is mid-iteration. Say so explicitly to the user; offer a precise list of what remains.
28
28
 
29
+ ## Debug loop discipline
30
+
31
+ Before cycling on a runtime or Automation bug, establish what you can observe. A green or red Automation alone is often not enough to explain a race or branch miss.
32
+
33
+ - Use one repeatable probe at a time: DevTools state/storage/runtime reads, network/console output, Automation screenshots, or a targeted screenshot after a known event.
34
+ - If branch execution or race timing is unclear, add the smallest temporary log/trace point in the relevant data-calculation script, event handler, or generator path, then compile and rerun the same probe.
35
+ - Do not bounce between CLI, DevTools, and Automation without a hypothesis. State what signal will prove or disprove the next fix before changing code again.
36
+ - Remove temporary traces before declaring done, unless the user asked for persistent diagnostics or the trace is intentionally part of the fix.
37
+
29
38
  ## Path 1 — Electron preview (no device required)
30
39
 
31
40
  The default loop. Always available; deterministic; no device wear; safe for side-effecting flows because nothing real fires.
@@ -2,7 +2,7 @@
2
2
  name: bricks-design
3
3
  description: >-
4
4
  Visual design discipline for Applications and Subspaces — type, palette, asset
5
- acquisition, design language, system commitment, visual rhythm, brand. TRIGGER
5
+ acquisition, design language, DESIGN.md system, visual rhythm, brand. TRIGGER
6
6
  for visual / aesthetic / system / style / brand-asset work even when named in
7
7
  product terms — slideshow, pitch deck, explainer, kiosk, signage, menu board,
8
8
  lobby, wayfinding, retail, museum, transit; translate or rebuild from Figma /
@@ -40,7 +40,8 @@ How to inspect, by source type:
40
40
  - **Website / docs site URL** — drive a browser automation tool (browser-MCP, Playwright/Puppeteer-style MCP server, `agent-browser`-equivalent skill, or any host-provided browser tool). Visit the home page, every primary navigation entry, every page the user explicitly named, and every page that looks like it carries the brand's visual signature (hero, product, gallery, customers). Capture a full-page screenshot of each. Then read each screenshot back via the host's image-reading capability so you actually *see* it. If no browser automation is available, ask the user for screenshots before proceeding.
41
41
  - **Figma / design-tool link** — use a Figma-MCP / design-tool MCP if available to enumerate every frame and image-export each; otherwise ask the user for PNG exports of every frame. Inspect each image.
42
42
  - **HTML project on disk** — serve and screenshot every route via a browser tool, the same way as a public URL. Don't infer visuals from the source HTML/CSS.
43
- - **PDF / brand book / slide deck** — read every page via the host's PDF-reading capability (page-by-page if the document is long). Do not summarize from a text extraction.
43
+ - **PDF / brand book / slide deck** — read every page via the host's PDF-reading capability (page-by-page if the document is long). Do not summarize from a text extraction. If the host only exposes a cover preview or has no PDF capability, use an installed PDF skill when available. If no PDF skill or local PDF tool is installed and you cannot inspect the PDF fully, stop and respond in chat with the limitation instead of designing from partial evidence. Never proceed from only page 1.
44
+ - **Large rendered PDF pages** — do not hand the vision tool 4-13 MB page PNGs and call the PDF unreadable. Downsample to inspection-sized JPEG/PNG previews, split long PDFs into page batches, and keep a page coverage checklist so every page is either inspected or explicitly marked inaccessible.
44
45
  - **Local images / screenshots** — read each one via the image-reading tool.
45
46
  - **Video walkthrough** — ask the user to provide key-frame screenshots, or to describe each state explicitly. Do not claim to "watch" a video you cannot actually frame-step.
46
47
 
@@ -55,7 +56,7 @@ Pass-based delivery, not sprint-to-finished. Full discipline in [`references/wor
55
56
  - Branded brief → [`references/when-the-brief-is-branded.md`](references/when-the-brief-is-branded.md) (Media Flow protocol).
56
57
  - Figma / HTML / screenshot input → [`references/translating-inputs.md`](references/translating-inputs.md).
57
58
  - Presentation / slideshow / intro / explainer / storyboard → [`references/presentation-and-slideshow.md`](references/presentation-and-slideshow.md) (Canvas-graph shape decision, hero continuity).
58
- 2. **Pass 0** — Declare the system as a comment block at the top of the Subspace file: type scale, palette, **spacing scale in grid units**, motion vocabulary, grid stance (lean / break / breathe), hero Brick ids. The grid substrate is given by the runtime (Truth #6); the design decisions sit on top.
59
+ 2. **Pass 0** — Write the project's [`DESIGN.md`](references/design-md.md): named tokens in the frontmatter (type scale, palette, **spacing scale in grid units**, motion vocabulary, grid stance, hero Brick ids) plus Deployment Context and the Visual Theme section. The grid substrate is given by the runtime (Truth #6); the design decisions sit on top. The Subspace file carries only a one-line pointer to DESIGN.md; every Brick cites its tokens by name.
59
60
  3. **Pass 1 — Showcase Canvas lockdown.** Build one Canvas fully lit, verify, show the user. This is the cheapest moment to redirect; do not build the full Canvas graph before sign-off.
60
61
  4. **Pass 2** — Build out the full Canvas graph with hero ids shared across Canvases (Truth #3 as narrative principle). Mid-review checkpoint partway through.
61
62
  5. **Pass 3** — Polish: spacing-scale adherence, density rhythm, Standby Transition vocabulary consistent, multilingual fits.
@@ -79,7 +80,7 @@ The load-bearing laws. Each is unpacked in [`references/architecture-truths.md`]
79
80
 
80
81
  ## Commit to a design language
81
82
 
82
- A BRICKS Application that doesn't commit to a design language reads as generic regardless of how well it runs. After Direction Advisor (or directly, when the brief is concrete enough), pick a visual language from [`references/design-languages.md`](references/design-languages.md) — Swiss Editorial / Kenya Hara emptiness / Field.io motion poetics / Brutalist web / Y2K futurist-retro / etc. — and write its system declaration as a comment block at the top of the Subspace file. Every subsequent choice cites the block; adding a value not in the block requires updating the block first. That's what makes the system structural rather than aspirational.
83
+ A BRICKS Application that doesn't commit to a design language reads as generic regardless of how well it runs. After Direction Advisor (or directly, when the brief is concrete enough), pick a visual language from [`references/design-languages.md`](references/design-languages.md) — Swiss Editorial / Kenya Hara emptiness / Field.io motion poetics / Brutalist web / Y2K futurist-retro / etc. — and commit it as named tokens in the project's [`DESIGN.md`](references/design-md.md). Every subsequent choice cites a token by name; adding a value not already in the tokens requires adding the token first. That's what makes the system structural rather than aspirational.
83
84
 
84
85
  The commitment principle: when unsure, do *more* of what defines the chosen language, not less. A style executed at 30% reads as hesitant; at 80% it reads as deliberate. Soften signature moves and you've abandoned the language for nowhere.
85
86
 
@@ -98,9 +99,9 @@ Two reference files cover the second-order rules. Read them when the design is n
98
99
 
99
100
  ## Asset discipline
100
101
 
101
- Brand work succeeds or fails on assets, not on colors. Logo, product photography, UI screenshots, scene photography, and motion assets are first-class — colors and fonts are auxiliary. Acquire them through the protocol in [`references/when-the-brief-is-branded.md`](references/when-the-brief-is-branded.md): five steps, the 5-10-2-8 quality bar with five named scoring dimensions, three fallback paths per asset category, and structural enforcement that Bricks reference Media Flow Data via DataLink rather than embed, redraw, or skip.
102
+ Brand work succeeds or fails on assets, not on colors. Logo, product photography, UI screenshots, scene photography, and motion assets are first-class — colors and fonts are auxiliary. Acquire them through the protocol in [`references/when-the-brief-is-branded.md`](references/when-the-brief-is-branded.md): five steps, the 5-10-2-8 quality bar with five named scoring dimensions, three fallback paths per asset category, and structural enforcement that Bricks reference Media Flow Data via DataLink rather than embed, redraw, or skip. The acquired assets, scores, and bindings land in the **Assets & Brand** sections of [`DESIGN.md`](references/design-md.md) — one artifact, not a separate brand spec.
102
103
 
103
- When an asset category genuinely cannot be acquired and the user has no plan to provide one, the priority is: stop and ask (always for logo) → compose the host environment's image / motion generators (canvas-design / imagen / generative MCP), brand-reference-anchored, scored at the same bar → labeled placeholder with the gap tracked in `brand-spec.md`. **This skill does not duplicate generative or composition skills — it composes them.** Where the host has none, surface the constraint to the user; don't silently degrade.
104
+ When an asset category genuinely cannot be acquired and the user has no plan to provide one, the priority is: stop and ask (always for logo) → compose the host environment's image / motion generators (canvas-design / imagen / generative MCP), brand-reference-anchored, scored at the same bar → labeled placeholder with the gap tracked under DESIGN.md's **Gaps & placeholders**. **This skill does not duplicate generative or composition skills — it composes them.** Where the host has none, surface the constraint to the user; don't silently degrade.
104
105
 
105
106
  ## Anti-slop, terse
106
107
 
@@ -130,7 +131,7 @@ Ship a one-paragraph trade-off note alongside so the user can pick or blend with
130
131
 
131
132
  A single hero-Canvas screenshot is **not** done. A "looks roughly like the reference" handwave is **not** done. A claim of done without screenshots in evidence is **not** done. If you have not produced and reviewed a screenshot of every Canvas, you are still mid-iteration and must say so explicitly to the user.
132
133
 
133
- **Self-critique pass before declaring done** — every Canvas scored on 5 dimensions (system commitment / visual hierarchy / craft / functional fit / originality), anti-slop top-10 swept clean, < 8 scores either fixed or surfaced as accepted trade-offs. See [`references/design-critique.md`](references/design-critique.md). Verification proves it runs; critique proves it's good — both required.
134
+ **Self-critique pass before declaring done** — every Canvas scored on 5 dimensions (system commitment / visual hierarchy / craft / functional fit / originality), checked section by section against [`DESIGN.md`](references/design-md.md) (does every colour, gap, and motion in the render trace to a declared token?), anti-slop top-10 swept clean, < 8 scores either fixed or surfaced as accepted trade-offs. See [`references/design-critique.md`](references/design-critique.md). Verification proves it runs; critique proves it's good — both required.
134
135
 
135
136
  For the toolchain itself — `compile` / `preview` MCP usage, `bun preview` flags, Project Automation cases, on-device DevTools setup, the Path 1/2/3 decision rule, and per-deployment-shape verification checklists — see the `bricks-ctor` skill's `rules/verification-toolchain.md`.
136
137
 
@@ -150,6 +151,7 @@ Interaction / flow / journey / affordance / feedback / recovery / accessibility
150
151
 
151
152
  | When you need to... | Read |
152
153
  |---|---|
154
+ | Write or update the project's design-system artifact (tokens, schema, brand merge) | [`references/design-md.md`](references/design-md.md) |
153
155
  | Decide when to ask vs build; pace the work across passes | [`references/workflow.md`](references/workflow.md) |
154
156
  | Deepen any of the 10 truths | [`references/architecture-truths.md`](references/architecture-truths.md) |
155
157
  | Tune for performance / offline | [`references/performance.md`](references/performance.md) |
@@ -20,19 +20,19 @@ If a dimension cannot be scored ≥ 8 within the deployment's constraints, surfa
20
20
 
21
21
  ### 1. System commitment
22
22
 
23
- *Does the work cite the declared system (the comment block at the top of the Subspace), and does deviation have rationale?*
23
+ *Does the work cite the declared system (the named tokens in `DESIGN.md`), and does deviation have rationale?*
24
24
 
25
25
  | Score | Rubric |
26
26
  |---|---|
27
- | 9–10 | Every brick property points back to a Data token, an `ApplicationFont` entry, or the system block. Deviations carry a one-line comment explaining why. |
27
+ | 9–10 | Every brick property points back to a DESIGN.md token, a Data token, or an `ApplicationFont` entry. Deviations carry a one-line comment explaining why. |
28
28
  | 7–8 | Direction is correct; 1–2 hardcoded values that should be tokens, or 1–2 deviations without rationale. |
29
29
  | 5–6 | Visible drift — a third type family slipped in, a fourth color appeared mid-flow, or a brick redrew an asset that exists in Media Flow. |
30
- | 3–4 | The system block is decorative; the work doesn't follow it. |
31
- | 1–2 | No system block, or the block contradicts the work. |
30
+ | 3–4 | DESIGN.md is decorative; the work doesn't follow it. |
31
+ | 1–2 | No DESIGN.md, or its tokens contradict the work. |
32
32
 
33
33
  **Audit moves:**
34
- - Open the system block. Pick five values from it (a color, a type size, a Standby duration, a margin, a Brick template). For each, check that the work uses it consistently.
35
- - Pick five values *from* the work (a `backgroundColor` literal, a `fontSize`, a Standby easing, a hex code in a Rect, a brick template choice). For each, check that the value traces back to the system block or has rationale.
34
+ - Open DESIGN.md. Pick five tokens from it (a color, a type size, a Standby duration, a margin, a Brick template). For each, check that the work uses it consistently.
35
+ - Pick five values *from* the work (a `backgroundColor` literal, a `fontSize`, a Standby easing, a hex code in a Rect, a brick template choice). For each, check that the value traces back to a DESIGN.md token or has rationale.
36
36
  - If signature moves of the chosen design language (per [`design-languages.md`](design-languages.md)) are absent, score drops regardless of token-discipline. Swiss Editorial without numbered folios and hairline rules is not Swiss Editorial; it's "vaguely minimal."
37
37
 
38
38
  ### 2. Visual hierarchy
@@ -67,7 +67,7 @@ If a dimension cannot be scored ≥ 8 within the deployment's constraints, surfa
67
67
 
68
68
  **Audit moves:**
69
69
  - **Grid stance match.** Off-grid placements should serve the declared language (Brutalist break, Sagmeister theatrical, Risograph hand-placed). Off-grid that drifted in accidentally — flag and snap. A Swiss Editorial Canvas with a Brick at `(3.5, 11.2)` is a tell.
70
- - **Spacing-scale adherence.** Open the style declaration block. Read the declared spacing scale (e.g., `2 / 4 / 8 / 16 gu`). Pick ten inter-Brick gaps across the Canvas — every one must come from that set. Gaps of 7 / 9 / 11 / 13 across siblings = arithmetic drift, the agent picked values ad-hoc instead of from the scale. Snap to the nearest scale value or update the scale (and re-check everywhere).
70
+ - **Spacing-scale adherence.** Open DESIGN.md. Read the declared `spacing` tokens (e.g., `gap-s 2 / gap-m 4 / gap-l 8 / margin 8`). Pick ten inter-Brick gaps across the Canvas — every one must come from that set. Gaps of 7 / 9 / 11 / 13 across siblings = arithmetic drift, the agent picked values ad-hoc instead of from the scale. Snap to the nearest scale value or update the scale (and re-check everywhere).
71
71
  - List every distinct colour used in the Canvas. > 4 = deduction (excluding intentional photography palette spreads).
72
72
  - List every distinct type family. > 2 = deduction.
73
73
  - List every distinct Standby easing / duration combination. > 3 = deduction.
@@ -155,7 +155,7 @@ Walk this list every time. Each is a pattern that consistently slips into agent-
155
155
  **Tell:** a brick's `pressable: 'enabled'` carries a press scale-down animation, but the deployment is a 75" no-touch signage panel. **Why bad:** the affordance promises something the hardware cannot deliver; the design reads as "ported from web." **Fix:** drop hover on no-touch; convert to a Switch driven by a non-pointer signal (sensor, timer, peripheral Generator) if the visual intent matters.
156
156
 
157
157
  ### 10. AI-generated brand imagery without a real brand-reference anchor
158
- **Tell:** a generated "brand-appropriate" hero image that nobody at the brand has ever seen, produced from a prompt like "modern tech product on a gradient." **Why bad:** generation without anchoring produces uncanny-valley assets that feel adjacent to the brand without being the brand. **Fix:** anchor every generation on at least one verified brand asset (logo, real photo, official color sample); apply 5-10-2-8; log generation metadata in `brand-spec.md`. (See [Media Flow protocol § Creating assets when missing](when-the-brief-is-branded.md#creating-assets-when-missing).)
158
+ **Tell:** a generated "brand-appropriate" hero image that nobody at the brand has ever seen, produced from a prompt like "modern tech product on a gradient." **Why bad:** generation without anchoring produces uncanny-valley assets that feel adjacent to the brand without being the brand. **Fix:** anchor every generation on at least one verified brand asset (logo, real photo, official color sample); apply 5-10-2-8; log generation metadata in DESIGN.md's Assets & Brand. (See [Media Flow protocol § Creating assets when missing](when-the-brief-is-branded.md#creating-assets-when-missing).)
159
159
 
160
160
  ## Bonus failure modes (BRICKS-specific, less common)
161
161
 
@@ -35,25 +35,31 @@ If you find yourself softening signature moves to "make it more accessible" —
35
35
  3. **Build a 3-cell preview** — three minimal Subspaces (one Canvas each) the user can render. Don't produce finished work; the preview is a chooser.
36
36
  4. **Once the user picks, drop out of Advisor mode** and continue the workflow rooted in that direction.
37
37
 
38
- ## Style declaration ritual
39
-
40
- After the direction is picked, write the committed system as a comment block at the top of the Subspace file. Every subsequent choice should cite this block. Adding a value not in the block requires updating the block first — that's what makes the system structural rather than aspirational.
41
-
42
- ```ts
43
- /**
44
- * System: Swiss Editorial (Pentagram lineage)
45
- * Archetype: glance
46
- * Type: <Brand Sans> 4 / 8 / 16 gu · single family · weight contrast
47
- * Color: ink #1A1A1A on cream #F5F0E6 · accent #FF3C00 (callouts only)
48
- * Spacing: 2 / 4 / 8 / 16 gu (use only these for inter-Brick gaps)
49
- * Grid stance: lean (strict alignment, generous margins 4–8 gu)
50
- * Motion: ease-out 280ms entrance · ease-in 180ms exit · no loops
51
- * Heroes: logo (id `brand-logo`) · folio (id `folio-num`)
52
- * Asset emphasis: logo + 1 hero photograph per canvas · no decorative imagery
53
- */
38
+ ## Style declaration ritual — into DESIGN.md
39
+
40
+ After the direction is picked, commit the system as named tokens in the project's [`DESIGN.md`](design-md.md) frontmatter (full schema there). Every subsequent choice cites a token by name; adding a value not already in the tokens requires adding the token first — that's what makes the system structural rather than aspirational.
41
+
42
+ ```yaml
43
+ system: Swiss Editorial (Pentagram lineage)
44
+ archetype: glance
45
+ colors:
46
+ ink: "#1A1A1A" # body text never pure black
47
+ ground: "#F5F0E6" # default Canvas background
48
+ accent: "#FF3C00" # callouts only one per Canvas
49
+ type: # sizes in grid units
50
+ display: { family: "<Brand Sans>", size: 16, weight: 400 }
51
+ heading: { family: "<Brand Sans>", size: 8, weight: 400 }
52
+ body: { family: "<Brand Sans>", size: 4, weight: 400 }
53
+ spacing: { gap-s: 2, gap-m: 4, gap-l: 8, margin: 8 } # inter-Brick gaps come only from here
54
+ grid: lean # strict alignment, generous margins
55
+ motion:
56
+ entrance: { ease: ease-out, ms: 280 }
57
+ exit: { ease: ease-in, ms: 180 }
58
+ loops: none
59
+ heroes: [brand-logo, folio-num] # persist across Canvases → auto-tween (Truth #3)
54
60
  ```
55
61
 
56
- The grid itself is given by the runtime (Truth #6). What the block commits to is the set of design decisions on top of the grid: type scale, palette, **spacing scale in grid units** (small enumeration so inter-Brick gaps stay consistent across many siblings), grid stance, motion vocabulary, and hero Brick ids. The comment is not for the runtime; it is for *you*, when you next look at the file and consider adding a third colour or a fourth gap value. The block's existence is what holds the line.
62
+ The grid itself is given by the runtime (Truth #6). What the tokens commit to is the set of design decisions on top of the grid: type scale, palette, **spacing scale in grid units** (small enumeration so inter-Brick gaps stay consistent across many siblings), grid stance, motion vocabulary, and hero Brick ids. DESIGN.md is not for the runtime; it is for *you*, when you next consider adding a third colour or a fourth gap value. Its existence is what holds the line.
57
63
 
58
64
  ---
59
65
 
@@ -262,4 +268,4 @@ When the user picks an awkward combination ("transact + Sagmeister"), surface th
262
268
 
263
269
  The 10 directions are anchors. Real work often blends — "Kenya Hara emptiness with one Risograph spot-color accent for the call-to-action" is a legitimate combination if executed deliberately. What's not legitimate is blending three to dilute commitment.
264
270
 
265
- When inventing a direction not in the library: write its system declaration block as if it were one of the entries above (pitch / flagship / keywords / fits / BRICKS execution / wrong-for). If you can't, the direction isn't real yet — keep working on it before committing.
271
+ When inventing a direction not in the library: write its system declaration into DESIGN.md as if it were one of the entries above (pitch / flagship / keywords / fits / BRICKS execution / wrong-for). If you can't, the direction isn't real yet — keep working on it before committing.