oh-my-design-cli 0.1.0 → 0.1.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/README.ko.md +3 -2
- package/README.md +3 -2
- package/dist/bin/oh-my-design.js +5 -5
- package/dist/bin/oh-my-design.js.map +1 -1
- package/dist/{init-STACB7E5.js → init-UMM4XIV5.js} +42 -2
- package/dist/init-UMM4XIV5.js.map +1 -0
- package/dist/{sync-P7X4S2DK.js → sync-FDYRKNFE.js} +16 -3
- package/dist/sync-FDYRKNFE.js.map +1 -0
- package/package.json +3 -3
- package/dist/init-STACB7E5.js.map +0 -1
- package/dist/sync-P7X4S2DK.js.map +0 -1
- package/references/Claude-Design-Sys-Prompt.txt +0 -421
- package/references/airbnb/README.md +0 -23
- package/references/airbnb/preview-dark.html +0 -234
- package/references/airbnb/preview.html +0 -233
- package/references/airtable/README.md +0 -23
- package/references/airtable/preview-dark.html +0 -165
- package/references/airtable/preview.html +0 -164
- package/references/apple/README.md +0 -24
- package/references/apple/preview-dark.html +0 -420
- package/references/apple/preview.html +0 -414
- package/references/baemin/README.md +0 -19
- package/references/bmw/README.md +0 -23
- package/references/bmw/preview-dark.html +0 -211
- package/references/bmw/preview.html +0 -210
- package/references/cal/README.md +0 -23
- package/references/cal/preview-dark.html +0 -449
- package/references/cal/preview.html +0 -575
- package/references/claude/README.md +0 -24
- package/references/claude/preview-dark.html +0 -803
- package/references/claude/preview.html +0 -826
- package/references/clay/README.md +0 -23
- package/references/clay/preview-dark.html +0 -316
- package/references/clay/preview.html +0 -315
- package/references/clickhouse/README.md +0 -24
- package/references/clickhouse/preview-dark.html +0 -834
- package/references/clickhouse/preview.html +0 -786
- package/references/cohere/README.md +0 -24
- package/references/cohere/preview-dark.html +0 -803
- package/references/cohere/preview.html +0 -807
- package/references/coinbase/README.md +0 -23
- package/references/coinbase/preview-dark.html +0 -164
- package/references/coinbase/preview.html +0 -163
- package/references/composio/README.md +0 -24
- package/references/composio/preview-dark.html +0 -958
- package/references/composio/preview.html +0 -933
- package/references/cursor/README.md +0 -24
- package/references/cursor/preview-dark.html +0 -393
- package/references/cursor/preview.html +0 -383
- package/references/dcard/README.md +0 -12
- package/references/dcard/_research/forum-1440px.png +0 -0
- package/references/dcard/_research.md +0 -77
- package/references/elevenlabs/README.md +0 -23
- package/references/elevenlabs/preview-dark.html +0 -252
- package/references/elevenlabs/preview.html +0 -251
- package/references/expo/README.md +0 -24
- package/references/expo/preview-dark.html +0 -533
- package/references/expo/preview.html +0 -533
- package/references/ferrari/README.md +0 -23
- package/references/ferrari/preview-dark.html +0 -1162
- package/references/ferrari/preview.html +0 -1122
- package/references/figma/README.md +0 -24
- package/references/figma/preview-dark.html +0 -822
- package/references/figma/preview.html +0 -832
- package/references/framer/README.md +0 -23
- package/references/framer/preview-dark.html +0 -902
- package/references/framer/preview.html +0 -883
- package/references/freee/README.md +0 -12
- package/references/freee/_research/vibes-storybook-1440px.png +0 -0
- package/references/freee/_research.md +0 -77
- package/references/hashicorp/README.md +0 -24
- package/references/hashicorp/preview-dark.html +0 -1202
- package/references/hashicorp/preview.html +0 -1193
- package/references/ibm/README.md +0 -24
- package/references/ibm/preview-dark.html +0 -443
- package/references/ibm/preview.html +0 -428
- package/references/intercom/README.md +0 -23
- package/references/intercom/preview-dark.html +0 -185
- package/references/intercom/preview.html +0 -184
- package/references/kakao/README.md +0 -18
- package/references/karrot/README.md +0 -18
- package/references/kraken/README.md +0 -23
- package/references/kraken/preview-dark.html +0 -169
- package/references/kraken/preview.html +0 -168
- package/references/lamborghini/README.md +0 -23
- package/references/lamborghini/preview-dark.html +0 -303
- package/references/lamborghini/preview.html +0 -381
- package/references/line/README.md +0 -12
- package/references/line/_research/home-1440px.png +0 -0
- package/references/line/_research.md +0 -65
- package/references/linear.app/README.md +0 -24
- package/references/linear.app/preview-dark.html +0 -383
- package/references/linear.app/preview.html +0 -373
- package/references/lovable/README.md +0 -24
- package/references/lovable/preview-dark.html +0 -349
- package/references/lovable/preview.html +0 -348
- package/references/mercari/README.md +0 -12
- package/references/mercari/_research/home-1440px.png +0 -0
- package/references/mercari/_research.md +0 -77
- package/references/minimax/README.md +0 -24
- package/references/minimax/preview-dark.html +0 -1262
- package/references/minimax/preview.html +0 -1248
- package/references/mintlify/README.md +0 -24
- package/references/mintlify/preview-dark.html +0 -409
- package/references/mintlify/preview.html +0 -398
- package/references/miro/README.md +0 -23
- package/references/miro/preview-dark.html +0 -174
- package/references/miro/preview.html +0 -173
- package/references/mistral.ai/README.md +0 -24
- package/references/mistral.ai/preview-dark.html +0 -806
- package/references/mistral.ai/preview.html +0 -805
- package/references/mongodb/README.md +0 -23
- package/references/mongodb/preview-dark.html +0 -260
- package/references/mongodb/preview.html +0 -259
- package/references/notion/README.md +0 -24
- package/references/notion/preview-dark.html +0 -372
- package/references/notion/preview.html +0 -364
- package/references/nvidia/README.md +0 -24
- package/references/nvidia/preview-dark.html +0 -374
- package/references/nvidia/preview.html +0 -366
- package/references/ollama/README.md +0 -24
- package/references/ollama/preview-dark.html +0 -678
- package/references/ollama/preview.html +0 -678
- package/references/opencode.ai/README.md +0 -24
- package/references/opencode.ai/preview-dark.html +0 -366
- package/references/opencode.ai/preview.html +0 -357
- package/references/pinkoi/README.md +0 -12
- package/references/pinkoi/_research/browse-1440px.png +0 -0
- package/references/pinkoi/_research.md +0 -115
- package/references/pinterest/README.md +0 -23
- package/references/pinterest/preview-dark.html +0 -233
- package/references/pinterest/preview.html +0 -232
- package/references/posthog/README.md +0 -23
- package/references/posthog/preview-dark.html +0 -699
- package/references/posthog/preview.html +0 -749
- package/references/raycast/README.md +0 -23
- package/references/raycast/preview-dark.html +0 -606
- package/references/raycast/preview.html +0 -688
- package/references/renault/README.md +0 -23
- package/references/renault/preview-dark.html +0 -406
- package/references/renault/preview.html +0 -606
- package/references/replicate/README.md +0 -24
- package/references/replicate/preview-dark.html +0 -828
- package/references/replicate/preview.html +0 -831
- package/references/resend/README.md +0 -23
- package/references/resend/preview-dark.html +0 -355
- package/references/resend/preview.html +0 -354
- package/references/revolut/README.md +0 -23
- package/references/revolut/preview-dark.html +0 -234
- package/references/revolut/preview.html +0 -233
- package/references/runwayml/README.md +0 -24
- package/references/runwayml/preview-dark.html +0 -664
- package/references/runwayml/preview.html +0 -665
- package/references/sanity/README.md +0 -24
- package/references/sanity/preview-dark.html +0 -990
- package/references/sanity/preview.html +0 -1135
- package/references/sentry/README.md +0 -24
- package/references/sentry/preview-dark.html +0 -626
- package/references/sentry/preview.html +0 -951
- package/references/spacex/README.md +0 -23
- package/references/spacex/preview-dark.html +0 -221
- package/references/spacex/preview.html +0 -220
- package/references/spotify/README.md +0 -23
- package/references/spotify/preview-dark.html +0 -231
- package/references/spotify/preview.html +0 -230
- package/references/stripe/README.md +0 -24
- package/references/stripe/preview-dark.html +0 -428
- package/references/stripe/preview.html +0 -419
- package/references/supabase/README.md +0 -24
- package/references/supabase/preview-dark.html +0 -977
- package/references/supabase/preview.html +0 -955
- package/references/superhuman/README.md +0 -23
- package/references/superhuman/preview-dark.html +0 -973
- package/references/superhuman/preview.html +0 -951
- package/references/tesla/README.md +0 -23
- package/references/tesla/preview-dark.html +0 -947
- package/references/tesla/preview.html +0 -925
- package/references/together.ai/README.md +0 -24
- package/references/together.ai/preview-dark.html +0 -892
- package/references/together.ai/preview.html +0 -897
- package/references/toss/README.md +0 -19
- package/references/uber/README.md +0 -24
- package/references/uber/preview-dark.html +0 -1120
- package/references/uber/preview.html +0 -1119
- package/references/vercel/README.md +0 -24
- package/references/vercel/preview-dark.html +0 -368
- package/references/vercel/preview.html +0 -367
- package/references/voltagent/README.md +0 -24
- package/references/voltagent/preview-dark.html +0 -487
- package/references/voltagent/preview.html +0 -766
- package/references/warp/README.md +0 -23
- package/references/warp/preview-dark.html +0 -500
- package/references/warp/preview.html +0 -533
- package/references/webflow/README.md +0 -23
- package/references/webflow/preview-dark.html +0 -147
- package/references/webflow/preview.html +0 -146
- package/references/wise/README.md +0 -23
- package/references/wise/preview-dark.html +0 -230
- package/references/wise/preview.html +0 -229
- package/references/x.ai/README.md +0 -24
- package/references/x.ai/preview-dark.html +0 -356
- package/references/x.ai/preview.html +0 -407
- package/references/zapier/README.md +0 -24
- package/references/zapier/preview-dark.html +0 -380
- package/references/zapier/preview.html +0 -372
|
@@ -1,699 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="en">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8">
|
|
5
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
-
<title>Design System Inspired by PostHog</title>
|
|
7
|
-
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
8
|
-
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
9
|
-
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700;800&family=Source+Code+Pro:wght@400;500&display=swap" rel="stylesheet">
|
|
10
|
-
<style>
|
|
11
|
-
:root {
|
|
12
|
-
--olive-ink: #4d4f46;
|
|
13
|
-
--deep-olive: #23251d;
|
|
14
|
-
--posthog-orange: #F54E00;
|
|
15
|
-
--amber-gold: #F7A501;
|
|
16
|
-
--gold-border: #b17816;
|
|
17
|
-
--focus-blue: #3b82f6;
|
|
18
|
-
--warm-parchment: #fdfdf8;
|
|
19
|
-
--sage-cream: #eeefe9;
|
|
20
|
-
--light-sage: #e5e7e0;
|
|
21
|
-
--warm-tan: #d4c9b8;
|
|
22
|
-
--hover-white: #f4f4f4;
|
|
23
|
-
--muted-olive: #65675e;
|
|
24
|
-
--sage-placeholder: #9ea096;
|
|
25
|
-
--sage-border: #bfc1b7;
|
|
26
|
-
--light-border: #b6b7af;
|
|
27
|
-
--near-black: #1e1f23;
|
|
28
|
-
--dark-text: #111827;
|
|
29
|
-
--white: #ffffff;
|
|
30
|
-
--font: 'IBM Plex Sans', -apple-system, system-ui, 'Segoe UI', 'Helvetica Neue', Helvetica, Ubuntu, Roboto, Noto, Arial, sans-serif;
|
|
31
|
-
--mono: 'Source Code Pro', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
|
32
|
-
|
|
33
|
-
/* Dark mode */
|
|
34
|
-
--dk-bg: #151614;
|
|
35
|
-
--dk-surface: #1c1d1a;
|
|
36
|
-
--dk-surface-elevated: #252621;
|
|
37
|
-
--dk-border: #3a3b36;
|
|
38
|
-
--dk-text-primary: #e5e7e0;
|
|
39
|
-
--dk-text-secondary: #9ea096;
|
|
40
|
-
--dk-text-muted: #65675e;
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
44
|
-
|
|
45
|
-
body {
|
|
46
|
-
font-family: var(--font);
|
|
47
|
-
background: var(--dk-bg);
|
|
48
|
-
color: var(--dk-text-primary);
|
|
49
|
-
font-size: 16px;
|
|
50
|
-
font-weight: 400;
|
|
51
|
-
line-height: 1.50;
|
|
52
|
-
-webkit-font-smoothing: antialiased;
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
/* DARK MODE BADGE */
|
|
56
|
-
.dark-badge {
|
|
57
|
-
position: fixed;
|
|
58
|
-
top: 12px;
|
|
59
|
-
right: 12px;
|
|
60
|
-
z-index: 200;
|
|
61
|
-
background: var(--posthog-orange);
|
|
62
|
-
color: var(--white);
|
|
63
|
-
padding: 5px 12px;
|
|
64
|
-
border-radius: 4px;
|
|
65
|
-
font-size: 11px;
|
|
66
|
-
font-weight: 700;
|
|
67
|
-
text-transform: uppercase;
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
/* NAV */
|
|
71
|
-
nav {
|
|
72
|
-
position: sticky;
|
|
73
|
-
top: 0;
|
|
74
|
-
z-index: 100;
|
|
75
|
-
display: flex;
|
|
76
|
-
align-items: center;
|
|
77
|
-
justify-content: space-between;
|
|
78
|
-
padding: 12px 32px;
|
|
79
|
-
background: rgba(21, 22, 20, 0.92);
|
|
80
|
-
backdrop-filter: blur(10px);
|
|
81
|
-
-webkit-backdrop-filter: blur(10px);
|
|
82
|
-
border-bottom: 1px solid var(--dk-border);
|
|
83
|
-
}
|
|
84
|
-
.nav-brand {
|
|
85
|
-
font-size: 15px;
|
|
86
|
-
font-weight: 700;
|
|
87
|
-
color: var(--dk-text-primary);
|
|
88
|
-
text-decoration: none;
|
|
89
|
-
}
|
|
90
|
-
.nav-links {
|
|
91
|
-
display: flex;
|
|
92
|
-
align-items: center;
|
|
93
|
-
gap: 24px;
|
|
94
|
-
list-style: none;
|
|
95
|
-
}
|
|
96
|
-
.nav-links a {
|
|
97
|
-
font-size: 15px;
|
|
98
|
-
font-weight: 600;
|
|
99
|
-
color: var(--dk-text-secondary);
|
|
100
|
-
text-decoration: none;
|
|
101
|
-
transition: color 0.15s;
|
|
102
|
-
}
|
|
103
|
-
.nav-links a:hover { color: var(--posthog-orange); }
|
|
104
|
-
.nav-cta {
|
|
105
|
-
background: var(--warm-parchment);
|
|
106
|
-
color: var(--deep-olive);
|
|
107
|
-
padding: 8px 16px;
|
|
108
|
-
border-radius: 6px;
|
|
109
|
-
font-size: 15px;
|
|
110
|
-
font-weight: 700;
|
|
111
|
-
text-decoration: none;
|
|
112
|
-
border: none;
|
|
113
|
-
cursor: pointer;
|
|
114
|
-
transition: opacity 0.15s;
|
|
115
|
-
}
|
|
116
|
-
.nav-cta:hover { opacity: 0.85; }
|
|
117
|
-
|
|
118
|
-
/* HERO */
|
|
119
|
-
.hero {
|
|
120
|
-
background: var(--dk-bg);
|
|
121
|
-
padding: 80px 32px 64px;
|
|
122
|
-
border-bottom: 1px solid var(--dk-border);
|
|
123
|
-
}
|
|
124
|
-
.hero-inner { max-width: 800px; margin: 0 auto; }
|
|
125
|
-
.hero h1 {
|
|
126
|
-
font-size: 30px;
|
|
127
|
-
font-weight: 800;
|
|
128
|
-
line-height: 1.20;
|
|
129
|
-
letter-spacing: -0.75px;
|
|
130
|
-
color: var(--dk-text-primary);
|
|
131
|
-
margin-bottom: 16px;
|
|
132
|
-
}
|
|
133
|
-
.hero .subtitle {
|
|
134
|
-
font-size: 18px;
|
|
135
|
-
font-weight: 400;
|
|
136
|
-
line-height: 1.56;
|
|
137
|
-
color: var(--dk-text-secondary);
|
|
138
|
-
margin-bottom: 32px;
|
|
139
|
-
}
|
|
140
|
-
.hero-buttons { display: flex; gap: 12px; flex-wrap: wrap; }
|
|
141
|
-
.btn-light {
|
|
142
|
-
background: var(--warm-parchment);
|
|
143
|
-
color: var(--deep-olive);
|
|
144
|
-
padding: 10px 16px;
|
|
145
|
-
border-radius: 6px;
|
|
146
|
-
font-size: 15px;
|
|
147
|
-
font-weight: 700;
|
|
148
|
-
font-family: var(--font);
|
|
149
|
-
border: none;
|
|
150
|
-
cursor: pointer;
|
|
151
|
-
transition: opacity 0.15s;
|
|
152
|
-
}
|
|
153
|
-
.btn-light:hover { opacity: 0.85; }
|
|
154
|
-
.btn-outline-dk {
|
|
155
|
-
background: transparent;
|
|
156
|
-
color: var(--dk-text-primary);
|
|
157
|
-
padding: 10px 16px;
|
|
158
|
-
border-radius: 4px;
|
|
159
|
-
font-size: 15px;
|
|
160
|
-
font-weight: 600;
|
|
161
|
-
font-family: var(--font);
|
|
162
|
-
border: 1px solid var(--dk-border);
|
|
163
|
-
cursor: pointer;
|
|
164
|
-
transition: color 0.15s;
|
|
165
|
-
}
|
|
166
|
-
.btn-outline-dk:hover { color: var(--posthog-orange); }
|
|
167
|
-
|
|
168
|
-
/* SECTIONS */
|
|
169
|
-
.section { padding: 64px 32px; max-width: 1100px; margin: 0 auto; }
|
|
170
|
-
.section-title {
|
|
171
|
-
font-size: 24px;
|
|
172
|
-
font-weight: 700;
|
|
173
|
-
line-height: 1.33;
|
|
174
|
-
color: var(--dk-text-primary);
|
|
175
|
-
margin-bottom: 8px;
|
|
176
|
-
}
|
|
177
|
-
.section-subtitle {
|
|
178
|
-
font-size: 16px;
|
|
179
|
-
font-weight: 400;
|
|
180
|
-
line-height: 1.50;
|
|
181
|
-
color: var(--dk-text-secondary);
|
|
182
|
-
margin-bottom: 40px;
|
|
183
|
-
}
|
|
184
|
-
|
|
185
|
-
/* COLORS */
|
|
186
|
-
.color-category { margin-bottom: 32px; }
|
|
187
|
-
.color-category h3 {
|
|
188
|
-
font-size: 18px;
|
|
189
|
-
font-weight: 700;
|
|
190
|
-
color: var(--dk-text-primary);
|
|
191
|
-
margin-bottom: 16px;
|
|
192
|
-
text-transform: uppercase;
|
|
193
|
-
}
|
|
194
|
-
.color-grid {
|
|
195
|
-
display: grid;
|
|
196
|
-
grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
|
|
197
|
-
gap: 16px;
|
|
198
|
-
}
|
|
199
|
-
.color-swatch {
|
|
200
|
-
border-radius: 6px;
|
|
201
|
-
overflow: hidden;
|
|
202
|
-
border: 1px solid var(--dk-border);
|
|
203
|
-
background: var(--dk-surface);
|
|
204
|
-
}
|
|
205
|
-
.swatch-color { height: 80px; width: 100%; }
|
|
206
|
-
.swatch-info { padding: 10px 12px; }
|
|
207
|
-
.swatch-name { font-size: 13px; font-weight: 700; color: var(--dk-text-primary); margin-bottom: 2px; }
|
|
208
|
-
.swatch-hex { font-size: 12px; font-weight: 500; color: var(--dk-text-muted); font-family: var(--mono); margin-bottom: 4px; }
|
|
209
|
-
.swatch-role { font-size: 11px; color: var(--dk-text-secondary); line-height: 1.4; }
|
|
210
|
-
|
|
211
|
-
/* TYPOGRAPHY */
|
|
212
|
-
.type-sample {
|
|
213
|
-
padding: 20px 0;
|
|
214
|
-
border-bottom: 1px solid var(--dk-border);
|
|
215
|
-
}
|
|
216
|
-
.type-sample:last-child { border-bottom: none; }
|
|
217
|
-
.type-sample .type-text { color: var(--dk-text-primary); margin-bottom: 6px; }
|
|
218
|
-
.type-sample .type-label {
|
|
219
|
-
font-size: 12px;
|
|
220
|
-
font-weight: 500;
|
|
221
|
-
color: var(--posthog-orange);
|
|
222
|
-
font-family: var(--mono);
|
|
223
|
-
line-height: 1.4;
|
|
224
|
-
}
|
|
225
|
-
|
|
226
|
-
/* BUTTONS */
|
|
227
|
-
.button-grid { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
|
|
228
|
-
.button-item { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
|
|
229
|
-
.btn-label { font-size: 11px; font-weight: 500; color: var(--dk-text-muted); font-family: var(--mono); }
|
|
230
|
-
.btn-dk-primary {
|
|
231
|
-
background: var(--warm-parchment);
|
|
232
|
-
color: var(--deep-olive);
|
|
233
|
-
padding: 10px 16px;
|
|
234
|
-
border-radius: 6px;
|
|
235
|
-
font-size: 15px;
|
|
236
|
-
font-weight: 700;
|
|
237
|
-
font-family: var(--font);
|
|
238
|
-
border: none;
|
|
239
|
-
cursor: pointer;
|
|
240
|
-
transition: opacity 0.15s;
|
|
241
|
-
}
|
|
242
|
-
.btn-dk-primary:hover { opacity: 0.85; }
|
|
243
|
-
.btn-dk-sage {
|
|
244
|
-
background: var(--dk-surface-elevated);
|
|
245
|
-
color: var(--dk-text-primary);
|
|
246
|
-
padding: 10px 16px;
|
|
247
|
-
border-radius: 4px;
|
|
248
|
-
font-size: 15px;
|
|
249
|
-
font-weight: 600;
|
|
250
|
-
font-family: var(--font);
|
|
251
|
-
border: 1px solid var(--dk-border);
|
|
252
|
-
cursor: pointer;
|
|
253
|
-
transition: color 0.15s;
|
|
254
|
-
}
|
|
255
|
-
.btn-dk-sage:hover { color: var(--posthog-orange); }
|
|
256
|
-
.btn-dk-tan {
|
|
257
|
-
background: #4a3f30;
|
|
258
|
-
color: var(--warm-tan);
|
|
259
|
-
padding: 10px 16px;
|
|
260
|
-
border-radius: 4px;
|
|
261
|
-
font-size: 15px;
|
|
262
|
-
font-weight: 600;
|
|
263
|
-
font-family: var(--font);
|
|
264
|
-
border: none;
|
|
265
|
-
cursor: pointer;
|
|
266
|
-
transition: color 0.15s;
|
|
267
|
-
}
|
|
268
|
-
.btn-dk-tan:hover { color: var(--posthog-orange); }
|
|
269
|
-
.btn-dk-input {
|
|
270
|
-
background: var(--dk-surface);
|
|
271
|
-
color: var(--dk-text-muted);
|
|
272
|
-
padding: 6px 12px;
|
|
273
|
-
border-radius: 4px;
|
|
274
|
-
font-size: 14px;
|
|
275
|
-
font-weight: 400;
|
|
276
|
-
font-family: var(--font);
|
|
277
|
-
border: 1px solid var(--dk-border);
|
|
278
|
-
cursor: pointer;
|
|
279
|
-
transition: color 0.15s;
|
|
280
|
-
}
|
|
281
|
-
.btn-dk-input:hover { color: var(--posthog-orange); }
|
|
282
|
-
.btn-dk-ghost {
|
|
283
|
-
background: transparent;
|
|
284
|
-
color: var(--dk-text-secondary);
|
|
285
|
-
padding: 4px 8px;
|
|
286
|
-
border-radius: 4px;
|
|
287
|
-
font-size: 14px;
|
|
288
|
-
font-weight: 500;
|
|
289
|
-
font-family: var(--font);
|
|
290
|
-
border: 1px solid transparent;
|
|
291
|
-
cursor: pointer;
|
|
292
|
-
transition: color 0.15s;
|
|
293
|
-
}
|
|
294
|
-
.btn-dk-ghost:hover { color: var(--posthog-orange); }
|
|
295
|
-
|
|
296
|
-
/* CARDS */
|
|
297
|
-
.card-grid {
|
|
298
|
-
display: grid;
|
|
299
|
-
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
|
300
|
-
gap: 20px;
|
|
301
|
-
}
|
|
302
|
-
.card { border-radius: 6px; padding: 24px; transition: transform 0.15s; }
|
|
303
|
-
.card-dk-bordered { background: var(--dk-surface); border: 1px solid var(--dk-border); }
|
|
304
|
-
.card-dk-elevated { background: var(--dk-surface-elevated); border: 1px solid var(--dk-border); }
|
|
305
|
-
.card-dk-shadow {
|
|
306
|
-
background: var(--dk-surface);
|
|
307
|
-
border: 1px solid var(--dk-border);
|
|
308
|
-
box-shadow: 0px 25px 50px -12px rgba(0,0,0,0.5);
|
|
309
|
-
}
|
|
310
|
-
.card-hover:hover { transform: translateY(-2px); }
|
|
311
|
-
.card h4 { font-size: 20px; font-weight: 700; color: var(--dk-text-primary); margin-bottom: 8px; line-height: 1.40; }
|
|
312
|
-
.card .card-desc { font-size: 15px; font-weight: 400; line-height: 1.71; color: var(--dk-text-secondary); }
|
|
313
|
-
.card .card-label { font-size: 11px; font-weight: 500; color: var(--posthog-orange); font-family: var(--mono); margin-top: 12px; }
|
|
314
|
-
|
|
315
|
-
/* FORMS */
|
|
316
|
-
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
|
|
317
|
-
.form-group { display: flex; flex-direction: column; gap: 6px; }
|
|
318
|
-
.form-group label { font-size: 14px; font-weight: 600; color: var(--dk-text-primary); }
|
|
319
|
-
.form-group input, .form-group textarea {
|
|
320
|
-
font-family: var(--font);
|
|
321
|
-
font-size: 15px;
|
|
322
|
-
font-weight: 400;
|
|
323
|
-
padding: 8px 12px;
|
|
324
|
-
border-radius: 4px;
|
|
325
|
-
border: 1px solid var(--dk-border);
|
|
326
|
-
background: var(--dk-surface);
|
|
327
|
-
color: var(--dk-text-primary);
|
|
328
|
-
outline: none;
|
|
329
|
-
transition: border-color 0.15s, box-shadow 0.15s;
|
|
330
|
-
}
|
|
331
|
-
.form-group input::placeholder, .form-group textarea::placeholder { color: var(--dk-text-muted); }
|
|
332
|
-
.form-group input:focus, .form-group textarea:focus {
|
|
333
|
-
border-color: var(--focus-blue);
|
|
334
|
-
box-shadow: 0 0 0 2px rgba(59,130,246,0.3);
|
|
335
|
-
}
|
|
336
|
-
.form-group input.error { border-color: var(--posthog-orange); }
|
|
337
|
-
.form-group textarea { resize: vertical; min-height: 80px; }
|
|
338
|
-
.form-hint { font-size: 11px; color: var(--dk-text-muted); font-family: var(--mono); }
|
|
339
|
-
.form-error-text { font-size: 11px; color: var(--posthog-orange); }
|
|
340
|
-
|
|
341
|
-
/* SPACING */
|
|
342
|
-
.spacing-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
|
|
343
|
-
.spacing-item { display: flex; flex-direction: column; align-items: center; gap: 6px; }
|
|
344
|
-
.spacing-box { background: var(--posthog-orange); border-radius: 2px; height: 40px; opacity: 0.6; }
|
|
345
|
-
.spacing-label { font-size: 10px; font-weight: 600; color: var(--dk-text-muted); font-family: var(--mono); }
|
|
346
|
-
|
|
347
|
-
/* RADIUS */
|
|
348
|
-
.radius-row { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; }
|
|
349
|
-
.radius-item { display: flex; flex-direction: column; align-items: center; gap: 8px; }
|
|
350
|
-
.radius-box { width: 80px; height: 80px; background: var(--dk-surface-elevated); border: 1px solid var(--dk-border); }
|
|
351
|
-
.radius-label { font-size: 12px; font-weight: 700; color: var(--dk-text-primary); font-family: var(--mono); }
|
|
352
|
-
.radius-context { font-size: 10px; color: var(--dk-text-muted); text-align: center; }
|
|
353
|
-
|
|
354
|
-
/* ELEVATION */
|
|
355
|
-
.elevation-section {
|
|
356
|
-
background: var(--dk-surface);
|
|
357
|
-
border-radius: 6px;
|
|
358
|
-
padding: 40px;
|
|
359
|
-
border: 1px solid var(--dk-border);
|
|
360
|
-
}
|
|
361
|
-
.elevation-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; }
|
|
362
|
-
.elevation-card {
|
|
363
|
-
background: var(--dk-surface-elevated);
|
|
364
|
-
border-radius: 6px;
|
|
365
|
-
padding: 24px;
|
|
366
|
-
min-height: 120px;
|
|
367
|
-
}
|
|
368
|
-
.elevation-card h4 { font-size: 14px; font-weight: 700; color: var(--dk-text-primary); margin-bottom: 6px; }
|
|
369
|
-
.elevation-card p { font-size: 12px; color: var(--dk-text-secondary); line-height: 1.5; }
|
|
370
|
-
.elev-flat { box-shadow: none; border: none; }
|
|
371
|
-
.elev-border { box-shadow: none; border: 1px solid var(--dk-border); }
|
|
372
|
-
.elev-compound { box-shadow: none; border-top: 1px solid var(--dk-border); border-left: 1px solid var(--dk-border); border-bottom: 1px solid var(--dk-border); }
|
|
373
|
-
.elev-deep { box-shadow: 0px 25px 50px -12px rgba(0,0,0,0.6); border: none; }
|
|
374
|
-
|
|
375
|
-
/* FOOTER */
|
|
376
|
-
footer {
|
|
377
|
-
text-align: center;
|
|
378
|
-
padding: 40px 32px;
|
|
379
|
-
border-top: 1px solid var(--dk-border);
|
|
380
|
-
font-size: 13px;
|
|
381
|
-
color: var(--dk-text-muted);
|
|
382
|
-
}
|
|
383
|
-
|
|
384
|
-
@media (max-width: 768px) {
|
|
385
|
-
nav { padding: 10px 16px; }
|
|
386
|
-
.nav-links { display: none; }
|
|
387
|
-
.hero { padding: 48px 16px 40px; }
|
|
388
|
-
.hero h1 { font-size: 24px; }
|
|
389
|
-
.section { padding: 40px 16px; }
|
|
390
|
-
.section-title { font-size: 20px; }
|
|
391
|
-
.color-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
|
|
392
|
-
.card-grid { grid-template-columns: 1fr; }
|
|
393
|
-
.form-grid { grid-template-columns: 1fr; }
|
|
394
|
-
.elevation-section { padding: 20px; }
|
|
395
|
-
.elevation-grid { grid-template-columns: 1fr; }
|
|
396
|
-
.dark-badge { top: 10px; right: 10px; font-size: 10px; }
|
|
397
|
-
}
|
|
398
|
-
</style>
|
|
399
|
-
</head>
|
|
400
|
-
<body>
|
|
401
|
-
|
|
402
|
-
<!-- DARK MODE BADGE -->
|
|
403
|
-
<div class="dark-badge">Dark Mode</div>
|
|
404
|
-
|
|
405
|
-
<!-- NAV -->
|
|
406
|
-
<nav>
|
|
407
|
-
<span class="nav-brand">awesome-design-md</span>
|
|
408
|
-
<ul class="nav-links">
|
|
409
|
-
<li><a href="#colors">Colors</a></li>
|
|
410
|
-
<li><a href="#typography">Typography</a></li>
|
|
411
|
-
<li><a href="#buttons">Buttons</a></li>
|
|
412
|
-
<li><a href="#cards">Cards</a></li>
|
|
413
|
-
<li><a href="#forms">Forms</a></li>
|
|
414
|
-
<li><a href="#spacing">Spacing</a></li>
|
|
415
|
-
<li><a href="#radius">Radius</a></li>
|
|
416
|
-
<li><a href="#elevation">Elevation</a></li>
|
|
417
|
-
</ul>
|
|
418
|
-
<a href="#" class="nav-cta">Get started - free</a>
|
|
419
|
-
</nav>
|
|
420
|
-
|
|
421
|
-
<!-- HERO -->
|
|
422
|
-
<section class="hero">
|
|
423
|
-
<div class="hero-inner">
|
|
424
|
-
<h1>Design System Inspired by PostHog</h1>
|
|
425
|
-
<p class="subtitle">A visual catalog of design tokens extracted from PostHog's website — warm, earthy, and deliberately anti-corporate.</p>
|
|
426
|
-
<div class="hero-buttons">
|
|
427
|
-
<button class="btn-light">Explore Tokens</button>
|
|
428
|
-
<button class="btn-outline-dk">View DESIGN.md</button>
|
|
429
|
-
</div>
|
|
430
|
-
</div>
|
|
431
|
-
</section>
|
|
432
|
-
|
|
433
|
-
<!-- 1. COLORS -->
|
|
434
|
-
<section class="section" id="colors">
|
|
435
|
-
<h2 class="section-title">Color Palette</h2>
|
|
436
|
-
<p class="section-subtitle">PostHog's warm olive/sage palette on dark surfaces.</p>
|
|
437
|
-
|
|
438
|
-
<div class="color-category">
|
|
439
|
-
<h3>Primary</h3>
|
|
440
|
-
<div class="color-grid">
|
|
441
|
-
<div class="color-swatch"><div class="swatch-color" style="background:#4d4f46;"></div><div class="swatch-info"><div class="swatch-name">Olive Ink</div><div class="swatch-hex">#4d4f46</div><div class="swatch-role">Primary text color</div></div></div>
|
|
442
|
-
<div class="color-swatch"><div class="swatch-color" style="background:#23251d;"></div><div class="swatch-info"><div class="swatch-name">Deep Olive</div><div class="swatch-hex">#23251d</div><div class="swatch-role">Links and headings</div></div></div>
|
|
443
|
-
<div class="color-swatch"><div class="swatch-color" style="background:#F54E00;"></div><div class="swatch-info"><div class="swatch-name">PostHog Orange</div><div class="swatch-hex">#F54E00</div><div class="swatch-role">Hidden hover accent</div></div></div>
|
|
444
|
-
</div>
|
|
445
|
-
</div>
|
|
446
|
-
|
|
447
|
-
<div class="color-category">
|
|
448
|
-
<h3>Secondary & Accent</h3>
|
|
449
|
-
<div class="color-grid">
|
|
450
|
-
<div class="color-swatch"><div class="swatch-color" style="background:#F7A501;"></div><div class="swatch-info"><div class="swatch-name">Amber Gold</div><div class="swatch-hex">#F7A501</div><div class="swatch-role">Dark button hover accent</div></div></div>
|
|
451
|
-
<div class="color-swatch"><div class="swatch-color" style="background:#b17816;"></div><div class="swatch-info"><div class="swatch-name">Gold Border</div><div class="swatch-hex">#b17816</div><div class="swatch-role">Featured button borders</div></div></div>
|
|
452
|
-
<div class="color-swatch"><div class="swatch-color" style="background:#3b82f6;"></div><div class="swatch-info"><div class="swatch-name">Focus Blue</div><div class="swatch-hex">#3b82f6</div><div class="swatch-role">Focus ring (accessibility)</div></div></div>
|
|
453
|
-
</div>
|
|
454
|
-
</div>
|
|
455
|
-
|
|
456
|
-
<div class="color-category">
|
|
457
|
-
<h3>Surface & Background</h3>
|
|
458
|
-
<div class="color-grid">
|
|
459
|
-
<div class="color-swatch"><div class="swatch-color" style="background:#fdfdf8;"></div><div class="swatch-info"><div class="swatch-name">Warm Parchment</div><div class="swatch-hex">#fdfdf8</div><div class="swatch-role">Page background (light)</div></div></div>
|
|
460
|
-
<div class="color-swatch"><div class="swatch-color" style="background:#eeefe9;"></div><div class="swatch-info"><div class="swatch-name">Sage Cream</div><div class="swatch-hex">#eeefe9</div><div class="swatch-role">Input & secondary surfaces</div></div></div>
|
|
461
|
-
<div class="color-swatch"><div class="swatch-color" style="background:#e5e7e0;"></div><div class="swatch-info"><div class="swatch-name">Light Sage</div><div class="swatch-hex">#e5e7e0</div><div class="swatch-role">Button backgrounds</div></div></div>
|
|
462
|
-
<div class="color-swatch"><div class="swatch-color" style="background:#d4c9b8;"></div><div class="swatch-info"><div class="swatch-name">Warm Tan</div><div class="swatch-hex">#d4c9b8</div><div class="swatch-role">Featured button background</div></div></div>
|
|
463
|
-
<div class="color-swatch"><div class="swatch-color" style="background:#f4f4f4;"></div><div class="swatch-info"><div class="swatch-name">Hover White</div><div class="swatch-hex">#f4f4f4</div><div class="swatch-role">Hover background state</div></div></div>
|
|
464
|
-
</div>
|
|
465
|
-
</div>
|
|
466
|
-
|
|
467
|
-
<div class="color-category">
|
|
468
|
-
<h3>Neutrals & Text</h3>
|
|
469
|
-
<div class="color-grid">
|
|
470
|
-
<div class="color-swatch"><div class="swatch-color" style="background:#65675e;"></div><div class="swatch-info"><div class="swatch-name">Muted Olive</div><div class="swatch-hex">#65675e</div><div class="swatch-role">Secondary text</div></div></div>
|
|
471
|
-
<div class="color-swatch"><div class="swatch-color" style="background:#9ea096;"></div><div class="swatch-info"><div class="swatch-name">Sage Placeholder</div><div class="swatch-hex">#9ea096</div><div class="swatch-role">Placeholder text</div></div></div>
|
|
472
|
-
<div class="color-swatch"><div class="swatch-color" style="background:#bfc1b7;"></div><div class="swatch-info"><div class="swatch-name">Sage Border</div><div class="swatch-hex">#bfc1b7</div><div class="swatch-role">Primary borders</div></div></div>
|
|
473
|
-
<div class="color-swatch"><div class="swatch-color" style="background:#b6b7af;"></div><div class="swatch-info"><div class="swatch-name">Light Border</div><div class="swatch-hex">#b6b7af</div><div class="swatch-role">Toolbar borders</div></div></div>
|
|
474
|
-
<div class="color-swatch"><div class="swatch-color" style="background:#1e1f23;"></div><div class="swatch-info"><div class="swatch-name">Near-Black</div><div class="swatch-hex">#1e1f23</div><div class="swatch-role">Dark CTA button</div></div></div>
|
|
475
|
-
</div>
|
|
476
|
-
</div>
|
|
477
|
-
</section>
|
|
478
|
-
|
|
479
|
-
<!-- 2. TYPOGRAPHY -->
|
|
480
|
-
<section class="section" id="typography">
|
|
481
|
-
<h2 class="section-title">Typography Scale</h2>
|
|
482
|
-
<p class="section-subtitle">IBM Plex Sans Variable with bold headings and generous body line-heights.</p>
|
|
483
|
-
|
|
484
|
-
<div class="type-sample">
|
|
485
|
-
<div class="type-text" style="font-size:30px; font-weight:800; line-height:1.20; letter-spacing:-0.75px;">Display Hero</div>
|
|
486
|
-
<div class="type-label">Display Hero — 30px / 800 / 1.20 / -0.75px</div>
|
|
487
|
-
</div>
|
|
488
|
-
<div class="type-sample">
|
|
489
|
-
<div class="type-text" style="font-size:36px; font-weight:700; line-height:1.50;">Section Heading</div>
|
|
490
|
-
<div class="type-label">Section Heading — 36px / 700 / 1.50 / 0px</div>
|
|
491
|
-
</div>
|
|
492
|
-
<div class="type-sample">
|
|
493
|
-
<div class="type-text" style="font-size:24px; font-weight:700; line-height:1.33;">Feature Heading</div>
|
|
494
|
-
<div class="type-label">Feature Heading — 24px / 700 / 1.33 / 0px</div>
|
|
495
|
-
</div>
|
|
496
|
-
<div class="type-sample">
|
|
497
|
-
<div class="type-text" style="font-size:20px; font-weight:700; line-height:1.40; letter-spacing:-0.5px;">Sub-heading</div>
|
|
498
|
-
<div class="type-label">Sub-heading — 20px / 700 / 1.40 / -0.5px</div>
|
|
499
|
-
</div>
|
|
500
|
-
<div class="type-sample">
|
|
501
|
-
<div class="type-text" style="font-size:20px; font-weight:700; line-height:1.40; text-transform:uppercase;">Sub-heading Uppercase</div>
|
|
502
|
-
<div class="type-label">Sub-heading Uppercase — 20px / 700 / 1.40 / uppercase</div>
|
|
503
|
-
</div>
|
|
504
|
-
<div class="type-sample">
|
|
505
|
-
<div class="type-text" style="font-size:18px; font-weight:600; line-height:1.56;">Body Semi — Semi-bold body text for callouts and emphasis</div>
|
|
506
|
-
<div class="type-label">Body Semi — 18px / 600 / 1.56 / 0px</div>
|
|
507
|
-
</div>
|
|
508
|
-
<div class="type-sample">
|
|
509
|
-
<div class="type-text" style="font-size:16px; font-weight:400; line-height:1.50;">Body — Standard reading text with comfortable line-height for content-heavy pages.</div>
|
|
510
|
-
<div class="type-label">Body — 16px / 400 / 1.50 / 0px</div>
|
|
511
|
-
</div>
|
|
512
|
-
<div class="type-sample">
|
|
513
|
-
<div class="type-text" style="font-size:15px; font-weight:400; line-height:1.71;">Body Relaxed — Relaxed line-height for long-form reading passages and editorial content.</div>
|
|
514
|
-
<div class="type-label">Body Relaxed — 15px / 400 / 1.71 / 0px</div>
|
|
515
|
-
</div>
|
|
516
|
-
<div class="type-sample">
|
|
517
|
-
<div class="type-text" style="font-size:15px; font-weight:600; line-height:1.50;">Nav / UI Label</div>
|
|
518
|
-
<div class="type-label">Nav / UI — 15px / 600 / 1.50 / 0px</div>
|
|
519
|
-
</div>
|
|
520
|
-
<div class="type-sample">
|
|
521
|
-
<div class="type-text" style="font-size:14px; font-weight:600; line-height:1.43;">Caption Semi — Emphasized captions</div>
|
|
522
|
-
<div class="type-label">Caption Semi — 14px / 600 / 1.43 / 0px</div>
|
|
523
|
-
</div>
|
|
524
|
-
<div class="type-sample">
|
|
525
|
-
<div class="type-text" style="font-size:13px; font-weight:700; line-height:1.50;">Small Label Bold</div>
|
|
526
|
-
<div class="type-label">Small Label — 13px / 700 / 1.50 / 0px</div>
|
|
527
|
-
</div>
|
|
528
|
-
<div class="type-sample">
|
|
529
|
-
<div class="type-text" style="font-size:12px; font-weight:700; line-height:1.33; text-transform:uppercase;">Micro Uppercase</div>
|
|
530
|
-
<div class="type-label">Micro Uppercase — 12px / 700 / 1.33 / uppercase</div>
|
|
531
|
-
</div>
|
|
532
|
-
<div class="type-sample">
|
|
533
|
-
<div class="type-text" style="font-size:14px; font-weight:500; line-height:1.43; font-family:var(--mono);">Code — Source Code Pro monospace</div>
|
|
534
|
-
<div class="type-label">Code — 14px / 500 / 1.43 / Source Code Pro</div>
|
|
535
|
-
</div>
|
|
536
|
-
</section>
|
|
537
|
-
|
|
538
|
-
<!-- 3. BUTTONS -->
|
|
539
|
-
<section class="section" id="buttons">
|
|
540
|
-
<h2 class="section-title">Button Variants</h2>
|
|
541
|
-
<p class="section-subtitle">Inverted for dark surfaces — orange hover flash preserved.</p>
|
|
542
|
-
|
|
543
|
-
<div class="button-grid">
|
|
544
|
-
<div class="button-item">
|
|
545
|
-
<button class="btn-dk-primary">Light Primary</button>
|
|
546
|
-
<span class="btn-label">#fdfdf8 / #23251d / 6px</span>
|
|
547
|
-
</div>
|
|
548
|
-
<div class="button-item">
|
|
549
|
-
<button class="btn-dk-sage">Sage Outline</button>
|
|
550
|
-
<span class="btn-label">#252621 / border / 4px</span>
|
|
551
|
-
</div>
|
|
552
|
-
<div class="button-item">
|
|
553
|
-
<button class="btn-dk-tan">Warm Tan</button>
|
|
554
|
-
<span class="btn-label">dark tan bg / tan text / 4px</span>
|
|
555
|
-
</div>
|
|
556
|
-
<div class="button-item">
|
|
557
|
-
<button class="btn-dk-input">Input Style</button>
|
|
558
|
-
<span class="btn-label">dark surface / muted / 4px</span>
|
|
559
|
-
</div>
|
|
560
|
-
<div class="button-item">
|
|
561
|
-
<button class="btn-dk-ghost">Ghost</button>
|
|
562
|
-
<span class="btn-label">transparent / secondary / 4px</span>
|
|
563
|
-
</div>
|
|
564
|
-
</div>
|
|
565
|
-
</section>
|
|
566
|
-
|
|
567
|
-
<!-- 4. CARDS -->
|
|
568
|
-
<section class="section" id="cards">
|
|
569
|
-
<h2 class="section-title">Card Examples</h2>
|
|
570
|
-
<p class="section-subtitle">Dark surface cards with olive-tinted borders.</p>
|
|
571
|
-
|
|
572
|
-
<div class="card-grid">
|
|
573
|
-
<div class="card card-dk-bordered card-hover">
|
|
574
|
-
<h4>Bordered Card</h4>
|
|
575
|
-
<p class="card-desc">Dark surface with subtle olive border. Hover to see lift effect.</p>
|
|
576
|
-
<p class="card-label">bg: #1c1d1a / border: 1px #3a3b36 / radius: 6px</p>
|
|
577
|
-
</div>
|
|
578
|
-
<div class="card card-dk-elevated">
|
|
579
|
-
<h4>Elevated Card</h4>
|
|
580
|
-
<p class="card-desc">Slightly lighter surface for secondary content groupings.</p>
|
|
581
|
-
<p class="card-label">bg: #252621 / border: 1px #3a3b36 / radius: 6px</p>
|
|
582
|
-
</div>
|
|
583
|
-
<div class="card card-dk-shadow">
|
|
584
|
-
<h4>Deep Shadow Card</h4>
|
|
585
|
-
<p class="card-desc">Dramatic shadow for modals and floating elements on dark backgrounds.</p>
|
|
586
|
-
<p class="card-label">shadow: 0 25px 50px -12px rgba(0,0,0,0.5)</p>
|
|
587
|
-
</div>
|
|
588
|
-
</div>
|
|
589
|
-
</section>
|
|
590
|
-
|
|
591
|
-
<!-- 5. FORMS -->
|
|
592
|
-
<section class="section" id="forms">
|
|
593
|
-
<h2 class="section-title">Form Elements</h2>
|
|
594
|
-
<p class="section-subtitle">Dark surface inputs with blue focus rings.</p>
|
|
595
|
-
|
|
596
|
-
<div class="form-grid">
|
|
597
|
-
<div class="form-group">
|
|
598
|
-
<label>Default Input</label>
|
|
599
|
-
<input type="text" placeholder="Search or ask a question...">
|
|
600
|
-
<span class="form-hint">bg: #1c1d1a / border: #3a3b36 / radius: 4px</span>
|
|
601
|
-
</div>
|
|
602
|
-
<div class="form-group">
|
|
603
|
-
<label>Focus State</label>
|
|
604
|
-
<input type="text" placeholder="Focused input" style="border-color:#3b82f6; box-shadow: 0 0 0 2px rgba(59,130,246,0.3);">
|
|
605
|
-
<span class="form-hint">focus: blue ring rgba(59,130,246,0.3)</span>
|
|
606
|
-
</div>
|
|
607
|
-
<div class="form-group">
|
|
608
|
-
<label>Error State</label>
|
|
609
|
-
<input type="text" class="error" placeholder="Invalid" value="bad input">
|
|
610
|
-
<span class="form-error-text">Validation error — PostHog Orange border</span>
|
|
611
|
-
</div>
|
|
612
|
-
<div class="form-group">
|
|
613
|
-
<label>Textarea</label>
|
|
614
|
-
<textarea placeholder="Type your message..."></textarea>
|
|
615
|
-
<span class="form-hint">Same styles as input, resizable</span>
|
|
616
|
-
</div>
|
|
617
|
-
</div>
|
|
618
|
-
</section>
|
|
619
|
-
|
|
620
|
-
<!-- 6. SPACING -->
|
|
621
|
-
<section class="section" id="spacing">
|
|
622
|
-
<h2 class="section-title">Spacing Scale</h2>
|
|
623
|
-
<p class="section-subtitle">8px base unit system.</p>
|
|
624
|
-
|
|
625
|
-
<div class="spacing-row">
|
|
626
|
-
<div class="spacing-item"><div class="spacing-box" style="width:2px;"></div><span class="spacing-label">2</span></div>
|
|
627
|
-
<div class="spacing-item"><div class="spacing-box" style="width:4px;"></div><span class="spacing-label">4</span></div>
|
|
628
|
-
<div class="spacing-item"><div class="spacing-box" style="width:6px;"></div><span class="spacing-label">6</span></div>
|
|
629
|
-
<div class="spacing-item"><div class="spacing-box" style="width:8px;"></div><span class="spacing-label">8</span></div>
|
|
630
|
-
<div class="spacing-item"><div class="spacing-box" style="width:10px;"></div><span class="spacing-label">10</span></div>
|
|
631
|
-
<div class="spacing-item"><div class="spacing-box" style="width:12px;"></div><span class="spacing-label">12</span></div>
|
|
632
|
-
<div class="spacing-item"><div class="spacing-box" style="width:16px;"></div><span class="spacing-label">16</span></div>
|
|
633
|
-
<div class="spacing-item"><div class="spacing-box" style="width:18px;"></div><span class="spacing-label">18</span></div>
|
|
634
|
-
<div class="spacing-item"><div class="spacing-box" style="width:24px;"></div><span class="spacing-label">24</span></div>
|
|
635
|
-
<div class="spacing-item"><div class="spacing-box" style="width:32px;"></div><span class="spacing-label">32</span></div>
|
|
636
|
-
<div class="spacing-item"><div class="spacing-box" style="width:34px;"></div><span class="spacing-label">34</span></div>
|
|
637
|
-
</div>
|
|
638
|
-
</section>
|
|
639
|
-
|
|
640
|
-
<!-- 7. BORDER RADIUS -->
|
|
641
|
-
<section class="section" id="radius">
|
|
642
|
-
<h2 class="section-title">Border Radius Scale</h2>
|
|
643
|
-
<p class="section-subtitle">Tight and functional — 2px to pill (9999px).</p>
|
|
644
|
-
|
|
645
|
-
<div class="radius-row">
|
|
646
|
-
<div class="radius-item">
|
|
647
|
-
<div class="radius-box" style="border-radius:2px;"></div>
|
|
648
|
-
<span class="radius-label">2px</span>
|
|
649
|
-
<span class="radius-context">Tags, inline</span>
|
|
650
|
-
</div>
|
|
651
|
-
<div class="radius-item">
|
|
652
|
-
<div class="radius-box" style="border-radius:4px;"></div>
|
|
653
|
-
<span class="radius-label">4px</span>
|
|
654
|
-
<span class="radius-context">Buttons, inputs</span>
|
|
655
|
-
</div>
|
|
656
|
-
<div class="radius-item">
|
|
657
|
-
<div class="radius-box" style="border-radius:6px;"></div>
|
|
658
|
-
<span class="radius-label">6px</span>
|
|
659
|
-
<span class="radius-context">Cards, containers</span>
|
|
660
|
-
</div>
|
|
661
|
-
<div class="radius-item">
|
|
662
|
-
<div class="radius-box" style="border-radius:9999px; width:80px; height:40px;"></div>
|
|
663
|
-
<span class="radius-label">9999px</span>
|
|
664
|
-
<span class="radius-context">Pill badges</span>
|
|
665
|
-
</div>
|
|
666
|
-
</div>
|
|
667
|
-
</section>
|
|
668
|
-
|
|
669
|
-
<!-- 8. ELEVATION -->
|
|
670
|
-
<section class="section" id="elevation">
|
|
671
|
-
<h2 class="section-title">Elevation & Depth</h2>
|
|
672
|
-
<p class="section-subtitle">Minimal shadows — borders and surface colors do the heavy lifting.</p>
|
|
673
|
-
|
|
674
|
-
<div class="elevation-section">
|
|
675
|
-
<div class="elevation-grid">
|
|
676
|
-
<div class="elevation-card elev-flat">
|
|
677
|
-
<h4>Level 0 — Flat</h4>
|
|
678
|
-
<p>No shadow, dark surface. Default canvas for most elements.</p>
|
|
679
|
-
</div>
|
|
680
|
-
<div class="elevation-card elev-border">
|
|
681
|
-
<h4>Level 1 — Border</h4>
|
|
682
|
-
<p>1px solid olive-tinted border. Card containment and dividers.</p>
|
|
683
|
-
</div>
|
|
684
|
-
<div class="elevation-card elev-compound">
|
|
685
|
-
<h4>Level 2 — Compound</h4>
|
|
686
|
-
<p>Multiple borders on different sides. Toolbar and input groupings.</p>
|
|
687
|
-
</div>
|
|
688
|
-
<div class="elevation-card elev-deep">
|
|
689
|
-
<h4>Level 3 — Deep Shadow</h4>
|
|
690
|
-
<p>Dramatic shadow for modals, dropdowns, and floating elements.</p>
|
|
691
|
-
</div>
|
|
692
|
-
</div>
|
|
693
|
-
</div>
|
|
694
|
-
</section>
|
|
695
|
-
|
|
696
|
-
<footer class="footer">Maintained by <a href="https://github.com/VoltAgent/voltagent" target="_blank" rel="noopener noreferrer" style="text-decoration:none;"><img src="https://github.com/VoltAgent.png?size=32" alt="VoltAgent" width="14" height="14" style="border-radius:3px;vertical-align:-2px;margin-right:3px;">VoltAgent</a> team</footer>
|
|
697
|
-
|
|
698
|
-
</body>
|
|
699
|
-
</html>
|