create-specfuse 0.3.1 → 0.4.0

package/dist/design-md/templates/_schema.yaml

@@ -3,9 +3,10 @@ required:
   - id
   - name
   - category
+  - intent
   - dimensions
   - anchors
-  - template
+  - structure
 properties:
   id:
     type: string
@@ -24,6 +25,19 @@ properties:
       - marketing
       - form-heavy
       - content
+  intent:
+    type: object
+    required:
+      - mood
+      - density
+      - philosophy
+    properties:
+      mood:
+        type: string
+      density:
+        type: string
+      philosophy:
+        type: string
   dimensions:
     type: object
     required:
@@ -56,16 +70,67 @@ properties:
   anchors:
     type: object
     required:
-      - primary
-      - auxiliary
+      - colors
+      - typography
+      - spacing
+      - radius
     properties:
-      primary:
-        type: string
-      auxiliary:
+      colors:
+        type: object
+        required:
+          - primary
+          - auxiliary
+        properties:
+          primary:
+            type: string
+            pattern: "^#[0-9a-fA-F]{6}$"
+          auxiliary:
+            type: array
+            items:
+              type: string
+              pattern: "^#[0-9a-fA-F]{6}$"
+            minItems: 1
+            maxItems: 2
+      typography:
+        type: object
+        required:
+          - baseSize
+          - scale
+        properties:
+          baseSize:
+            type: string
+            pattern: "^\\d+px$"
+          scale:
+            type: number
+            exclusiveMinimum: 1.0
+            exclusiveMaximum: 2.0
+      spacing:
+        type: object
+        required:
+          - unit
+        properties:
+          unit:
+            type: string
+            pattern: "^\\d+px$"
+      radius:
+        type: object
+        required:
+          - base
+        properties:
+          base:
+            type: string
+            pattern: "^\\d+px$"
+  structure:
+    type: object
+    required:
+      - requiredSections
+      - componentTokens
+    properties:
+      requiredSections:
+        type: array
+        items:
+          type: string
+      componentTokens:
         type: array
         items:
           type: string
-        minItems: 1
-        maxItems: 2
-  template:
-    type: string

package/dist/design-md/templates/consumer-media.yaml

@@ -1,6 +1,10 @@
 id: consumer-media
 name: Consumer Media
 category: consumer
+intent:
+  mood: Immersive and atmospheric — content is the interface
+  density: Low density, generous breathing room for media-rich layouts
+  philosophy: Dark canvas makes content pop; UI chrome dissolves when content plays
 dimensions:
   colorTemp: 3
   lightness: 2
@@ -8,27 +12,32 @@ dimensions:
   borderRadius: 3
   tone: 4
 anchors:
-  primary: Spotify
-  auxiliary:
-    - Netflix
-    - Apple Music
-template: |
-  tokens:
-    colors:
-      primary: "#1DB954"
-      background: "#121212"
-      surface: "#1E1E1E"
-      text: "#FFFFFF"
-      accent: "#1ED760"
-    spacing:
-      base: "4px"
-      scale: [4, 8, 12, 16, 24, 32, 48, 64]
-    radius:
-      default: "8px"
-      large: "12px"
-    typography:
-      fontFamily: "'Circular', 'Helvetica Neue', sans-serif"
-      scale: [12, 14, 16, 20, 24, 32, 48]
-    density:
-      compact: false
-      tableRowHeight: "48px"
+  colors:
+    primary: "#1DB954"
+    auxiliary:
+      - "#1ED760"
+  typography:
+    baseSize: "14px"
+    scale: 1.333
+  spacing:
+    unit: "8px"
+  radius:
+    base: "8px"
+structure:
+  requiredSections:
+    - colors
+    - typography
+    - spacing
+    - rounded
+    - elevation
+    - components
+    - breakpoints
+  componentTokens:
+    - button
+    - input
+    - card
+    - avatar
+    - modal
+    - badge
+    - player-control
+    - media-card

package/dist/design-md/templates/consumer-social.yaml

@@ -1,34 +1,43 @@
 id: consumer-social
 name: Consumer Social
 category: consumer
+intent:
+  mood: Warm and conversational — approachable without being childish
+  density: Medium density, content feed with clear hierarchy between items
+  philosophy: People-centric layouts where avatars and names anchor every interaction
 dimensions:
-  colorTemp: 4
+  colorTemp: 3
   lightness: 4
-  density: 4
-  borderRadius: 5
-  tone: 5
+  density: 3
+  borderRadius: 4
+  tone: 4
 anchors:
-  primary: Instagram
-  auxiliary:
-    - TikTok
-    - Threads
-template: |
-  tokens:
-    colors:
-      primary: "#E1306C"
-      background: "#FFFFFF"
-      surface: "#FAFAFA"
-      text: "#262626"
-      accent: "#833AB4"
-    spacing:
-      base: "4px"
-      scale: [4, 8, 12, 16, 24, 32, 48, 64]
-    radius:
-      default: "16px"
-      large: "24px"
-    typography:
-      fontFamily: "'-apple-system', 'Segoe UI', sans-serif"
-      scale: [12, 14, 16, 18, 24, 32]
-    density:
-      compact: false
-      tableRowHeight: "56px"
+  colors:
+    primary: "#1DA1F2"
+    auxiliary:
+      - "#FF6B6B"
+  typography:
+    baseSize: "15px"
+    scale: 1.25
+  spacing:
+    unit: "4px"
+  radius:
+    base: "12px"
+structure:
+  requiredSections:
+    - colors
+    - typography
+    - spacing
+    - rounded
+    - elevation
+    - components
+    - breakpoints
+  componentTokens:
+    - button
+    - input
+    - card
+    - avatar
+    - modal
+    - badge
+    - feed-item
+    - comment

package/dist/design-md/templates/content-blog.yaml

@@ -1,34 +1,43 @@
 id: content-blog
 name: Content Blog
 category: content
+intent:
+  mood: Calm and readable — typography-first editorial aesthetic
+  density: Very low density, maximizes reading comfort and line length control
+  philosophy: Text is king; generous margins, optimal measure (65-75 characters), and clear type hierarchy create effortless reading
 dimensions:
   colorTemp: 3
-  lightness: 5
-  density: 5
+  lightness: 4
+  density: 4
   borderRadius: 2
   tone: 3
 anchors:
-  primary: Medium
-  auxiliary:
-    - Substack
-    - Ghost
-template: |
-  tokens:
-    colors:
-      primary: "#292929"
-      background: "#FFFFFF"
-      surface: "#FAFAFA"
-      text: "#292929"
-      accent: "#1A8917"
-    spacing:
-      base: "4px"
-      scale: [4, 8, 16, 24, 32, 48, 64, 96]
-    radius:
-      default: "4px"
-      large: "8px"
-    typography:
-      fontFamily: "'Georgia', 'Charter', serif"
-      scale: [14, 16, 18, 21, 26, 34, 42]
-    density:
-      compact: false
-      tableRowHeight: "48px"
+  colors:
+    primary: "#1A1A1A"
+    auxiliary:
+      - "#6366F1"
+  typography:
+    baseSize: "18px"
+    scale: 1.333
+  spacing:
+    unit: "8px"
+  radius:
+    base: "4px"
+structure:
+  requiredSections:
+    - colors
+    - typography
+    - spacing
+    - rounded
+    - elevation
+    - components
+    - breakpoints
+  componentTokens:
+    - button
+    - input
+    - card
+    - blockquote
+    - code-block
+    - badge
+    - table
+    - navigation

package/dist/design-md/templates/content-docs.yaml

@@ -1,6 +1,10 @@
 id: content-docs
 name: Content Documentation
 category: content
+intent:
+  mood: Clear and scannable — structure reveals content hierarchy instantly
+  density: Medium density, sidebar + content + on-page nav three-column pattern
+  philosophy: Documentation is wayfinding; persistent navigation and deep linking matter more than visual flair
 dimensions:
   colorTemp: 2
   lightness: 4
@@ -8,27 +12,33 @@ dimensions:
   borderRadius: 2
   tone: 2
 anchors:
-  primary: Docusaurus
-  auxiliary:
-    - GitBook
-    - ReadTheDocs
-template: |
-  tokens:
-    colors:
-      primary: "#2E8555"
-      background: "#FFFFFF"
-      surface: "#F5F6F7"
-      text: "#1C1E21"
-      accent: "#25C2A0"
-    spacing:
-      base: "4px"
-      scale: [4, 8, 12, 16, 24, 32, 48, 64]
-    radius:
-      default: "4px"
-      large: "8px"
-    typography:
-      fontFamily: "'-apple-system', 'Segoe UI', sans-serif"
-      scale: [12, 14, 16, 18, 20, 24, 30]
-    density:
-      compact: false
-      tableRowHeight: "40px"
+  colors:
+    primary: "#0F172A"
+    auxiliary:
+      - "#3B82F6"
+  typography:
+    baseSize: "16px"
+    scale: 1.25
+  spacing:
+    unit: "4px"
+  radius:
+    base: "6px"
+structure:
+  requiredSections:
+    - colors
+    - typography
+    - spacing
+    - rounded
+    - elevation
+    - components
+    - breakpoints
+  componentTokens:
+    - button
+    - input
+    - card
+    - sidebar
+    - code-block
+    - badge
+    - table
+    - breadcrumb
+    - tab

package/dist/design-md/templates/dashboard-analytics.yaml

@@ -1,6 +1,10 @@
 id: dashboard-analytics
 name: Dashboard Analytics
 category: dashboard
+intent:
+  mood: Data-focused and precise — every pixel serves information delivery
+  density: Very high density, optimized for data visualization and number scanning
+  philosophy: Dark interfaces reduce eye strain for long monitoring sessions; accent colors encode meaning not decoration
 dimensions:
   colorTemp: 2
   lightness: 2
@@ -8,27 +12,32 @@ dimensions:
   borderRadius: 2
   tone: 1
 anchors:
-  primary: Grafana
-  auxiliary:
-    - Datadog
-    - New Relic
-template: |
-  tokens:
-    colors:
-      primary: "#FF6600"
-      background: "#111217"
-      surface: "#1A1C23"
-      text: "#D8D9DA"
-      accent: "#73BF69"
-    spacing:
-      base: "4px"
-      scale: [2, 4, 8, 12, 16, 24, 32]
-    radius:
-      default: "4px"
-      large: "6px"
-    typography:
-      fontFamily: "'Inter', 'Roboto', sans-serif"
-      scale: [10, 11, 12, 14, 16, 20, 24]
-    density:
-      compact: true
-      tableRowHeight: "32px"
+  colors:
+    primary: "#FF6600"
+    auxiliary:
+      - "#73BF69"
+  typography:
+    baseSize: "12px"
+    scale: 1.2
+  spacing:
+    unit: "4px"
+  radius:
+    base: "4px"
+structure:
+  requiredSections:
+    - colors
+    - typography
+    - spacing
+    - rounded
+    - elevation
+    - components
+    - breakpoints
+  componentTokens:
+    - button
+    - input
+    - card
+    - table
+    - chart
+    - badge
+    - tooltip
+    - stat-card

package/dist/design-md/templates/dashboard-monitoring.yaml

@@ -1,6 +1,10 @@
 id: dashboard-monitoring
 name: Dashboard Monitoring
 category: dashboard
+intent:
+  mood: Alert-driven and status-aware — visual hierarchy serves urgency levels
+  density: Maximum density, real-time feeds with minimal chrome
+  philosophy: Monospace typography and tight grids for pattern recognition; color = system state, not brand
 dimensions:
   colorTemp: 1
   lightness: 1
@@ -8,27 +12,32 @@ dimensions:
   borderRadius: 1
   tone: 1
 anchors:
-  primary: PagerDuty
-  auxiliary:
-    - Uptime Robot
-    - StatusPage
-template: |
-  tokens:
-    colors:
-      primary: "#06AC38"
-      background: "#0D1117"
-      surface: "#161B22"
-      text: "#C9D1D9"
-      accent: "#F85149"
-    spacing:
-      base: "4px"
-      scale: [2, 4, 8, 12, 16, 24, 32]
-    radius:
-      default: "3px"
-      large: "4px"
-    typography:
-      fontFamily: "'JetBrains Mono', 'Fira Code', monospace"
-      scale: [10, 11, 12, 14, 16, 18, 22]
-    density:
-      compact: true
-      tableRowHeight: "28px"
+  colors:
+    primary: "#06AC38"
+    auxiliary:
+      - "#F85149"
+  typography:
+    baseSize: "12px"
+    scale: 1.15
+  spacing:
+    unit: "4px"
+  radius:
+    base: "3px"
+structure:
+  requiredSections:
+    - colors
+    - typography
+    - spacing
+    - rounded
+    - elevation
+    - components
+    - breakpoints
+  componentTokens:
+    - button
+    - input
+    - card
+    - table
+    - badge
+    - alert
+    - tooltip
+    - status-indicator

package/dist/design-md/templates/developer-portal.yaml

@@ -1,33 +1,44 @@
 id: developer-portal
 name: Developer Portal
 category: developer
+intent:
+  mood: Technical and precise — code-native aesthetic that developers trust
+  density: Medium-high density, code blocks and API references dominate
+  philosophy: Developers read code more than prose; monospace as first-class citizen, syntax highlighting as semantic color
 dimensions:
   colorTemp: 1
-  lightness: 1
-  density: 3
+  lightness: 2
+  density: 2
   borderRadius: 2
-  tone: 2
+  tone: 1
 anchors:
-  primary: Stripe Docs
-  auxiliary:
-    - Tailwind Docs
-template: |
-  tokens:
-    colors:
-      primary: "#3B82F6"
-      background: "#0F172A"
-      surface: "#1E293B"
-      text: "#E2E8F0"
-      accent: "#22D3EE"
-    spacing:
-      base: "4px"
-      scale: [4, 8, 16, 24, 32, 48, 64]
-    radius:
-      default: "6px"
-      large: "8px"
-    typography:
-      fontFamily: "'JetBrains Mono', 'Fira Code', monospace"
-      scale: [12, 14, 16, 18, 24, 32]
-    density:
-      compact: false
-      tableRowHeight: "40px"
+  colors:
+    primary: "#00D4AA"
+    auxiliary:
+      - "#A78BFA"
+  typography:
+    baseSize: "14px"
+    scale: 1.2
+  spacing:
+    unit: "4px"
+  radius:
+    base: "6px"
+structure:
+  requiredSections:
+    - colors
+    - typography
+    - spacing
+    - rounded
+    - elevation
+    - components
+    - breakpoints
+  componentTokens:
+    - button
+    - input
+    - card
+    - code-block
+    - sidebar
+    - badge
+    - tab
+    - tooltip
+    - table

package/dist/design-md/templates/e-commerce.yaml

@@ -1,34 +1,44 @@
 id: e-commerce
-name: E-Commerce Platform
+name: E-Commerce
 category: e-commerce
+intent:
+  mood: Confident and inviting — drives action without feeling pushy
+  density: Medium density, product cards with clear pricing and CTA hierarchy
+  philosophy: Every element earns its space by contributing to the purchase decision; trust signals are never decorative
 dimensions:
-  colorTemp: 4
+  colorTemp: 3
   lightness: 4
   density: 3
-  borderRadius: 4
-  tone: 4
+  borderRadius: 3
+  tone: 3
 anchors:
-  primary: Shopify
-  auxiliary:
-    - Gumroad
-    - Lemonsqueezy
-template: |
-  tokens:
-    colors:
-      primary: "#16A34A"
-      background: "#FFFFFF"
-      surface: "#F9FAFB"
-      text: "#111827"
-      accent: "#F59E0B"
-    spacing:
-      base: "4px"
-      scale: [4, 8, 12, 16, 24, 32, 48, 64]
-    radius:
-      default: "12px"
-      large: "16px"
-    typography:
-      fontFamily: "'Plus Jakarta Sans', -apple-system, sans-serif"
-      scale: [12, 14, 16, 20, 24, 32, 40]
-    density:
-      compact: false
-      tableRowHeight: "52px"
+  colors:
+    primary: "#FF6900"
+    auxiliary:
+      - "#1A1A1A"
+  typography:
+    baseSize: "16px"
+    scale: 1.25
+  spacing:
+    unit: "4px"
+  radius:
+    base: "8px"
+structure:
+  requiredSections:
+    - colors
+    - typography
+    - spacing
+    - rounded
+    - elevation
+    - components
+    - breakpoints
+  componentTokens:
+    - button
+    - input
+    - card
+    - badge
+    - modal
+    - product-card
+    - price-tag
+    - rating
+    - breadcrumb