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.
- package/bin/theme-css.js +331 -0
- package/gsp/agents/gsp-brand-coherence.md +7 -0
- package/gsp/hooks/hooks.json +1 -1
- package/gsp/skills/gsp-brand-brief/SKILL.md +50 -5
- package/gsp/skills/gsp-brand-guidelines/SKILL.md +51 -31
- package/gsp/skills/gsp-brand-guidelines/design-tokens.md +2 -0
- package/gsp/skills/gsp-brand-guidelines/guidelines-structure.md +167 -0
- package/gsp/skills/gsp-brand-guidelines/methodology/gsp-brand-coherence.md +86 -0
- package/gsp/skills/gsp-brand-guidelines/methodology/gsp-brand-engineer.md +13 -5
- package/gsp/skills/gsp-brand-guidelines/token-mapping.md +16 -319
- package/gsp/skills/gsp-brand-identity/SKILL.md +1 -1
- package/gsp/skills/gsp-brand-refine/SKILL.md +5 -6
- package/gsp/skills/gsp-brand-research/SKILL.md +1 -1
- package/gsp/skills/gsp-brand-strategy/SKILL.md +1 -1
- package/gsp/skills/gsp-design-system/SKILL.md +1 -1
- package/gsp/skills/gsp-doctor/SKILL.md +51 -3
- package/gsp/skills/gsp-progress/SKILL.md +1 -1
- package/gsp/skills/gsp-project-brief/SKILL.md +40 -6
- package/gsp/skills/gsp-project-build/SKILL.md +27 -31
- package/gsp/skills/gsp-project-build/flows/figma.md +50 -0
- package/gsp/skills/gsp-project-build/flows/revision.md +64 -0
- package/gsp/skills/gsp-project-build/methodology/gsp-project-builder.md +84 -1
- package/gsp/skills/gsp-project-build/shadcn-composition.md +217 -0
- package/gsp/skills/gsp-project-critique/SKILL.md +3 -1
- package/gsp/skills/gsp-project-design/SKILL.md +3 -2
- package/gsp/skills/gsp-project-design/methodology/gsp-project-designer.md +28 -21
- package/gsp/skills/gsp-project-research/SKILL.md +3 -1
- package/gsp/skills/gsp-project-review/SKILL.md +10 -1
- package/gsp/skills/gsp-scaffold/SKILL.md +67 -11
- package/gsp/skills/gsp-scaffold/shadcn-rules.md +433 -0
- package/gsp/skills/gsp-scaffold/shadcn-theming.md +310 -0
- package/gsp/skills/gsp-start/SKILL.md +18 -2
- package/gsp/skills/gsp-style/SKILL.md +1 -1
- package/gsp/skills/gsp-style/style-preset-schema.md +59 -14
- package/gsp/skills/gsp-style/styles/academia.yml +58 -8
- package/gsp/skills/gsp-style/styles/art-deco.yml +39 -7
- package/gsp/skills/gsp-style/styles/bauhaus.yml +39 -8
- package/gsp/skills/gsp-style/styles/bold-typography.yml +39 -8
- package/gsp/skills/gsp-style/styles/botanical.yml +39 -9
- package/gsp/skills/gsp-style/styles/claymorphism.yml +39 -9
- package/gsp/skills/gsp-style/styles/cyberpunk.yml +39 -7
- package/gsp/skills/gsp-style/styles/enterprise.yml +39 -10
- package/gsp/skills/gsp-style/styles/flat-design.yml +39 -9
- package/gsp/skills/gsp-style/styles/fluent.yml +39 -10
- package/gsp/skills/gsp-style/styles/glassmorphism.yml +39 -8
- package/gsp/skills/gsp-style/styles/humanist-literary.yml +39 -9
- package/gsp/skills/gsp-style/styles/industrial.yml +59 -9
- package/gsp/skills/gsp-style/styles/kinetic.yml +32 -7
- package/gsp/skills/gsp-style/styles/liquid-glass.yml +59 -9
- package/gsp/skills/gsp-style/styles/luxury.yml +59 -9
- package/gsp/skills/gsp-style/styles/material.yml +59 -9
- package/gsp/skills/gsp-style/styles/maximalism.yml +32 -6
- package/gsp/skills/gsp-style/styles/minimal-dark.yml +32 -7
- package/gsp/skills/gsp-style/styles/modern-dark.yml +32 -7
- package/gsp/skills/gsp-style/styles/monochrome.yml +59 -10
- package/gsp/skills/gsp-style/styles/neubrutalism.yml +59 -9
- package/gsp/skills/gsp-style/styles/neumorphism.yml +32 -7
- package/gsp/skills/gsp-style/styles/newsprint.yml +32 -7
- package/gsp/skills/gsp-style/styles/nothing.yml +44 -13
- package/gsp/skills/gsp-style/styles/organic.yml +42 -9
- package/gsp/skills/gsp-style/styles/playful-geometric.yml +43 -9
- package/gsp/skills/gsp-style/styles/professional.yml +41 -10
- package/gsp/skills/gsp-style/styles/retro.yml +42 -8
- package/gsp/skills/gsp-style/styles/saas.yml +42 -9
- package/gsp/skills/gsp-style/styles/sketch.yml +42 -9
- package/gsp/skills/gsp-style/styles/swiss-minimalist.yml +41 -10
- package/gsp/skills/gsp-style/styles/terminal.yml +42 -8
- package/gsp/skills/gsp-style/styles/vaporwave.yml +42 -7
- package/gsp/skills/gsp-style/styles/web3.yml +42 -9
- package/gsp/templates/branding/brief.md +9 -0
- package/gsp/templates/branding/config.json +1 -1
- package/gsp/templates/design-claude.md +6 -0
- package/gsp/templates/phases/design.md +0 -8
- package/gsp/templates/phases/patterns.md +2 -2
- package/gsp/templates/projects/config.json +6 -3
- package/gsp/templates/projects/state.md +1 -1
- package/gsp/templates/system/STACK.md +1 -0
- 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
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
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
|
-
|
|
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
|
-
|
|
54
|
-
|
|
55
|
-
|
|
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
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
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
|
-
|
|
62
|
-
|
|
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
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
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
|
-
|
|
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
|
-
|
|
58
|
-
|
|
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
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
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
|
-
|
|
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
|
-
|
|
55
|
-
|
|
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
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
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
|
-
|
|
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
|
-
|
|
54
|
-
|
|
55
|
-
|
|
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
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
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
|
-
|
|
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
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
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
|
-
|
|
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
|
-
|
|
62
|
-
|
|
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}
|
|
@@ -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:
|