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

package/data/manifests/patterns.json

@@ -0,0 +1,12 @@
+{
+  "intent": "AI-first, shadcn-founded, theme-extensible, Arabic-friendly, architectural, precise, and commercially credible.",
+  "principles": [
+    "Design System is the parent system; production sites are consumers.",
+    "Use shadcn/ui as the component architecture foundation.",
+    "Use semantic tokens before raw primitives.",
+    "Core owns semantic contracts and component architecture, not brand-specific visual philosophy.",
+    "Themes are token-contract and visual-policy implementations, not decorative skins.",
+    "Arabic-friendly support is a baseline requirement."
+  ],
+  "antiPatterns": ["Invented tokens", "Generic SaaS gradients", "Rounded marketing cards", "Glassmorphism", "Raw left/right APIs", "Unreviewed Arabic copy"]
+}

package/data/manifests/templates.json

@@ -0,0 +1,96 @@
+{
+  "version": "1.0.0",
+  "intent": "Runnable, production-ready Ceramic templates with source files, routes, manifests, and deterministic demo data.",
+  "statusModel": {
+    "available": "A runnable template bundled with source files and available through the CLI copy command."
+  },
+  "templates": [
+    {
+      "id": "template-saas-solution-homepage",
+      "title": "SaaS Solution Website",
+      "category": "website-page",
+      "status": "available",
+      "purpose": "A complete product-led SaaS website with marketing, product, automation, integrations, customer proof, pricing, changelog, and sales-contact pages.",
+      "referenceNote": "Uses Linear only as a reference for information density, section rhythm, and product-led storytelling. Do not copy Linear branding, assets, layouts, or product copy.",
+      "starterFor": [
+        "B2B SaaS",
+        "operations platforms",
+        "AI automation products"
+      ],
+      "sections": [
+        "Top navigation",
+        "Hero and value",
+        "Product interface preview",
+        "Core workflow",
+        "Agents and automation",
+        "Integrations",
+        "Security and reliability",
+        "Team proof",
+        "Adoption CTA",
+        "Footer"
+      ],
+      "requiredComponents": [
+        "Top Nav",
+        "Button",
+        "Badge",
+        "Card",
+        "Input",
+        "Select",
+        "Textarea"
+      ],
+      "sourcePath": "templates/saas-solution-homepage/main.tsx",
+      "entryPath": "templates/saas-solution-homepage/index.html",
+      "manifestPath": "templates/saas-solution-homepage/template.manifest.json",
+      "bundlePath": "templates/saas-solution-homepage",
+      "pageCount": 10,
+      "pages": [
+        "Home",
+        "Product",
+        "Agents",
+        "Integrations",
+        "Integration Detail",
+        "Customers",
+        "Customer Story",
+        "Pricing",
+        "Changelog",
+        "Contact Sales"
+      ],
+      "useWhen": [
+        "A SaaS product needs a complete product-led marketing narrative",
+        "Workflow, automation, integrations, and reliability are material buying criteria"
+      ],
+      "avoidWhen": [
+        "The page is a single-feature launch",
+        "There is no reviewed product model behind the interface claims"
+      ],
+      "rtlReady": true,
+      "preview": {
+        "kind": "saas-solution-homepage",
+        "density": "balanced"
+      },
+      "translations": {
+        "ar": {
+          "title": "موقع متكامل لحل SaaS",
+          "purpose": "عائلة صفحات SaaS متكاملة تشمل التسويق والمنتج والأتمتة والتكاملات وأدلة العملاء والأسعار والتحديثات والتواصل مع المبيعات.",
+          "starterFor": [
+            "منتجات SaaS للأعمال",
+            "منصات العمليات",
+            "منتجات أتمتة الذكاء الاصطناعي"
+          ],
+          "sections": [
+            "التنقل العلوي",
+            "القيمة الرئيسية",
+            "معاينة واجهة المنتج",
+            "سير العمل الأساسي",
+            "الوكلاء والأتمتة",
+            "التكاملات",
+            "الأمان والموثوقية",
+            "دليل الفريق",
+            "دعوة الاعتماد",
+            "التذييل"
+          ]
+        }
+      }
+    }
+  ]
+}

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

@@ -0,0 +1,123 @@
+{
+  "$schema": "https://utopia-studio.co/design-system/theme.schema.json",
+  "id": "barrier-intelligence",
+  "name": "Barrier Intelligence",
+  "type": "theme-policy",
+  "locked": false,
+  "summary": "Barrier Intelligence brand theme mapped to the Ceramic semantic contract. Near-black product surfaces with warm gold accents and a measured neutral hierarchy. Hanken Grotesk drives product UI and documentation; any marketing typography remains scoped to theme-owned selectors only.",
+  "sourceFiles": [
+    "packages/design-system/src/themes/barrier-intelligence.css",
+    "packages/design-system/src/manifests/theme-barrier-intelligence.json"
+  ],
+  "brandPrimitives": {
+    "colors": {
+      "black": "#000000",
+      "bgElev": "#0A0A0A",
+      "card": "#0E0E0E",
+      "cardHi": "#141414",
+      "hairline": "#1C1C1C",
+      "ink": "#F5F5F2",
+      "ink2": "#C9C7C1",
+      "ink3": "#9A9893",
+      "ink4": "#6D6B67",
+      "goldDark": "#8A6637",
+      "gold": "#A6824C",
+      "goldLight": "#D2AC6C",
+      "goldForeground": "#1A1208"
+    },
+    "typography": {
+      "appWebsite": {
+        "ui": "Hanken Grotesk",
+        "use": "Product UI, dashboards, documentation, and long-form reading"
+      },
+      "arabicFamily": "IBM Plex Sans Arabic",
+      "weights": {
+        "hankenGrotesk": [400, 500, 600, 700]
+      },
+      "arabicWeights": [400, 500, 700],
+      "headlineCasing": "sentence",
+      "headlineTracking": "-0.02em to -0.04em",
+      "arabicDisplayFamily": "IBM Plex Sans Arabic",
+      "arabicDisplayCasing": "none",
+      "arabicDisplayRule": "Use Arabic display scale and IBM Plex Sans Arabic. Do not apply Latin negative tracking rules to Arabic.",
+      "rationale": "The brand language is quiet and rigorous: restrained type, high legibility on dark surfaces, and gold accents reserved for signal and action."
+    },
+    "geometry": {
+      "surfaceRadius": "14px",
+      "controlRadius": "6px",
+      "chatBubbleRadius": "18px",
+      "chatComposerRadius": "24px",
+      "chatTokenRadius": "14px",
+      "elevation": "border-led depth with subtle floating shadow on popovers only"
+    }
+  },
+  "semanticMappings": {
+    "--background": "Black",
+    "--foreground": "Ink",
+    "--primary": "Gold",
+    "--secondary": "Card High",
+    "--border": "Hairline",
+    "--radius-control": "6px rounded controls",
+    "--radius-surface": "14px rounded surfaces",
+    "--radius-chat-bubble": "18px rounded chat bubbles",
+    "--radius-chat-composer": "24px rounded chat composer",
+    "--radius-chat-token": "14px rounded chat tokens",
+    "--font-display": "Hanken Grotesk (headings + display scale)",
+    "--font-sans": "Hanken Grotesk",
+    "--font-ui-support": "Hanken Grotesk",
+    "--font-marketing-display": "Hanken Grotesk scoped through theme selectors",
+    "--font-arabic": "IBM Plex Sans Arabic",
+    "--sidebar-width": "17rem",
+    "--shadow-control": "none",
+    "--control-height-sm": "2rem",
+    "--sidebar-width-collapsed": "4rem",
+    "--sidebar-min-block-size": "30rem",
+    "--sidebar-rail-size": "8px",
+    "--overlay": "Black modal dim",
+    "--modal-surface": "Card High",
+    "--popover-surface": "Card High"
+  },
+  "visualPolicy": {
+    "tone": ["rigorous", "quiet", "technical", "premium"],
+    "allow": [
+      "near-black structural surfaces",
+      "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"
+    ],
+    "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"
+    ]
+  },
+  "iconPolicy": {
+    "system": "lucide",
+    "description": "Barrier Intelligence uses lucide icons in UI; brand marks remain outside Ceramic shell chrome.",
+    "allow": ["lucide icons in components", "monochrome currentColor icons", "directional mirroring in RTL"],
+    "avoid": ["emoji", "mixed icon families in one surface"],
+    "coreNote": "Icon policy is theme-owned. Core components remain icon-system neutral."
+  },
+  "translations": {
+    "ar": {
+      "summary": "ثيم Barrier Intelligence مربوط بعقد Ceramic الدلالي. يستخدم أسطح منتجات شبه سوداء ولمسات ذهبية دافئة وتسلسلا محايدا محسوبا. يقود Hanken Grotesk واجهة المنتج والتوثيق، وتبقى أي طباعة تسويقية محصورة في محددات يملكها الثيم.",
+      "iconPolicy": {
+        "system": "Lucide",
+        "description": "يستخدم Barrier Intelligence أيقونات Lucide في الواجهة، وتبقى علامات الهوية خارج شريط هيكل Ceramic.",
+        "allow": ["أيقونات Lucide في المكونات", "أيقونات أحادية بلون currentColor", "عكس الاتجاه في RTL"]
+      }
+    }
+  },
+  "aiRules": [
+    "Read this theme policy after the core semantic contract.",
+    "Map Barrier Intelligence palette through semantic tokens only.",
+    "Use gold for primary actions and high-signal emphasis, not as a full-page wash.",
+    "Prefer near-black and stepped card surfaces with ink hierarchy.",
+    "Use Hanken Grotesk for Latin app UI and body copy in this theme.",
+    "Keep Arabic on IBM Plex Sans Arabic tokens.",
+    "Do not swap Ceramic shell navigation branding when this theme is active."
+  ]
+}

package/data/manifests/theme-dextrum.json

@@ -0,0 +1,255 @@
+{
+
+  "$schema": "https://utopia-studio.co/design-system/theme.schema.json",
+
+  "id": "dextrum",
+
+  "name": "Dextrum",
+
+  "type": "theme-policy",
+
+  "locked": false,
+
+  "summary": "Dextrum brand theme mapped to the Ceramic semantic contract. Ocean blue accents on dark blue surfaces with Manrope driving product UI, docs, and default headings. Clash Grotesk is reserved for explicit marketing surfaces.",
+
+  "sourceFiles": [
+
+    "packages/design-system/src/themes/dextrum.css",
+
+    "packages/design-system/src/manifests/theme-dextrum.json"
+
+  ],
+
+  "brandPrimitives": {
+
+    "colors": {
+
+      "darkBlue": "#192B39",
+
+      "oceanBlue": "#3E8ECC",
+
+      "charcoalBlue": "#2F3F4C",
+
+      "matteBlack": "#141414",
+
+      "timidWhite": "#EAEAEA",
+
+      "logoTeal": "#063946"
+
+    },
+
+    "typography": {
+
+      "marketingSales": {
+
+        "display": "Clash Grotesk",
+
+        "body": "Satoshi",
+
+        "use": "Pitch decks, campaigns, sales collateral, and website headers"
+
+      },
+
+      "appWebsite": {
+
+        "ui": "Manrope",
+
+        "support": "Satoshi",
+
+        "use": "Product UI, dashboards, documentation, and long-form web reading"
+
+      },
+
+      "arabicFamily": "IBM Plex Sans Arabic",
+
+      "weights": {
+
+        "clashGrotesk": [300, 400, 500, 600, 700],
+
+        "satoshi": [400, 500, 700],
+
+        "manrope": [300, 400, 500, 600, 700, 800]
+
+      },
+
+      "arabicWeights": [400, 500, 700],
+
+      "headlineCasing": "sentence",
+
+      "headlineTracking": "-0.03em to -0.05em",
+
+      "arabicDisplayFamily": "IBM Plex Sans Arabic",
+
+      "arabicDisplayCasing": "none",
+
+      "arabicDisplayRule": "Use Arabic display scale and IBM Plex Sans Arabic. Do not apply Latin negative tracking rules to Arabic.",
+
+      "rationale": "Marketing type sets brand vibe; app type optimizes readability on small screens and in dark mode. Marketing display may still appear in website headers."
+
+    },
+
+    "geometry": {
+
+      "surfaceRadius": "8px",
+
+      "controlRadius": "6px",
+
+      "elevation": "calm surfaces with subtle borders; restrained shadow on floating layers only"
+
+    }
+
+  },
+
+  "semanticMappings": {
+
+    "--background": "Dark Blue",
+
+    "--foreground": "Timid White",
+
+    "--primary": "Ocean Blue",
+
+    "--secondary": "Charcoal Blue",
+
+    "--radius-control": "6px rounded controls",
+
+    "--radius-surface": "8px rounded surfaces",
+
+    "--font-display": "Manrope (product UI headings and display scale)",
+
+    "--font-sans": "Manrope",
+
+    "--font-ui-support": "Satoshi",
+
+    "--font-marketing-display": "Clash Grotesk (marketing surfaces only)",
+
+    "--font-arabic": "IBM Plex Sans Arabic",
+
+    "--overlay": "Dark Blue modal dim",
+
+    "--modal-surface": "Charcoal Blue",
+
+    "--popover-surface": "Charcoal Blue"
+
+  },
+
+  "visualPolicy": {
+
+    "tone": [
+
+      "precise",
+
+      "technical",
+
+      "calm",
+
+      "confident"
+
+    ],
+
+    "allow": [
+
+      "dark blue structural surfaces",
+
+      "ocean blue accents for action and links",
+
+      "rounded controls and cards",
+
+      "muted neutral hierarchy",
+
+      "Clash Grotesk for marketing display and website headers",
+
+      "Manrope for product UI and long reading"
+
+    ],
+
+    "avoid": [
+
+      "Utopia brick red palette",
+
+      "square Utopia geometry defaults",
+
+      "decorative gradients",
+
+      "heavy glass effects",
+
+      "startup-cute styling",
+
+      "fancy marketing display fonts in dense app menus or long paragraphs"
+
+    ]
+
+  },
+
+  "iconPolicy": {
+
+    "system": "lucide",
+
+    "description": "Dextrum uses standard lucide icons inside product UI while keeping the Dextrum mark for brand surfaces.",
+
+    "allow": [
+
+      "lucide icons in components",
+
+      "monochrome currentColor icons",
+
+      "directional mirroring in RTL"
+
+    ],
+
+    "avoid": [
+
+      "Utopia dot-bar icon policy",
+
+      "emoji",
+
+      "mixed icon families in one surface"
+
+    ],
+
+    "coreNote": "Icon policy is theme-owned. Core components remain icon-system neutral."
+
+  },
+
+  "translations": {
+
+    "ar": {
+
+      "summary": "ثيم Dextrum مربوط بعقد Ceramic الدلالي. يستخدم لمسات Ocean Blue فوق أسطح Dark Blue، ويقود Manrope واجهة المنتج والتوثيق والعناوين الافتراضية، بينما يقتصر Clash Grotesk على أسطح التسويق الصريحة.",
+
+      "iconPolicy": {
+
+        "system": "Lucide",
+
+        "description": "يستخدم Dextrum أيقونات Lucide القياسية داخل واجهة المنتج، مع إبقاء علامة Dextrum لأسطح العلامة.",
+
+        "allow": ["أيقونات Lucide في المكونات", "أيقونات أحادية بلون currentColor", "عكس الاتجاه في RTL"]
+
+      }
+
+    }
+
+  },
+
+  "aiRules": [
+
+    "Read this theme policy after the core semantic contract.",
+
+    "Map Dextrum palette through semantic tokens only.",
+
+    "Use Ocean Blue for primary actions and links, not as a full-page wash.",
+
+    "Prefer dark blue and charcoal surfaces with timid white type.",
+
+    "Use Manrope for Latin app UI and body copy in this theme.",
+
+    "Use Clash Grotesk for marketing display and website headers only.",
+
+    "Use Satoshi for marketing body copy and supporting UI labels where needed.",
+
+    "Keep Arabic on IBM Plex Sans Arabic tokens.",
+
+    "Do not import Utopia brand primitives into Dextrum-themed surfaces."
+
+  ]
+
+}

package/data/manifests/theme-utopia-default.json

@@ -0,0 +1,163 @@
+{
+  "$schema": "https://utopia-studio.co/design-system/theme.schema.json",
+  "id": "utopia-default",
+  "name": "The Utopia Studio Default",
+  "shortName": "Utopia Default",
+  "type": "theme-policy",
+  "locked": true,
+  "summary": "The default locked theme for The Utopia Studio. It maps the Ceramic semantic contract to the studio's brand primitives while keeping those decisions out of reusable core components.",
+  "brandAssets": {
+    "wordmark": {
+      "src": "/brand/the-utopia-studio-wordmark.avif",
+      "alt": "The Utopia Studio",
+      "usage": "May identify The Utopia Studio branded products, documents, and template surfaces. Core components must not depend on this asset."
+    }
+  },
+  "sourceFiles": [
+    "packages/design-system/src/themes/utopia-default.css",
+    "packages/design-system/src/manifests/theme-utopia-default.json"
+  ],
+  "brandPrimitives": {
+    "colors": {
+      "brickRed": "#CC5536",
+      "specialBlack": "#3C3235",
+      "lightGrey": "#EEEEEE",
+      "white": "#FFFFFF"
+    },
+    "typography": {
+      "family": "TWK Lausanne",
+      "arabicFamily": "IBM Plex Sans Arabic",
+      "weights": [
+        350,
+        500,
+        700
+      ],
+      "arabicWeights": [
+        400,
+        500,
+        700
+      ],
+      "headlineCasing": "uppercase",
+      "headlineTracking": "0.02em to 0.04em",
+      "arabicDisplayFamily": "IBM Plex Sans Arabic",
+      "arabicDisplayCasing": "none",
+      "arabicDisplayRule": "Do not translate Latin all-caps styling into Arabic uppercase. Use Arabic display scale, weight, rhythm, and IBM Plex Sans Arabic instead."
+    },
+    "geometry": {
+      "surfaceRadius": "0px",
+      "controlRadius": "0px",
+      "elevation": "hairline borders and background shifts; no brand-surface drop shadows"
+    }
+  },
+  "semanticMappings": {
+    "--background": "Special Black",
+    "--foreground": "White",
+    "--primary": "Accessible Brick Red action tone (#B8472C); preserve #CC5536 as the brand primitive",
+    "--secondary": "Light Grey",
+    "--radius-control": "Square geometry",
+    "--radius-surface": "Square geometry",
+    "--radius-chat-bubble": "Square chat message geometry",
+    "--radius-chat-composer": "Square chat input geometry",
+    "--radius-chat-token": "Square chat token geometry",
+    "--motion-duration-press": "160ms physical press feedback",
+    "--motion-duration-page": "200ms quiet view transition",
+    "--motion-duration-expand": "320ms disclosure transition",
+    "--motion-duration-reveal": "520ms soft surface reveal",
+    "--motion-duration-icon": "640ms action-specific icon motion",
+    "--motion-ease-standard": "Direct interaction easing",
+    "--motion-ease-emphasized": "Soft reveal and icon easing",
+    "--motion-ease-icon": "Action-specific icon easing",
+    "--motion-press-scale": "0.97",
+    "--motion-distance-page": "8px logical view shift",
+    "--motion-distance-reveal": "8px soft entrance distance",
+    "--font-sans": "TWK Lausanne",
+    "--font-arabic": "IBM Plex Sans Arabic",
+    "--font-arabic-display": "IBM Plex Sans Arabic",
+    "--font-arabic-body": "IBM Plex Sans Arabic",
+    "--font-weight-arabic-body": "400",
+    "--font-weight-arabic-display": "700",
+    "--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)",
+    "--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",
+    "--shadow-control": "none",
+    "--control-height-sm": "32px",
+    "--sidebar-width-collapsed": "4rem",
+    "--sidebar-min-block-size": "30rem",
+    "--sidebar-rail-size": "8px",
+    "--overlay": "Special Black at modal dim opacity",
+    "--modal-surface": "Special Black solid",
+    "--popover-surface": "Special Black solid"
+  },
+  "visualPolicy": {
+    "tone": [
+      "warm",
+      "confident",
+      "architectural",
+      "serious",
+      "spare"
+    ],
+    "allow": [
+      "asymmetric layouts",
+      "large uppercase headlines",
+      "Brick Red as a 5-15% accent",
+      "hairline borders",
+      "solid Special Black, Light Grey, Brick Red, and White surfaces"
+    ],
+    "avoid": [
+      "startup-cute styling",
+      "generic SaaS gradients",
+      "drop shadows on brand surfaces",
+      "glassmorphism",
+      "textures",
+      "rounded marketing cards",
+      "pure black"
+    ]
+  },
+  "iconPolicy": {
+    "system": "utopia-dot-bar",
+    "description": "Icons are brand marks made from solid dots and rectangular bars. They are graphic breaks, not decoration.",
+    "allow": [
+      "solid circles",
+      "rectangular bars",
+      "three-bar mark",
+      "monochrome Special Black or current foreground"
+    ],
+    "avoid": [
+      "Lucide",
+      "Heroicons",
+      "Feather",
+      "emoji",
+      "outlined icon sets",
+      "rounded bubbly forms"
+    ],
+    "coreNote": "This restriction belongs to Utopia Default only. Other themes may declare different icon systems."
+  },
+  "translations": {
+    "ar": {
+      "summary": "الثيم الافتراضي المقفل لـ The Utopia Studio. يربط عقد Ceramic الدلالي بقيم الاستوديو الأولية مع إبقاء قرارات العلامة خارج مكونات الجوهر القابلة لإعادة الاستخدام.",
+      "iconPolicy": {
+        "system": "نظام النقاط والأشرطة الخاص بـ Utopia",
+        "description": "الأيقونات علامات للهوية مبنية من نقاط صلبة وأشرطة مستطيلة. هي فواصل بصرية وليست زخرفة.",
+        "allow": ["دوائر صلبة", "أشرطة مستطيلة", "علامة الأشرطة الثلاثة", "لون أحادي Special Black أو لون المقدمة الحالي"]
+      }
+    }
+  },
+  "aiRules": [
+    "Read this theme policy after the core semantic contract.",
+    "Do not apply Utopia brand restrictions to other themes unless their manifests say so.",
+    "Do not hardcode Brick Red, Special Black, TWK Lausanne, or Utopia icon rules inside reusable core components.",
+    "When Arabic or lang=\"ar\" content is present, use --font-arabic mapped to IBM Plex Sans Arabic and the Arabic line-height role.",
+    "Arabic display sizing follows the Latin display scale at approximately 95%, rather than making Arabic headings larger than Latin headings.",
+    "Do not apply Latin uppercase display styling to Arabic. Use Arabic display/body tokens and text-transform: none.",
+    "When this theme is active, do not use Lucide icons as brand-facing component icons.",
+    "Modal content uses --modal-surface and must stay solid in Utopia Default; only the overlay dims the page behind it.",
+    "Floating content such as select, menu, popover, and tooltip uses --popover-surface so alpha page surfaces do not make controls look translucent."
+  ]
+}