get-shit-pretty 0.7.3 → 0.8.2

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 (78) hide show
  1. package/bin/theme-css.js +331 -0
  2. package/gsp/agents/gsp-brand-coherence.md +7 -0
  3. package/gsp/hooks/hooks.json +1 -1
  4. package/gsp/skills/gsp-brand-brief/SKILL.md +50 -5
  5. package/gsp/skills/gsp-brand-guidelines/SKILL.md +51 -31
  6. package/gsp/skills/gsp-brand-guidelines/design-tokens.md +2 -0
  7. package/gsp/skills/gsp-brand-guidelines/guidelines-structure.md +167 -0
  8. package/gsp/skills/gsp-brand-guidelines/methodology/gsp-brand-coherence.md +86 -0
  9. package/gsp/skills/gsp-brand-guidelines/methodology/gsp-brand-engineer.md +13 -5
  10. package/gsp/skills/gsp-brand-guidelines/token-mapping.md +16 -319
  11. package/gsp/skills/gsp-brand-identity/SKILL.md +1 -1
  12. package/gsp/skills/gsp-brand-refine/SKILL.md +5 -6
  13. package/gsp/skills/gsp-brand-research/SKILL.md +1 -1
  14. package/gsp/skills/gsp-brand-strategy/SKILL.md +1 -1
  15. package/gsp/skills/gsp-design-system/SKILL.md +1 -1
  16. package/gsp/skills/gsp-doctor/SKILL.md +51 -3
  17. package/gsp/skills/gsp-progress/SKILL.md +1 -1
  18. package/gsp/skills/gsp-project-brief/SKILL.md +40 -6
  19. package/gsp/skills/gsp-project-build/SKILL.md +27 -31
  20. package/gsp/skills/gsp-project-build/flows/figma.md +50 -0
  21. package/gsp/skills/gsp-project-build/flows/revision.md +64 -0
  22. package/gsp/skills/gsp-project-build/methodology/gsp-project-builder.md +84 -1
  23. package/gsp/skills/gsp-project-build/shadcn-composition.md +217 -0
  24. package/gsp/skills/gsp-project-critique/SKILL.md +3 -1
  25. package/gsp/skills/gsp-project-design/SKILL.md +3 -2
  26. package/gsp/skills/gsp-project-design/methodology/gsp-project-designer.md +28 -21
  27. package/gsp/skills/gsp-project-research/SKILL.md +3 -1
  28. package/gsp/skills/gsp-project-review/SKILL.md +10 -1
  29. package/gsp/skills/gsp-scaffold/SKILL.md +67 -11
  30. package/gsp/skills/gsp-scaffold/shadcn-rules.md +433 -0
  31. package/gsp/skills/gsp-scaffold/shadcn-theming.md +310 -0
  32. package/gsp/skills/gsp-start/SKILL.md +18 -2
  33. package/gsp/skills/gsp-style/SKILL.md +1 -1
  34. package/gsp/skills/gsp-style/style-preset-schema.md +59 -14
  35. package/gsp/skills/gsp-style/styles/academia.yml +58 -8
  36. package/gsp/skills/gsp-style/styles/art-deco.yml +39 -7
  37. package/gsp/skills/gsp-style/styles/bauhaus.yml +39 -8
  38. package/gsp/skills/gsp-style/styles/bold-typography.yml +39 -8
  39. package/gsp/skills/gsp-style/styles/botanical.yml +39 -9
  40. package/gsp/skills/gsp-style/styles/claymorphism.yml +39 -9
  41. package/gsp/skills/gsp-style/styles/cyberpunk.yml +39 -7
  42. package/gsp/skills/gsp-style/styles/enterprise.yml +39 -10
  43. package/gsp/skills/gsp-style/styles/flat-design.yml +39 -9
  44. package/gsp/skills/gsp-style/styles/fluent.yml +39 -10
  45. package/gsp/skills/gsp-style/styles/glassmorphism.yml +39 -8
  46. package/gsp/skills/gsp-style/styles/humanist-literary.yml +39 -9
  47. package/gsp/skills/gsp-style/styles/industrial.yml +59 -9
  48. package/gsp/skills/gsp-style/styles/kinetic.yml +32 -7
  49. package/gsp/skills/gsp-style/styles/liquid-glass.yml +59 -9
  50. package/gsp/skills/gsp-style/styles/luxury.yml +59 -9
  51. package/gsp/skills/gsp-style/styles/material.yml +59 -9
  52. package/gsp/skills/gsp-style/styles/maximalism.yml +32 -6
  53. package/gsp/skills/gsp-style/styles/minimal-dark.yml +32 -7
  54. package/gsp/skills/gsp-style/styles/modern-dark.yml +32 -7
  55. package/gsp/skills/gsp-style/styles/monochrome.yml +59 -10
  56. package/gsp/skills/gsp-style/styles/neubrutalism.yml +59 -9
  57. package/gsp/skills/gsp-style/styles/neumorphism.yml +32 -7
  58. package/gsp/skills/gsp-style/styles/newsprint.yml +32 -7
  59. package/gsp/skills/gsp-style/styles/nothing.yml +44 -13
  60. package/gsp/skills/gsp-style/styles/organic.yml +42 -9
  61. package/gsp/skills/gsp-style/styles/playful-geometric.yml +43 -9
  62. package/gsp/skills/gsp-style/styles/professional.yml +41 -10
  63. package/gsp/skills/gsp-style/styles/retro.yml +42 -8
  64. package/gsp/skills/gsp-style/styles/saas.yml +42 -9
  65. package/gsp/skills/gsp-style/styles/sketch.yml +42 -9
  66. package/gsp/skills/gsp-style/styles/swiss-minimalist.yml +41 -10
  67. package/gsp/skills/gsp-style/styles/terminal.yml +42 -8
  68. package/gsp/skills/gsp-style/styles/vaporwave.yml +42 -7
  69. package/gsp/skills/gsp-style/styles/web3.yml +42 -9
  70. package/gsp/templates/branding/brief.md +9 -0
  71. package/gsp/templates/branding/config.json +1 -1
  72. package/gsp/templates/design-claude.md +6 -0
  73. package/gsp/templates/phases/design.md +0 -8
  74. package/gsp/templates/phases/patterns.md +2 -2
  75. package/gsp/templates/projects/config.json +6 -3
  76. package/gsp/templates/projects/state.md +1 -1
  77. package/gsp/templates/system/STACK.md +1 -0
  78. package/package.json +1 -1
@@ -4,18 +4,44 @@ tags: [business, neutral, clean, safe, default]
4
4
 
5
5
  tokens:
6
6
  color:
7
+ # Core — shadcn/ui CSS vars
8
+ background: "#FFFFFF"
9
+ foreground: "#0F172A"
10
+ card: "#F8FAFC"
11
+ card-foreground: "#0F172A"
12
+ popover: "#F8FAFC"
13
+ popover-foreground: "#0F172A"
7
14
  primary: "#1E40AF"
15
+ primary-foreground: "#FFFFFF"
8
16
  secondary: "#475569"
17
+ secondary-foreground: "#FFFFFF"
9
18
  accent: "#0EA5E9"
10
- background: "#FFFFFF"
11
- surface: "#F8FAFC"
12
- on-primary: "#FFFFFF"
13
- on-background: "#0F172A"
14
- error: "#DC2626"
19
+ accent-foreground: "#FFFFFF"
20
+ muted: "#94A3B8"
21
+ muted-foreground: "#64748B"
22
+ destructive: "#DC2626"
23
+ border: "#E2E8F0"
24
+ input: "#E2E8F0"
25
+ ring: "#1E40AF"
26
+ # Sidebar
27
+ sidebar: "#F8FAFC"
28
+ sidebar-foreground: "#0F172A"
29
+ sidebar-primary: "#1E40AF"
30
+ sidebar-primary-foreground: "#FFFFFF"
31
+ sidebar-accent: "#E2E8F0"
32
+ sidebar-accent-foreground: "#0F172A"
33
+ sidebar-border: "#E2E8F0"
34
+ sidebar-ring: "#1E40AF"
35
+ # Extras
15
36
  success: "#16A34A"
16
37
  warning: "#D97706"
17
38
  info: "#2563EB"
18
- muted: "#94A3B8"
39
+ # Chart — data-viz colors (distinct, accessible at small sizes)
40
+ chart-1: "#1E40AF" # navy blue (primary)
41
+ chart-2: "#0EA5E9" # sky blue (accent)
42
+ chart-3: "#16A34A" # business green
43
+ chart-4: "#D97706" # muted amber
44
+ chart-5: "#6B7280" # steel gray
19
45
 
20
46
  typography:
21
47
  font-family-primary: "Inter, system-ui, sans-serif"
@@ -30,7 +56,6 @@ tokens:
30
56
  border-radius-md: "8px"
31
57
  border-radius-lg: "12px"
32
58
  border-width: "1px"
33
- border-color: "#E2E8F0"
34
59
 
35
60
  elevation:
36
61
  shadow-sm: "0 1px 2px rgba(0, 0, 0, 0.05)"
@@ -50,10 +75,16 @@ tokens:
50
75
  dark_mode:
51
76
  color:
52
77
  background: "#0F172A"
53
- surface: "#1E293B"
54
- on-background: "#F1F5F9"
55
- border-color: "#334155"
78
+ foreground: "#F1F5F9"
79
+ card: "#1E293B"
80
+ card-foreground: "#F1F5F9"
56
81
  muted: "#64748B"
82
+ muted-foreground: "#94A3B8"
83
+ border: "#334155"
84
+ input: "#334155"
85
+ sidebar: "#1E293B"
86
+ sidebar-foreground: "#F1F5F9"
87
+ sidebar-border: "#334155"
57
88
 
58
89
  intensity:
59
90
  variance: 2
@@ -4,17 +4,44 @@ tags: [vintage, retro, nostalgic, 90s, windows95]
4
4
 
5
5
  tokens:
6
6
  color:
7
+ # Core — shadcn/ui CSS vars
8
+ background: "#C0C0C0"
9
+ foreground: "#000000"
10
+ card: "#FFFFFF"
11
+ card-foreground: "#000000"
12
+ popover: "#FFFFFF"
13
+ popover-foreground: "#000000"
7
14
  primary: "#0000FF"
15
+ primary-foreground: "#FFFFFF"
8
16
  secondary: "#FF0000"
17
+ secondary-foreground: "#FFFFFF"
9
18
  accent: "#FFFF00"
10
- background: "#C0C0C0"
11
- surface: "#FFFFFF"
12
- on-primary: "#FFFFFF"
13
- on-background: "#000000"
14
- error: "#FF0000"
19
+ accent-foreground: "#000000"
20
+ muted: "#808080"
21
+ muted-foreground: "#404040"
22
+ destructive: "#FF0000"
23
+ border: "#808080"
24
+ input: "#808080"
25
+ ring: "#0000FF"
26
+ # Sidebar
27
+ sidebar: "#FFFFFF"
28
+ sidebar-foreground: "#000000"
29
+ sidebar-primary: "#0000FF"
30
+ sidebar-primary-foreground: "#FFFFFF"
31
+ sidebar-accent: "#C0C0C0"
32
+ sidebar-accent-foreground: "#000000"
33
+ sidebar-border: "#808080"
34
+ sidebar-ring: "#0000FF"
35
+ # Extras
15
36
  success: "#00FF00"
16
37
  warning: "#FFFF00"
17
38
  info: "#0000FF"
39
+ # Chart — data-viz colors (distinct, accessible at small sizes)
40
+ chart-1: "#0000FF" # Web-safe blue (primary)
41
+ chart-2: "#FF0000" # Web-safe red (secondary)
42
+ chart-3: "#008000" # Web-safe green
43
+ chart-4: "#800080" # Web-safe purple
44
+ chart-5: "#FF8000" # Web-safe orange
18
45
 
19
46
  system:
20
47
  titlebar: "#000080"
@@ -34,7 +61,6 @@ tokens:
34
61
  border-radius-md: "0px"
35
62
  border-radius-lg: "0px"
36
63
  border-width: "2px"
37
- border-color: "#808080"
38
64
 
39
65
  bevel:
40
66
  outset: "border-color: #ffffff #808080 #808080 #ffffff"
@@ -58,8 +84,16 @@ tokens:
58
84
  dark_mode:
59
85
  color:
60
86
  background: "#000080"
61
- surface: "#000000"
62
- on-background: "#C0C0C0"
87
+ foreground: "#C0C0C0"
88
+ card: "#000000"
89
+ card-foreground: "#C0C0C0"
90
+ muted: "#404040"
91
+ muted-foreground: "#808080"
92
+ border: "#808080"
93
+ input: "#808080"
94
+ sidebar: "#000000"
95
+ sidebar-foreground: "#C0C0C0"
96
+ sidebar-border: "#808080"
63
97
 
64
98
  intensity:
65
99
  variance: 8 # chaotic layouts, clashing colors, deliberate visual excess
@@ -4,18 +4,44 @@ tags: [saas, startup, modern, clean, gradient]
4
4
 
5
5
  tokens:
6
6
  color:
7
+ # Core — shadcn/ui CSS vars
8
+ background: "#FFFFFF"
9
+ foreground: "#0F172A"
10
+ card: "#F8FAFC"
11
+ card-foreground: "#0F172A"
12
+ popover: "#F8FAFC"
13
+ popover-foreground: "#0F172A"
7
14
  primary: "#0052FF"
15
+ primary-foreground: "#FFFFFF"
8
16
  secondary: "#4D7CFF"
17
+ secondary-foreground: "#FFFFFF"
9
18
  accent: "#F1F5F9"
10
- background: "#FFFFFF"
11
- surface: "#F8FAFC"
12
- on-primary: "#FFFFFF"
13
- on-background: "#0F172A"
14
- error: "#EF4444"
19
+ accent-foreground: "#0F172A"
20
+ muted: "#64748B"
21
+ muted-foreground: "#94A3B8"
22
+ destructive: "#EF4444"
23
+ border: "#E2E8F0"
24
+ input: "#E2E8F0"
25
+ ring: "#0052FF"
26
+ # Sidebar
27
+ sidebar: "#F8FAFC"
28
+ sidebar-foreground: "#0F172A"
29
+ sidebar-primary: "#0052FF"
30
+ sidebar-primary-foreground: "#FFFFFF"
31
+ sidebar-accent: "#F1F5F9"
32
+ sidebar-accent-foreground: "#0F172A"
33
+ sidebar-border: "#E2E8F0"
34
+ sidebar-ring: "#0052FF"
35
+ # Extras
15
36
  success: "#10B981"
16
37
  warning: "#F59E0B"
17
38
  info: "#0052FF"
18
- muted: "#64748B"
39
+ # Chart — data-viz colors (distinct, accessible at small sizes)
40
+ chart-1: "#0052FF" # electric blue (primary)
41
+ chart-2: "#10B981" # emerald (success)
42
+ chart-3: "#F59E0B" # amber (warning)
43
+ chart-4: "#8B5CF6" # growth violet
44
+ chart-5: "#EF4444" # churn red
19
45
 
20
46
  typography:
21
47
  font-family-primary: "Calistoga, serif"
@@ -31,7 +57,6 @@ tokens:
31
57
  border-radius-md: "12px"
32
58
  border-radius-lg: "9999px"
33
59
  border-width: "1px"
34
- border-color: "#E2E8F0"
35
60
 
36
61
  gradient:
37
62
  signature: "linear-gradient(135deg, #0052FF, #4D7CFF)"
@@ -54,8 +79,16 @@ tokens:
54
79
  dark_mode:
55
80
  color:
56
81
  background: "#0F172A"
57
- surface: "#1E293B"
58
- on-background: "#F1F5F9"
82
+ foreground: "#F1F5F9"
83
+ card: "#1E293B"
84
+ card-foreground: "#F1F5F9"
85
+ muted: "#64748B"
86
+ muted-foreground: "#94A3B8"
87
+ border: "#334155"
88
+ input: "#334155"
89
+ sidebar: "#1E293B"
90
+ sidebar-foreground: "#F1F5F9"
91
+ sidebar-border: "#334155"
59
92
 
60
93
  intensity:
61
94
  variance: 4 # structured layouts with strategic asymmetry (hero 1.1fr/0.9fr), not chaotic
@@ -4,18 +4,44 @@ tags: [hand-drawn, sketch, artistic, doodle, whimsical]
4
4
 
5
5
  tokens:
6
6
  color:
7
+ # Core — shadcn/ui CSS vars
8
+ background: "#FDFBF7"
9
+ foreground: "#2D2D2D"
10
+ card: "#FFFDF7"
11
+ card-foreground: "#2D2D2D"
12
+ popover: "#FFFDF7"
13
+ popover-foreground: "#2D2D2D"
7
14
  primary: "#2D3748"
15
+ primary-foreground: "#FFFFFF"
8
16
  secondary: "#2D5DA1"
17
+ secondary-foreground: "#FFFFFF"
9
18
  accent: "#FF4D4D"
10
- background: "#FDFBF7"
11
- surface: "#FFFDF7"
12
- on-primary: "#FFFFFF"
13
- on-background: "#2D2D2D"
14
- error: "#FF4D4D"
19
+ accent-foreground: "#FFFFFF"
20
+ muted: "#718096"
21
+ muted-foreground: "#4A5568"
22
+ destructive: "#FF4D4D"
23
+ border: "#2D3748"
24
+ input: "#2D3748"
25
+ ring: "#2D3748"
26
+ # Sidebar
27
+ sidebar: "#FFFDF7"
28
+ sidebar-foreground: "#2D2D2D"
29
+ sidebar-primary: "#2D3748"
30
+ sidebar-primary-foreground: "#FFFFFF"
31
+ sidebar-accent: "#FF4D4D"
32
+ sidebar-accent-foreground: "#FFFFFF"
33
+ sidebar-border: "#2D3748"
34
+ sidebar-ring: "#2D3748"
35
+ # Extras
15
36
  success: "#48BB78"
16
37
  warning: "#ED8936"
17
38
  info: "#2D5DA1"
18
- muted: "#718096"
39
+ # Chart — data-viz colors (distinct, accessible at small sizes)
40
+ chart-1: "#2D3748" # pencil dark (primary)
41
+ chart-2: "#FF4D4D" # correction red (accent)
42
+ chart-3: "#2D5DA1" # ink blue (secondary)
43
+ chart-4: "#48BB78" # watercolor green
44
+ chart-5: "#ED8936" # watercolor orange
19
45
 
20
46
  typography:
21
47
  font-family-primary: "Kalam, cursive"
@@ -31,7 +57,6 @@ tokens:
31
57
  border-radius-md: "8px 12px 10px 14px"
32
58
  border-radius-lg: "12px 16px 14px 18px"
33
59
  border-width: "2px"
34
- border-color: "#2D3748"
35
60
 
36
61
  elevation:
37
62
  shadow-sm: "2px 2px 0px #2D3748"
@@ -51,8 +76,16 @@ tokens:
51
76
  dark_mode:
52
77
  color:
53
78
  background: "#1A1A2E"
54
- surface: "#2D2D48"
55
- on-background: "#FDFBF7"
79
+ foreground: "#FDFBF7"
80
+ card: "#2D2D48"
81
+ card-foreground: "#FDFBF7"
82
+ muted: "#4A5568"
83
+ muted-foreground: "#718096"
84
+ border: "#FDFBF7"
85
+ input: "#FDFBF7"
86
+ sidebar: "#2D2D48"
87
+ sidebar-foreground: "#FDFBF7"
88
+ sidebar-border: "#FDFBF7"
56
89
 
57
90
  intensity:
58
91
  variance: 8 # wobbly borders, random rotations, asymmetric radii, tape/tack decorations
@@ -4,18 +4,44 @@ tags: [clean, grid, typographic, classic, professional]
4
4
 
5
5
  tokens:
6
6
  color:
7
+ # Core — shadcn/ui CSS vars
8
+ background: "#FFFFFF"
9
+ foreground: "#111111"
10
+ card: "#FAFAFA"
11
+ card-foreground: "#111111"
12
+ popover: "#FAFAFA"
13
+ popover-foreground: "#111111"
7
14
  primary: "#000000"
15
+ primary-foreground: "#FFFFFF"
8
16
  secondary: "#DC2626"
17
+ secondary-foreground: "#FFFFFF"
9
18
  accent: "#2563EB"
10
- background: "#FFFFFF"
11
- surface: "#FAFAFA"
12
- on-primary: "#FFFFFF"
13
- on-background: "#111111"
14
- error: "#DC2626"
19
+ accent-foreground: "#FFFFFF"
20
+ muted: "#6B7280"
21
+ muted-foreground: "#4B5563"
22
+ destructive: "#DC2626"
23
+ border: "#E5E7EB"
24
+ input: "#E5E7EB"
25
+ ring: "#000000"
26
+ # Sidebar
27
+ sidebar: "#FAFAFA"
28
+ sidebar-foreground: "#111111"
29
+ sidebar-primary: "#000000"
30
+ sidebar-primary-foreground: "#FFFFFF"
31
+ sidebar-accent: "#2563EB"
32
+ sidebar-accent-foreground: "#FFFFFF"
33
+ sidebar-border: "#E5E7EB"
34
+ sidebar-ring: "#000000"
35
+ # Extras
15
36
  success: "#16A34A"
16
37
  warning: "#CA8A04"
17
38
  info: "#2563EB"
18
- muted: "#6B7280"
39
+ # Chart — data-viz colors (distinct, accessible at small sizes)
40
+ chart-1: "#000000" # Swiss black (primary)
41
+ chart-2: "#DC2626" # Helvetica red (secondary)
42
+ chart-3: "#2563EB" # grid blue (accent)
43
+ chart-4: "#16A34A" # functional green
44
+ chart-5: "#CA8A04" # warm ochre
19
45
 
20
46
  typography:
21
47
  font-family-primary: "Helvetica Neue, Helvetica, Arial, sans-serif"
@@ -30,7 +56,6 @@ tokens:
30
56
  border-radius-md: "0px"
31
57
  border-radius-lg: "0px"
32
58
  border-width: "1px"
33
- border-color: "#E5E7EB"
34
59
 
35
60
  elevation:
36
61
  shadow-sm: "none"
@@ -50,10 +75,16 @@ tokens:
50
75
  dark_mode:
51
76
  color:
52
77
  background: "#111111"
53
- surface: "#1A1A1A"
54
- on-background: "#F5F5F5"
55
- border-color: "#333333"
78
+ foreground: "#F5F5F5"
79
+ card: "#1A1A1A"
80
+ card-foreground: "#F5F5F5"
56
81
  muted: "#9CA3AF"
82
+ muted-foreground: "#6B7280"
83
+ border: "#333333"
84
+ input: "#333333"
85
+ sidebar: "#1A1A1A"
86
+ sidebar-foreground: "#F5F5F5"
87
+ sidebar-border: "#333333"
57
88
 
58
89
  intensity:
59
90
  variance: 2 # strict grid law, asymmetric but mathematically precise
@@ -4,18 +4,44 @@ tags: [developer, monospace, dark, minimal, technical]
4
4
 
5
5
  tokens:
6
6
  color:
7
+ # Core — shadcn/ui CSS vars
8
+ background: "#0D1117"
9
+ foreground: "#C9D1D9"
10
+ card: "#161B22"
11
+ card-foreground: "#C9D1D9"
12
+ popover: "#161B22"
13
+ popover-foreground: "#C9D1D9"
7
14
  primary: "#22C55E"
15
+ primary-foreground: "#000000"
8
16
  secondary: "#3B82F6"
17
+ secondary-foreground: "#000000"
9
18
  accent: "#F59E0B"
10
- background: "#0D1117"
11
- surface: "#161B22"
12
- on-primary: "#000000"
13
- on-background: "#C9D1D9"
14
- error: "#F85149"
19
+ accent-foreground: "#000000"
20
+ muted: "#8B949E"
21
+ muted-foreground: "#6E7681"
22
+ destructive: "#F85149"
23
+ border: "#30363D"
24
+ input: "#30363D"
25
+ ring: "#22C55E"
26
+ # Sidebar
27
+ sidebar: "#161B22"
28
+ sidebar-foreground: "#C9D1D9"
29
+ sidebar-primary: "#22C55E"
30
+ sidebar-primary-foreground: "#000000"
31
+ sidebar-accent: "#21262D"
32
+ sidebar-accent-foreground: "#C9D1D9"
33
+ sidebar-border: "#30363D"
34
+ sidebar-ring: "#22C55E"
35
+ # Extras
15
36
  success: "#3FB950"
16
37
  warning: "#D29922"
17
38
  info: "#58A6FF"
18
- muted: "#8B949E"
39
+ # Chart — data-viz colors (distinct, accessible at small sizes)
40
+ chart-1: "#22C55E" # terminal green (primary)
41
+ chart-2: "#58A6FF" # terminal blue
42
+ chart-3: "#D29922" # terminal amber
43
+ chart-4: "#FF7B72" # syntax keyword red
44
+ chart-5: "#D2A8FF" # syntax function purple
19
45
 
20
46
  syntax:
21
47
  keyword: "#FF7B72"
@@ -38,7 +64,6 @@ tokens:
38
64
  border-radius-md: "6px"
39
65
  border-radius-lg: "8px"
40
66
  border-width: "1px"
41
- border-color: "#30363D"
42
67
 
43
68
  elevation:
44
69
  shadow-sm: "0 1px 3px rgba(0, 0, 0, 0.3)"
@@ -58,7 +83,16 @@ tokens:
58
83
  dark_mode:
59
84
  color:
60
85
  background: "#010409"
61
- surface: "#0D1117"
86
+ foreground: "#C9D1D9"
87
+ card: "#0D1117"
88
+ card-foreground: "#C9D1D9"
89
+ muted: "#8B949E"
90
+ muted-foreground: "#6E7681"
91
+ border: "#21262D"
92
+ input: "#21262D"
93
+ sidebar: "#0D1117"
94
+ sidebar-foreground: "#C9D1D9"
95
+ sidebar-border: "#21262D"
62
96
 
63
97
  intensity:
64
98
  variance: 3 # rigid character grid, tmux-like splits, uniform pane structure
@@ -4,17 +4,44 @@ tags: [retro, pastel, expressive, nostalgic, gradient]
4
4
 
5
5
  tokens:
6
6
  color:
7
+ # Core — shadcn/ui CSS vars
8
+ background: "#1A0533"
9
+ foreground: "#E8D5FF"
10
+ card: "#2D1B4E"
11
+ card-foreground: "#E8D5FF"
12
+ popover: "#2D1B4E"
13
+ popover-foreground: "#E8D5FF"
7
14
  primary: "#FF71CE"
15
+ primary-foreground: "#FFFFFF"
8
16
  secondary: "#01CDFE"
17
+ secondary-foreground: "#FFFFFF"
9
18
  accent: "#B967FF"
10
- background: "#1A0533"
11
- surface: "#2D1B4E"
12
- on-primary: "#FFFFFF"
13
- on-background: "#E8D5FF"
14
- error: "#FF6B6B"
19
+ accent-foreground: "#FFFFFF"
20
+ muted: "#4A3566"
21
+ muted-foreground: "#A78BCA"
22
+ destructive: "#FF6B6B"
23
+ border: "rgba(255, 113, 206, 0.3)"
24
+ input: "rgba(255, 113, 206, 0.3)"
25
+ ring: "#FF71CE"
26
+ # Sidebar
27
+ sidebar: "#2D1B4E"
28
+ sidebar-foreground: "#E8D5FF"
29
+ sidebar-primary: "#FF71CE"
30
+ sidebar-primary-foreground: "#FFFFFF"
31
+ sidebar-accent: "#B967FF"
32
+ sidebar-accent-foreground: "#FFFFFF"
33
+ sidebar-border: "rgba(255, 113, 206, 0.3)"
34
+ sidebar-ring: "#FF71CE"
35
+ # Extras
15
36
  success: "#05FFA1"
16
37
  warning: "#FFE66D"
17
38
  info: "#01CDFE"
39
+ # Chart — data-viz colors (distinct, accessible at small sizes)
40
+ chart-1: "#FF71CE" # vaporwave pink (primary)
41
+ chart-2: "#01CDFE" # vaporwave cyan (secondary)
42
+ chart-3: "#B967FF" # vaporwave purple (accent)
43
+ chart-4: "#05FFA1" # vaporwave mint (success)
44
+ chart-5: "#FFE66D" # vaporwave yellow
18
45
 
19
46
  typography:
20
47
  font-family-primary: "Space Grotesk, sans-serif"
@@ -30,7 +57,6 @@ tokens:
30
57
  border-radius-md: "12px"
31
58
  border-radius-lg: "20px"
32
59
  border-width: "2px"
33
- border-color: "rgba(255, 113, 206, 0.3)"
34
60
 
35
61
  elevation:
36
62
  shadow-sm: "0 4px 12px rgba(185, 103, 255, 0.15)"
@@ -55,7 +81,16 @@ tokens:
55
81
  dark_mode:
56
82
  color:
57
83
  background: "#0D0019"
58
- surface: "#1A0533"
84
+ foreground: "#E8D5FF"
85
+ card: "#1A0533"
86
+ card-foreground: "#E8D5FF"
87
+ muted: "#3D2660"
88
+ muted-foreground: "#A78BCA"
89
+ border: "rgba(255, 113, 206, 0.2)"
90
+ input: "rgba(255, 113, 206, 0.2)"
91
+ sidebar: "#1A0533"
92
+ sidebar-foreground: "#E8D5FF"
93
+ sidebar-border: "rgba(255, 113, 206, 0.2)"
59
94
 
60
95
  intensity:
61
96
  variance: 7 # skewed buttons, rotated icon diamonds, perspective grids, alternating timelines
@@ -4,18 +4,44 @@ tags: [web3, crypto, blockchain, defi, dark]
4
4
 
5
5
  tokens:
6
6
  color:
7
+ # Core — shadcn/ui CSS vars
8
+ background: "#030304"
9
+ foreground: "#FFFFFF"
10
+ card: "#0F1115"
11
+ card-foreground: "#FFFFFF"
12
+ popover: "#0F1115"
13
+ popover-foreground: "#FFFFFF"
7
14
  primary: "#F7931A"
15
+ primary-foreground: "#000000"
8
16
  secondary: "#EA580C"
17
+ secondary-foreground: "#000000"
9
18
  accent: "#FFD600"
10
- background: "#030304"
11
- surface: "#0F1115"
12
- on-primary: "#000000"
13
- on-background: "#FFFFFF"
14
- error: "#EF4444"
19
+ accent-foreground: "#000000"
20
+ muted: "#94A3B8"
21
+ muted-foreground: "#64748B"
22
+ destructive: "#EF4444"
23
+ border: "rgba(247,147,26,0.3)"
24
+ input: "rgba(247,147,26,0.3)"
25
+ ring: "#F7931A"
26
+ # Sidebar
27
+ sidebar: "#0F1115"
28
+ sidebar-foreground: "#FFFFFF"
29
+ sidebar-primary: "#F7931A"
30
+ sidebar-primary-foreground: "#000000"
31
+ sidebar-accent: "#FFD600"
32
+ sidebar-accent-foreground: "#000000"
33
+ sidebar-border: "rgba(247,147,26,0.3)"
34
+ sidebar-ring: "#F7931A"
35
+ # Extras
15
36
  success: "#10B981"
16
37
  warning: "#F7931A"
17
38
  info: "#3B82F6"
18
- muted: "#94A3B8"
39
+ # Chart — data-viz colors (distinct, accessible at small sizes)
40
+ chart-1: "#F7931A" # Bitcoin orange (primary)
41
+ chart-2: "#3B82F6" # blockchain blue
42
+ chart-3: "#10B981" # DeFi green (success)
43
+ chart-4: "#FFD600" # gold accent
44
+ chart-5: "#A855F7" # Ethereum purple
19
45
 
20
46
  typography:
21
47
  font-family-primary: "Space Grotesk, sans-serif"
@@ -31,7 +57,6 @@ tokens:
31
57
  border-radius-md: "8px"
32
58
  border-radius-lg: "9999px"
33
59
  border-width: "1px"
34
- border-color: "rgba(247,147,26,0.3)"
35
60
 
36
61
  glass:
37
62
  backdrop-blur: "12px"
@@ -58,8 +83,16 @@ tokens:
58
83
  dark_mode:
59
84
  color:
60
85
  background: "#030304"
61
- surface: "#0F1115"
62
- on-background: "#FFFFFF"
86
+ foreground: "#FFFFFF"
87
+ card: "#0F1115"
88
+ card-foreground: "#FFFFFF"
89
+ muted: "#94A3B8"
90
+ muted-foreground: "#64748B"
91
+ border: "rgba(247,147,26,0.3)"
92
+ input: "rgba(247,147,26,0.3)"
93
+ sidebar: "#0F1115"
94
+ sidebar-foreground: "#FFFFFF"
95
+ sidebar-border: "rgba(247,147,26,0.3)"
63
96
 
64
97
  intensity:
65
98
  variance: 5 # asymmetric pricing scale, corner border accents, but grid-disciplined overall
@@ -55,6 +55,9 @@
55
55
 
56
56
  ## Brand Essence
57
57
 
58
+ ### Emotional Compass
59
+ - **brand_heartbeat:** {one evocative sentence — the feeling this brand leaves, specific enough to be wrong}
60
+
58
61
  ### Promise
59
62
  - **Core promise:** {whenever someone interacts with this brand, they should feel X}
60
63
  - **Functional promise:** {what it delivers — saves time, reduces complexity, etc.}
@@ -77,6 +80,12 @@
77
80
  - **What sets you apart?** {DIFFERENTIATORS}
78
81
  - **Brands admired:** {BRANDS}
79
82
 
83
+ ## Visual Direction
84
+ - **Mood / aesthetic:** {raw descriptors — e.g. "cinematographic, dark, expensive" / "clean, airy, typographic" / "warm brutalist"}
85
+ - **Reference links:** {image URLs, websites, or brand references that capture the feeling}
86
+ - **Texture / atmosphere:** {grain, glass, gradients, flat, photography, illustration, etc.}
87
+ - **Anti-patterns:** {what it should NEVER look like visually}
88
+
80
89
  ## Inspiration
81
90
  - **Styles liked:** {STYLES}
82
91
  - **Styles to avoid:** {AVOID}
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "0.7.3",
2
+ "version": "0.8.2",
3
3
  "project_type": "brand",
4
4
  "brand": {
5
5
  "name": "",
@@ -0,0 +1,6 @@
1
+ # Design Context
2
+ > Auto-maintained by GSP pipeline.
3
+
4
+ ## Brands
5
+
6
+ ## Projects
@@ -28,14 +28,6 @@ Naming: `screen-{NN}-{kebab-case-name}.md` (e.g., `screen-01-home.md`, `screen-0
28
28
  | `shared/responsive.md` | Mobile, tablet, desktop breakpoint adaptations |
29
29
  | `shared/component-plan.md` | Reuse / Refactor / New (shared) / New (local) — omit when target is `figma` |
30
30
 
31
- ### Wireframe Preview (`design/preview.html`)
32
-
33
- Self-contained HTML wireframe preview:
34
- - One section per screen with box-model layout visualization
35
- - Navigation between screens via sidebar table of contents
36
- - Brand color accents from the brand `.yml` preset (or neutral grays)
37
- - Responsive, no external dependencies
38
-
39
31
  ## Content Reference
40
32
 
41
33
  Each chunk follows the standard chunk format. Below is the structural reference for what each chunk should contain: