@utopia-studio-design/design-system-cli 0.6.2 → 0.7.1

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.
Files changed (124) hide show
  1. package/README.md +28 -14
  2. package/bin/utopia-ds-mcp.mjs +6 -2
  3. package/bin/utopia-ds.mjs +94 -21
  4. package/data/docs/arabic-friendly.md +19 -2
  5. package/data/docs/billing-setup.md +80 -0
  6. package/data/docs/cer-003-032-033-round-8-repair.md +41 -0
  7. package/data/docs/cer-007-checkout.md +51 -0
  8. package/data/docs/cer-008-011-qa-repair.md +64 -0
  9. package/data/docs/cer-016-023-round-6-repair.md +92 -0
  10. package/data/docs/cer-024-031-round-7-repair.md +51 -0
  11. package/data/docs/cer-033-035-036-round-12-repair.md +37 -0
  12. package/data/docs/cer-035-037-round-10-repair.md +34 -0
  13. package/data/docs/ceramic-release-2026-09-06.md +11 -0
  14. package/data/docs/charts.md +34 -3
  15. package/data/docs/chat-service-methodology.md +181 -0
  16. package/data/docs/code-block.md +20 -0
  17. package/data/docs/creative-production.md +149 -0
  18. package/data/docs/designer-agent-backend-contract.md +552 -0
  19. package/data/docs/email-resend.md +29 -0
  20. package/data/docs/foundations.md +46 -8
  21. package/data/docs/guide.md +9 -9
  22. package/data/docs/handover-billing-aiden.md +132 -0
  23. package/data/docs/logo-maker-methodology.md +109 -0
  24. package/data/docs/presentation-asset-repository.md +53 -0
  25. package/data/docs/product-architecture.md +42 -0
  26. package/data/docs/quick-start-ai.md +4 -4
  27. package/data/docs/shadcn-conversion.md +1 -1
  28. package/data/docs/sidebar-placement.md +56 -0
  29. package/data/docs/theme-authoring.md +6 -3
  30. package/data/manifests/catalog.json +42 -46
  31. package/data/manifests/components.json +317 -66
  32. package/data/manifests/logo-skills.json +174 -0
  33. package/data/manifests/motion-profiles.json +2 -2
  34. package/data/manifests/patterns.json +201 -7
  35. package/data/manifests/presentation-assets.schema.json +44 -0
  36. package/data/manifests/templates.json +87 -1
  37. package/data/manifests/theme-dextrum.json +7 -7
  38. package/data/manifests/theme-prism-mono.json +19 -0
  39. package/data/manifests/theme-utopia-cloudblur.json +135 -0
  40. package/data/manifests/theme-utopia-default.json +31 -31
  41. package/data/manifests/theme-vyapti.json +17 -1
  42. package/data/manifests/theme-y2k-pop.json +18 -0
  43. package/data/manifests/themes.json +285 -57
  44. package/data/templates/analytics-dashboard/main.tsx +14 -1
  45. package/data/templates/calendar-application/main.tsx +14 -1
  46. package/data/templates/chat-workspace/README.md +12 -0
  47. package/data/templates/chat-workspace/index.html +11 -0
  48. package/data/templates/chat-workspace/main.tsx +97 -0
  49. package/data/templates/chat-workspace/styles.css +19 -0
  50. package/data/templates/chat-workspace/template.manifest.json +13 -0
  51. package/data/templates/composition-registry-lab/main.tsx +12 -1
  52. package/data/templates/dashboard-composer/main.tsx +14 -1
  53. package/data/templates/database-workspace/main.tsx +14 -1
  54. package/data/templates/interaction-lab/main.tsx +12 -1
  55. package/data/templates/quantum-verification-story/README.md +12 -0
  56. package/data/templates/quantum-verification-story/components.json +21 -0
  57. package/data/templates/quantum-verification-story/eslint.config.mjs +13 -0
  58. package/data/templates/quantum-verification-story/next-env.d.ts +7 -0
  59. package/data/templates/quantum-verification-story/next.config.mjs +11 -0
  60. package/data/templates/quantum-verification-story/package-lock.json +7535 -0
  61. package/data/templates/quantum-verification-story/package.json +46 -0
  62. package/data/templates/quantum-verification-story/postcss.config.js +6 -0
  63. package/data/templates/quantum-verification-story/src/app/assessment/page.tsx +138 -0
  64. package/data/templates/quantum-verification-story/src/app/ceramic-theme.css +48 -0
  65. package/data/templates/quantum-verification-story/src/app/deployment/page.tsx +178 -0
  66. package/data/templates/quantum-verification-story/src/app/fonts/IBMPlexSansArabic-Bold.ttf +0 -0
  67. package/data/templates/quantum-verification-story/src/app/fonts/IBMPlexSansArabic-Medium.ttf +0 -0
  68. package/data/templates/quantum-verification-story/src/app/fonts/IBMPlexSansArabic-Regular.ttf +0 -0
  69. package/data/templates/quantum-verification-story/src/app/fonts/ReadexPro-Variable.ttf +0 -0
  70. package/data/templates/quantum-verification-story/src/app/fonts/TWKLausanne-350.ttf +0 -0
  71. package/data/templates/quantum-verification-story/src/app/fonts/TWKLausanne-500.ttf +0 -0
  72. package/data/templates/quantum-verification-story/src/app/fonts/TWKLausanne-700.ttf +0 -0
  73. package/data/templates/quantum-verification-story/src/app/globals.css +175 -0
  74. package/data/templates/quantum-verification-story/src/app/layout.tsx +45 -0
  75. package/data/templates/quantum-verification-story/src/app/not-found.tsx +39 -0
  76. package/data/templates/quantum-verification-story/src/app/page.tsx +24 -0
  77. package/data/templates/quantum-verification-story/src/app/products/page.tsx +132 -0
  78. package/data/templates/quantum-verification-story/src/app/utopia-default.css +312 -0
  79. package/data/templates/quantum-verification-story/src/components/RotatingText.css +36 -0
  80. package/data/templates/quantum-verification-story/src/components/RotatingText.tsx +189 -0
  81. package/data/templates/quantum-verification-story/src/components/brand-mark.tsx +14 -0
  82. package/data/templates/quantum-verification-story/src/components/console-preview-section.tsx +57 -0
  83. package/data/templates/quantum-verification-story/src/components/console-preview.tsx +72 -0
  84. package/data/templates/quantum-verification-story/src/components/fade-up.tsx +54 -0
  85. package/data/templates/quantum-verification-story/src/components/floating-network.tsx +125 -0
  86. package/data/templates/quantum-verification-story/src/components/footer.tsx +83 -0
  87. package/data/templates/quantum-verification-story/src/components/harvest-timeline.tsx +70 -0
  88. package/data/templates/quantum-verification-story/src/components/lattice-diagram.tsx +73 -0
  89. package/data/templates/quantum-verification-story/src/components/lattice-field.tsx +129 -0
  90. package/data/templates/quantum-verification-story/src/components/nav.tsx +104 -0
  91. package/data/templates/quantum-verification-story/src/components/presentation-layout.tsx +91 -0
  92. package/data/templates/quantum-verification-story/src/components/readiness-estimator.tsx +135 -0
  93. package/data/templates/quantum-verification-story/src/components/scramble-text.tsx +60 -0
  94. package/data/templates/quantum-verification-story/src/components/section-backdrop.tsx +38 -0
  95. package/data/templates/quantum-verification-story/src/components/sections/clients.tsx +140 -0
  96. package/data/templates/quantum-verification-story/src/components/sections/contact.tsx +125 -0
  97. package/data/templates/quantum-verification-story/src/components/sections/hero.tsx +92 -0
  98. package/data/templates/quantum-verification-story/src/components/sections/moat.tsx +73 -0
  99. package/data/templates/quantum-verification-story/src/components/sections/offer.tsx +113 -0
  100. package/data/templates/quantum-verification-story/src/components/sections/pilot.tsx +63 -0
  101. package/data/templates/quantum-verification-story/src/components/sections/problem.tsx +53 -0
  102. package/data/templates/quantum-verification-story/src/components/text-particle.tsx +204 -0
  103. package/data/templates/quantum-verification-story/src/components/ticker.tsx +27 -0
  104. package/data/templates/quantum-verification-story/src/components/ui/badge.tsx +29 -0
  105. package/data/templates/quantum-verification-story/src/components/ui/button.tsx +55 -0
  106. package/data/templates/quantum-verification-story/src/components/ui/card.tsx +46 -0
  107. package/data/templates/quantum-verification-story/src/components/ui/cursor-driven-particle-typography.tsx +288 -0
  108. package/data/templates/quantum-verification-story/src/components/ui/input.tsx +20 -0
  109. package/data/templates/quantum-verification-story/src/components/ui/label.tsx +21 -0
  110. package/data/templates/quantum-verification-story/src/components/ui/separator.tsx +25 -0
  111. package/data/templates/quantum-verification-story/src/components/ui/textarea.tsx +19 -0
  112. package/data/templates/quantum-verification-story/src/lib/utils.ts +6 -0
  113. package/data/templates/quantum-verification-story/tailwind.config.js +95 -0
  114. package/data/templates/quantum-verification-story/template.manifest.json +23 -0
  115. package/data/templates/quantum-verification-story/tsconfig.json +42 -0
  116. package/data/templates/saas-solution-homepage/main.tsx +91 -14
  117. package/data/templates/saas-solution-homepage/privacy/index.html +1 -0
  118. package/data/templates/saas-solution-homepage/styles.css +47 -2
  119. package/data/templates/saas-solution-homepage/team/index.html +1 -0
  120. package/data/templates/saas-solution-homepage/template.manifest.json +41 -0
  121. package/data/templates/saas-solution-homepage/terms/index.html +1 -0
  122. package/lib/api.mjs +52 -3
  123. package/lib/template-runtime.mjs +56 -0
  124. package/package.json +2 -2
@@ -43,19 +43,19 @@
43
43
  "mono": "JetBrains Mono",
44
44
  "use": "Product UI, dashboards, documentation, evidence identifiers, and long-form web reading"
45
45
  },
46
- "arabicFamily": "IBM Plex Sans Arabic",
46
+ "arabicFamily": "Readex Pro",
47
47
  "weights": {
48
48
  "clashGrotesk": [300, 400, 500, 600, 700],
49
49
  "satoshi": [400, 500, 700],
50
50
  "manrope": [300, 400, 500, 600, 700, 800],
51
51
  "jetBrainsMono": [400, 500, 600]
52
52
  },
53
- "arabicWeights": [400, 500, 700],
53
+ "arabicWeights": [300, 500],
54
54
  "headlineCasing": "sentence",
55
55
  "headlineTracking": "-0.03em to -0.05em",
56
- "arabicDisplayFamily": "IBM Plex Sans Arabic",
56
+ "arabicDisplayFamily": "Readex Pro",
57
57
  "arabicDisplayCasing": "none",
58
- "arabicDisplayRule": "Use Arabic display scale and IBM Plex Sans Arabic. Do not apply Latin negative tracking rules to Arabic.",
58
+ "arabicDisplayRule": "Use Arabic display scale and Readex Pro. Do not apply Latin negative tracking rules to Arabic.",
59
59
  "rationale": "Manrope optimizes dense product UI; Satoshi supports labels; JetBrains Mono identifies evidence and records; Clash Grotesk remains marketing-only."
60
60
  },
61
61
  "geometry": {
@@ -149,7 +149,7 @@
149
149
  "--font-ui-support": "Satoshi",
150
150
  "--font-mono": "JetBrains Mono",
151
151
  "--font-marketing-display": "Clash Grotesk (marketing surfaces only)",
152
- "--font-arabic": "IBM Plex Sans Arabic",
152
+ "--font-arabic": "Readex Pro",
153
153
  "--sidebar-width-collapsed": "Owned by core; remains 4rem"
154
154
  },
155
155
  "governanceStatus": {
@@ -184,7 +184,7 @@
184
184
  "system": "lucide",
185
185
  "description": "Dextrum uses standard Lucide icons in product UI and keeps the Dextrum mark for brand surfaces.",
186
186
  "allow": ["lucide icons in components", "monochrome currentColor icons", "directional mirroring in RTL"],
187
- "avoid": ["Utopia dot-bar icon policy", "emoji", "mixed icon families in one surface"],
187
+ "avoid": ["Utopia Phosphor icon policy", "emoji", "mixed icon families in one surface"],
188
188
  "coreNote": "Icon policy is theme-owned. Core components remain icon-system neutral."
189
189
  },
190
190
  "translations": {
@@ -209,7 +209,7 @@
209
209
  "Do not override core layout tokens such as --sidebar-width-collapsed in products.",
210
210
  "Use Manrope for Latin app UI, Satoshi for supporting labels, and JetBrains Mono for evidence identifiers.",
211
211
  "Use Clash Grotesk for explicit marketing display only.",
212
- "Keep Arabic on IBM Plex Sans Arabic tokens.",
212
+ "Keep Arabic on Readex Pro tokens (body 300, display 500).",
213
213
  "Do not import Utopia brand primitives into Dextrum-themed surfaces."
214
214
  ]
215
215
  }
@@ -0,0 +1,19 @@
1
+ {
2
+ "$schema": "https://utopia-studio.co/design-system/theme.schema.json",
3
+ "id": "prism-mono",
4
+ "name": "Prism Mono",
5
+ "type": "theme-policy",
6
+ "locked": false,
7
+ "motionProfile": "swift",
8
+ "summary": "A monochrome-first theme with a controlled red, yellow, green, and blue spectral accent for focus, progress, and discovery.",
9
+ "sourceFiles": ["packages/design-system/src/themes/prism-mono.css", "packages/design-system/src/manifests/theme-prism-mono.json"],
10
+ "brandPrimitives": {"colors": {"paper": "#F8F8F6", "ink": "#090909", "blue": "#4285F4", "red": "#EA4335", "yellow": "#FBBC04", "green": "#34A853"}, "typography": {"latin": "TWK Lausanne", "arabic": "IBM Plex Sans Arabic"}, "geometry": {"controlRadius": "999px", "surfaceRadius": "24px"}},
11
+ "semanticMappings": {"--background": "Paper", "--foreground": "Ink", "--primary": "Ink", "--primary-foreground": "White", "--ring": "Blue", "--radius-control": "999px", "--radius-surface": "24px"},
12
+ "extensionTokens": {"--prism-spectrum": "The registered four-color spectral accent; never a status token."},
13
+ "visualPolicy": {"tone": ["precise", "open", "inventive"], "allow": ["black-and-white hierarchy", "one spectral focal moment", "crisp labels and generous negative space"], "avoid": ["rainbow decoration on every surface", "color-only status", "copying third-party logos or product chrome"]},
14
+ "iconPolicy": {"system": "lucide", "description": "Use consistent 1.5px line icons and mirror directional icons in RTL.", "allow": ["Lucide icons", "accessible icon labels", "RTL-aware direction"], "avoid": ["mixed icon families", "color-only meaning", "unlabeled icon controls"]},
15
+ "componentPolicy": {"button": "Monochrome by default; spectral color may mark the primary discovery action.", "input": "Use a visible neutral border and blue focus ring.", "card": "White or ink surfaces with one clear outline; gradients belong to feature previews only.", "dataVisualization": "Use the spectral series with labels or patterns."},
16
+ "arabicFriendly": {"direction": "Use logical CSS and mirror directional icons.", "typography": "Use IBM Plex Sans Arabic without Latin tracking or casing."},
17
+ "aiRules": ["Start in black and white.", "Use the spectral gradient once per view as emphasis, not decoration.", "Never use the four hues as unlabeled status states.", "Validate contrast, keyboard focus, mobile, Arabic, RTL, dark mode, and reduced motion."],
18
+ "translations": {"ar": {"summary": "ثيم يبدأ بالأبيض والأسود ويستخدم تدرجاً طيفياً مضبوطاً للتركيز والتقدم والاكتشاف.", "iconPolicy": {"system": "Lucide", "description": "استخدم أيقونات خطية متسقة واعكس الأيقونات الاتجاهية في RTL.", "allow": ["أيقونات Lucide", "تسميات وصول واضحة", "اتجاه واعٍ بـ RTL"]}}}
19
+ }
@@ -0,0 +1,135 @@
1
+ {
2
+ "$schema": "https://utopia-studio.co/design-system/theme.schema.json",
3
+ "id": "utopia-cloudblur",
4
+ "name": "Utopia Cloudblur",
5
+ "type": "theme-policy",
6
+ "locked": false,
7
+ "motionProfile": "ceremonial",
8
+ "summary": "Utopia Cloudblur maps Ceramic to a pale mist canvas with deep translucent feature surfaces and restrained cyan, lilac, and rose light. Blur is a focal-depth device for hero and data moments, never a substitute for hierarchy or contrast.",
9
+ "sourceFiles": [
10
+ "packages/design-system/src/themes/utopia-cloudblur.css",
11
+ "packages/design-system/src/manifests/theme-utopia-cloudblur.json"
12
+ ],
13
+ "brandPrimitives": {
14
+ "colors": {
15
+ "mist0": "#FFFFFF",
16
+ "mist100": "#EEF1F5",
17
+ "mist200": "#DCE2E9",
18
+ "ink900": "#111B2A",
19
+ "ink950": "#09111D",
20
+ "cyan300": "#8DEBF4",
21
+ "cyan600": "#087F92",
22
+ "lilac300": "#D5B9F3",
23
+ "rose300": "#EFB4D2"
24
+ },
25
+ "typography": {
26
+ "latin": "TWK Lausanne",
27
+ "arabic": "Readex Pro",
28
+ "weights": [350, 500, 700],
29
+ "latinRule": "Use quiet weight contrast and compact labels; keep display statements short and open.",
30
+ "arabicRule": "Use native Arabic rhythm with no Latin tracking, uppercase, or forced condensation."
31
+ },
32
+ "geometry": {
33
+ "controlRadius": "999px",
34
+ "surfaceRadius": "28px",
35
+ "elevation": "Soft atmospheric shadow plus translucent material. Blur belongs to selected feature surfaces, not every container."
36
+ }
37
+ },
38
+ "semanticMappings": {
39
+ "--background": "Mist 100",
40
+ "--foreground": "Ink 900",
41
+ "--card": "Mist 0 at 72%",
42
+ "--card-foreground": "Ink 900",
43
+ "--primary": "Ink 900",
44
+ "--primary-foreground": "Mist 0",
45
+ "--secondary": "Mist 0 at 58%",
46
+ "--secondary-foreground": "Ink 900",
47
+ "--muted": "Mist 200 at 72%",
48
+ "--muted-foreground": "Blue Gray 600",
49
+ "--border": "Ink 900 at 13%",
50
+ "--input": "Ink 900 at 20%",
51
+ "--ring": "Cyan 600",
52
+ "--radius-control": "999px",
53
+ "--radius-surface": "28px",
54
+ "--font-sans": "TWK Lausanne",
55
+ "--font-arabic": "Readex Pro",
56
+ "--motion-duration-page": "360ms",
57
+ "--motion-duration-reveal": "420ms"
58
+ },
59
+ "extensionTokens": {
60
+ "--cloudblur-feature-surface": "Deep translucent emphasis surface",
61
+ "--cloudblur-feature-foreground": "High-contrast text on feature surface",
62
+ "--cloudblur-feature-border": "Subtle inner light edge",
63
+ "--cloudblur-feature-backdrop": "Static backdrop-filter material recipe",
64
+ "--cloudblur-feature-shadow": "Layered outer depth and inner material highlight for the signature widget",
65
+ "--cloudblur-feature-edge-filter": "Static fogged perimeter halo for the signature widget",
66
+ "--cloudblur-feature-inner-rim": "Soft inset rim for the signature widget",
67
+ "--cloudblur-bloom-cyan": "Measured cyan ambient light",
68
+ "--cloudblur-bloom-lilac": "Measured lilac ambient light",
69
+ "--cloudblur-bloom-rose": "Measured rose ambient light",
70
+ "--cloudblur-bloom-filter": "Static blur and saturation recipe for ambient light",
71
+ "--cloudblur-scrim": "Readable feature-surface highlight scrim"
72
+ },
73
+ "visualPolicy": {
74
+ "tone": ["atmospheric", "calm", "precise", "tactile", "quietly futuristic"],
75
+ "allow": [
76
+ "pale mist canvases with deep ink focal surfaces",
77
+ "translucency when the fallback background remains readable",
78
+ "cyan, lilac, and rose bloom as localized ambient light",
79
+ "pill controls paired with large soft surface geometry",
80
+ "thin luminous borders and quiet atmospheric shadows",
81
+ "data lines and focal indicators with strong accessible labels"
82
+ ],
83
+ "avoid": [
84
+ "blur on body text or every container",
85
+ "generic full-page aurora gradients",
86
+ "neon glow as a replacement for active or focus state",
87
+ "transparent modal and popover surfaces that weaken readability",
88
+ "color-only status communication",
89
+ "animating blur filters",
90
+ "component-specific color literals",
91
+ "left/right-only layout APIs"
92
+ ]
93
+ },
94
+ "iconPolicy": {
95
+ "system": "phosphor",
96
+ "description": "Use Phosphor Icons with regular weight by default. Directional icons mirror in RTL; icon-only controls keep an accessible name and a visible focus ring.",
97
+ "allow": ["Phosphor Icons", "regular weight by default", "direction-neutral symbols", "RTL-aware directional mirroring"],
98
+ "avoid": ["mixed icon families", "decorative icon clouds", "unlabeled icon-only controls"]
99
+ },
100
+ "componentPolicy": {
101
+ "button": "Pill geometry. Primary remains opaque for reliable contrast; translucency is reserved for secondary and feature-surface controls.",
102
+ "input": "Use a stable high-contrast border and cyan focus ring; placeholder text must not rely on glass contrast.",
103
+ "card": "Default cards are pale translucent surfaces. Reserve the deep cloud recipe for a single focal card or a small hierarchy of feature surfaces.",
104
+ "dialog": "Modal and popover surfaces stay opaque enough for text and focus readability even when the page beneath is luminous.",
105
+ "dataVisualization": "Cyan leads measured data; lilac and rose are secondary series, never success or error substitutes. Pair marks with labels or patterns."
106
+ },
107
+ "arabicFriendly": {
108
+ "direction": "Support dir=\"rtl\" through logical CSS properties and mirror directional motion or icons.",
109
+ "typography": "Use Readex Pro Arabic roles (body 300, display 500, display line-height >= 1.28) without Latin casing, tracking, or condensed line-height.",
110
+ "effects": "Ambient blooms are direction-neutral. Focal chart progress and navigation must follow logical start/end."
111
+ },
112
+ "aiRules": [
113
+ "Map reusable components through Ceramic semantic roles; never copy the screenshot's raw colors into component CSS.",
114
+ "Use the deep Cloudblur feature surface only for the primary hero, the registered signature widget, or a comparable focal moment.",
115
+ "Keep text and interactive controls on an opaque-enough scrim; blur is progressive enhancement, not the contrast mechanism.",
116
+ "Use cyan for focus and measured signal, lilac and rose for ambient or secondary series, and semantic status tokens for outcomes.",
117
+ "Do not animate backdrop-filter or filter blur. Resolve motion through the ceremonial profile and honor reduced motion.",
118
+ "Validate light, dark, system, keyboard focus, 320px mobile, Arabic, and RTL before release."
119
+ ],
120
+ "translations": {
121
+ "ar": {
122
+ "summary": "ثيم Utopia Cloudblur يجمع بين خلفية ضبابية فاتحة وأسطح داكنة شفافة مع إضاءة سماوية وبنفسجية هادئة، مع الحفاظ على الوضوح والتباين.",
123
+ "iconPolicy": {
124
+ "system": "Phosphor Icons",
125
+ "description": "استخدم أيقونات Phosphor بالسُمك العادي افتراضياً، واعكس الأيقونات الاتجاهية في RTL، ووفّر اسماً واضحاً لعناصر التحكم التي تعتمد على الأيقونة فقط.",
126
+ "allow": [
127
+ "أيقونات Phosphor",
128
+ "السُمك العادي افتراضياً",
129
+ "عكس الأيقونات الاتجاهية في RTL",
130
+ "تسمية واضحة لعناصر التحكم الأيقونية"
131
+ ]
132
+ }
133
+ }
134
+ }
135
+ }
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "$schema": "https://utopia-studio.co/design-system/theme.schema.json",
3
3
  "id": "utopia-default",
4
- "name": "The Utopia Studio Default",
4
+ "name": "The Utopia Studio",
5
5
  "shortName": "Utopia Default",
6
6
  "type": "theme-policy",
7
7
  "locked": true,
@@ -9,6 +9,7 @@
9
9
  "brandAssets": {
10
10
  "wordmark": {
11
11
  "src": "/brand/the-utopia-studio-wordmark.avif",
12
+ "presentationSrc": "/brand/the-utopia-studio-wordmark.svg",
12
13
  "alt": "The Utopia Studio",
13
14
  "usage": "May identify The Utopia Studio branded products, documents, and template surfaces. Core components must not depend on this asset."
14
15
  }
@@ -27,22 +28,21 @@
27
28
  },
28
29
  "typography": {
29
30
  "family": "TWK Lausanne",
30
- "arabicFamily": "IBM Plex Sans Arabic",
31
+ "arabicFamily": "Readex Pro",
31
32
  "weights": [
32
33
  350,
33
34
  500,
34
35
  700
35
36
  ],
36
37
  "arabicWeights": [
37
- 400,
38
- 500,
39
- 700
38
+ 300,
39
+ 500
40
40
  ],
41
41
  "headlineCasing": "uppercase",
42
42
  "headlineTracking": "0.02em to 0.04em",
43
- "arabicDisplayFamily": "IBM Plex Sans Arabic",
43
+ "arabicDisplayFamily": "Readex Pro",
44
44
  "arabicDisplayCasing": "none",
45
- "arabicDisplayRule": "Do not translate Latin all-caps styling into Arabic uppercase. Use Arabic display scale, weight, rhythm, and IBM Plex Sans Arabic instead."
45
+ "arabicDisplayRule": "Do not translate Latin all-caps styling into Arabic uppercase. Use Arabic display scale, weight, rhythm, and Readex Pro instead."
46
46
  },
47
47
  "geometry": {
48
48
  "surfaceRadius": "0px",
@@ -72,18 +72,18 @@
72
72
  "--motion-distance-page": "8px logical view shift",
73
73
  "--motion-distance-reveal": "8px soft entrance distance",
74
74
  "--font-sans": "TWK Lausanne",
75
- "--font-arabic": "IBM Plex Sans Arabic",
76
- "--font-arabic-display": "IBM Plex Sans Arabic",
77
- "--font-arabic-body": "IBM Plex Sans Arabic",
78
- "--font-weight-arabic-body": "400",
79
- "--font-weight-arabic-display": "700",
75
+ "--font-arabic": "Readex Pro",
76
+ "--font-arabic-display": "Readex Pro",
77
+ "--font-arabic-body": "Readex Pro",
78
+ "--font-weight-arabic-body": "300",
79
+ "--font-weight-arabic-display": "500",
80
80
  "--font-size-display": "clamp(44px, 8vw, 96px)",
81
81
  "--font-size-arabic-body": "16px",
82
82
  "--font-size-arabic-body-lg": "19px",
83
- "--font-size-arabic-display": "clamp(42px, 7.6vw, 91px)",
83
+ "--font-size-arabic-display": "clamp(40px, 7.3vw, 87px)",
84
84
  "--line-height-arabic": "1.75",
85
- "--line-height-arabic-body": "1.75",
86
- "--line-height-arabic-display": "1.16",
85
+ "--line-height-arabic-body": "1.85",
86
+ "--line-height-arabic-display": "1.28",
87
87
  "--tracking-arabic": "0",
88
88
  "--tracking-arabic-display": "0",
89
89
  "--sidebar-width": "17rem",
@@ -137,7 +137,7 @@
137
137
  ],
138
138
  "typography": [
139
139
  "Latin display headlines use TWK Lausanne 700, uppercase, tight line-height, and compact tracking.",
140
- "Korean and Arabic retain native casing while matching the same visual mass, weight, and tight rhythm.",
140
+ "Korean and Arabic retain native casing; Arabic uses Readex Pro at a lighter weight (300 body, 500 display) and a wider line-height to match the same visual mass as the Latin rhythm.",
141
141
  "Small labels are concise, medium-weight, and widely tracked; body copy remains calm and readable."
142
142
  ],
143
143
  "signature": [
@@ -156,31 +156,31 @@
156
156
  ]
157
157
  },
158
158
  "iconPolicy": {
159
- "system": "utopia-dot-bar",
160
- "description": "Icons are brand marks made from solid dots and rectangular bars. They are graphic breaks, not decoration.",
159
+ "system": "phosphor",
160
+ "description": "Use Phosphor Icons for interface actions and navigation. The Utopia dot-and-bar graphic remains a brand mark, not a component icon.",
161
161
  "allow": [
162
- "solid circles",
163
- "rectangular bars",
164
- "three-bar mark",
165
- "monochrome Special Black or current foreground"
162
+ "Phosphor Icons",
163
+ "regular weight by default",
164
+ "monochrome currentColor icons",
165
+ "RTL-aware directional mirroring"
166
166
  ],
167
167
  "avoid": [
168
168
  "Lucide",
169
169
  "Heroicons",
170
170
  "Feather",
171
171
  "emoji",
172
- "outlined icon sets",
173
- "rounded bubbly forms"
172
+ "mixed icon families",
173
+ "unlabeled icon-only controls"
174
174
  ],
175
- "coreNote": "This restriction belongs to Utopia Default only. Other themes may declare different icon systems."
175
+ "coreNote": "Phosphor is selected by the Utopia Default theme. Core components remain icon-system neutral."
176
176
  },
177
177
  "translations": {
178
178
  "ar": {
179
179
  "summary": "الثيم الافتراضي المقفل لـ The Utopia Studio. يربط عقد Ceramic الدلالي بقيم الاستوديو الأولية مع إبقاء قرارات العلامة خارج مكونات الجوهر القابلة لإعادة الاستخدام.",
180
180
  "iconPolicy": {
181
- "system": "نظام النقاط والأشرطة الخاص بـ Utopia",
182
- "description": "الأيقونات علامات للهوية مبنية من نقاط صلبة وأشرطة مستطيلة. هي فواصل بصرية وليست زخرفة.",
183
- "allow": ["دوائر صلبة", "أشرطة مستطيلة", "علامة الأشرطة الثلاثة", "لون أحادي Special Black أو لون المقدمة الحالي"]
181
+ "system": "Phosphor Icons",
182
+ "description": "استخدم أيقونات Phosphor لإجراءات الواجهة والتنقل. يبقى رسم النقاط والأشرطة الخاص بـ Utopia علامة للهوية وليس أيقونة للمكوّنات.",
183
+ "allow": ["أيقونات Phosphor", "السُمك العادي افتراضياً", "أيقونات أحادية بلون currentColor", "عكس الاتجاه في RTL"]
184
184
  }
185
185
  }
186
186
  },
@@ -188,10 +188,10 @@
188
188
  "Read this theme policy after the core semantic contract.",
189
189
  "Do not apply Utopia brand restrictions to other themes unless their manifests say so.",
190
190
  "Do not hardcode Brick Red, Special Black, TWK Lausanne, or Utopia icon rules inside reusable core components.",
191
- "When Arabic or lang=\"ar\" content is present, use --font-arabic mapped to IBM Plex Sans Arabic and the Arabic line-height role.",
192
- "Arabic display sizing follows the Latin display scale at approximately 95%, rather than making Arabic headings larger than Latin headings.",
191
+ "When Arabic or lang=\"ar\" content is present, use --font-arabic mapped to Readex Pro and the Arabic display/body weight and line-height roles. Never apply Latin uppercase or letter-spacing to Arabic.",
192
+ "Arabic display sizing follows the Latin display scale at approximately 90-92%, rather than making Arabic headings larger than Latin headings. Arabic display line-height must be at least 1.28.",
193
193
  "Do not apply Latin uppercase display styling to Arabic. Use Arabic display/body tokens and text-transform: none.",
194
- "When this theme is active, do not use Lucide icons as brand-facing component icons.",
194
+ "When this theme is active, use Phosphor Icons for interface actions and navigation; do not mix icon families.",
195
195
  "Modal content uses --modal-surface and must stay solid in Utopia Default; only the overlay dims the page behind it.",
196
196
  "Floating content such as select, menu, popover, and tooltip uses --popover-surface so alpha page surfaces do not make controls look translucent."
197
197
  ]
@@ -121,5 +121,21 @@
121
121
  "Prefer typography and spacing before adding a card or container.",
122
122
  "Define default, hover, active, focus-visible, disabled, loading, success, and error states for interactive components.",
123
123
  "Keep Arabic on IBM Plex Sans Arabic tokens without Latin casing or tracking."
124
- ]
124
+ ],
125
+ "translations": {
126
+ "ar": {
127
+ "summary": "يحوّل ثيم Vyapti نظام Ceramic إلى واجهة تقنية هادئة ودقيقة تبدأ من المساحات البيضاء والأخضر العميق، مع استخدام الأخضر الدلالي للإجراء والإشارة والحالة النشطة.",
128
+ "iconPolicy": {
129
+ "system": "Lucide",
130
+ "description": "استخدم أيقونات Lucide خطية ومقيدة بسُمك 1.5 بكسل، واعكس الأيقونات الاتجاهية في RTL، ووفّر اسماً واضحاً لعناصر التحكم الأيقونية.",
131
+ "allow": [
132
+ "أيقونات Lucide بالأحجام الدلالية",
133
+ "سُمك خط 1.5 بكسل",
134
+ "أيقونات محايدة الاتجاه",
135
+ "عكس الأيقونات الاتجاهية في RTL",
136
+ "تسميات وصول لعناصر التحكم الأيقونية"
137
+ ]
138
+ }
139
+ }
140
+ }
125
141
  }
@@ -0,0 +1,18 @@
1
+ {
2
+ "$schema": "https://utopia-studio.co/design-system/theme.schema.json",
3
+ "id": "y2k-pop",
4
+ "name": "Y2K Pop",
5
+ "type": "theme-policy",
6
+ "locked": false,
7
+ "motionProfile": "swift",
8
+ "summary": "A cute early-web expression with candy pastels, bubble geometry, tactile offset shadows, and a modern accessible interaction contract.",
9
+ "sourceFiles": ["packages/design-system/src/themes/y2k-pop.css", "packages/design-system/src/manifests/theme-y2k-pop.json"],
10
+ "brandPrimitives": {"colors": {"milk": "#FFF6FD", "plum": "#35144F", "purple": "#6C2BD9", "pink": "#FFD4F0", "aqua": "#76E5FF", "lime": "#B6FF64"}, "typography": {"latin": "TWK Lausanne", "arabic": "IBM Plex Sans Arabic"}, "geometry": {"controlRadius": "999px", "surfaceRadius": "32px"}},
11
+ "semanticMappings": {"--background": "Milk", "--foreground": "Plum", "--primary": "Accessible Purple", "--primary-foreground": "White", "--secondary": "Bubblegum Pink", "--ring": "Accessible Purple", "--radius-control": "999px", "--radius-surface": "32px"},
12
+ "visualPolicy": {"tone": ["cute", "optimistic", "tactile"], "allow": ["pastel fields with dark plum text", "bubble geometry", "small offset shadows", "one playful sparkle motif"], "avoid": ["low-contrast pastel text", "constant bouncing motion", "illegible novelty fonts", "chrome effects on body text"]},
13
+ "iconPolicy": {"system": "lucide-rounded", "description": "Use rounded Lucide forms with consistent weight, accessible names, and RTL mirroring.", "allow": ["rounded Lucide icons", "simple stars and hearts as decoration", "accessible icon labels", "RTL-aware direction"], "avoid": ["emoji as functional icons", "mixed stroke weights", "unlabeled icon controls"]},
14
+ "componentPolicy": {"button": "Pill controls with a restrained offset shadow; preserve a clear pressed state.", "input": "White field, plum label, accessible purple focus ring.", "card": "Bubble geometry with controlled pastel accents and a readable white content plane.", "dataVisualization": "Use saturated accessible derivatives of the pastel palette and direct labels."},
15
+ "arabicFriendly": {"direction": "Use logical CSS and mirror directional icons.", "typography": "Use IBM Plex Sans Arabic and keep playful character in color and geometry, not Latin letter effects."},
16
+ "aiRules": ["Keep content text dark plum on pale surfaces.", "Limit decorative sparkles to non-interactive regions.", "Do not bounce critical controls continuously.", "Validate contrast, keyboard focus, mobile, Arabic, RTL, dark mode, and reduced motion."],
17
+ "translations": {"ar": {"summary": "ثيم مرح مستلهم من الويب المبكر بألوان حلوى وهندسة فقاعية مع عقد تفاعل حديث وواضح.", "iconPolicy": {"system": "Lucide Rounded", "description": "استخدم أشكال Lucide المستديرة مع وزن متسق وتسميات وصول وعكس RTL.", "allow": ["أيقونات Lucide المستديرة", "زخارف نجوم بسيطة", "تسميات وصول", "اتجاه واعٍ بـ RTL"]}}}
18
+ }