create-specfuse 0.3.0 → 0.3.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 (33) hide show
  1. package/dist/design-md/templates/_schema.yaml +71 -0
  2. package/dist/design-md/templates/consumer-media.yaml +34 -0
  3. package/dist/design-md/templates/consumer-social.yaml +34 -0
  4. package/dist/design-md/templates/content-blog.yaml +34 -0
  5. package/dist/design-md/templates/content-docs.yaml +34 -0
  6. package/dist/design-md/templates/dashboard-analytics.yaml +34 -0
  7. package/dist/design-md/templates/dashboard-monitoring.yaml +34 -0
  8. package/dist/design-md/templates/developer-portal.yaml +33 -0
  9. package/dist/design-md/templates/e-commerce.yaml +34 -0
  10. package/dist/design-md/templates/form-heavy.yaml +34 -0
  11. package/dist/design-md/templates/internal-tool.yaml +34 -0
  12. package/dist/design-md/templates/marketing-corporate.yaml +34 -0
  13. package/dist/design-md/templates/marketing-creative.yaml +34 -0
  14. package/dist/design-md/templates/mobile-lifestyle.yaml +34 -0
  15. package/dist/design-md/templates/mobile-utility.yaml +33 -0
  16. package/dist/design-md/templates/saas-dashboard.yaml +34 -0
  17. package/dist/design-md/templates/templates/_schema.yaml +71 -0
  18. package/dist/design-md/templates/templates/consumer-media.yaml +34 -0
  19. package/dist/design-md/templates/templates/consumer-social.yaml +34 -0
  20. package/dist/design-md/templates/templates/content-blog.yaml +34 -0
  21. package/dist/design-md/templates/templates/content-docs.yaml +34 -0
  22. package/dist/design-md/templates/templates/dashboard-analytics.yaml +34 -0
  23. package/dist/design-md/templates/templates/dashboard-monitoring.yaml +34 -0
  24. package/dist/design-md/templates/templates/developer-portal.yaml +33 -0
  25. package/dist/design-md/templates/templates/e-commerce.yaml +34 -0
  26. package/dist/design-md/templates/templates/form-heavy.yaml +34 -0
  27. package/dist/design-md/templates/templates/internal-tool.yaml +34 -0
  28. package/dist/design-md/templates/templates/marketing-corporate.yaml +34 -0
  29. package/dist/design-md/templates/templates/marketing-creative.yaml +34 -0
  30. package/dist/design-md/templates/templates/mobile-lifestyle.yaml +34 -0
  31. package/dist/design-md/templates/templates/mobile-utility.yaml +33 -0
  32. package/dist/design-md/templates/templates/saas-dashboard.yaml +34 -0
  33. package/package.json +2 -2
@@ -0,0 +1,71 @@
1
+ type: object
2
+ required:
3
+ - id
4
+ - name
5
+ - category
6
+ - dimensions
7
+ - anchors
8
+ - template
9
+ properties:
10
+ id:
11
+ type: string
12
+ pattern: "^[a-z][a-z0-9-]*$"
13
+ name:
14
+ type: string
15
+ category:
16
+ type: string
17
+ enum:
18
+ - internal-tool
19
+ - dashboard
20
+ - consumer
21
+ - developer
22
+ - mobile
23
+ - e-commerce
24
+ - marketing
25
+ - form-heavy
26
+ - content
27
+ dimensions:
28
+ type: object
29
+ required:
30
+ - colorTemp
31
+ - lightness
32
+ - density
33
+ - borderRadius
34
+ - tone
35
+ properties:
36
+ colorTemp:
37
+ type: integer
38
+ minimum: 1
39
+ maximum: 5
40
+ lightness:
41
+ type: integer
42
+ minimum: 1
43
+ maximum: 5
44
+ density:
45
+ type: integer
46
+ minimum: 1
47
+ maximum: 5
48
+ borderRadius:
49
+ type: integer
50
+ minimum: 1
51
+ maximum: 5
52
+ tone:
53
+ type: integer
54
+ minimum: 1
55
+ maximum: 5
56
+ anchors:
57
+ type: object
58
+ required:
59
+ - primary
60
+ - auxiliary
61
+ properties:
62
+ primary:
63
+ type: string
64
+ auxiliary:
65
+ type: array
66
+ items:
67
+ type: string
68
+ minItems: 1
69
+ maxItems: 2
70
+ template:
71
+ type: string
@@ -0,0 +1,34 @@
1
+ id: consumer-media
2
+ name: Consumer Media
3
+ category: consumer
4
+ dimensions:
5
+ colorTemp: 3
6
+ lightness: 2
7
+ density: 4
8
+ borderRadius: 3
9
+ tone: 4
10
+ anchors:
11
+ primary: Spotify
12
+ auxiliary:
13
+ - Netflix
14
+ - Apple Music
15
+ template: |
16
+ tokens:
17
+ colors:
18
+ primary: "#1DB954"
19
+ background: "#121212"
20
+ surface: "#1E1E1E"
21
+ text: "#FFFFFF"
22
+ accent: "#1ED760"
23
+ spacing:
24
+ base: "4px"
25
+ scale: [4, 8, 12, 16, 24, 32, 48, 64]
26
+ radius:
27
+ default: "8px"
28
+ large: "12px"
29
+ typography:
30
+ fontFamily: "'Circular', 'Helvetica Neue', sans-serif"
31
+ scale: [12, 14, 16, 20, 24, 32, 48]
32
+ density:
33
+ compact: false
34
+ tableRowHeight: "48px"
@@ -0,0 +1,34 @@
1
+ id: consumer-social
2
+ name: Consumer Social
3
+ category: consumer
4
+ dimensions:
5
+ colorTemp: 4
6
+ lightness: 4
7
+ density: 4
8
+ borderRadius: 5
9
+ tone: 5
10
+ anchors:
11
+ primary: Instagram
12
+ auxiliary:
13
+ - TikTok
14
+ - Threads
15
+ template: |
16
+ tokens:
17
+ colors:
18
+ primary: "#E1306C"
19
+ background: "#FFFFFF"
20
+ surface: "#FAFAFA"
21
+ text: "#262626"
22
+ accent: "#833AB4"
23
+ spacing:
24
+ base: "4px"
25
+ scale: [4, 8, 12, 16, 24, 32, 48, 64]
26
+ radius:
27
+ default: "16px"
28
+ large: "24px"
29
+ typography:
30
+ fontFamily: "'-apple-system', 'Segoe UI', sans-serif"
31
+ scale: [12, 14, 16, 18, 24, 32]
32
+ density:
33
+ compact: false
34
+ tableRowHeight: "56px"
@@ -0,0 +1,34 @@
1
+ id: content-blog
2
+ name: Content Blog
3
+ category: content
4
+ dimensions:
5
+ colorTemp: 3
6
+ lightness: 5
7
+ density: 5
8
+ borderRadius: 2
9
+ tone: 3
10
+ anchors:
11
+ primary: Medium
12
+ auxiliary:
13
+ - Substack
14
+ - Ghost
15
+ template: |
16
+ tokens:
17
+ colors:
18
+ primary: "#292929"
19
+ background: "#FFFFFF"
20
+ surface: "#FAFAFA"
21
+ text: "#292929"
22
+ accent: "#1A8917"
23
+ spacing:
24
+ base: "4px"
25
+ scale: [4, 8, 16, 24, 32, 48, 64, 96]
26
+ radius:
27
+ default: "4px"
28
+ large: "8px"
29
+ typography:
30
+ fontFamily: "'Georgia', 'Charter', serif"
31
+ scale: [14, 16, 18, 21, 26, 34, 42]
32
+ density:
33
+ compact: false
34
+ tableRowHeight: "48px"
@@ -0,0 +1,34 @@
1
+ id: content-docs
2
+ name: Content Documentation
3
+ category: content
4
+ dimensions:
5
+ colorTemp: 2
6
+ lightness: 4
7
+ density: 3
8
+ borderRadius: 2
9
+ tone: 2
10
+ anchors:
11
+ primary: Docusaurus
12
+ auxiliary:
13
+ - GitBook
14
+ - ReadTheDocs
15
+ template: |
16
+ tokens:
17
+ colors:
18
+ primary: "#2E8555"
19
+ background: "#FFFFFF"
20
+ surface: "#F5F6F7"
21
+ text: "#1C1E21"
22
+ accent: "#25C2A0"
23
+ spacing:
24
+ base: "4px"
25
+ scale: [4, 8, 12, 16, 24, 32, 48, 64]
26
+ radius:
27
+ default: "4px"
28
+ large: "8px"
29
+ typography:
30
+ fontFamily: "'-apple-system', 'Segoe UI', sans-serif"
31
+ scale: [12, 14, 16, 18, 20, 24, 30]
32
+ density:
33
+ compact: false
34
+ tableRowHeight: "40px"
@@ -0,0 +1,34 @@
1
+ id: dashboard-analytics
2
+ name: Dashboard Analytics
3
+ category: dashboard
4
+ dimensions:
5
+ colorTemp: 2
6
+ lightness: 2
7
+ density: 1
8
+ borderRadius: 2
9
+ tone: 1
10
+ anchors:
11
+ primary: Grafana
12
+ auxiliary:
13
+ - Datadog
14
+ - New Relic
15
+ template: |
16
+ tokens:
17
+ colors:
18
+ primary: "#FF6600"
19
+ background: "#111217"
20
+ surface: "#1A1C23"
21
+ text: "#D8D9DA"
22
+ accent: "#73BF69"
23
+ spacing:
24
+ base: "4px"
25
+ scale: [2, 4, 8, 12, 16, 24, 32]
26
+ radius:
27
+ default: "4px"
28
+ large: "6px"
29
+ typography:
30
+ fontFamily: "'Inter', 'Roboto', sans-serif"
31
+ scale: [10, 11, 12, 14, 16, 20, 24]
32
+ density:
33
+ compact: true
34
+ tableRowHeight: "32px"
@@ -0,0 +1,34 @@
1
+ id: dashboard-monitoring
2
+ name: Dashboard Monitoring
3
+ category: dashboard
4
+ dimensions:
5
+ colorTemp: 1
6
+ lightness: 1
7
+ density: 1
8
+ borderRadius: 1
9
+ tone: 1
10
+ anchors:
11
+ primary: PagerDuty
12
+ auxiliary:
13
+ - Uptime Robot
14
+ - StatusPage
15
+ template: |
16
+ tokens:
17
+ colors:
18
+ primary: "#06AC38"
19
+ background: "#0D1117"
20
+ surface: "#161B22"
21
+ text: "#C9D1D9"
22
+ accent: "#F85149"
23
+ spacing:
24
+ base: "4px"
25
+ scale: [2, 4, 8, 12, 16, 24, 32]
26
+ radius:
27
+ default: "3px"
28
+ large: "4px"
29
+ typography:
30
+ fontFamily: "'JetBrains Mono', 'Fira Code', monospace"
31
+ scale: [10, 11, 12, 14, 16, 18, 22]
32
+ density:
33
+ compact: true
34
+ tableRowHeight: "28px"
@@ -0,0 +1,33 @@
1
+ id: developer-portal
2
+ name: Developer Portal
3
+ category: developer
4
+ dimensions:
5
+ colorTemp: 1
6
+ lightness: 1
7
+ density: 3
8
+ borderRadius: 2
9
+ tone: 2
10
+ anchors:
11
+ primary: Stripe Docs
12
+ auxiliary:
13
+ - Tailwind Docs
14
+ template: |
15
+ tokens:
16
+ colors:
17
+ primary: "#3B82F6"
18
+ background: "#0F172A"
19
+ surface: "#1E293B"
20
+ text: "#E2E8F0"
21
+ accent: "#22D3EE"
22
+ spacing:
23
+ base: "4px"
24
+ scale: [4, 8, 16, 24, 32, 48, 64]
25
+ radius:
26
+ default: "6px"
27
+ large: "8px"
28
+ typography:
29
+ fontFamily: "'JetBrains Mono', 'Fira Code', monospace"
30
+ scale: [12, 14, 16, 18, 24, 32]
31
+ density:
32
+ compact: false
33
+ tableRowHeight: "40px"
@@ -0,0 +1,34 @@
1
+ id: e-commerce
2
+ name: E-Commerce Platform
3
+ category: e-commerce
4
+ dimensions:
5
+ colorTemp: 4
6
+ lightness: 4
7
+ density: 3
8
+ borderRadius: 4
9
+ tone: 4
10
+ anchors:
11
+ primary: Shopify
12
+ auxiliary:
13
+ - Gumroad
14
+ - Lemonsqueezy
15
+ template: |
16
+ tokens:
17
+ colors:
18
+ primary: "#16A34A"
19
+ background: "#FFFFFF"
20
+ surface: "#F9FAFB"
21
+ text: "#111827"
22
+ accent: "#F59E0B"
23
+ spacing:
24
+ base: "4px"
25
+ scale: [4, 8, 12, 16, 24, 32, 48, 64]
26
+ radius:
27
+ default: "12px"
28
+ large: "16px"
29
+ typography:
30
+ fontFamily: "'Plus Jakarta Sans', -apple-system, sans-serif"
31
+ scale: [12, 14, 16, 20, 24, 32, 40]
32
+ density:
33
+ compact: false
34
+ tableRowHeight: "52px"
@@ -0,0 +1,34 @@
1
+ id: form-heavy
2
+ name: Form-Heavy Application
3
+ category: form-heavy
4
+ dimensions:
5
+ colorTemp: 3
6
+ lightness: 4
7
+ density: 3
8
+ borderRadius: 3
9
+ tone: 2
10
+ anchors:
11
+ primary: Typeform
12
+ auxiliary:
13
+ - Notion Forms
14
+ - Airtable
15
+ template: |
16
+ tokens:
17
+ colors:
18
+ primary: "#6366F1"
19
+ background: "#FAFAFA"
20
+ surface: "#FFFFFF"
21
+ text: "#374151"
22
+ accent: "#8B5CF6"
23
+ spacing:
24
+ base: "4px"
25
+ scale: [4, 8, 12, 16, 24, 32, 48, 64]
26
+ radius:
27
+ default: "8px"
28
+ large: "12px"
29
+ typography:
30
+ fontFamily: "'Inter', -apple-system, sans-serif"
31
+ scale: [12, 14, 16, 18, 24, 30]
32
+ density:
33
+ compact: false
34
+ tableRowHeight: "48px"
@@ -0,0 +1,34 @@
1
+ id: internal-tool
2
+ name: Internal Tool
3
+ category: internal-tool
4
+ dimensions:
5
+ colorTemp: 2
6
+ lightness: 2
7
+ density: 2
8
+ borderRadius: 2
9
+ tone: 1
10
+ anchors:
11
+ primary: Retool
12
+ auxiliary:
13
+ - Backstage
14
+ - AdminJS
15
+ template: |
16
+ tokens:
17
+ colors:
18
+ primary: "#4A6CF7"
19
+ background: "#1E1E2E"
20
+ surface: "#2A2A3C"
21
+ text: "#E4E4E7"
22
+ accent: "#7C8DFF"
23
+ spacing:
24
+ base: "4px"
25
+ scale: [4, 8, 12, 16, 24, 32, 48]
26
+ radius:
27
+ default: "4px"
28
+ large: "6px"
29
+ typography:
30
+ fontFamily: "'Inter', -apple-system, sans-serif"
31
+ scale: [12, 13, 14, 16, 20, 24]
32
+ density:
33
+ compact: true
34
+ tableRowHeight: "36px"
@@ -0,0 +1,34 @@
1
+ id: marketing-corporate
2
+ name: Marketing Corporate
3
+ category: marketing
4
+ dimensions:
5
+ colorTemp: 2
6
+ lightness: 4
7
+ density: 4
8
+ borderRadius: 3
9
+ tone: 2
10
+ anchors:
11
+ primary: Stripe.com
12
+ auxiliary:
13
+ - Linear.app
14
+ - Vercel.com
15
+ template: |
16
+ tokens:
17
+ colors:
18
+ primary: "#0A2540"
19
+ background: "#FFFFFF"
20
+ surface: "#F6F9FC"
21
+ text: "#0A2540"
22
+ accent: "#635BFF"
23
+ spacing:
24
+ base: "4px"
25
+ scale: [4, 8, 16, 24, 32, 48, 64, 96, 128]
26
+ radius:
27
+ default: "8px"
28
+ large: "12px"
29
+ typography:
30
+ fontFamily: "'Inter', -apple-system, sans-serif"
31
+ scale: [14, 16, 18, 24, 32, 48, 64]
32
+ density:
33
+ compact: false
34
+ tableRowHeight: "48px"
@@ -0,0 +1,34 @@
1
+ id: marketing-creative
2
+ name: Marketing Creative
3
+ category: marketing
4
+ dimensions:
5
+ colorTemp: 4
6
+ lightness: 3
7
+ density: 5
8
+ borderRadius: 4
9
+ tone: 5
10
+ anchors:
11
+ primary: Figma.com
12
+ auxiliary:
13
+ - Framer.com
14
+ - Lottie
15
+ template: |
16
+ tokens:
17
+ colors:
18
+ primary: "#A259FF"
19
+ background: "#1E1E1E"
20
+ surface: "#2C2C2C"
21
+ text: "#FFFFFF"
22
+ accent: "#FF7262"
23
+ spacing:
24
+ base: "4px"
25
+ scale: [4, 8, 16, 24, 32, 48, 64, 96, 128]
26
+ radius:
27
+ default: "12px"
28
+ large: "20px"
29
+ typography:
30
+ fontFamily: "'Satoshi', 'Inter', sans-serif"
31
+ scale: [14, 16, 20, 24, 32, 48, 64, 80]
32
+ density:
33
+ compact: false
34
+ tableRowHeight: "48px"
@@ -0,0 +1,34 @@
1
+ id: mobile-lifestyle
2
+ name: Mobile Lifestyle
3
+ category: mobile
4
+ dimensions:
5
+ colorTemp: 5
6
+ lightness: 4
7
+ density: 5
8
+ borderRadius: 5
9
+ tone: 5
10
+ anchors:
11
+ primary: Headspace
12
+ auxiliary:
13
+ - Calm
14
+ - Duolingo
15
+ template: |
16
+ tokens:
17
+ colors:
18
+ primary: "#FF8C42"
19
+ background: "#FFF8F0"
20
+ surface: "#FFFFFF"
21
+ text: "#2D2D2D"
22
+ accent: "#FFB347"
23
+ spacing:
24
+ base: "4px"
25
+ scale: [4, 8, 16, 24, 32, 48, 64, 80]
26
+ radius:
27
+ default: "20px"
28
+ large: "28px"
29
+ typography:
30
+ fontFamily: "'Nunito', 'Rounded Mplus', sans-serif"
31
+ scale: [12, 14, 16, 20, 24, 32, 40]
32
+ density:
33
+ compact: false
34
+ tableRowHeight: "56px"
@@ -0,0 +1,33 @@
1
+ id: mobile-utility
2
+ name: Mobile Utility
3
+ category: mobile
4
+ dimensions:
5
+ colorTemp: 2
6
+ lightness: 4
7
+ density: 3
8
+ borderRadius: 4
9
+ tone: 2
10
+ anchors:
11
+ primary: Apple Health
12
+ auxiliary:
13
+ - Google Maps
14
+ template: |
15
+ tokens:
16
+ colors:
17
+ primary: "#007AFF"
18
+ background: "#F2F2F7"
19
+ surface: "#FFFFFF"
20
+ text: "#1C1C1E"
21
+ accent: "#34C759"
22
+ spacing:
23
+ base: "4px"
24
+ scale: [4, 8, 12, 16, 20, 24, 32, 44]
25
+ radius:
26
+ default: "10px"
27
+ large: "14px"
28
+ typography:
29
+ fontFamily: "'-apple-system', 'SF Pro', sans-serif"
30
+ scale: [11, 13, 15, 17, 20, 22, 28, 34]
31
+ density:
32
+ compact: false
33
+ tableRowHeight: "44px"
@@ -0,0 +1,34 @@
1
+ id: saas-dashboard
2
+ name: SaaS Dashboard
3
+ category: dashboard
4
+ dimensions:
5
+ colorTemp: 2
6
+ lightness: 3
7
+ density: 2
8
+ borderRadius: 3
9
+ tone: 2
10
+ anchors:
11
+ primary: Linear
12
+ auxiliary:
13
+ - Vercel Dashboard
14
+ - Stripe Dashboard
15
+ template: |
16
+ tokens:
17
+ colors:
18
+ primary: "#635BFF"
19
+ background: "#FFFFFF"
20
+ surface: "#F7F8FA"
21
+ text: "#1A1A2E"
22
+ accent: "#0EA5E9"
23
+ spacing:
24
+ base: "4px"
25
+ scale: [4, 8, 12, 16, 24, 32, 48, 64]
26
+ radius:
27
+ default: "8px"
28
+ large: "12px"
29
+ typography:
30
+ fontFamily: "'Inter', -apple-system, sans-serif"
31
+ scale: [12, 13, 14, 16, 20, 24, 30]
32
+ density:
33
+ compact: false
34
+ tableRowHeight: "44px"
@@ -0,0 +1,71 @@
1
+ type: object
2
+ required:
3
+ - id
4
+ - name
5
+ - category
6
+ - dimensions
7
+ - anchors
8
+ - template
9
+ properties:
10
+ id:
11
+ type: string
12
+ pattern: "^[a-z][a-z0-9-]*$"
13
+ name:
14
+ type: string
15
+ category:
16
+ type: string
17
+ enum:
18
+ - internal-tool
19
+ - dashboard
20
+ - consumer
21
+ - developer
22
+ - mobile
23
+ - e-commerce
24
+ - marketing
25
+ - form-heavy
26
+ - content
27
+ dimensions:
28
+ type: object
29
+ required:
30
+ - colorTemp
31
+ - lightness
32
+ - density
33
+ - borderRadius
34
+ - tone
35
+ properties:
36
+ colorTemp:
37
+ type: integer
38
+ minimum: 1
39
+ maximum: 5
40
+ lightness:
41
+ type: integer
42
+ minimum: 1
43
+ maximum: 5
44
+ density:
45
+ type: integer
46
+ minimum: 1
47
+ maximum: 5
48
+ borderRadius:
49
+ type: integer
50
+ minimum: 1
51
+ maximum: 5
52
+ tone:
53
+ type: integer
54
+ minimum: 1
55
+ maximum: 5
56
+ anchors:
57
+ type: object
58
+ required:
59
+ - primary
60
+ - auxiliary
61
+ properties:
62
+ primary:
63
+ type: string
64
+ auxiliary:
65
+ type: array
66
+ items:
67
+ type: string
68
+ minItems: 1
69
+ maxItems: 2
70
+ template:
71
+ type: string
@@ -0,0 +1,34 @@
1
+ id: consumer-media
2
+ name: Consumer Media
3
+ category: consumer
4
+ dimensions:
5
+ colorTemp: 3
6
+ lightness: 2
7
+ density: 4
8
+ borderRadius: 3
9
+ tone: 4
10
+ anchors:
11
+ primary: Spotify
12
+ auxiliary:
13
+ - Netflix
14
+ - Apple Music
15
+ template: |
16
+ tokens:
17
+ colors:
18
+ primary: "#1DB954"
19
+ background: "#121212"
20
+ surface: "#1E1E1E"
21
+ text: "#FFFFFF"
22
+ accent: "#1ED760"
23
+ spacing:
24
+ base: "4px"
25
+ scale: [4, 8, 12, 16, 24, 32, 48, 64]
26
+ radius:
27
+ default: "8px"
28
+ large: "12px"
29
+ typography:
30
+ fontFamily: "'Circular', 'Helvetica Neue', sans-serif"
31
+ scale: [12, 14, 16, 20, 24, 32, 48]
32
+ density:
33
+ compact: false
34
+ tableRowHeight: "48px"
@@ -0,0 +1,34 @@
1
+ id: consumer-social
2
+ name: Consumer Social
3
+ category: consumer
4
+ dimensions:
5
+ colorTemp: 4
6
+ lightness: 4
7
+ density: 4
8
+ borderRadius: 5
9
+ tone: 5
10
+ anchors:
11
+ primary: Instagram
12
+ auxiliary:
13
+ - TikTok
14
+ - Threads
15
+ template: |
16
+ tokens:
17
+ colors:
18
+ primary: "#E1306C"
19
+ background: "#FFFFFF"
20
+ surface: "#FAFAFA"
21
+ text: "#262626"
22
+ accent: "#833AB4"
23
+ spacing:
24
+ base: "4px"
25
+ scale: [4, 8, 12, 16, 24, 32, 48, 64]
26
+ radius:
27
+ default: "16px"
28
+ large: "24px"
29
+ typography:
30
+ fontFamily: "'-apple-system', 'Segoe UI', sans-serif"
31
+ scale: [12, 14, 16, 18, 24, 32]
32
+ density:
33
+ compact: false
34
+ tableRowHeight: "56px"
@@ -0,0 +1,34 @@
1
+ id: content-blog
2
+ name: Content Blog
3
+ category: content
4
+ dimensions:
5
+ colorTemp: 3
6
+ lightness: 5
7
+ density: 5
8
+ borderRadius: 2
9
+ tone: 3
10
+ anchors:
11
+ primary: Medium
12
+ auxiliary:
13
+ - Substack
14
+ - Ghost
15
+ template: |
16
+ tokens:
17
+ colors:
18
+ primary: "#292929"
19
+ background: "#FFFFFF"
20
+ surface: "#FAFAFA"
21
+ text: "#292929"
22
+ accent: "#1A8917"
23
+ spacing:
24
+ base: "4px"
25
+ scale: [4, 8, 16, 24, 32, 48, 64, 96]
26
+ radius:
27
+ default: "4px"
28
+ large: "8px"
29
+ typography:
30
+ fontFamily: "'Georgia', 'Charter', serif"
31
+ scale: [14, 16, 18, 21, 26, 34, 42]
32
+ density:
33
+ compact: false
34
+ tableRowHeight: "48px"
@@ -0,0 +1,34 @@
1
+ id: content-docs
2
+ name: Content Documentation
3
+ category: content
4
+ dimensions:
5
+ colorTemp: 2
6
+ lightness: 4
7
+ density: 3
8
+ borderRadius: 2
9
+ tone: 2
10
+ anchors:
11
+ primary: Docusaurus
12
+ auxiliary:
13
+ - GitBook
14
+ - ReadTheDocs
15
+ template: |
16
+ tokens:
17
+ colors:
18
+ primary: "#2E8555"
19
+ background: "#FFFFFF"
20
+ surface: "#F5F6F7"
21
+ text: "#1C1E21"
22
+ accent: "#25C2A0"
23
+ spacing:
24
+ base: "4px"
25
+ scale: [4, 8, 12, 16, 24, 32, 48, 64]
26
+ radius:
27
+ default: "4px"
28
+ large: "8px"
29
+ typography:
30
+ fontFamily: "'-apple-system', 'Segoe UI', sans-serif"
31
+ scale: [12, 14, 16, 18, 20, 24, 30]
32
+ density:
33
+ compact: false
34
+ tableRowHeight: "40px"
@@ -0,0 +1,34 @@
1
+ id: dashboard-analytics
2
+ name: Dashboard Analytics
3
+ category: dashboard
4
+ dimensions:
5
+ colorTemp: 2
6
+ lightness: 2
7
+ density: 1
8
+ borderRadius: 2
9
+ tone: 1
10
+ anchors:
11
+ primary: Grafana
12
+ auxiliary:
13
+ - Datadog
14
+ - New Relic
15
+ template: |
16
+ tokens:
17
+ colors:
18
+ primary: "#FF6600"
19
+ background: "#111217"
20
+ surface: "#1A1C23"
21
+ text: "#D8D9DA"
22
+ accent: "#73BF69"
23
+ spacing:
24
+ base: "4px"
25
+ scale: [2, 4, 8, 12, 16, 24, 32]
26
+ radius:
27
+ default: "4px"
28
+ large: "6px"
29
+ typography:
30
+ fontFamily: "'Inter', 'Roboto', sans-serif"
31
+ scale: [10, 11, 12, 14, 16, 20, 24]
32
+ density:
33
+ compact: true
34
+ tableRowHeight: "32px"
@@ -0,0 +1,34 @@
1
+ id: dashboard-monitoring
2
+ name: Dashboard Monitoring
3
+ category: dashboard
4
+ dimensions:
5
+ colorTemp: 1
6
+ lightness: 1
7
+ density: 1
8
+ borderRadius: 1
9
+ tone: 1
10
+ anchors:
11
+ primary: PagerDuty
12
+ auxiliary:
13
+ - Uptime Robot
14
+ - StatusPage
15
+ template: |
16
+ tokens:
17
+ colors:
18
+ primary: "#06AC38"
19
+ background: "#0D1117"
20
+ surface: "#161B22"
21
+ text: "#C9D1D9"
22
+ accent: "#F85149"
23
+ spacing:
24
+ base: "4px"
25
+ scale: [2, 4, 8, 12, 16, 24, 32]
26
+ radius:
27
+ default: "3px"
28
+ large: "4px"
29
+ typography:
30
+ fontFamily: "'JetBrains Mono', 'Fira Code', monospace"
31
+ scale: [10, 11, 12, 14, 16, 18, 22]
32
+ density:
33
+ compact: true
34
+ tableRowHeight: "28px"
@@ -0,0 +1,33 @@
1
+ id: developer-portal
2
+ name: Developer Portal
3
+ category: developer
4
+ dimensions:
5
+ colorTemp: 1
6
+ lightness: 1
7
+ density: 3
8
+ borderRadius: 2
9
+ tone: 2
10
+ anchors:
11
+ primary: Stripe Docs
12
+ auxiliary:
13
+ - Tailwind Docs
14
+ template: |
15
+ tokens:
16
+ colors:
17
+ primary: "#3B82F6"
18
+ background: "#0F172A"
19
+ surface: "#1E293B"
20
+ text: "#E2E8F0"
21
+ accent: "#22D3EE"
22
+ spacing:
23
+ base: "4px"
24
+ scale: [4, 8, 16, 24, 32, 48, 64]
25
+ radius:
26
+ default: "6px"
27
+ large: "8px"
28
+ typography:
29
+ fontFamily: "'JetBrains Mono', 'Fira Code', monospace"
30
+ scale: [12, 14, 16, 18, 24, 32]
31
+ density:
32
+ compact: false
33
+ tableRowHeight: "40px"
@@ -0,0 +1,34 @@
1
+ id: e-commerce
2
+ name: E-Commerce Platform
3
+ category: e-commerce
4
+ dimensions:
5
+ colorTemp: 4
6
+ lightness: 4
7
+ density: 3
8
+ borderRadius: 4
9
+ tone: 4
10
+ anchors:
11
+ primary: Shopify
12
+ auxiliary:
13
+ - Gumroad
14
+ - Lemonsqueezy
15
+ template: |
16
+ tokens:
17
+ colors:
18
+ primary: "#16A34A"
19
+ background: "#FFFFFF"
20
+ surface: "#F9FAFB"
21
+ text: "#111827"
22
+ accent: "#F59E0B"
23
+ spacing:
24
+ base: "4px"
25
+ scale: [4, 8, 12, 16, 24, 32, 48, 64]
26
+ radius:
27
+ default: "12px"
28
+ large: "16px"
29
+ typography:
30
+ fontFamily: "'Plus Jakarta Sans', -apple-system, sans-serif"
31
+ scale: [12, 14, 16, 20, 24, 32, 40]
32
+ density:
33
+ compact: false
34
+ tableRowHeight: "52px"
@@ -0,0 +1,34 @@
1
+ id: form-heavy
2
+ name: Form-Heavy Application
3
+ category: form-heavy
4
+ dimensions:
5
+ colorTemp: 3
6
+ lightness: 4
7
+ density: 3
8
+ borderRadius: 3
9
+ tone: 2
10
+ anchors:
11
+ primary: Typeform
12
+ auxiliary:
13
+ - Notion Forms
14
+ - Airtable
15
+ template: |
16
+ tokens:
17
+ colors:
18
+ primary: "#6366F1"
19
+ background: "#FAFAFA"
20
+ surface: "#FFFFFF"
21
+ text: "#374151"
22
+ accent: "#8B5CF6"
23
+ spacing:
24
+ base: "4px"
25
+ scale: [4, 8, 12, 16, 24, 32, 48, 64]
26
+ radius:
27
+ default: "8px"
28
+ large: "12px"
29
+ typography:
30
+ fontFamily: "'Inter', -apple-system, sans-serif"
31
+ scale: [12, 14, 16, 18, 24, 30]
32
+ density:
33
+ compact: false
34
+ tableRowHeight: "48px"
@@ -0,0 +1,34 @@
1
+ id: internal-tool
2
+ name: Internal Tool
3
+ category: internal-tool
4
+ dimensions:
5
+ colorTemp: 2
6
+ lightness: 2
7
+ density: 2
8
+ borderRadius: 2
9
+ tone: 1
10
+ anchors:
11
+ primary: Retool
12
+ auxiliary:
13
+ - Backstage
14
+ - AdminJS
15
+ template: |
16
+ tokens:
17
+ colors:
18
+ primary: "#4A6CF7"
19
+ background: "#1E1E2E"
20
+ surface: "#2A2A3C"
21
+ text: "#E4E4E7"
22
+ accent: "#7C8DFF"
23
+ spacing:
24
+ base: "4px"
25
+ scale: [4, 8, 12, 16, 24, 32, 48]
26
+ radius:
27
+ default: "4px"
28
+ large: "6px"
29
+ typography:
30
+ fontFamily: "'Inter', -apple-system, sans-serif"
31
+ scale: [12, 13, 14, 16, 20, 24]
32
+ density:
33
+ compact: true
34
+ tableRowHeight: "36px"
@@ -0,0 +1,34 @@
1
+ id: marketing-corporate
2
+ name: Marketing Corporate
3
+ category: marketing
4
+ dimensions:
5
+ colorTemp: 2
6
+ lightness: 4
7
+ density: 4
8
+ borderRadius: 3
9
+ tone: 2
10
+ anchors:
11
+ primary: Stripe.com
12
+ auxiliary:
13
+ - Linear.app
14
+ - Vercel.com
15
+ template: |
16
+ tokens:
17
+ colors:
18
+ primary: "#0A2540"
19
+ background: "#FFFFFF"
20
+ surface: "#F6F9FC"
21
+ text: "#0A2540"
22
+ accent: "#635BFF"
23
+ spacing:
24
+ base: "4px"
25
+ scale: [4, 8, 16, 24, 32, 48, 64, 96, 128]
26
+ radius:
27
+ default: "8px"
28
+ large: "12px"
29
+ typography:
30
+ fontFamily: "'Inter', -apple-system, sans-serif"
31
+ scale: [14, 16, 18, 24, 32, 48, 64]
32
+ density:
33
+ compact: false
34
+ tableRowHeight: "48px"
@@ -0,0 +1,34 @@
1
+ id: marketing-creative
2
+ name: Marketing Creative
3
+ category: marketing
4
+ dimensions:
5
+ colorTemp: 4
6
+ lightness: 3
7
+ density: 5
8
+ borderRadius: 4
9
+ tone: 5
10
+ anchors:
11
+ primary: Figma.com
12
+ auxiliary:
13
+ - Framer.com
14
+ - Lottie
15
+ template: |
16
+ tokens:
17
+ colors:
18
+ primary: "#A259FF"
19
+ background: "#1E1E1E"
20
+ surface: "#2C2C2C"
21
+ text: "#FFFFFF"
22
+ accent: "#FF7262"
23
+ spacing:
24
+ base: "4px"
25
+ scale: [4, 8, 16, 24, 32, 48, 64, 96, 128]
26
+ radius:
27
+ default: "12px"
28
+ large: "20px"
29
+ typography:
30
+ fontFamily: "'Satoshi', 'Inter', sans-serif"
31
+ scale: [14, 16, 20, 24, 32, 48, 64, 80]
32
+ density:
33
+ compact: false
34
+ tableRowHeight: "48px"
@@ -0,0 +1,34 @@
1
+ id: mobile-lifestyle
2
+ name: Mobile Lifestyle
3
+ category: mobile
4
+ dimensions:
5
+ colorTemp: 5
6
+ lightness: 4
7
+ density: 5
8
+ borderRadius: 5
9
+ tone: 5
10
+ anchors:
11
+ primary: Headspace
12
+ auxiliary:
13
+ - Calm
14
+ - Duolingo
15
+ template: |
16
+ tokens:
17
+ colors:
18
+ primary: "#FF8C42"
19
+ background: "#FFF8F0"
20
+ surface: "#FFFFFF"
21
+ text: "#2D2D2D"
22
+ accent: "#FFB347"
23
+ spacing:
24
+ base: "4px"
25
+ scale: [4, 8, 16, 24, 32, 48, 64, 80]
26
+ radius:
27
+ default: "20px"
28
+ large: "28px"
29
+ typography:
30
+ fontFamily: "'Nunito', 'Rounded Mplus', sans-serif"
31
+ scale: [12, 14, 16, 20, 24, 32, 40]
32
+ density:
33
+ compact: false
34
+ tableRowHeight: "56px"
@@ -0,0 +1,33 @@
1
+ id: mobile-utility
2
+ name: Mobile Utility
3
+ category: mobile
4
+ dimensions:
5
+ colorTemp: 2
6
+ lightness: 4
7
+ density: 3
8
+ borderRadius: 4
9
+ tone: 2
10
+ anchors:
11
+ primary: Apple Health
12
+ auxiliary:
13
+ - Google Maps
14
+ template: |
15
+ tokens:
16
+ colors:
17
+ primary: "#007AFF"
18
+ background: "#F2F2F7"
19
+ surface: "#FFFFFF"
20
+ text: "#1C1C1E"
21
+ accent: "#34C759"
22
+ spacing:
23
+ base: "4px"
24
+ scale: [4, 8, 12, 16, 20, 24, 32, 44]
25
+ radius:
26
+ default: "10px"
27
+ large: "14px"
28
+ typography:
29
+ fontFamily: "'-apple-system', 'SF Pro', sans-serif"
30
+ scale: [11, 13, 15, 17, 20, 22, 28, 34]
31
+ density:
32
+ compact: false
33
+ tableRowHeight: "44px"
@@ -0,0 +1,34 @@
1
+ id: saas-dashboard
2
+ name: SaaS Dashboard
3
+ category: dashboard
4
+ dimensions:
5
+ colorTemp: 2
6
+ lightness: 3
7
+ density: 2
8
+ borderRadius: 3
9
+ tone: 2
10
+ anchors:
11
+ primary: Linear
12
+ auxiliary:
13
+ - Vercel Dashboard
14
+ - Stripe Dashboard
15
+ template: |
16
+ tokens:
17
+ colors:
18
+ primary: "#635BFF"
19
+ background: "#FFFFFF"
20
+ surface: "#F7F8FA"
21
+ text: "#1A1A2E"
22
+ accent: "#0EA5E9"
23
+ spacing:
24
+ base: "4px"
25
+ scale: [4, 8, 12, 16, 24, 32, 48, 64]
26
+ radius:
27
+ default: "8px"
28
+ large: "12px"
29
+ typography:
30
+ fontFamily: "'Inter', -apple-system, sans-serif"
31
+ scale: [12, 13, 14, 16, 20, 24, 30]
32
+ density:
33
+ compact: false
34
+ tableRowHeight: "44px"
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "create-specfuse",
3
- "version": "0.3.0",
3
+ "version": "0.3.1",
4
4
  "description": "Scaffold projects with OpenSpec + Superpowers fusion methodology",
5
5
  "type": "module",
6
6
  "bin": {
@@ -15,7 +15,7 @@
15
15
  "node": ">=18.0.0"
16
16
  },
17
17
  "scripts": {
18
- "build": "tsc",
18
+ "build": "tsc && cp -r src/design-md/templates dist/design-md/templates",
19
19
  "test": "vitest run",
20
20
  "dev": "tsc --watch"
21
21
  },