@utopia-studio-design/design-system-cli 0.3.0 → 0.3.1

package/data/manifests/motion-profiles.json

@@ -0,0 +1,121 @@
+{
+  "$schema": "https://utopia-studio.co/design-system/motion-profiles.schema.json",
+  "version": 1,
+  "contract": {
+    "themeChooses": "motion personality and semantic recipes",
+    "applicationChooses": "runtime adapter",
+    "componentRequests": "feedback, page, surface, or layout",
+    "escapeHatch": "motion={false}",
+    "reducedMotion": "apply the semantic final state immediately without transform, filter, or temporal animation"
+  },
+  "adapters": [
+    { "id": "waapi", "package": "built-in", "entry": "Motion" },
+    { "id": "framer-motion", "package": "framer-motion", "entry": "MotionFramer" },
+    { "id": "animejs", "package": "animejs", "entry": "MotionAnime" },
+    { "id": "gsap", "package": "gsap", "entry": "MotionGsap" }
+  ],
+  "profiles": [
+    {
+      "id": "ceremonial",
+      "label": "Ceremonial reveal",
+      "themes": ["utopia-default"],
+      "personality": "ceremonial",
+      "description": "A composed, high-fidelity reveal with restrained blur and long deceleration.",
+      "rules": ["Keep direct feedback fast", "Use blur only for page and large-surface reveals", "Make exits shorter than entrances"],
+      "timings": {
+        "press": { "duration": 0.16, "ease": [0.2, 0, 0, 1] },
+        "page": { "duration": 0.42, "ease": [0.16, 1, 0.3, 1] },
+        "expand": { "duration": 0.36, "ease": [0.16, 1, 0.3, 1] },
+        "reveal": { "duration": 0.44, "ease": [0.16, 1, 0.3, 1] },
+        "icon": { "duration": 0.64, "ease": [0.16, 1, 0.3, 1] }
+      },
+      "recipes": {
+        "feedback": {
+          "enter": { "from": { "scale": 1 }, "to": { "scale": 0.98 }, "timing": { "duration": 0.14, "ease": [0.2, 0, 0, 1] } },
+          "exit": { "from": { "scale": 0.98 }, "to": { "scale": 1 }, "timing": { "duration": 0.12, "ease": [0.2, 0, 0, 1] } }
+        },
+        "page": {
+          "enter": { "from": { "opacity": 0, "y": 6, "blur": 8 }, "to": { "opacity": 1, "x": 0, "y": 0, "scale": 1, "rotate": 0, "blur": 0 }, "timing": { "duration": 0.42, "ease": [0.16, 1, 0.3, 1] } },
+          "exit": { "from": { "opacity": 1, "x": 0, "y": 0, "scale": 1, "rotate": 0, "blur": 0 }, "to": { "opacity": 0, "y": -2, "blur": 4 }, "timing": { "duration": 0.24, "ease": [0.7, 0, 0.84, 0] } }
+        },
+        "surface": {
+          "enter": { "from": { "opacity": 0, "y": 8, "scale": 0.995, "blur": 8 }, "to": { "opacity": 1, "x": 0, "y": 0, "scale": 1, "rotate": 0, "blur": 0 }, "timing": { "duration": 0.44, "ease": [0.16, 1, 0.3, 1] } },
+          "exit": { "from": { "opacity": 1, "x": 0, "y": 0, "scale": 1, "rotate": 0, "blur": 0 }, "to": { "opacity": 0, "y": 2, "scale": 0.995, "blur": 4 }, "timing": { "duration": 0.26, "ease": [0.7, 0, 0.84, 0] } }
+        },
+        "layout": {
+          "enter": { "from": { "opacity": 0.88, "x": 8 }, "to": { "opacity": 1, "x": 0, "y": 0, "scale": 1, "rotate": 0, "blur": 0 }, "timing": { "duration": 0.36, "ease": [0.16, 1, 0.3, 1] } },
+          "exit": { "from": { "opacity": 1, "x": 0, "y": 0, "scale": 1, "rotate": 0, "blur": 0 }, "to": { "opacity": 0.88, "x": 4 }, "timing": { "duration": 0.22, "ease": [0.7, 0, 0.84, 0] } }
+        }
+      },
+      "orchestration": { "delayChildren": 0.04, "stagger": 0.035 }
+    },
+    {
+      "id": "swift",
+      "label": "Swift response",
+      "themes": ["dextrum"],
+      "personality": "swift",
+      "description": "Fast, compact movement for dense technical workflows.",
+      "rules": ["No reveal blur", "No orchestration delay", "Prefer short directional shifts"],
+      "timings": {
+        "press": { "duration": 0.08, "ease": [0.2, 0, 0, 1] },
+        "page": { "duration": 0.14, "ease": [0.2, 0, 0, 1] },
+        "expand": { "duration": 0.16, "ease": [0.2, 0, 0, 1] },
+        "reveal": { "duration": 0.14, "ease": [0.2, 0, 0, 1] },
+        "icon": { "duration": 0.24, "ease": [0.2, 0, 0, 1] }
+      },
+      "recipes": {
+        "feedback": {
+          "enter": { "from": { "scale": 1 }, "to": { "scale": 0.97 }, "timing": { "duration": 0.08, "ease": [0.2, 0, 0, 1] } },
+          "exit": { "from": { "scale": 0.97 }, "to": { "scale": 1 }, "timing": { "duration": 0.07, "ease": [0.2, 0, 0, 1] } }
+        },
+        "page": {
+          "enter": { "from": { "opacity": 0, "x": 3 }, "to": { "opacity": 1, "x": 0, "y": 0, "scale": 1, "rotate": 0, "blur": 0 }, "timing": { "duration": 0.14, "ease": [0.2, 0, 0, 1] } },
+          "exit": { "from": { "opacity": 1, "x": 0, "y": 0, "scale": 1, "rotate": 0, "blur": 0 }, "to": { "opacity": 0, "x": -2 }, "timing": { "duration": 0.09, "ease": [0.7, 0, 0.84, 0] } }
+        },
+        "surface": {
+          "enter": { "from": { "opacity": 0, "y": 2 }, "to": { "opacity": 1, "x": 0, "y": 0, "scale": 1, "rotate": 0, "blur": 0 }, "timing": { "duration": 0.14, "ease": [0.2, 0, 0, 1] } },
+          "exit": { "from": { "opacity": 1, "x": 0, "y": 0, "scale": 1, "rotate": 0, "blur": 0 }, "to": { "opacity": 0 }, "timing": { "duration": 0.09, "ease": [0.7, 0, 0.84, 0] } }
+        },
+        "layout": {
+          "enter": { "from": { "opacity": 0.94, "x": 4 }, "to": { "opacity": 1, "x": 0, "y": 0, "scale": 1, "rotate": 0, "blur": 0 }, "timing": { "duration": 0.16, "ease": [0.2, 0, 0, 1] } },
+          "exit": { "from": { "opacity": 1, "x": 0, "y": 0, "scale": 1, "rotate": 0, "blur": 0 }, "to": { "opacity": 0.94, "x": 2 }, "timing": { "duration": 0.1, "ease": [0.7, 0, 0.84, 0] } }
+        }
+      },
+      "orchestration": { "delayChildren": 0, "stagger": 0 }
+    },
+    {
+      "id": "precise",
+      "label": "Precise dissolve",
+      "themes": ["barrier-intelligence"],
+      "personality": "precise",
+      "description": "Controlled dissolves and small scale changes for analytical surfaces.",
+      "rules": ["Prefer opacity over travel", "Keep scale changes below two percent", "Preserve analytical continuity"],
+      "timings": {
+        "press": { "duration": 0.1, "ease": [0.2, 0, 0, 1] },
+        "page": { "duration": 0.2, "ease": [0.16, 1, 0.3, 1] },
+        "expand": { "duration": 0.22, "ease": [0.16, 1, 0.3, 1] },
+        "reveal": { "duration": 0.24, "ease": [0.16, 1, 0.3, 1] },
+        "icon": { "duration": 0.32, "ease": [0.16, 1, 0.3, 1] }
+      },
+      "recipes": {
+        "feedback": {
+          "enter": { "from": { "scale": 1 }, "to": { "scale": 0.985 }, "timing": { "duration": 0.1, "ease": [0.2, 0, 0, 1] } },
+          "exit": { "from": { "scale": 0.985 }, "to": { "scale": 1 }, "timing": { "duration": 0.08, "ease": [0.2, 0, 0, 1] } }
+        },
+        "page": {
+          "enter": { "from": { "opacity": 0 }, "to": { "opacity": 1, "x": 0, "y": 0, "scale": 1, "rotate": 0, "blur": 0 }, "timing": { "duration": 0.2, "ease": [0.16, 1, 0.3, 1] } },
+          "exit": { "from": { "opacity": 1, "x": 0, "y": 0, "scale": 1, "rotate": 0, "blur": 0 }, "to": { "opacity": 0 }, "timing": { "duration": 0.14, "ease": [0.7, 0, 0.84, 0] } }
+        },
+        "surface": {
+          "enter": { "from": { "opacity": 0, "scale": 0.99 }, "to": { "opacity": 1, "x": 0, "y": 0, "scale": 1, "rotate": 0, "blur": 0 }, "timing": { "duration": 0.24, "ease": [0.16, 1, 0.3, 1] } },
+          "exit": { "from": { "opacity": 1, "x": 0, "y": 0, "scale": 1, "rotate": 0, "blur": 0 }, "to": { "opacity": 0, "scale": 0.995 }, "timing": { "duration": 0.16, "ease": [0.7, 0, 0.84, 0] } }
+        },
+        "layout": {
+          "enter": { "from": { "opacity": 0.92, "x": 5 }, "to": { "opacity": 1, "x": 0, "y": 0, "scale": 1, "rotate": 0, "blur": 0 }, "timing": { "duration": 0.22, "ease": [0.16, 1, 0.3, 1] } },
+          "exit": { "from": { "opacity": 1, "x": 0, "y": 0, "scale": 1, "rotate": 0, "blur": 0 }, "to": { "opacity": 0.92, "x": 3 }, "timing": { "duration": 0.14, "ease": [0.7, 0, 0.84, 0] } }
+        }
+      },
+      "orchestration": { "delayChildren": 0.02, "stagger": 0.02 }
+    }
+  ]
+}

package/data/manifests/theme-barrier-intelligence.json

@@ -9,6 +9,7 @@
     "packages/design-system/src/themes/barrier-intelligence.css",
     "packages/design-system/src/manifests/theme-barrier-intelligence.json"
   ],
+  "motionProfile": "precise",
   "brandPrimitives": {
     "colors": {
       "black": "#000000",
@@ -23,16 +24,22 @@
       "goldDark": "#8A6637",
       "gold": "#A6824C",
       "goldLight": "#D2AC6C",
-      "goldForeground": "#1A1208"
+      "goldForeground": "#1A1208",
+      "detectorLime": "#A6B86A",
+      "assuranceAtRisk": "#C47C48",
+      "assuranceLost": "#C76B62",
+      "assuranceWarning": "#D2A65A"
     },
     "typography": {
       "appWebsite": {
         "ui": "Hanken Grotesk",
+        "mono": "JetBrains Mono",
         "use": "Product UI, dashboards, documentation, and long-form reading"
       },
       "arabicFamily": "IBM Plex Sans Arabic",
       "weights": {
-        "hankenGrotesk": [400, 500, 600, 700]
+        "hankenGrotesk": [400, 500, 600, 700],
+        "jetBrainsMono": [400, 500, 600]
       },
       "arabicWeights": [400, 500, 700],
       "headlineCasing": "sentence",
@@ -66,7 +73,21 @@
     "--font-sans": "Hanken Grotesk",
     "--font-ui-support": "Hanken Grotesk",
     "--font-marketing-display": "Hanken Grotesk scoped through theme selectors",
+    "--font-mono": "JetBrains Mono",
     "--font-arabic": "IBM Plex Sans Arabic",
+    "--font-size-marketing-h1": "clamp(3rem, 6vw, 5.75rem)",
+    "--font-size-marketing-h2": "clamp(2.25rem, 4vw, 3.75rem)",
+    "--font-size-marketing-h3": "clamp(1.5rem, 2.5vw, 2.25rem)",
+    "--line-height-marketing-h1": "1",
+    "--line-height-marketing-h2": "1.06",
+    "--line-height-marketing-h3": "1.14",
+    "--measure-marketing-h1": "12ch",
+    "--measure-marketing-h2": "18ch",
+    "--measure-marketing-h3": "28ch",
+    "--container-standard": "72rem",
+    "--container-wide": "90rem",
+    "--page-gutter": "clamp(1rem, 3vw, 2.5rem)",
+    "--content-measure": "72ch",
     "--sidebar-width": "17rem",
     "--shadow-control": "none",
     "--control-height-sm": "2rem",
@@ -77,6 +98,48 @@
     "--modal-surface": "Card High",
     "--popover-surface": "Card High"
   },
+  "activationContract": {
+    "brandAttribute": "data-brand=\"barrier-intelligence\"",
+    "modeAttribute": "data-color-mode=\"dark|light|system\"",
+    "defaultMode": "dark",
+    "legacyAlias": "data-theme=\"barrier-intelligence\" remains supported during migration",
+    "rule": "Changing brand must not overwrite the persisted color mode. System follows prefers-color-scheme."
+  },
+  "layoutContract": {
+    "standard": "--container-standard",
+    "wide": "--container-wide",
+    "gutter": "--page-gutter",
+    "readingMeasure": "--content-measure",
+    "formula": "inline-size: min(calc(100% - 2 * var(--page-gutter)), var(--container-standard)); margin-inline: auto",
+    "rule": "Navigation, hero, and body content share the same responsive gutter. Products do not invent --page or --hero-page aliases."
+  },
+  "detectorStatus": {
+    "primitive": { "token": "--bi-detector-lime", "value": "#A6B86A" },
+    "semanticTokens": ["--detector-active", "--detector-active-foreground", "--detector-active-surface", "--detector-active-border"],
+    "use": ["active detectors", "verified detector output"],
+    "avoid": ["general calls to action", "decorative glow", "neon page accents"],
+    "accessibility": "Pair color with an icon and localized status label; verify text and control contrast in Dark and Light."
+  },
+  "assuranceStates": {
+    "credited": ["--assurance-credited", "--assurance-credited-foreground", "--assurance-credited-surface", "--assurance-credited-border"],
+    "atRisk": ["--assurance-at-risk", "--assurance-at-risk-foreground", "--assurance-at-risk-surface", "--assurance-at-risk-border"],
+    "lost": ["--assurance-lost", "--assurance-lost-foreground", "--assurance-lost-surface", "--assurance-lost-border"],
+    "warning": ["--assurance-warning", "--assurance-warning-foreground", "--assurance-warning-surface", "--assurance-warning-border"],
+    "verified": ["--assurance-verified", "--assurance-verified-foreground", "--assurance-verified-surface", "--assurance-verified-border"],
+    "rule": "Assurance states are domain semantics, not aliases for generic success/warning/destructive. Never communicate state by color alone."
+  },
+  "motionContract": {
+    "durations": ["--motion-duration-press", "--motion-duration-page", "--motion-duration-expand", "--motion-duration-reveal", "--motion-duration-icon"],
+    "easing": ["--motion-ease-standard", "--motion-ease-emphasized", "--motion-ease-icon"],
+    "distance": { "page": "6px", "reveal": "10px" },
+    "reducedMotion": "Core sets durations and distances to zero, disables icon animation, and restores press scale to 1 under prefers-reduced-motion."
+  },
+  "fontSupply": {
+    "hankenGrotesk": "Loaded by the theme stylesheet from Google Fonts",
+    "jetBrainsMono": "Loaded by the theme stylesheet from Google Fonts",
+    "ibmPlexSansArabic": "Self-hosted in the package with 400, 500, and 700 weights",
+    "display": "swap"
+  },
   "visualPolicy": {
     "tone": ["rigorous", "quiet", "technical", "premium"],
     "allow": [
@@ -84,14 +147,16 @@
       "warm gold accents for primary action and signal",
       "neutral ink hierarchy for reading",
       "rounded cards with hairline borders",
-      "minimal shadow; depth via border and surface steps"
+      "minimal shadow; depth via border and surface steps",
+      "restrained detector lime for active and verified engineering states"
     ],
     "avoid": [
       "bright neon accents",
       "colorful gradients as a default surface treatment",
       "overly rounded, playful geometry",
       "Utopia brick red palette",
-      "marketing display fonts in dense app UI"
+      "marketing display fonts in dense app UI",
+      "detector lime used as a decorative or glowing accent"
     ]
   },
   "iconPolicy": {
@@ -101,6 +166,15 @@
     "avoid": ["emoji", "mixed icon families in one surface"],
     "coreNote": "Icon policy is theme-owned. Core components remain icon-system neutral."
   },
+  "marketingAssetPolicy": {
+    "relationshipToIcons": "Lucide remains the UI icon system. Three-dimensional engineering assets are marketing media, not component icons.",
+    "palette": ["warm gold", "controlled grayscale", "restrained detector lime"],
+    "material": "Machined, technical, and restrained rather than glossy or toy-like.",
+    "lighting": "Directional studio lighting with clear form and no decorative neon glow.",
+    "background": "Near-black or controlled neutral fields with sufficient object separation.",
+    "use": ["engineering concepts", "detector visualization", "assurance evidence", "product capability storytelling"],
+    "avoid": ["generic abstract blobs", "glassmorphism", "cyberpunk glow", "decorative lime accents", "Lucide icons rendered as 3D objects"]
+  },
   "translations": {
     "ar": {
       "summary": "ثيم Barrier Intelligence مربوط بعقد Ceramic الدلالي. يستخدم أسطح منتجات شبه سوداء ولمسات ذهبية دافئة وتسلسلا محايدا محسوبا. يقود Hanken Grotesk واجهة المنتج والتوثيق، وتبقى أي طباعة تسويقية محصورة في محددات يملكها الثيم.",
@@ -114,9 +188,14 @@
   "aiRules": [
     "Read this theme policy after the core semantic contract.",
     "Map Barrier Intelligence palette through semantic tokens only.",
+    "Select the Barrier Intelligence brand with data-brand and select Dark, Light, or System independently with data-color-mode.",
+    "Use core container and gutter tokens instead of product-local --page or --hero-page aliases.",
     "Use gold for primary actions and high-signal emphasis, not as a full-page wash.",
+    "Use detector lime only for active detectors and verified states, always with a non-color status cue.",
+    "Use assurance semantic token families for credited, at risk, lost, warning, and verified states.",
     "Prefer near-black and stepped card surfaces with ink hierarchy.",
     "Use Hanken Grotesk for Latin app UI and body copy in this theme.",
+    "Use the dedicated marketing H1, H2, and H3 size, line-height, and measure tokens instead of scaling --font-size-display ad hoc.",
     "Keep Arabic on IBM Plex Sans Arabic tokens.",
     "Do not swap Ceramic shell navigation branding when this theme is active."
   ]