@utopia-studio-design/design-system-cli 0.6.1 → 0.7.0

package/data/manifests/themes.json

@@ -1,5 +1,15 @@
 {
   "defaultTheme": "utopia-default",
+  "galleryThemeIds": [
+    "utopia-default",
+    "utopia-cloudblur",
+    "dextrum",
+    "barrier-intelligence",
+    "renacore",
+    "vyapti",
+    "prism-mono",
+    "y2k-pop"
+  ],
   "intent": "Themes are token-contract and visual-policy implementations. Utopia Default is the first locked theme, not the entire design system.",
   "coreBoundary": {
     "owns": [
@@ -90,20 +100,22 @@
     "--card-padding",
     "--overlay",
     "--modal-surface",
-    "--popover-surface"
+    "--popover-surface",
+    "--loading-background",
+    "--loading-accent",
+    "--loading-foreground"
   ],
   "themes": [
     {
       "id": "utopia-default",
-      "name": "The Utopia Studio Default",
-      "shortName": "Utopia Default",
+      "name": "The Utopia Studio",
+      "shortName": "The Utopia Studio",
       "locked": true,
-      "role": "default brand theme",
-      "description": "The default Ceramic theme for The Utopia Studio. It maps semantic roles to Special Black, White, Brick Red, Light Grey, TWK Lausanne, IBM Plex Sans Arabic, square geometry, and border-led depth.",
+      "role": "Primary site theme",
+      "description": "Default theme for The Utopia Studio and Ceramic.",
       "bestFor": [
         "The Utopia Studio products",
-        "Ceramic documentation",
-        "brand-led editorial and operational surfaces"
+        "Ceramic documentation"
       ],
       "principles": [
         "architectural hierarchy",
@@ -115,18 +127,18 @@
       "brandAsset": {
         "kind": "wordmark",
         "src": "/brand/the-utopia-studio-wordmark.avif",
+        "presentationSrc": "/brand/the-utopia-studio-wordmark.svg",
         "alt": "The Utopia Studio",
         "usage": "The wordmark may identify The Utopia Studio branded surfaces. It is not a required core component asset."
       },
       "translations": {
         "ar": {
-          "name": "ثيم The Utopia Studio الافتراضي",
-          "role": "ثيم العلامة الافتراضي",
-          "description": "الثيم الافتراضي لـ Ceramic وThe Utopia Studio. يربط الأدوار الدلالية بألوان العلامة وخطي TWK Lausanne وIBM Plex Sans Arabic والهندسة المربعة والعمق المعتمد على الحدود.",
+          "name": "The Utopia Studio",
+          "role": "ثيم الموقع الأساسي",
+          "description": "الثيم الافتراضي لـ The Utopia Studio وCeramic.",
           "bestFor": [
             "منتجات The Utopia Studio",
-            "توثيق Ceramic",
-            "الأسطح التحريرية والتشغيلية المرتبطة بالعلامة"
+            "توثيق Ceramic"
           ],
           "principles": [
             "تسلسل معماري",
@@ -140,7 +152,7 @@
       },
       "policyManifest": "packages/design-system/src/manifests/theme-utopia-default.json",
       "css": "packages/design-system/src/themes/utopia-default.css",
-      "iconSystem": "utopia-dot-bar",
+      "iconSystem": "phosphor",
       "motionProfile": "ceremonial",
       "values": {
         "--background": "#3C3235",
@@ -156,6 +168,9 @@
         "--border": "rgba(255,255,255,0.18)",
         "--input": "rgba(255,255,255,0.24)",
         "--ring": "#D77A59",
+        "--loading-background": "#3C3235",
+        "--loading-accent": "#CC5536",
+        "--loading-foreground": "#EEEEEE",
         "--radius": "0px",
         "--radius-control": "0px",
         "--radius-surface": "0px",
@@ -178,18 +193,18 @@
         "--font-display": "TWK Lausanne",
         "--font-ui-support": "TWK Lausanne",
         "--font-marketing-display": "TWK Lausanne",
-        "--font-arabic": "IBM Plex Sans Arabic",
-        "--font-arabic-body": "IBM Plex Sans Arabic",
-        "--font-arabic-display": "IBM Plex Sans Arabic",
-        "--font-weight-arabic-body": "400",
-        "--font-weight-arabic-display": "700",
+        "--font-arabic": "Readex Pro",
+        "--font-arabic-body": "Readex Pro",
+        "--font-arabic-display": "Readex Pro",
+        "--font-weight-arabic-body": "300",
+        "--font-weight-arabic-display": "500",
         "--font-size-display": "clamp(44px, 8vw, 96px)",
         "--font-size-arabic-body": "16px",
         "--font-size-arabic-body-lg": "19px",
-        "--font-size-arabic-display": "clamp(42px, 7.6vw, 91px)",
+        "--font-size-arabic-display": "clamp(40px, 7.3vw, 87px)",
         "--line-height-arabic": "1.75",
-        "--line-height-arabic-body": "1.75",
-        "--line-height-arabic-display": "1.16",
+        "--line-height-arabic-body": "1.85",
+        "--line-height-arabic-display": "1.28",
         "--tracking-arabic": "0",
         "--tracking-arabic-display": "0",
         "--sidebar-width": "17rem",
@@ -206,12 +221,11 @@
       "id": "dextrum",
       "name": "Dextrum",
       "locked": false,
-      "role": "brand theme",
-      "description": "Dark Blue, Ocean Blue, Charcoal Blue, Timid White. Manrope drives product UI and default headings; Clash Grotesk is marketing-only.",
+      "role": "Brand theme",
+      "description": "Theme for Dextrum product interfaces and technical sales pages.",
       "bestFor": [
         "Dextrum product UI",
-        "technical sales surfaces",
-        "data-heavy operational workflows"
+        "Technical sales pages"
       ],
       "principles": [
         "calm technical hierarchy",
@@ -229,11 +243,10 @@
         "ar": {
           "name": "Dextrum",
           "role": "ثيم علامة",
-          "description": "ثيم تقني بأزرق داكن وأزرق محيطي وأبيض هادئ. يستخدم Manrope لواجهة المنتج وClash Grotesk للتسويق فقط.",
+          "description": "ثيم لواجهات منتجات Dextrum وصفحات المبيعات التقنية.",
           "bestFor": [
             "واجهات منتج Dextrum",
-            "أسطح المبيعات التقنية",
-            "سير العمل التشغيلي كثيف البيانات"
+            "صفحات المبيعات التقنية"
           ],
           "principles": [
             "تسلسل تقني هادئ",
@@ -262,6 +275,9 @@
         "--border": "rgba(234,234,234,0.14)",
         "--input": "rgba(234,234,234,0.20)",
         "--ring": "#3E8ECC",
+        "--loading-background": "#192B39",
+        "--loading-accent": "#3E8ECC",
+        "--loading-foreground": "#EAEAEA",
         "--radius": "6px",
         "--radius-control": "6px",
         "--radius-surface": "8px",
@@ -284,18 +300,18 @@
         "--font-display": "Manrope",
         "--font-ui-support": "Satoshi",
         "--font-marketing-display": "Clash Grotesk",
-        "--font-arabic": "IBM Plex Sans Arabic",
-        "--font-arabic-body": "IBM Plex Sans Arabic",
-        "--font-arabic-display": "IBM Plex Sans Arabic",
-        "--font-weight-arabic-body": "400",
-        "--font-weight-arabic-display": "700",
+        "--font-arabic": "Readex Pro",
+        "--font-arabic-body": "Readex Pro",
+        "--font-arabic-display": "Readex Pro",
+        "--font-weight-arabic-body": "300",
+        "--font-weight-arabic-display": "500",
         "--font-size-display": "clamp(2.75rem, 7vw, 5.5rem)",
         "--font-size-arabic-body": "16px",
         "--font-size-arabic-body-lg": "18px",
-        "--font-size-arabic-display": "clamp(2.625rem, 6.6vw, 5.25rem)",
+        "--font-size-arabic-display": "clamp(2.5rem, 6.2vw, 5rem)",
         "--line-height-arabic": "1.75",
-        "--line-height-arabic-body": "1.75",
-        "--line-height-arabic-display": "1.14",
+        "--line-height-arabic-body": "1.85",
+        "--line-height-arabic-display": "1.28",
         "--tracking-arabic": "0",
         "--tracking-arabic-display": "0",
         "--sidebar-width": "17rem",
@@ -310,16 +326,48 @@
         "--popover-surface": "#2F3F4C"
       }
     },
+    {
+      "id": "prism-mono",
+      "name": "Prism Mono",
+      "shortName": "Prism Mono",
+      "locked": false,
+      "role": "Visual theme",
+      "description": "Black-and-white theme with a spectral accent.",
+      "motionProfile": "swift",
+      "bestFor": ["AI products", "Creative tools"],
+      "principles": ["monochrome first", "spectral color with purpose", "crisp geometry", "fast direct feedback", "accessible color-independent states"],
+      "preview": {
+        "label": "PRISM / MONO",
+        "foreground": "#090909",
+        "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"
+      },
+      "translations": {"ar": {"name": "Prism Mono", "role": "ثيم بصري", "description": "ثيم أبيض وأسود مع تدرج طيفي.", "bestFor": ["منتجات الذكاء الاصطناعي", "الأدوات الإبداعية"], "principles": ["الأبيض والأسود أولاً", "لون طيفي هادف", "هندسة واضحة", "استجابة سريعة", "حالات لا تعتمد على اللون وحده"]}},
+      "policyManifest": "packages/design-system/src/manifests/theme-prism-mono.json",
+      "css": "packages/design-system/src/themes/prism-mono.css",
+      "iconSystem": "lucide",
+      "values": {
+        "--background": "#F8F8F6", "--foreground": "#090909", "--card": "#FFFFFF", "--card-foreground": "#090909",
+        "--primary": "#090909", "--primary-foreground": "#FFFFFF", "--secondary": "#ECECEA", "--secondary-foreground": "#090909",
+        "--muted": "#E4E4E0", "--muted-foreground": "#5F5F5A", "--border": "#CACAC5", "--input": "#A9A9A3", "--ring": "#1A73E8",
+        "--loading-background": "#F8F8F6", "--loading-accent": "#1A73E8", "--loading-foreground": "#090909",
+        "--radius": "14px", "--radius-control": "999px", "--radius-surface": "24px", "--radius-chat-bubble": "20px", "--radius-chat-composer": "28px", "--radius-chat-token": "14px",
+        "--shadow-control": "0 1px 0 rgba(0,0,0,.08)", "--motion-duration-press": "90ms", "--motion-duration-page": "180ms", "--motion-duration-expand": "180ms", "--motion-duration-reveal": "220ms", "--motion-duration-icon": "280ms",
+        "--motion-ease-standard": "cubic-bezier(0.2,0,0,1)", "--motion-ease-emphasized": "cubic-bezier(0.16,1,0.3,1)", "--motion-ease-icon": "cubic-bezier(0.16,1,0.3,1)", "--motion-press-scale": ".98", "--motion-distance-page": "6px", "--motion-distance-reveal": "8px",
+        "--font-sans": "TWK Lausanne", "--font-display": "TWK Lausanne", "--font-ui-support": "TWK Lausanne", "--font-marketing-display": "TWK Lausanne", "--font-arabic": "IBM Plex Sans Arabic", "--font-arabic-body": "IBM Plex Sans Arabic", "--font-arabic-display": "IBM Plex Sans Arabic",
+        "--font-weight-arabic-body": "400", "--font-weight-arabic-display": "700", "--font-size-display": "clamp(2.75rem,7vw,5.75rem)", "--font-size-arabic-body": "16px", "--font-size-arabic-body-lg": "19px", "--font-size-arabic-display": "clamp(2.6rem,6.6vw,5.4rem)", "--line-height-arabic": "1.75", "--line-height-arabic-body": "1.75", "--line-height-arabic-display": "1.16", "--tracking-arabic": "0", "--tracking-arabic-display": "0",
+        "--sidebar-width": "17rem", "--control-height-sm": "2rem", "--sidebar-width-collapsed": "4rem", "--sidebar-min-block-size": "30rem", "--sidebar-rail-size": "8px", "--button-height": "40px", "--card-padding": "24px",
+        "--overlay": "rgb(9 9 9 / 82%)", "--modal-surface": "#FFFFFF", "--popover-surface": "#FFFFFF", "--prism-spectrum": "linear-gradient(90deg,#EA4335,#FBBC04,#34A853,#4285F4)"
+      }
+    },
     {
       "id": "barrier-intelligence",
       "name": "Barrier Intelligence",
       "locked": false,
-      "role": "brand theme",
-      "description": "Near-black surfaces with warm gold accents, restrained detector lime, domain assurance states, and Hanken Grotesk for product UI. Brand and color mode are selected independently.",
+      "role": "Brand theme",
+      "description": "Theme for Barrier Intelligence product and analytics interfaces.",
       "bestFor": [
         "Barrier Intelligence product UI",
-        "risk and intelligence workflows",
-        "high-contrast analytical products"
+        "Risk and intelligence workflows"
       ],
       "principles": [
         "near-black hierarchy",
@@ -329,15 +377,15 @@
         "independent brand and color mode",
         "restrained detector and assurance signals"
       ],
+      "preview": {"label": "BARRIER / INTELLIGENCE", "foreground": "#D2AC6C", "background": "radial-gradient(circle at 76% 20%, rgba(210,172,108,.24), transparent 32%), linear-gradient(145deg,#050505,#16120c 68%,#050505)"},
       "translations": {
         "ar": {
           "name": "Barrier Intelligence",
           "role": "ثيم علامة",
-          "description": "ثيم بأسطح شبه سوداء ولمسات ذهبية دافئة وتسلسل حبر واضح وخط Hanken Grotesk لواجهة المنتج.",
+          "description": "ثيم لواجهات منتجات وتحليلات Barrier Intelligence.",
           "bestFor": [
             "واجهات Barrier Intelligence",
-            "سير عمل المخاطر والاستخبارات",
-            "المنتجات التحليلية عالية التباين"
+            "سير عمل المخاطر والاستخبارات"
           ],
           "principles": [
             "تسلسل شبه أسود",
@@ -366,6 +414,9 @@
         "--border": "color-mix(in srgb, #1C1C1C 82%, transparent)",
         "--input": "color-mix(in srgb, #1C1C1C 70%, transparent)",
         "--ring": "#A6824C",
+        "--loading-background": "#000000",
+        "--loading-accent": "#A6824C",
+        "--loading-foreground": "#F5F5F2",
         "--radius": "12px",
         "--radius-control": "6px",
         "--radius-surface": "14px",
@@ -428,18 +479,42 @@
         "--popover-surface": "#141414"
       }
     },
+    {
+      "id": "y2k-pop",
+      "name": "Y2K Pop",
+      "shortName": "Y2K Pop",
+      "locked": false,
+      "role": "Visual theme",
+      "description": "Early-web theme with rounded geometry and pastel colors.",
+      "motionProfile": "swift",
+      "bestFor": ["Youth and culture products", "Community and campaign pages"],
+      "principles": ["cute but legible", "bubble geometry", "pastel energy", "tactile offset depth", "nostalgia with modern accessibility"],
+      "preview": {"label": "Y2K ✦ POP", "foreground": "#35144F", "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)"},
+      "translations": {"ar": {"name": "Y2K Pop", "role": "ثيم بصري", "description": "ثيم مستوحى من الويب المبكر بهندسة مستديرة وألوان باستيل.", "bestFor": ["منتجات الشباب والثقافة", "صفحات المجتمع والحملات"], "principles": ["لطيف وواضح", "هندسة فقاعية", "طاقة الباستيل", "عمق ملموس", "حنين مع وصول حديث"]}},
+      "policyManifest": "packages/design-system/src/manifests/theme-y2k-pop.json",
+      "css": "packages/design-system/src/themes/y2k-pop.css",
+      "iconSystem": "lucide-rounded",
+      "values": {
+        "--background": "#FFF6FD", "--foreground": "#35144F", "--card": "#FFFFFF", "--card-foreground": "#35144F",
+        "--primary": "#6C2BD9", "--primary-foreground": "#FFFFFF", "--secondary": "#FFD4F0", "--secondary-foreground": "#35144F", "--muted": "#EFE5FA", "--muted-foreground": "#725E81", "--border": "#8B68A5", "--input": "#8B68A5", "--ring": "#6C2BD9",
+        "--loading-background": "#FFF6FD", "--loading-accent": "#6C2BD9", "--loading-foreground": "#35144F",
+        "--radius": "22px", "--radius-control": "999px", "--radius-surface": "32px", "--radius-chat-bubble": "26px", "--radius-chat-composer": "32px", "--radius-chat-token": "18px", "--shadow-control": "3px 3px 0 #35144F",
+        "--motion-duration-press": "90ms", "--motion-duration-page": "180ms", "--motion-duration-expand": "200ms", "--motion-duration-reveal": "240ms", "--motion-duration-icon": "300ms", "--motion-ease-standard": "cubic-bezier(.2,0,0,1)", "--motion-ease-emphasized": "cubic-bezier(.2,1.35,.4,1)", "--motion-ease-icon": "cubic-bezier(.2,1.35,.4,1)", "--motion-press-scale": ".96", "--motion-distance-page": "8px", "--motion-distance-reveal": "12px",
+        "--font-sans": "TWK Lausanne", "--font-display": "TWK Lausanne", "--font-ui-support": "TWK Lausanne", "--font-marketing-display": "TWK Lausanne", "--font-arabic": "IBM Plex Sans Arabic", "--font-arabic-body": "IBM Plex Sans Arabic", "--font-arabic-display": "IBM Plex Sans Arabic", "--font-weight-arabic-body": "400", "--font-weight-arabic-display": "700", "--font-size-display": "clamp(2.75rem,7.4vw,6rem)", "--font-size-arabic-body": "16px", "--font-size-arabic-body-lg": "19px", "--font-size-arabic-display": "clamp(2.6rem,7vw,5.6rem)", "--line-height-arabic": "1.75", "--line-height-arabic-body": "1.75", "--line-height-arabic-display": "1.18", "--tracking-arabic": "0", "--tracking-arabic-display": "0",
+        "--sidebar-width": "17rem", "--control-height-sm": "2rem", "--sidebar-width-collapsed": "4rem", "--sidebar-min-block-size": "30rem", "--sidebar-rail-size": "8px", "--button-height": "42px", "--card-padding": "24px", "--overlay": "rgb(53 20 79 / 74%)", "--modal-surface": "#FFFFFF", "--popover-surface": "#FFFFFF"
+      }
+    },
     {
       "id": "renacore",
       "name": "Renacore",
       "shortName": "Renacore",
       "locked": false,
-      "role": "brand theme",
-      "description": "A calm, precise operational theme for critical energy infrastructure, built from a white product canvas, muted grey structure, and restrained Renacore Teal active states.",
+      "role": "Brand theme",
+      "description": "Theme for Renacore product interfaces and energy dashboards.",
       "motionProfile": "precise",
       "bestFor": [
-        "Renacore marketing websites",
-        "predictive-intelligence product interfaces",
-        "energy infrastructure dashboards"
+        "Renacore product interfaces",
+        "Energy dashboards"
       ],
       "principles": [
         "quiet",
@@ -451,11 +526,10 @@
         "ar": {
           "name": "Renacore",
           "role": "ثيم علامة",
-          "description": "ثيم تشغيلي هادئ ودقيق للبنية التحتية الحرجة للطاقة، مبني على مساحة بيضاء وهيكل رمادي وإشارات نشطة بلون Renacore Teal.",
+          "description": "ثيم لواجهات منتجات Renacore ولوحات معلومات الطاقة.",
           "bestFor": [
-            "مواقع Renacore",
-            "واجهات الذكاء التنبؤي",
-            "لوحات معلومات البنية التحتية للطاقة"
+            "واجهات منتجات Renacore",
+            "لوحات معلومات الطاقة"
           ],
           "principles": [
             "هادئ",
@@ -488,6 +562,9 @@
         "--border": "#F2F2F2",
         "--input": "#D8D8D8",
         "--ring": "#12414B",
+        "--loading-background": "#020D13",
+        "--loading-accent": "#97D1DD",
+        "--loading-foreground": "#D6EAED",
         "--radius": "8px",
         "--radius-control": "6px",
         "--radius-surface": "12px",
@@ -541,13 +618,12 @@
       "name": "Vyapti",
       "shortName": "Vyapti",
       "locked": false,
-      "role": "brand theme",
-      "description": "White-first, deep-green technical theme for calm, precise, evidence-led product and marketing interfaces.",
+      "role": "Brand theme",
+      "description": "Theme for Vyapti product and technical marketing interfaces.",
       "motionProfile": "precise",
       "bestFor": [
         "Vyapti product interfaces",
-        "security and cryptography workflows",
-        "technical marketing and evidence-led content"
+        "Technical marketing pages"
       ],
       "principles": [
         "calm technical hierarchy",
@@ -556,6 +632,24 @@
         "spacious sections and compact controls",
         "Arabic-friendly logical layout"
       ],
+      "translations": {
+        "ar": {
+          "name": "Vyapti",
+          "role": "ثيم علامة",
+          "description": "ثيم لواجهات منتجات Vyapti وصفحات التسويق التقنية.",
+          "bestFor": [
+            "واجهات منتجات Vyapti",
+            "صفحات التسويق التقنية"
+          ],
+          "principles": [
+            "تسلسل تقني هادئ",
+            "أسطح منتج بيضاء",
+            "إبراز أخضر دلالي",
+            "أقسام واسعة وعناصر تحكم مدمجة",
+            "تخطيط منطقي داعم للعربية"
+          ]
+        }
+      },
       "policyManifest": "packages/design-system/src/manifests/theme-vyapti.json",
       "css": "packages/design-system/src/themes/vyapti.css",
       "iconSystem": "lucide",
@@ -573,6 +667,9 @@
         "--border": "rgb(1 37 25 / 10%)",
         "--input": "rgb(1 37 25 / 18%)",
         "--ring": "#0F9B6A",
+        "--loading-background": "#012519",
+        "--loading-accent": "#15B57F",
+        "--loading-foreground": "#FFFFFF",
         "--radius": "10px",
         "--radius-control": "10px",
         "--radius-surface": "18px",
@@ -621,6 +718,137 @@
         "--modal-surface": "#FFFFFF",
         "--popover-surface": "#FFFFFF"
       }
+    },
+    {
+      "id": "utopia-cloudblur",
+      "name": "Utopia Cloudblur",
+      "shortName": "Utopia Cloudblur",
+      "locked": false,
+      "role": "Brand theme",
+      "description": "Theme for the Utopia design-system homepage.",
+      "motionProfile": "ceremonial",
+      "bestFor": [
+        "Utopia design-system homepage",
+        "Editorial product pages"
+      ],
+      "principles": [
+        "mist-first readable canvas",
+        "one dominant cloud surface",
+        "localized spectral light",
+        "blur as progressive enhancement",
+        "Arabic-friendly logical layout"
+      ],
+      "preview": {
+        "label": "UTOPIA / CERAMIC",
+        "foreground": "#FFFFFF",
+        "background": "radial-gradient(circle at 22% 18%, rgba(141,235,244,.72), transparent 28%), radial-gradient(circle at 78% 72%, rgba(213,185,243,.68), transparent 30%), linear-gradient(145deg,#111b2a,#26354a 58%,#492f4b)"
+      },
+      "brandAsset": {
+        "kind": "wordmark",
+        "src": "/brand/the-utopia-studio-wordmark.avif",
+        "presentationSrc": "/brand/the-utopia-studio-wordmark.svg",
+        "alt": "The Utopia Studio",
+        "usage": "Use the wordmark on Utopia Cloudblur covers, closing slides, and other brand-identifying surfaces."
+      },
+      "signature": {
+        "id": "cloudblur-signal-widget",
+        "kind": "widget",
+        "status": "available",
+        "label": "Cloudblur Cards 01 + 02 Glass Widget",
+        "description": "The Cloudblur signature component is the Glass effect shared by cards 01 and 02: an overlapping two-card composition pairing a zero-fill ceramic system card with an unchanged lifestyle image card and the registered -45°/80%, 100/72/0/0/43 Glass treatment.",
+        "renderer": "cloudblur-signature-widget",
+        "source": "src/components/ThemeSignaturePreview.tsx",
+        "href": "#/#cloudblur-signature"
+      },
+      "translations": {
+        "ar": {
+          "name": "Utopia Cloudblur",
+          "role": "ثيم علامة",
+          "description": "ثيم للصفحة الرئيسية لنظام Utopia للتصميم.",
+          "bestFor": [
+            "الصفحة الرئيسية لنظام التصميم",
+            "صفحات المنتجات التحريرية"
+          ],
+          "principles": [
+            "خلفية فاتحة وواضحة",
+            "سطح ضبابي رئيسي واحد",
+            "إضاءة لونية هادئة",
+            "دعم العربية واتجاه RTL"
+          ],
+          "brandAssetUsage": "استخدم العلامة النصية على أغلفة Utopia Cloudblur وشرائح الختام والأسطح التي تعرّف العلامة.",
+          "signature": {
+            "label": "ويدجت بطاقات Cloudblur الخزفية",
+            "description": "ويدجت البصمة الخاص بالثيم: تكوين Glass من بطاقتين متداخلتين يجمع بطاقة نظام خزفية وبطاقة صورة أسلوب حياة ثابتة مع انكسار محايد وإضاءة اتجاهية واضحة."
+          }
+        }
+      },
+      "policyManifest": "packages/design-system/src/manifests/theme-utopia-cloudblur.json",
+      "css": "packages/design-system/src/themes/utopia-cloudblur.css",
+      "iconSystem": "phosphor",
+      "values": {
+        "--background": "#EEF1F5",
+        "--foreground": "#111B2A",
+        "--card": "rgb(255 255 255 / 72%)",
+        "--card-foreground": "#111B2A",
+        "--primary": "#111B2A",
+        "--primary-foreground": "#FFFFFF",
+        "--secondary": "rgb(255 255 255 / 58%)",
+        "--secondary-foreground": "#111B2A",
+        "--muted": "rgb(220 226 233 / 72%)",
+        "--muted-foreground": "#526071",
+        "--border": "rgb(17 27 42 / 13%)",
+        "--input": "rgb(17 27 42 / 20%)",
+        "--ring": "#087F92",
+        "--loading-background": "#09111D",
+        "--loading-accent": "#5DD7E5",
+        "--loading-foreground": "#FFFFFF",
+        "--radius": "14px",
+        "--radius-control": "999px",
+        "--radius-surface": "28px",
+        "--radius-chat-bubble": "20px",
+        "--radius-chat-composer": "28px",
+        "--radius-chat-token": "999px",
+        "--shadow-control": "0 0 0 4px rgb(93 215 229 / 28%)",
+        "--motion-duration-press": "110ms",
+        "--motion-duration-page": "360ms",
+        "--motion-duration-expand": "280ms",
+        "--motion-duration-reveal": "420ms",
+        "--motion-duration-icon": "320ms",
+        "--motion-ease-standard": "cubic-bezier(0.2, 0, 0, 1)",
+        "--motion-ease-emphasized": "cubic-bezier(0.16, 1, 0.3, 1)",
+        "--motion-ease-icon": "cubic-bezier(0.16, 1, 0.3, 1)",
+        "--motion-press-scale": "0.985",
+        "--motion-distance-page": "8px",
+        "--motion-distance-reveal": "12px",
+        "--font-sans": "TWK Lausanne",
+        "--font-display": "TWK Lausanne",
+        "--font-ui-support": "TWK Lausanne",
+        "--font-marketing-display": "TWK Lausanne",
+        "--font-arabic": "Readex Pro",
+        "--font-arabic-body": "Readex Pro",
+        "--font-arabic-display": "Readex Pro",
+        "--font-weight-arabic-body": "300",
+        "--font-weight-arabic-display": "500",
+        "--font-size-display": "clamp(2.75rem, 7vw, 6rem)",
+        "--font-size-arabic-body": "16px",
+        "--font-size-arabic-body-lg": "18px",
+        "--font-size-arabic-display": "clamp(2.5rem, 6.2vw, 5.25rem)",
+        "--line-height-arabic": "1.75",
+        "--line-height-arabic-body": "1.85",
+        "--line-height-arabic-display": "1.28",
+        "--tracking-arabic": "0",
+        "--tracking-arabic-display": "0",
+        "--sidebar-width": "17rem",
+        "--control-height-sm": "2.125rem",
+        "--sidebar-width-collapsed": "4rem",
+        "--sidebar-min-block-size": "30rem",
+        "--sidebar-rail-size": "8px",
+        "--button-height": "42px",
+        "--card-padding": "24px",
+        "--overlay": "rgb(9 17 29 / 72%)",
+        "--modal-surface": "#F8FAFC",
+        "--popover-surface": "#F8FAFC"
+      }
     }
   ],
   "plannedThemeSlots": [
@@ -797,7 +1025,7 @@
       "Use start/end naming, not left/right APIs.",
       "Validate mixed English/Arabic labels.",
       "Use Arabic body and display typography tokens.",
-      "Set Arabic display size from the Latin display scale at approximately 95%, with Arabic line-height preserved for readability.",
+      "Set Arabic display size from the Latin display scale at approximately 90-92% (Arabic renders optically larger at equal px), with Arabic display line-height at least 1.28.",
       "Do not map Latin uppercase display styling to Arabic.",
       "Mirror directional arrows, chevrons, navigation, carousel, progress, and sidebar affordances intentionally.",
       "Do not invent Arabic copy."

package/data/templates/analytics-dashboard/main.tsx

@@ -16,9 +16,22 @@ import {
 } from './AnalyticsDashboardBlocks'
 import '@utopia-studio-design/design-system/core.css'
 import '@utopia-studio-design/design-system/themes/utopia-default.css'
+import '@utopia-studio-design/design-system/themes/dextrum.css'
+import '@utopia-studio-design/design-system/themes/barrier-intelligence.css'
+import '@utopia-studio-design/design-system/themes/renacore.css'
+import '@utopia-studio-design/design-system/themes/vyapti.css'
+import '@utopia-studio-design/design-system/themes/utopia-cloudblur.css'
 import './analytics-dashboard.css'
 import './styles.css'
 
+const supportedThemes = ['utopia-default', 'dextrum', 'barrier-intelligence', 'renacore', 'vyapti', 'utopia-cloudblur'] as const
+type TemplateTheme = (typeof supportedThemes)[number]
+const defaultTheme: TemplateTheme = 'utopia-default'
+const requestedTheme = new URLSearchParams(window.location.search).get('theme') as TemplateTheme | null
+const activeTheme: TemplateTheme = requestedTheme && supportedThemes.includes(requestedTheme) ? requestedTheme : defaultTheme
+document.documentElement.dataset.theme = activeTheme
+document.documentElement.dataset.brand = activeTheme
+
 const baseData: ChartDatum[] = [
   { id: 'jan', label: 'Jan', values: { revenue: 42, previous: 35, forecast: 44 } },
   { id: 'feb', label: 'Feb', values: { revenue: 46, previous: 38, forecast: 47 } },
@@ -56,7 +69,7 @@ function App() {
     <main
       className="analytics-template"
       data-color-mode={dark ? 'dark' : 'light'}
-      data-theme="utopia-default"
+      data-theme={activeTheme}
       dir="ltr"
       id="main-content"
     >

package/data/templates/calendar-application/main.tsx

@@ -30,9 +30,22 @@ import {
 } from './calendar-localization'
 import '@utopia-studio-design/design-system/core.css'
 import '@utopia-studio-design/design-system/themes/utopia-default.css'
+import '@utopia-studio-design/design-system/themes/dextrum.css'
+import '@utopia-studio-design/design-system/themes/barrier-intelligence.css'
+import '@utopia-studio-design/design-system/themes/renacore.css'
+import '@utopia-studio-design/design-system/themes/vyapti.css'
+import '@utopia-studio-design/design-system/themes/utopia-cloudblur.css'
 import './calendar-application.css'
 import './styles.css'
 
+const supportedThemes = ['utopia-default', 'dextrum', 'barrier-intelligence', 'renacore', 'vyapti', 'utopia-cloudblur'] as const
+type TemplateTheme = (typeof supportedThemes)[number]
+const defaultTheme: TemplateTheme = 'utopia-default'
+const requestedTheme = new URLSearchParams(window.location.search).get('theme') as TemplateTheme | null
+const activeTheme: TemplateTheme = requestedTheme && supportedThemes.includes(requestedTheme) ? requestedTheme : defaultTheme
+document.documentElement.dataset.theme = activeTheme
+document.documentElement.dataset.brand = activeTheme
+
 const anchorDate = new Date(2026, 2, 9, 12)
 const resources: SchedulerResource[] = [
   { id: 'product', label: 'Product team', timezone: 'America/New_York' },
@@ -225,7 +238,7 @@ function App() {
     <main
       className="calendar-template"
       data-color-mode={dark ? 'dark' : 'light'}
-      data-theme="utopia-default"
+      data-theme={activeTheme}
       dir={direction}
       id="main-content"
     >

package/data/templates/chat-workspace/README.md

@@ -0,0 +1,12 @@
+# Ceramic Chat Workspace
+
+Runnable starter for assistant, support, and collaborative chat products.
+Conversation input and governed tools remain in the managed chat surface;
+generated previews and durable artifacts update in the output rail.
+
+Before shipping, replace all sample copy, connect real persistence and streaming
+state, localize visible and accessible labels, and verify desktop/mobile,
+English/Arabic, keyboard/touch, reload, error, and reduced-motion behavior.
+
+See `docs/design-system/chat-service-methodology.md` for the complete design and
+QA contract.

package/data/templates/chat-workspace/index.html

@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="en" dir="ltr" data-theme="utopia-default" data-color-mode="light">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Ceramic managed chat workspace template." />
+    <title>Chat Workspace — Ceramic Design System</title>
+  </head>
+  <body><div id="root"></div><script type="module" src="./main.tsx"></script></body>
+</html>
+