@utopia-studio-design/design-system-cli 0.7.1 → 0.7.2
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/bin/utopia-ds-mcp.mjs +4 -2
- package/data/docs/ceramic-release-2026-09-06.md +2 -0
- package/data/docs/create-a-brandbook.md +79 -0
- package/data/docs/dextrum-document-family.md +47 -0
- package/data/docs/guide.md +2 -0
- package/data/docs/presentation-asset-repository.md +5 -0
- package/data/manifests/brandbook-skill.json +33 -0
- package/data/manifests/catalog.json +1 -0
- package/data/manifests/patterns.json +28 -0
- package/data/manifests/theme-dextrum.json +132 -21
- package/data/manifests/themes.json +253 -39
- package/lib/api.mjs +38 -2
- package/package.json +2 -2
package/bin/utopia-ds-mcp.mjs
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
#!/usr/bin/env node
|
|
2
2
|
import {
|
|
3
|
-
capabilityManifest, getBlock, getBlockDefinition, getComponent, getDoc, getLogoSkill, getMotionProfile, getRoomContext, getTemplate, getTheme,
|
|
3
|
+
capabilityManifest, getBlock, getBlockDefinition, getBrandbookSkill, getComponent, getDoc, getLogoSkill, getMotionProfile, getRoomContext, getTemplate, getTheme,
|
|
4
4
|
listBlockDefinitions, listBlocks, listComponents, listDocs, listLogoSkills, listMotionProfiles, listTemplates, listThemes, prepareLogoMakerRun,
|
|
5
|
-
repositoryDoctor, search, validateAgentMutation, validateLayout,
|
|
5
|
+
prepareBrandbookRun, repositoryDoctor, search, validateAgentMutation, validateLayout,
|
|
6
6
|
} from '../lib/api.mjs'
|
|
7
7
|
|
|
8
8
|
const tools = [
|
|
@@ -25,6 +25,8 @@ const tools = [
|
|
|
25
25
|
['list_logo_skills', 'List the established Logo Maker skill structures and their governed guidance.', {}, () => listLogoSkills()],
|
|
26
26
|
['get_logo_skill', 'Read one Logo Maker skill contract by id or name.', { id: { type: 'string' } }, ({ id }) => getLogoSkill(id)],
|
|
27
27
|
['prepare_logo_maker_run', 'Prepare a Brand Room-aware Logo Maker chat run using the same skill contract as Ceramic UI. This does not approve or publish the result.', { skillId: { type: 'string' }, brandName: { type: 'string' }, brief: { type: 'string' }, referenceIds: { type: 'array', items: { type: 'string' }, maxItems: 3 } }, (input) => prepareLogoMakerRun(input)],
|
|
28
|
+
['get_brandbook_skill', 'Read the Ceramic Brandbook workflow, GitHub source contract, provider rule, and Solution application rules.', {}, () => getBrandbookSkill()],
|
|
29
|
+
['prepare_brandbook_run', 'Prepare a Brand Room-aware Ceramic Brandbook run. Returns the required A/B/C direction phase and one-BRAND.md handoff prompt; it does not generate, save, or publish a release.', { brandName: { type: 'string' }, brief: { type: 'string', minLength: 12, maxLength: 4000 } }, (input) => prepareBrandbookRun(input)],
|
|
28
30
|
['list_docs', 'List AI-readable design-system documents.', {}, () => listDocs()],
|
|
29
31
|
['get_docs', 'Read one design-system document.', { topic: { type: 'string' } }, ({ topic }) => getDoc(topic)],
|
|
30
32
|
['doctor', 'Validate the Ceramic source of truth.', {}, () => repositoryDoctor()],
|
|
@@ -9,3 +9,5 @@ Development validation: Vitest 13 files / 79 tests passed; CLI generation and MC
|
|
|
9
9
|
Rams quick_review was attempted but the workspace review credits were exhausted. The pre-commit review_files attempt failed at the provider transport; no score was obtained.
|
|
10
10
|
|
|
11
11
|
This release does not mark independent QA reports closed. Server Designer Agent activation remains disabled under the existing production configuration.
|
|
12
|
+
|
|
13
|
+
Published: `@utopia-studio-design/design-system@0.9.1` and `@utopia-studio-design/design-system-cli@0.7.1`. CLI 0.7.0 was superseded immediately after the public-tarball check detected an omitted standalone runtime. The 0.7.1 package bundles that runtime directly. All nine public template generation commands, route/page counts and documented tokens pass. The Chat Workspace consumer installs exclusively from npm and builds successfully. Merge integration auth/footer checks: 8 passed.
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
# Create a Brandbook
|
|
2
|
+
|
|
3
|
+
Create the brandbook before authoring a Ceramic theme. The brandbook turns a brief, optional logo, references, and existing imagery into one governed `BRAND.md`. That file becomes the input for semantic color, typography, imagery, motion, Marketing, and Solution decisions in the design system.
|
|
4
|
+
|
|
5
|
+
## Connect the GitHub skill
|
|
6
|
+
|
|
7
|
+
Connect Ceramic MCP first. Then call `get_brandbook_skill`. The response identifies the canonical GitHub repository, approved branch, pinned revision, and `SKILL.md` path. Resolve that exact source before starting the workflow. Private repository access uses the active GitHub account; do not place access tokens in prompts or project files.
|
|
8
|
+
|
|
9
|
+
```text
|
|
10
|
+
get_brandbook_skill {}
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
```bash
|
|
14
|
+
git clone --branch main https://github.com/The-Utopia-Studio/Ceramic-Brandbook.git
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
The source of truth is `skills/ceramic-brandbook/SKILL.md` in that repository. The MCP response pins a reviewed commit so an agent does not silently use a different workflow.
|
|
18
|
+
|
|
19
|
+
## Prepare the direction session
|
|
20
|
+
|
|
21
|
+
Call `prepare_brandbook_run` with a brand name and useful brief. A logo is optional. Include the audience, offer, character, constraints, existing assets, required locales, and intended Marketing or Solution uses when they are known.
|
|
22
|
+
|
|
23
|
+
```json
|
|
24
|
+
{
|
|
25
|
+
"name": "prepare_brandbook_run",
|
|
26
|
+
"arguments": {
|
|
27
|
+
"brandName": "Your brand",
|
|
28
|
+
"brief": "Audience, offer, character, constraints, and desired outcome"
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
This call prepares work; it does not generate, save, or publish a release.
|
|
34
|
+
|
|
35
|
+
## Present A, B, and C
|
|
36
|
+
|
|
37
|
+
Before producing a final brandbook, present exactly three materially different directions labeled A, B, and C. Each direction must compare:
|
|
38
|
+
|
|
39
|
+
- positioning and verbal character;
|
|
40
|
+
- Latin and Arabic typography;
|
|
41
|
+
- semantic color architecture;
|
|
42
|
+
- photographic subject, light, composition, and treatment;
|
|
43
|
+
- Ceramic motion personality;
|
|
44
|
+
- Marketing expression and example assets;
|
|
45
|
+
- Solution or product expression and example applications;
|
|
46
|
+
- fit, risk, and tradeoff.
|
|
47
|
+
|
|
48
|
+
The user chooses one direction. Refine it with the user until its palette, type, imagery, motion, and application choices are clear. Do not build or save the final brandbook before this refinement is complete.
|
|
49
|
+
|
|
50
|
+
## Produce one `BRAND.md`
|
|
51
|
+
|
|
52
|
+
The approved brandbook has one editorial source:
|
|
53
|
+
|
|
54
|
+
```text
|
|
55
|
+
BRAND.md
|
|
56
|
+
assets/manifest.json
|
|
57
|
+
assets/generated/
|
|
58
|
+
validation.json
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
`BRAND.md` must define strategy, voice, logo rules, semantic color roles, Latin and Arabic type, layout, photography, motion, Marketing, Solution, accessibility, and implementation guidance. English and Arabic must have equal content coverage, visual hierarchy, and usable LTR/RTL behavior unless the user explicitly changes the locale scope.
|
|
62
|
+
|
|
63
|
+
Use the active chat's native image generator by default. Record the provider, prompt or operation, source assets, and generated output in the asset manifest. Provider choice stays outside the brand contract so the same workflow can run in ChatGPT, another capable client, or a named external provider.
|
|
64
|
+
|
|
65
|
+
For Solution, choose one to three applications from phone, desktop, and environment according to the brand and available assets. Generate a dedicated scene for every photographic desktop or environment mockup. Place the resulting mockups directly on the semantic brand canvas without generic backing panels, white or translucent plates, or explanatory text over the image.
|
|
66
|
+
|
|
67
|
+
## Validate and hand off
|
|
68
|
+
|
|
69
|
+
Validate the source and built release, then save the versioned bundle in the brand's Brand Room. The approved `BRAND.md` becomes the only brandbook input to **Create a Theme**. The theme maps its decisions to Ceramic semantic roles; it does not reinterpret the chosen direction.
|
|
70
|
+
|
|
71
|
+
Release checks:
|
|
72
|
+
|
|
73
|
+
- GitHub repository, branch, revision, and skill path are recorded.
|
|
74
|
+
- The selected A/B/C direction and refinement decision are recorded.
|
|
75
|
+
- English and Arabic content and visuals have parity.
|
|
76
|
+
- Image provenance and rights metadata are present.
|
|
77
|
+
- Marketing and Solution applications reflect the selected direction.
|
|
78
|
+
- Brandbook validation passes before theme authoring begins.
|
|
79
|
+
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
# Dextrum: v2 product theme and 07 Sep document ruling
|
|
2
|
+
|
|
3
|
+
## Ownership and precedence
|
|
4
|
+
|
|
5
|
+
Product surfaces use Ceramic's Dextrum v2 two-mode contract: neutral charcoal Dark (default) and cool-neutral Light. Documents, decks and one-pagers follow the frozen 07 Sep 2026 document rulings until superseded. HTML is a delivery format; an HTML presentation retains the document ruling and its animation/accessibility requirements. Animated HTML remains the default output. PPTX/PDF require an explicit request.
|
|
6
|
+
|
|
7
|
+
The owner-supplied exemplar is `2026-09-07_dextrum_onepager-totalenergies-tier1-v1_1.pptx`. Its slide XML confirms light blue `#C9E0F5` strips and steel-blue `#5B87AD` bands. Client-specific text and logos in that file are not reusable brand-kit content. The file is not redistributed with the package.
|
|
8
|
+
|
|
9
|
+
## Shared document-family contract
|
|
10
|
+
|
|
11
|
+
Core registers `venture-document` and these opt-in composition slots. Every venture may map the same semantic roles through its theme, without adopting Dextrum colors.
|
|
12
|
+
|
|
13
|
+
| Slot | Dextrum document treatment |
|
|
14
|
+
| --- | --- |
|
|
15
|
+
| `.uds-document-strip` | Light blue `#C9E0F5`, ink `#192B39` text |
|
|
16
|
+
| `.uds-document-eyebrow` | Ocean Blue `#3E8ECC` accent |
|
|
17
|
+
| `.uds-document-chip` | White background, ink text |
|
|
18
|
+
| `.uds-document-band` | Steel blue `#5B87AD`, white text |
|
|
19
|
+
| `.uds-document-logo-container` | Separate white rounded container; existing surface radius and spacing tokens |
|
|
20
|
+
|
|
21
|
+
Use `--document-*` roles registered in `theme-dextrum.json` and mapped in `dextrum.css`. These roles are independent of product light/dark mode. The rounded geometry uses the existing surface contract; no exact numeric corner radius was specified in the owner's ruling.
|
|
22
|
+
|
|
23
|
+
`logo-on-band` is approved for both identity marks on document bands. Keep each transparent logo unchanged inside its separate white rounded container. Do not recolor, distort or bake a background into an SVG. Generic no-backing guidance continues to reject unregistered treatments on product surfaces; it must not reject this explicitly approved document treatment.
|
|
24
|
+
|
|
25
|
+
## Identity custody
|
|
26
|
+
|
|
27
|
+
Canonical source: owner-supplied `dextrum-jamal-brand-kit.zip`, not a recreated repository mark. BLUE v2, TEAL BLUE, GREY and BLUE v2 with tagline are mirrored byte for byte:
|
|
28
|
+
|
|
29
|
+
- Web: `public/brand/dextrum/{blue-v2,teal,grey,tagline-blue-v2}.svg`
|
|
30
|
+
- npm: `src/themes/assets/dextrum/` in the design-system package
|
|
31
|
+
- `public/brand/dextrum-logo.svg` mirrors BLUE v2 exactly.
|
|
32
|
+
- `ceramic.assets.json` beside the variants records source filenames and SHA-256 hashes.
|
|
33
|
+
|
|
34
|
+
The original asset repository remains available for photography. Its identity guidance cannot override these owner-supplied canonical SVGs.
|
|
35
|
+
|
|
36
|
+
## Retired v1 data
|
|
37
|
+
|
|
38
|
+
The kit's 01 Sep `dextrum-design-language.md` uses historical `#192B39`/`#2F3F4C` structural surfaces. It is not the v2 product-token authority. `theme-dextrum.json` and `dextrum.css` already contained two modes; the stale `themes.json` summary still exposed v1 values. The summary now derives its default values from the v2 dark mapping, while the docs expose both modes and the document roles. `#192B39` remains legitimate brand ink in light mode and documents; it is not the product's dark canvas.
|
|
39
|
+
|
|
40
|
+
## Validation (09 Sep 2026)
|
|
41
|
+
|
|
42
|
+
- 28 targeted tests passed: v2 registry parity, docs token discovery, canonical SVG hashes, and localized presentation boundaries.
|
|
43
|
+
- Design-system and app builds passed; semantic page ownership audit passed.
|
|
44
|
+
- Chromium computed styles confirmed product backgrounds switch between `#F7F7F5` and `#0E1215` while document strips remain `#C9E0F5`, bands `#5B87AD`, and logo containers white.
|
|
45
|
+
- npm pack dry-run includes all four canonical SVGs; CLI data regenerated from source.
|
|
46
|
+
- Rams quick_review was requested but unavailable because the workspace's 30 review credits were exhausted.
|
|
47
|
+
- This source update has not yet been published to npm or deployed to the production site.
|
package/data/docs/guide.md
CHANGED
|
@@ -6,6 +6,8 @@ Guide pages are the operating layer of Ceramic. They define how humans and AI ag
|
|
|
6
6
|
|
|
7
7
|
- `Getting Started`: installation, theme CSS, first component, examples, CLI discovery, Arabic-friendly entrypoint.
|
|
8
8
|
- `What's New`: release notes for package, manifest, theme, and docs changes.
|
|
9
|
+
- `Connect MCP`: connect a supported agent to Ceramic's machine-readable contracts.
|
|
10
|
+
- `Create a Brandbook`: resolve the reviewed GitHub skill, compare A/B/C directions, refine one with the user, and produce the single `BRAND.md` input for theme authoring.
|
|
9
11
|
- `Create a Theme`: scaffold a theme, define brand primitives, map Ceramic semantic roles, document visual policy, and verify compatibility.
|
|
10
12
|
- `Use Templates`: discover a reviewed starter, inspect its contract, copy it with a theme, connect product-owned data, and validate the standalone result.
|
|
11
13
|
- `Arabic Friendly`: RTL-first layout, Arabic typography, mixed-script resilience, localization readiness, and icon/motion mirroring.
|
|
@@ -51,3 +51,8 @@ assets when relevant. It does not force imagery into data or evidence slides,
|
|
|
51
51
|
repeat one image as decoration, or mix an asset into a theme that is not listed.
|
|
52
52
|
The final handoff records the repository path, commit SHA, crop or
|
|
53
53
|
transformation, credit, license, and slide numbers for every used asset.
|
|
54
|
+
|
|
55
|
+
|
|
56
|
+
## Venture document rulings
|
|
57
|
+
|
|
58
|
+
Product surfaces remain Ceramic-owned. Documents, decks and one-pagers follow their venture’s approved document ruling; an HTML delivery format does not erase that boundary. Dextrum uses the [07 Sep document family](dextrum-document-family.md), including registered white rounded logo-on-band containers. Canonical transparent SVG variants are mirrored in `public/brand/dextrum/` and the design-system package. Preserve the requested output format.
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 1,
|
|
3
|
+
"id": "ceramic-brandbook",
|
|
4
|
+
"name": "Ceramic Brandbook",
|
|
5
|
+
"repository": "https://github.com/The-Utopia-Studio/Ceramic-Brandbook",
|
|
6
|
+
"branch": "main",
|
|
7
|
+
"revision": "8b4e0fe9bbf33c0e9e2aee9a17d48b9e47d31108",
|
|
8
|
+
"skillPath": "skills/ceramic-brandbook/SKILL.md",
|
|
9
|
+
"sourceDocument": "BRAND.md",
|
|
10
|
+
"workflow": [
|
|
11
|
+
"read-room-context-and-assets",
|
|
12
|
+
"present-three-directions-a-b-c",
|
|
13
|
+
"refine-selected-direction-with-user",
|
|
14
|
+
"write-one-brand-md",
|
|
15
|
+
"produce-or-register-assets",
|
|
16
|
+
"validate-and-build",
|
|
17
|
+
"save-versioned-room-bundle"
|
|
18
|
+
],
|
|
19
|
+
"rules": {
|
|
20
|
+
"logoOptional": true,
|
|
21
|
+
"requiredDirectionCount": 3,
|
|
22
|
+
"defaultLocales": ["en", "ar"],
|
|
23
|
+
"imageProvider": "Use the active chat's native image generator by default. Use another provider only when the user names it or the operation requires it.",
|
|
24
|
+
"solution": {
|
|
25
|
+
"minimumShowcases": 1,
|
|
26
|
+
"maximumShowcases": 3,
|
|
27
|
+
"types": ["phone", "desktop", "environment"],
|
|
28
|
+
"selection": "Choose only applications that fit the brand and supplied assets.",
|
|
29
|
+
"imagery": "Generate a dedicated scene for every photographic desktop or environment application with the active image skill; do not reuse general brand photography.",
|
|
30
|
+
"presentation": "Place mockups directly on the semantic brand canvas. Do not add generic backing panels or caption overlays."
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
}
|
|
@@ -313,6 +313,34 @@
|
|
|
313
313
|
"touch controls"
|
|
314
314
|
],
|
|
315
315
|
"rtl": "Placement uses logical reading order while registered column and span values remain deterministic."
|
|
316
|
+
},
|
|
317
|
+
{
|
|
318
|
+
"id": "venture-document",
|
|
319
|
+
"title": "Venture document family and logo-on-band",
|
|
320
|
+
"source": "packages/design-system/src/core.css",
|
|
321
|
+
"contract": "Documents, decks and one-pagers use the venture document ruling. Product surfaces retain the product theme. An explicit approved logo-on-band treatment permits separate rounded containers without changing transparent logo geometry. HTML decks retain their delivery/motion contract while using the document-family visual ruling.",
|
|
322
|
+
"slots": [
|
|
323
|
+
"uds-document-strip",
|
|
324
|
+
"uds-document-eyebrow",
|
|
325
|
+
"uds-document-chip",
|
|
326
|
+
"uds-document-band",
|
|
327
|
+
"uds-document-logo-container"
|
|
328
|
+
],
|
|
329
|
+
"tokens": [
|
|
330
|
+
"--document-strip-background",
|
|
331
|
+
"--document-strip-foreground",
|
|
332
|
+
"--document-eyebrow-foreground",
|
|
333
|
+
"--document-chip-background",
|
|
334
|
+
"--document-chip-foreground",
|
|
335
|
+
"--document-band-background",
|
|
336
|
+
"--document-band-foreground",
|
|
337
|
+
"--document-logo-container-background",
|
|
338
|
+
"--document-logo-container-radius"
|
|
339
|
+
],
|
|
340
|
+
"states": [
|
|
341
|
+
"document",
|
|
342
|
+
"logo-on-band"
|
|
343
|
+
]
|
|
316
344
|
}
|
|
317
345
|
]
|
|
318
346
|
}
|
|
@@ -12,12 +12,42 @@
|
|
|
12
12
|
"motionProfile": "swift",
|
|
13
13
|
"brandPrimitives": {
|
|
14
14
|
"colors": {
|
|
15
|
-
"darkBlue": {
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
15
|
+
"darkBlue": {
|
|
16
|
+
"value": "#192B39",
|
|
17
|
+
"token": "--dx-brand-dark-blue",
|
|
18
|
+
"immutable": true,
|
|
19
|
+
"use": "Light text and structural brand surfaces"
|
|
20
|
+
},
|
|
21
|
+
"oceanBlue": {
|
|
22
|
+
"value": "#3E8ECC",
|
|
23
|
+
"token": "--dx-brand-ocean-blue",
|
|
24
|
+
"immutable": true,
|
|
25
|
+
"use": "Dark primary actions, links, focus, and current navigation"
|
|
26
|
+
},
|
|
27
|
+
"oceanHover": {
|
|
28
|
+
"value": "#4A9AD4",
|
|
29
|
+
"token": "--dx-brand-ocean-hover",
|
|
30
|
+
"immutable": true,
|
|
31
|
+
"use": "Dark primary hover"
|
|
32
|
+
},
|
|
33
|
+
"oceanDeep": {
|
|
34
|
+
"value": "#26689A",
|
|
35
|
+
"token": "--dx-brand-ocean-deep",
|
|
36
|
+
"immutable": true,
|
|
37
|
+
"use": "Light primary and Dark primary active"
|
|
38
|
+
},
|
|
39
|
+
"logoTeal": {
|
|
40
|
+
"value": "#063946",
|
|
41
|
+
"token": "--dx-brand-logo-teal",
|
|
42
|
+
"immutable": true,
|
|
43
|
+
"use": "Logo and explicit brand expression only"
|
|
44
|
+
},
|
|
45
|
+
"timidWhite": {
|
|
46
|
+
"value": "#EAEAEA",
|
|
47
|
+
"token": "--dx-brand-timid-white",
|
|
48
|
+
"immutable": true,
|
|
49
|
+
"use": "Dark foreground"
|
|
50
|
+
},
|
|
21
51
|
"charcoal950": "#0E1215",
|
|
22
52
|
"charcoal925": "#11161A",
|
|
23
53
|
"charcoal900": "#171C20",
|
|
@@ -45,12 +75,36 @@
|
|
|
45
75
|
},
|
|
46
76
|
"arabicFamily": "Readex Pro",
|
|
47
77
|
"weights": {
|
|
48
|
-
"clashGrotesk": [
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
78
|
+
"clashGrotesk": [
|
|
79
|
+
300,
|
|
80
|
+
400,
|
|
81
|
+
500,
|
|
82
|
+
600,
|
|
83
|
+
700
|
|
84
|
+
],
|
|
85
|
+
"satoshi": [
|
|
86
|
+
400,
|
|
87
|
+
500,
|
|
88
|
+
700
|
|
89
|
+
],
|
|
90
|
+
"manrope": [
|
|
91
|
+
300,
|
|
92
|
+
400,
|
|
93
|
+
500,
|
|
94
|
+
600,
|
|
95
|
+
700,
|
|
96
|
+
800
|
|
97
|
+
],
|
|
98
|
+
"jetBrainsMono": [
|
|
99
|
+
400,
|
|
100
|
+
500,
|
|
101
|
+
600
|
|
102
|
+
]
|
|
52
103
|
},
|
|
53
|
-
"arabicWeights": [
|
|
104
|
+
"arabicWeights": [
|
|
105
|
+
300,
|
|
106
|
+
500
|
|
107
|
+
],
|
|
54
108
|
"headlineCasing": "sentence",
|
|
55
109
|
"headlineTracking": "-0.03em to -0.05em",
|
|
56
110
|
"arabicDisplayFamily": "Readex Pro",
|
|
@@ -153,14 +207,31 @@
|
|
|
153
207
|
"--sidebar-width-collapsed": "Owned by core; remains 4rem"
|
|
154
208
|
},
|
|
155
209
|
"governanceStatus": {
|
|
156
|
-
"success": {
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
210
|
+
"success": {
|
|
211
|
+
"dark": "#79B98E",
|
|
212
|
+
"light": "#3F7953"
|
|
213
|
+
},
|
|
214
|
+
"warning": {
|
|
215
|
+
"dark": "#D2A363",
|
|
216
|
+
"light": "#916026"
|
|
217
|
+
},
|
|
218
|
+
"critical": {
|
|
219
|
+
"dark": "#C86E64",
|
|
220
|
+
"light": "#A94F47"
|
|
221
|
+
},
|
|
222
|
+
"surfaceAlpha": {
|
|
223
|
+
"dark": "12%",
|
|
224
|
+
"light": "9%"
|
|
225
|
+
},
|
|
160
226
|
"rule": "Status colors communicate governance state only; never use them as decorative accents."
|
|
161
227
|
},
|
|
162
228
|
"visualPolicy": {
|
|
163
|
-
"tone": [
|
|
229
|
+
"tone": [
|
|
230
|
+
"precise",
|
|
231
|
+
"technical",
|
|
232
|
+
"calm",
|
|
233
|
+
"confident"
|
|
234
|
+
],
|
|
164
235
|
"allow": [
|
|
165
236
|
"neutral charcoal dark workspaces",
|
|
166
237
|
"plain cool-neutral light canvases with white cards",
|
|
@@ -183,8 +254,16 @@
|
|
|
183
254
|
"iconPolicy": {
|
|
184
255
|
"system": "lucide",
|
|
185
256
|
"description": "Dextrum uses standard Lucide icons in product UI and keeps the Dextrum mark for brand surfaces.",
|
|
186
|
-
"allow": [
|
|
187
|
-
|
|
257
|
+
"allow": [
|
|
258
|
+
"lucide icons in components",
|
|
259
|
+
"monochrome currentColor icons",
|
|
260
|
+
"directional mirroring in RTL"
|
|
261
|
+
],
|
|
262
|
+
"avoid": [
|
|
263
|
+
"Utopia Phosphor icon policy",
|
|
264
|
+
"emoji",
|
|
265
|
+
"mixed icon families in one surface"
|
|
266
|
+
],
|
|
188
267
|
"coreNote": "Icon policy is theme-owned. Core components remain icon-system neutral."
|
|
189
268
|
},
|
|
190
269
|
"translations": {
|
|
@@ -193,7 +272,11 @@
|
|
|
193
272
|
"iconPolicy": {
|
|
194
273
|
"system": "Lucide",
|
|
195
274
|
"description": "يستخدم Dextrum أيقونات Lucide القياسية داخل واجهة المنتج، مع إبقاء علامة Dextrum لأسطح العلامة.",
|
|
196
|
-
"allow": [
|
|
275
|
+
"allow": [
|
|
276
|
+
"أيقونات Lucide في المكونات",
|
|
277
|
+
"أيقونات أحادية بلون currentColor",
|
|
278
|
+
"عكس الاتجاه في RTL"
|
|
279
|
+
]
|
|
197
280
|
}
|
|
198
281
|
}
|
|
199
282
|
},
|
|
@@ -210,6 +293,34 @@
|
|
|
210
293
|
"Use Manrope for Latin app UI, Satoshi for supporting labels, and JetBrains Mono for evidence identifiers.",
|
|
211
294
|
"Use Clash Grotesk for explicit marketing display only.",
|
|
212
295
|
"Keep Arabic on Readex Pro tokens (body 300, display 500).",
|
|
213
|
-
"Do not import Utopia brand primitives into Dextrum-themed surfaces."
|
|
214
|
-
|
|
296
|
+
"Do not import Utopia brand primitives into Dextrum-themed surfaces.",
|
|
297
|
+
"For documents, decks and one-pagers, apply documentFamily before product surface or generic presentation defaults.",
|
|
298
|
+
"Use canonical BLUE v2, TEAL, GREY and tagline transparent SVG assets; the public logo mirrors BLUE v2 byte for byte."
|
|
299
|
+
],
|
|
300
|
+
"revision": "v2",
|
|
301
|
+
"documentFamily": {
|
|
302
|
+
"id": "venture-document",
|
|
303
|
+
"rulingDate": "2026-09-07",
|
|
304
|
+
"exemplar": "2026-09-07_dextrum_onepager-totalenergies-tier1-v1_1.pptx",
|
|
305
|
+
"scope": [
|
|
306
|
+
"documents",
|
|
307
|
+
"decks",
|
|
308
|
+
"one-pagers"
|
|
309
|
+
],
|
|
310
|
+
"tokens": {
|
|
311
|
+
"--document-strip-background": "#C9E0F5",
|
|
312
|
+
"--document-strip-foreground": "#192B39",
|
|
313
|
+
"--document-eyebrow-foreground": "#3E8ECC",
|
|
314
|
+
"--document-chip-background": "#FFFFFF",
|
|
315
|
+
"--document-chip-foreground": "#192B39",
|
|
316
|
+
"--document-band-background": "#5B87AD",
|
|
317
|
+
"--document-band-foreground": "#FFFFFF",
|
|
318
|
+
"--document-logo-container-background": "#FFFFFF",
|
|
319
|
+
"--document-logo-container-radius": "var(--radius-surface)"
|
|
320
|
+
},
|
|
321
|
+
"logoTreatment": "logo-on-band: preserve transparent logo assets inside separate white rounded containers behind both logos on colored bands. Never edit the mark.",
|
|
322
|
+
"precedence": "Product surfaces use Ceramic v2. Documents, decks and one-pagers follow the 07 Sep document rulings until superseded; HTML is a delivery format, not a reason to discard the document ruling.",
|
|
323
|
+
"identityManifest": "public/brand/dextrum/ceramic.assets.json",
|
|
324
|
+
"legacyNote": "The 01 Sep design-language document in the supplied kit is historical v1, not the current product token authority."
|
|
325
|
+
}
|
|
215
326
|
}
|
|
@@ -229,7 +229,7 @@
|
|
|
229
229
|
],
|
|
230
230
|
"principles": [
|
|
231
231
|
"calm technical hierarchy",
|
|
232
|
-
"
|
|
232
|
+
"neutral charcoal Dark and cool-neutral Light product surfaces",
|
|
233
233
|
"Manrope product typography",
|
|
234
234
|
"Lucide icon system"
|
|
235
235
|
],
|
|
@@ -237,7 +237,8 @@
|
|
|
237
237
|
"kind": "logo",
|
|
238
238
|
"src": "/brand/dextrum-logo.svg",
|
|
239
239
|
"alt": "Dextrum",
|
|
240
|
-
"usage": "
|
|
240
|
+
"usage": "Canonical owner-supplied BLUE v2 transparent SVG. Preserve aspect ratio and colors. Document logo-on-band permits separate white rounded containers behind both logos on colored bands; do not bake a background into the SVG.",
|
|
241
|
+
"presentationSrc": "/brand/dextrum/blue-v2.svg"
|
|
241
242
|
},
|
|
242
243
|
"translations": {
|
|
243
244
|
"ar": {
|
|
@@ -262,18 +263,18 @@
|
|
|
262
263
|
"iconSystem": "lucide",
|
|
263
264
|
"motionProfile": "swift",
|
|
264
265
|
"values": {
|
|
265
|
-
"--background": "#
|
|
266
|
+
"--background": "#0E1215",
|
|
266
267
|
"--foreground": "#EAEAEA",
|
|
267
|
-
"--card": "#
|
|
268
|
+
"--card": "#171C20",
|
|
268
269
|
"--card-foreground": "#EAEAEA",
|
|
269
270
|
"--primary": "#3E8ECC",
|
|
270
|
-
"--primary-foreground": "#
|
|
271
|
-
"--secondary": "#
|
|
271
|
+
"--primary-foreground": "#101619",
|
|
272
|
+
"--secondary": "#1B2126",
|
|
272
273
|
"--secondary-foreground": "#EAEAEA",
|
|
273
|
-
"--muted": "#
|
|
274
|
-
"--muted-foreground": "#
|
|
275
|
-
"--border": "
|
|
276
|
-
"--input": "
|
|
274
|
+
"--muted": "#171C20",
|
|
275
|
+
"--muted-foreground": "#909BA2",
|
|
276
|
+
"--border": "rgb(238 240 241 / 10%)",
|
|
277
|
+
"--input": "rgb(238 240 241 / 15%)",
|
|
277
278
|
"--ring": "#3E8ECC",
|
|
278
279
|
"--loading-background": "#192B39",
|
|
279
280
|
"--loading-accent": "#3E8ECC",
|
|
@@ -321,9 +322,55 @@
|
|
|
321
322
|
"--sidebar-rail-size": "8px",
|
|
322
323
|
"--button-height": "40px",
|
|
323
324
|
"--card-padding": "24px",
|
|
324
|
-
"--overlay": "
|
|
325
|
-
"--modal-surface": "#
|
|
326
|
-
"--popover-surface": "#
|
|
325
|
+
"--overlay": "rgb(5 8 10 / 78%)",
|
|
326
|
+
"--modal-surface": "#1B2126",
|
|
327
|
+
"--popover-surface": "#1B2126",
|
|
328
|
+
"--foreground-muted": "#ADB4B8",
|
|
329
|
+
"--foreground-subtle": "#7F898F",
|
|
330
|
+
"--popover": "#1B2126",
|
|
331
|
+
"--popover-foreground": "#EAEAEA",
|
|
332
|
+
"--primary-hover": "#4A9AD4",
|
|
333
|
+
"--primary-active": "#26689A",
|
|
334
|
+
"--accent": "#20272C",
|
|
335
|
+
"--accent-foreground": "#EAEAEA",
|
|
336
|
+
"--surface": "rgb(255 255 255 / 2.8%)",
|
|
337
|
+
"--surface-strong": "rgb(255 255 255 / 5%)",
|
|
338
|
+
"--surface-elevated": "#1B2126",
|
|
339
|
+
"--surface-hover": "rgb(255 255 255 / 7%)",
|
|
340
|
+
"--sidebar": "#11161A",
|
|
341
|
+
"--sidebar-foreground": "#EAEAEA",
|
|
342
|
+
"--sidebar-primary": "#3E8ECC",
|
|
343
|
+
"--sidebar-primary-foreground": "#101619",
|
|
344
|
+
"--sidebar-accent": "rgb(62 142 204 / 12%)",
|
|
345
|
+
"--sidebar-accent-foreground": "#EAEAEA",
|
|
346
|
+
"--sidebar-border": "rgb(238 240 241 / 8%)",
|
|
347
|
+
"--sidebar-ring": "#3E8ECC"
|
|
348
|
+
},
|
|
349
|
+
"revision": "v2",
|
|
350
|
+
"documentFamily": {
|
|
351
|
+
"id": "venture-document",
|
|
352
|
+
"rulingDate": "2026-09-07",
|
|
353
|
+
"exemplar": "2026-09-07_dextrum_onepager-totalenergies-tier1-v1_1.pptx",
|
|
354
|
+
"scope": [
|
|
355
|
+
"documents",
|
|
356
|
+
"decks",
|
|
357
|
+
"one-pagers"
|
|
358
|
+
],
|
|
359
|
+
"tokens": {
|
|
360
|
+
"--document-strip-background": "#C9E0F5",
|
|
361
|
+
"--document-strip-foreground": "#192B39",
|
|
362
|
+
"--document-eyebrow-foreground": "#3E8ECC",
|
|
363
|
+
"--document-chip-background": "#FFFFFF",
|
|
364
|
+
"--document-chip-foreground": "#192B39",
|
|
365
|
+
"--document-band-background": "#5B87AD",
|
|
366
|
+
"--document-band-foreground": "#FFFFFF",
|
|
367
|
+
"--document-logo-container-background": "#FFFFFF",
|
|
368
|
+
"--document-logo-container-radius": "var(--radius-surface)"
|
|
369
|
+
},
|
|
370
|
+
"logoTreatment": "logo-on-band: preserve transparent logo assets inside separate white rounded containers behind both logos on colored bands. Never edit the mark.",
|
|
371
|
+
"precedence": "Product surfaces use Ceramic v2. Documents, decks and one-pagers follow the 07 Sep document rulings until superseded; HTML is a delivery format, not a reason to discard the document ruling.",
|
|
372
|
+
"identityManifest": "public/brand/dextrum/ceramic.assets.json",
|
|
373
|
+
"legacyNote": "The 01 Sep design-language document in the supplied kit is historical v1, not the current product token authority."
|
|
327
374
|
}
|
|
328
375
|
},
|
|
329
376
|
{
|
|
@@ -334,29 +381,107 @@
|
|
|
334
381
|
"role": "Visual theme",
|
|
335
382
|
"description": "Black-and-white theme with a spectral accent.",
|
|
336
383
|
"motionProfile": "swift",
|
|
337
|
-
"bestFor": [
|
|
338
|
-
|
|
384
|
+
"bestFor": [
|
|
385
|
+
"AI products",
|
|
386
|
+
"Creative tools"
|
|
387
|
+
],
|
|
388
|
+
"principles": [
|
|
389
|
+
"monochrome first",
|
|
390
|
+
"spectral color with purpose",
|
|
391
|
+
"crisp geometry",
|
|
392
|
+
"fast direct feedback",
|
|
393
|
+
"accessible color-independent states"
|
|
394
|
+
],
|
|
339
395
|
"preview": {
|
|
340
396
|
"label": "PRISM / MONO",
|
|
341
397
|
"foreground": "#090909",
|
|
342
398
|
"background": "radial-gradient(circle at 78% 22%, rgba(66,133,244,.95), transparent 22%), radial-gradient(circle at 64% 70%, rgba(52,168,83,.9), transparent 24%), radial-gradient(circle at 34% 70%, rgba(251,188,4,.9), transparent 23%), radial-gradient(circle at 22% 22%, rgba(234,67,53,.9), transparent 24%), #f8f8f6"
|
|
343
399
|
},
|
|
344
|
-
"translations": {
|
|
400
|
+
"translations": {
|
|
401
|
+
"ar": {
|
|
402
|
+
"name": "Prism Mono",
|
|
403
|
+
"role": "ثيم بصري",
|
|
404
|
+
"description": "ثيم أبيض وأسود مع تدرج طيفي.",
|
|
405
|
+
"bestFor": [
|
|
406
|
+
"منتجات الذكاء الاصطناعي",
|
|
407
|
+
"الأدوات الإبداعية"
|
|
408
|
+
],
|
|
409
|
+
"principles": [
|
|
410
|
+
"الأبيض والأسود أولاً",
|
|
411
|
+
"لون طيفي هادف",
|
|
412
|
+
"هندسة واضحة",
|
|
413
|
+
"استجابة سريعة",
|
|
414
|
+
"حالات لا تعتمد على اللون وحده"
|
|
415
|
+
]
|
|
416
|
+
}
|
|
417
|
+
},
|
|
345
418
|
"policyManifest": "packages/design-system/src/manifests/theme-prism-mono.json",
|
|
346
419
|
"css": "packages/design-system/src/themes/prism-mono.css",
|
|
347
420
|
"iconSystem": "lucide",
|
|
348
421
|
"values": {
|
|
349
|
-
"--background": "#F8F8F6",
|
|
350
|
-
"--
|
|
351
|
-
"--
|
|
352
|
-
"--
|
|
353
|
-
"--
|
|
354
|
-
"--
|
|
355
|
-
"--
|
|
356
|
-
"--
|
|
357
|
-
"--
|
|
358
|
-
"--
|
|
359
|
-
"--
|
|
422
|
+
"--background": "#F8F8F6",
|
|
423
|
+
"--foreground": "#090909",
|
|
424
|
+
"--card": "#FFFFFF",
|
|
425
|
+
"--card-foreground": "#090909",
|
|
426
|
+
"--primary": "#090909",
|
|
427
|
+
"--primary-foreground": "#FFFFFF",
|
|
428
|
+
"--secondary": "#ECECEA",
|
|
429
|
+
"--secondary-foreground": "#090909",
|
|
430
|
+
"--muted": "#E4E4E0",
|
|
431
|
+
"--muted-foreground": "#5F5F5A",
|
|
432
|
+
"--border": "#CACAC5",
|
|
433
|
+
"--input": "#A9A9A3",
|
|
434
|
+
"--ring": "#1A73E8",
|
|
435
|
+
"--loading-background": "#F8F8F6",
|
|
436
|
+
"--loading-accent": "#1A73E8",
|
|
437
|
+
"--loading-foreground": "#090909",
|
|
438
|
+
"--radius": "14px",
|
|
439
|
+
"--radius-control": "999px",
|
|
440
|
+
"--radius-surface": "24px",
|
|
441
|
+
"--radius-chat-bubble": "20px",
|
|
442
|
+
"--radius-chat-composer": "28px",
|
|
443
|
+
"--radius-chat-token": "14px",
|
|
444
|
+
"--shadow-control": "0 1px 0 rgba(0,0,0,.08)",
|
|
445
|
+
"--motion-duration-press": "90ms",
|
|
446
|
+
"--motion-duration-page": "180ms",
|
|
447
|
+
"--motion-duration-expand": "180ms",
|
|
448
|
+
"--motion-duration-reveal": "220ms",
|
|
449
|
+
"--motion-duration-icon": "280ms",
|
|
450
|
+
"--motion-ease-standard": "cubic-bezier(0.2,0,0,1)",
|
|
451
|
+
"--motion-ease-emphasized": "cubic-bezier(0.16,1,0.3,1)",
|
|
452
|
+
"--motion-ease-icon": "cubic-bezier(0.16,1,0.3,1)",
|
|
453
|
+
"--motion-press-scale": ".98",
|
|
454
|
+
"--motion-distance-page": "6px",
|
|
455
|
+
"--motion-distance-reveal": "8px",
|
|
456
|
+
"--font-sans": "TWK Lausanne",
|
|
457
|
+
"--font-display": "TWK Lausanne",
|
|
458
|
+
"--font-ui-support": "TWK Lausanne",
|
|
459
|
+
"--font-marketing-display": "TWK Lausanne",
|
|
460
|
+
"--font-arabic": "IBM Plex Sans Arabic",
|
|
461
|
+
"--font-arabic-body": "IBM Plex Sans Arabic",
|
|
462
|
+
"--font-arabic-display": "IBM Plex Sans Arabic",
|
|
463
|
+
"--font-weight-arabic-body": "400",
|
|
464
|
+
"--font-weight-arabic-display": "700",
|
|
465
|
+
"--font-size-display": "clamp(2.75rem,7vw,5.75rem)",
|
|
466
|
+
"--font-size-arabic-body": "16px",
|
|
467
|
+
"--font-size-arabic-body-lg": "19px",
|
|
468
|
+
"--font-size-arabic-display": "clamp(2.6rem,6.6vw,5.4rem)",
|
|
469
|
+
"--line-height-arabic": "1.75",
|
|
470
|
+
"--line-height-arabic-body": "1.75",
|
|
471
|
+
"--line-height-arabic-display": "1.16",
|
|
472
|
+
"--tracking-arabic": "0",
|
|
473
|
+
"--tracking-arabic-display": "0",
|
|
474
|
+
"--sidebar-width": "17rem",
|
|
475
|
+
"--control-height-sm": "2rem",
|
|
476
|
+
"--sidebar-width-collapsed": "4rem",
|
|
477
|
+
"--sidebar-min-block-size": "30rem",
|
|
478
|
+
"--sidebar-rail-size": "8px",
|
|
479
|
+
"--button-height": "40px",
|
|
480
|
+
"--card-padding": "24px",
|
|
481
|
+
"--overlay": "rgb(9 9 9 / 82%)",
|
|
482
|
+
"--modal-surface": "#FFFFFF",
|
|
483
|
+
"--popover-surface": "#FFFFFF",
|
|
484
|
+
"--prism-spectrum": "linear-gradient(90deg,#EA4335,#FBBC04,#34A853,#4285F4)"
|
|
360
485
|
}
|
|
361
486
|
},
|
|
362
487
|
{
|
|
@@ -377,7 +502,11 @@
|
|
|
377
502
|
"independent brand and color mode",
|
|
378
503
|
"restrained detector and assurance signals"
|
|
379
504
|
],
|
|
380
|
-
"preview": {
|
|
505
|
+
"preview": {
|
|
506
|
+
"label": "BARRIER / INTELLIGENCE",
|
|
507
|
+
"foreground": "#D2AC6C",
|
|
508
|
+
"background": "radial-gradient(circle at 76% 20%, rgba(210,172,108,.24), transparent 32%), linear-gradient(145deg,#050505,#16120c 68%,#050505)"
|
|
509
|
+
},
|
|
381
510
|
"translations": {
|
|
382
511
|
"ar": {
|
|
383
512
|
"name": "Barrier Intelligence",
|
|
@@ -487,21 +616,106 @@
|
|
|
487
616
|
"role": "Visual theme",
|
|
488
617
|
"description": "Early-web theme with rounded geometry and pastel colors.",
|
|
489
618
|
"motionProfile": "swift",
|
|
490
|
-
"bestFor": [
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
619
|
+
"bestFor": [
|
|
620
|
+
"Youth and culture products",
|
|
621
|
+
"Community and campaign pages"
|
|
622
|
+
],
|
|
623
|
+
"principles": [
|
|
624
|
+
"cute but legible",
|
|
625
|
+
"bubble geometry",
|
|
626
|
+
"pastel energy",
|
|
627
|
+
"tactile offset depth",
|
|
628
|
+
"nostalgia with modern accessibility"
|
|
629
|
+
],
|
|
630
|
+
"preview": {
|
|
631
|
+
"label": "Y2K ✦ POP",
|
|
632
|
+
"foreground": "#35144F",
|
|
633
|
+
"background": "radial-gradient(circle at 25% 22%,#fff 0 7%,transparent 8%), radial-gradient(circle at 78% 28%,#B6FF64 0 13%,transparent 14%), radial-gradient(circle at 30% 78%,#76E5FF 0 18%,transparent 19%), linear-gradient(135deg,#FFB9E8,#C8B6FF 55%,#FFF49A)"
|
|
634
|
+
},
|
|
635
|
+
"translations": {
|
|
636
|
+
"ar": {
|
|
637
|
+
"name": "Y2K Pop",
|
|
638
|
+
"role": "ثيم بصري",
|
|
639
|
+
"description": "ثيم مستوحى من الويب المبكر بهندسة مستديرة وألوان باستيل.",
|
|
640
|
+
"bestFor": [
|
|
641
|
+
"منتجات الشباب والثقافة",
|
|
642
|
+
"صفحات المجتمع والحملات"
|
|
643
|
+
],
|
|
644
|
+
"principles": [
|
|
645
|
+
"لطيف وواضح",
|
|
646
|
+
"هندسة فقاعية",
|
|
647
|
+
"طاقة الباستيل",
|
|
648
|
+
"عمق ملموس",
|
|
649
|
+
"حنين مع وصول حديث"
|
|
650
|
+
]
|
|
651
|
+
}
|
|
652
|
+
},
|
|
494
653
|
"policyManifest": "packages/design-system/src/manifests/theme-y2k-pop.json",
|
|
495
654
|
"css": "packages/design-system/src/themes/y2k-pop.css",
|
|
496
655
|
"iconSystem": "lucide-rounded",
|
|
497
656
|
"values": {
|
|
498
|
-
"--background": "#FFF6FD",
|
|
499
|
-
"--
|
|
500
|
-
"--
|
|
501
|
-
"--
|
|
502
|
-
"--
|
|
503
|
-
"--
|
|
504
|
-
"--
|
|
657
|
+
"--background": "#FFF6FD",
|
|
658
|
+
"--foreground": "#35144F",
|
|
659
|
+
"--card": "#FFFFFF",
|
|
660
|
+
"--card-foreground": "#35144F",
|
|
661
|
+
"--primary": "#6C2BD9",
|
|
662
|
+
"--primary-foreground": "#FFFFFF",
|
|
663
|
+
"--secondary": "#FFD4F0",
|
|
664
|
+
"--secondary-foreground": "#35144F",
|
|
665
|
+
"--muted": "#EFE5FA",
|
|
666
|
+
"--muted-foreground": "#725E81",
|
|
667
|
+
"--border": "#8B68A5",
|
|
668
|
+
"--input": "#8B68A5",
|
|
669
|
+
"--ring": "#6C2BD9",
|
|
670
|
+
"--loading-background": "#FFF6FD",
|
|
671
|
+
"--loading-accent": "#6C2BD9",
|
|
672
|
+
"--loading-foreground": "#35144F",
|
|
673
|
+
"--radius": "22px",
|
|
674
|
+
"--radius-control": "999px",
|
|
675
|
+
"--radius-surface": "32px",
|
|
676
|
+
"--radius-chat-bubble": "26px",
|
|
677
|
+
"--radius-chat-composer": "32px",
|
|
678
|
+
"--radius-chat-token": "18px",
|
|
679
|
+
"--shadow-control": "3px 3px 0 #35144F",
|
|
680
|
+
"--motion-duration-press": "90ms",
|
|
681
|
+
"--motion-duration-page": "180ms",
|
|
682
|
+
"--motion-duration-expand": "200ms",
|
|
683
|
+
"--motion-duration-reveal": "240ms",
|
|
684
|
+
"--motion-duration-icon": "300ms",
|
|
685
|
+
"--motion-ease-standard": "cubic-bezier(.2,0,0,1)",
|
|
686
|
+
"--motion-ease-emphasized": "cubic-bezier(.2,1.35,.4,1)",
|
|
687
|
+
"--motion-ease-icon": "cubic-bezier(.2,1.35,.4,1)",
|
|
688
|
+
"--motion-press-scale": ".96",
|
|
689
|
+
"--motion-distance-page": "8px",
|
|
690
|
+
"--motion-distance-reveal": "12px",
|
|
691
|
+
"--font-sans": "TWK Lausanne",
|
|
692
|
+
"--font-display": "TWK Lausanne",
|
|
693
|
+
"--font-ui-support": "TWK Lausanne",
|
|
694
|
+
"--font-marketing-display": "TWK Lausanne",
|
|
695
|
+
"--font-arabic": "IBM Plex Sans Arabic",
|
|
696
|
+
"--font-arabic-body": "IBM Plex Sans Arabic",
|
|
697
|
+
"--font-arabic-display": "IBM Plex Sans Arabic",
|
|
698
|
+
"--font-weight-arabic-body": "400",
|
|
699
|
+
"--font-weight-arabic-display": "700",
|
|
700
|
+
"--font-size-display": "clamp(2.75rem,7.4vw,6rem)",
|
|
701
|
+
"--font-size-arabic-body": "16px",
|
|
702
|
+
"--font-size-arabic-body-lg": "19px",
|
|
703
|
+
"--font-size-arabic-display": "clamp(2.6rem,7vw,5.6rem)",
|
|
704
|
+
"--line-height-arabic": "1.75",
|
|
705
|
+
"--line-height-arabic-body": "1.75",
|
|
706
|
+
"--line-height-arabic-display": "1.18",
|
|
707
|
+
"--tracking-arabic": "0",
|
|
708
|
+
"--tracking-arabic-display": "0",
|
|
709
|
+
"--sidebar-width": "17rem",
|
|
710
|
+
"--control-height-sm": "2rem",
|
|
711
|
+
"--sidebar-width-collapsed": "4rem",
|
|
712
|
+
"--sidebar-min-block-size": "30rem",
|
|
713
|
+
"--sidebar-rail-size": "8px",
|
|
714
|
+
"--button-height": "42px",
|
|
715
|
+
"--card-padding": "24px",
|
|
716
|
+
"--overlay": "rgb(53 20 79 / 74%)",
|
|
717
|
+
"--modal-surface": "#FFFFFF",
|
|
718
|
+
"--popover-surface": "#FFFFFF"
|
|
505
719
|
}
|
|
506
720
|
},
|
|
507
721
|
{
|
package/lib/api.mjs
CHANGED
|
@@ -168,6 +168,41 @@ export function prepareLogoMakerRun({ skillId, brandName, brief, referenceIds =
|
|
|
168
168
|
}
|
|
169
169
|
}
|
|
170
170
|
|
|
171
|
+
export function getBrandbookSkill() {
|
|
172
|
+
return readJson(join(paths().manifests, 'brandbook-skill.json'))
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
export function prepareBrandbookRun({ brandName, brief }, root = process.cwd()) {
|
|
176
|
+
const room = getRoomContext(root)
|
|
177
|
+
const resolvedBrandName = String(brandName || room?.brandName || '').trim()
|
|
178
|
+
const resolvedBrief = String(brief || '').trim()
|
|
179
|
+
if (!resolvedBrandName) return { ok: false, code: 'BRAND_NAME_REQUIRED', message: 'Provide brandName or connect a Ceramic Brand Room.' }
|
|
180
|
+
if (resolvedBrief.length < 12) return { ok: false, code: 'BRIEF_TOO_SHORT', message: 'Provide at least 12 characters of brand intent.' }
|
|
181
|
+
const skill = getBrandbookSkill()
|
|
182
|
+
const prompt = [
|
|
183
|
+
`Create a Ceramic brand-book direction session for ${resolvedBrandName}.`, resolvedBrief, '',
|
|
184
|
+
'Follow the Ceramic Brandbook skill contract:',
|
|
185
|
+
'- Read available Brand Room context and supplied assets; a logo is optional.',
|
|
186
|
+
'- Present exactly three materially different directions labeled A, B, and C.',
|
|
187
|
+
'- Compare typography, semantic color roles, imagery, motion, Marketing expression, Solution expression, fit, and tradeoff.',
|
|
188
|
+
'- Refine the selected route with the user before writing the final BRAND.md.',
|
|
189
|
+
'- Produce exactly one editorial source, BRAND.md, with complete English and Arabic parity unless the user changes the language scope.',
|
|
190
|
+
'- Use the active chat image generator by default; keep provider choice outside the brand contract and record actual provenance.',
|
|
191
|
+
'- Choose one to three brand-fit Solution applications from phone, desktop, and environment.',
|
|
192
|
+
'- Generate a dedicated scene for every photographic desktop or environment application with the active image skill; do not reuse general brand photography.',
|
|
193
|
+
'- Put mockups directly on the semantic brand canvas without generic backing panels or caption overlays.',
|
|
194
|
+
].join('\n')
|
|
195
|
+
return { ok: true, toolId: skill.id, phase: 'direction-proposals', room,
|
|
196
|
+
input: { brandName: resolvedBrandName, brief: resolvedBrief }, prompt,
|
|
197
|
+
workflow: skill.workflow, rules: skill.rules,
|
|
198
|
+
source: {
|
|
199
|
+
provider: 'github', repository: skill.repository, branch: skill.branch, revision: skill.revision,
|
|
200
|
+
skillPath: skill.skillPath, sourceDocument: skill.sourceDocument,
|
|
201
|
+
instruction: 'Resolve the pinned GitHub revision and read SKILL.md before presenting directions.',
|
|
202
|
+
},
|
|
203
|
+
nextAction: 'Present A, B, and C for user refinement. Do not build or save the final brand book yet.' }
|
|
204
|
+
}
|
|
205
|
+
|
|
171
206
|
export function listDocs() {
|
|
172
207
|
return readdirSync(paths().docs)
|
|
173
208
|
.filter((name) => name.endsWith('.md'))
|
|
@@ -200,6 +235,7 @@ export function search(query) {
|
|
|
200
235
|
...listThemes().map((item) => ({ kind: 'theme', id: item.id, title: item.name, summary: item.role, item })),
|
|
201
236
|
...listMotionProfiles().map((item) => ({ kind: 'motion-profile', id: item.id, title: item.label, summary: `${item.description} ${item.rules.join(' ')}`, item })),
|
|
202
237
|
...listLogoSkills().map((item) => ({ kind: 'logo-skill', id: item.id, title: item.name, summary: `${item.tagline} ${item.description} ${item.guidance}`, item })),
|
|
238
|
+
{ kind: 'brandbook-skill', id: getBrandbookSkill().id, title: getBrandbookSkill().name, summary: 'Brand identity BRAND.md three directions A B C marketing solution mockups image generation Arabic', item: getBrandbookSkill() },
|
|
203
239
|
...listDocs().map((topic) => ({ kind: 'docs', id: topic, title: topic, summary: getDoc(topic)?.content.slice(0, 500) ?? '', item: { topic } })),
|
|
204
240
|
]
|
|
205
241
|
return results
|
|
@@ -238,14 +274,14 @@ export function capabilityManifest() {
|
|
|
238
274
|
],
|
|
239
275
|
mcp: {
|
|
240
276
|
...mcpLaunch,
|
|
241
|
-
tools: ['get_room_context', 'search', 'list_components', 'get_component', 'list_block_definitions', 'get_block_definition', 'validate_layout', 'validate_agent_layout_mutation', 'list_blocks', 'get_block', 'list_templates', 'get_template', 'list_themes', 'get_theme', 'list_motion_profiles', 'get_motion_profile', 'list_logo_skills', 'get_logo_skill', 'prepare_logo_maker_run', 'list_docs', 'get_docs', 'doctor'],
|
|
277
|
+
tools: ['get_room_context', 'search', 'list_components', 'get_component', 'list_block_definitions', 'get_block_definition', 'validate_layout', 'validate_agent_layout_mutation', 'list_blocks', 'get_block', 'list_templates', 'get_template', 'list_themes', 'get_theme', 'list_motion_profiles', 'get_motion_profile', 'list_logo_skills', 'get_logo_skill', 'prepare_logo_maker_run', 'get_brandbook_skill', 'prepare_brandbook_run', 'list_docs', 'get_docs', 'doctor'],
|
|
242
278
|
},
|
|
243
279
|
}
|
|
244
280
|
}
|
|
245
281
|
|
|
246
282
|
export function repositoryDoctor() {
|
|
247
283
|
const required = [
|
|
248
|
-
'catalog.json', 'components.json', 'blocks.json', 'composition-registry.json', 'templates.json', 'themes.json', 'motion-profiles.json', 'logo-skills.json',
|
|
284
|
+
'catalog.json', 'components.json', 'blocks.json', 'composition-registry.json', 'templates.json', 'themes.json', 'motion-profiles.json', 'logo-skills.json', 'brandbook-skill.json',
|
|
249
285
|
].map((name) => join(paths().manifests, name))
|
|
250
286
|
const docs = ['quick-start-ai', 'arabic-friendly', 'theme-authoring', 'composition-registry'].map((name) => join(paths().docs, `${name}.md`))
|
|
251
287
|
const missing = [...required, ...docs].filter((path) => !existsSync(path))
|
package/package.json
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@utopia-studio-design/design-system-cli",
|
|
3
|
-
"version": "0.7.
|
|
3
|
+
"version": "0.7.2",
|
|
4
4
|
"description": "AI-readable CLI and MCP server for Ceramic Design System",
|
|
5
5
|
"ceramic": {
|
|
6
|
-
"designSystem": "^0.
|
|
6
|
+
"designSystem": "^0.10.0"
|
|
7
7
|
},
|
|
8
8
|
"type": "module",
|
|
9
9
|
"license": "MIT",
|