oh-my-design-cli 0.1.1 → 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.
Files changed (197) hide show
  1. package/README.ko.md +3 -2
  2. package/README.md +3 -2
  3. package/package.json +3 -3
  4. package/references/Claude-Design-Sys-Prompt.txt +0 -421
  5. package/references/airbnb/README.md +0 -23
  6. package/references/airbnb/preview-dark.html +0 -234
  7. package/references/airbnb/preview.html +0 -233
  8. package/references/airtable/README.md +0 -23
  9. package/references/airtable/preview-dark.html +0 -165
  10. package/references/airtable/preview.html +0 -164
  11. package/references/apple/README.md +0 -24
  12. package/references/apple/preview-dark.html +0 -420
  13. package/references/apple/preview.html +0 -414
  14. package/references/baemin/README.md +0 -19
  15. package/references/bmw/README.md +0 -23
  16. package/references/bmw/preview-dark.html +0 -211
  17. package/references/bmw/preview.html +0 -210
  18. package/references/cal/README.md +0 -23
  19. package/references/cal/preview-dark.html +0 -449
  20. package/references/cal/preview.html +0 -575
  21. package/references/claude/README.md +0 -24
  22. package/references/claude/preview-dark.html +0 -803
  23. package/references/claude/preview.html +0 -826
  24. package/references/clay/README.md +0 -23
  25. package/references/clay/preview-dark.html +0 -316
  26. package/references/clay/preview.html +0 -315
  27. package/references/clickhouse/README.md +0 -24
  28. package/references/clickhouse/preview-dark.html +0 -834
  29. package/references/clickhouse/preview.html +0 -786
  30. package/references/cohere/README.md +0 -24
  31. package/references/cohere/preview-dark.html +0 -803
  32. package/references/cohere/preview.html +0 -807
  33. package/references/coinbase/README.md +0 -23
  34. package/references/coinbase/preview-dark.html +0 -164
  35. package/references/coinbase/preview.html +0 -163
  36. package/references/composio/README.md +0 -24
  37. package/references/composio/preview-dark.html +0 -958
  38. package/references/composio/preview.html +0 -933
  39. package/references/cursor/README.md +0 -24
  40. package/references/cursor/preview-dark.html +0 -393
  41. package/references/cursor/preview.html +0 -383
  42. package/references/dcard/README.md +0 -12
  43. package/references/dcard/_research/forum-1440px.png +0 -0
  44. package/references/dcard/_research.md +0 -77
  45. package/references/elevenlabs/README.md +0 -23
  46. package/references/elevenlabs/preview-dark.html +0 -252
  47. package/references/elevenlabs/preview.html +0 -251
  48. package/references/expo/README.md +0 -24
  49. package/references/expo/preview-dark.html +0 -533
  50. package/references/expo/preview.html +0 -533
  51. package/references/ferrari/README.md +0 -23
  52. package/references/ferrari/preview-dark.html +0 -1162
  53. package/references/ferrari/preview.html +0 -1122
  54. package/references/figma/README.md +0 -24
  55. package/references/figma/preview-dark.html +0 -822
  56. package/references/figma/preview.html +0 -832
  57. package/references/framer/README.md +0 -23
  58. package/references/framer/preview-dark.html +0 -902
  59. package/references/framer/preview.html +0 -883
  60. package/references/freee/README.md +0 -12
  61. package/references/freee/_research/vibes-storybook-1440px.png +0 -0
  62. package/references/freee/_research.md +0 -77
  63. package/references/hashicorp/README.md +0 -24
  64. package/references/hashicorp/preview-dark.html +0 -1202
  65. package/references/hashicorp/preview.html +0 -1193
  66. package/references/ibm/README.md +0 -24
  67. package/references/ibm/preview-dark.html +0 -443
  68. package/references/ibm/preview.html +0 -428
  69. package/references/intercom/README.md +0 -23
  70. package/references/intercom/preview-dark.html +0 -185
  71. package/references/intercom/preview.html +0 -184
  72. package/references/kakao/README.md +0 -18
  73. package/references/karrot/README.md +0 -18
  74. package/references/kraken/README.md +0 -23
  75. package/references/kraken/preview-dark.html +0 -169
  76. package/references/kraken/preview.html +0 -168
  77. package/references/lamborghini/README.md +0 -23
  78. package/references/lamborghini/preview-dark.html +0 -303
  79. package/references/lamborghini/preview.html +0 -381
  80. package/references/line/README.md +0 -12
  81. package/references/line/_research/home-1440px.png +0 -0
  82. package/references/line/_research.md +0 -65
  83. package/references/linear.app/README.md +0 -24
  84. package/references/linear.app/preview-dark.html +0 -383
  85. package/references/linear.app/preview.html +0 -373
  86. package/references/lovable/README.md +0 -24
  87. package/references/lovable/preview-dark.html +0 -349
  88. package/references/lovable/preview.html +0 -348
  89. package/references/mercari/README.md +0 -12
  90. package/references/mercari/_research/home-1440px.png +0 -0
  91. package/references/mercari/_research.md +0 -77
  92. package/references/minimax/README.md +0 -24
  93. package/references/minimax/preview-dark.html +0 -1262
  94. package/references/minimax/preview.html +0 -1248
  95. package/references/mintlify/README.md +0 -24
  96. package/references/mintlify/preview-dark.html +0 -409
  97. package/references/mintlify/preview.html +0 -398
  98. package/references/miro/README.md +0 -23
  99. package/references/miro/preview-dark.html +0 -174
  100. package/references/miro/preview.html +0 -173
  101. package/references/mistral.ai/README.md +0 -24
  102. package/references/mistral.ai/preview-dark.html +0 -806
  103. package/references/mistral.ai/preview.html +0 -805
  104. package/references/mongodb/README.md +0 -23
  105. package/references/mongodb/preview-dark.html +0 -260
  106. package/references/mongodb/preview.html +0 -259
  107. package/references/notion/README.md +0 -24
  108. package/references/notion/preview-dark.html +0 -372
  109. package/references/notion/preview.html +0 -364
  110. package/references/nvidia/README.md +0 -24
  111. package/references/nvidia/preview-dark.html +0 -374
  112. package/references/nvidia/preview.html +0 -366
  113. package/references/ollama/README.md +0 -24
  114. package/references/ollama/preview-dark.html +0 -678
  115. package/references/ollama/preview.html +0 -678
  116. package/references/opencode.ai/README.md +0 -24
  117. package/references/opencode.ai/preview-dark.html +0 -366
  118. package/references/opencode.ai/preview.html +0 -357
  119. package/references/pinkoi/README.md +0 -12
  120. package/references/pinkoi/_research/browse-1440px.png +0 -0
  121. package/references/pinkoi/_research.md +0 -115
  122. package/references/pinterest/README.md +0 -23
  123. package/references/pinterest/preview-dark.html +0 -233
  124. package/references/pinterest/preview.html +0 -232
  125. package/references/posthog/README.md +0 -23
  126. package/references/posthog/preview-dark.html +0 -699
  127. package/references/posthog/preview.html +0 -749
  128. package/references/raycast/README.md +0 -23
  129. package/references/raycast/preview-dark.html +0 -606
  130. package/references/raycast/preview.html +0 -688
  131. package/references/renault/README.md +0 -23
  132. package/references/renault/preview-dark.html +0 -406
  133. package/references/renault/preview.html +0 -606
  134. package/references/replicate/README.md +0 -24
  135. package/references/replicate/preview-dark.html +0 -828
  136. package/references/replicate/preview.html +0 -831
  137. package/references/resend/README.md +0 -23
  138. package/references/resend/preview-dark.html +0 -355
  139. package/references/resend/preview.html +0 -354
  140. package/references/revolut/README.md +0 -23
  141. package/references/revolut/preview-dark.html +0 -234
  142. package/references/revolut/preview.html +0 -233
  143. package/references/runwayml/README.md +0 -24
  144. package/references/runwayml/preview-dark.html +0 -664
  145. package/references/runwayml/preview.html +0 -665
  146. package/references/sanity/README.md +0 -24
  147. package/references/sanity/preview-dark.html +0 -990
  148. package/references/sanity/preview.html +0 -1135
  149. package/references/sentry/README.md +0 -24
  150. package/references/sentry/preview-dark.html +0 -626
  151. package/references/sentry/preview.html +0 -951
  152. package/references/spacex/README.md +0 -23
  153. package/references/spacex/preview-dark.html +0 -221
  154. package/references/spacex/preview.html +0 -220
  155. package/references/spotify/README.md +0 -23
  156. package/references/spotify/preview-dark.html +0 -231
  157. package/references/spotify/preview.html +0 -230
  158. package/references/stripe/README.md +0 -24
  159. package/references/stripe/preview-dark.html +0 -428
  160. package/references/stripe/preview.html +0 -419
  161. package/references/supabase/README.md +0 -24
  162. package/references/supabase/preview-dark.html +0 -977
  163. package/references/supabase/preview.html +0 -955
  164. package/references/superhuman/README.md +0 -23
  165. package/references/superhuman/preview-dark.html +0 -973
  166. package/references/superhuman/preview.html +0 -951
  167. package/references/tesla/README.md +0 -23
  168. package/references/tesla/preview-dark.html +0 -947
  169. package/references/tesla/preview.html +0 -925
  170. package/references/together.ai/README.md +0 -24
  171. package/references/together.ai/preview-dark.html +0 -892
  172. package/references/together.ai/preview.html +0 -897
  173. package/references/toss/README.md +0 -19
  174. package/references/uber/README.md +0 -24
  175. package/references/uber/preview-dark.html +0 -1120
  176. package/references/uber/preview.html +0 -1119
  177. package/references/vercel/README.md +0 -24
  178. package/references/vercel/preview-dark.html +0 -368
  179. package/references/vercel/preview.html +0 -367
  180. package/references/voltagent/README.md +0 -24
  181. package/references/voltagent/preview-dark.html +0 -487
  182. package/references/voltagent/preview.html +0 -766
  183. package/references/warp/README.md +0 -23
  184. package/references/warp/preview-dark.html +0 -500
  185. package/references/warp/preview.html +0 -533
  186. package/references/webflow/README.md +0 -23
  187. package/references/webflow/preview-dark.html +0 -147
  188. package/references/webflow/preview.html +0 -146
  189. package/references/wise/README.md +0 -23
  190. package/references/wise/preview-dark.html +0 -230
  191. package/references/wise/preview.html +0 -229
  192. package/references/x.ai/README.md +0 -24
  193. package/references/x.ai/preview-dark.html +0 -356
  194. package/references/x.ai/preview.html +0 -407
  195. package/references/zapier/README.md +0 -24
  196. package/references/zapier/preview-dark.html +0 -380
  197. package/references/zapier/preview.html +0 -372
package/references/warp/preview.html DELETED
@@ -1,533 +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 Warp</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=Inter:wght@400;500;600&display=swap" rel="stylesheet">
10
- <link href="https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500&display=swap" rel="stylesheet">
11
- <style>
12
- :root {
13
- --bg: #0e0e0d;
14
- --bg-surface: #161615;
15
- --parchment: #faf9f6;
16
- --ash: #afaeac;
17
- --stone: #868584;
18
- --purple-gray: #666469;
19
- --earth: #353534;
20
- --charcoal: #454545;
21
- --border: rgba(226, 226, 226, 0.35);
22
- --border-subtle: rgba(226, 226, 226, 0.15);
23
- --frosted: rgba(255, 255, 255, 0.04);
24
- --frosted-btn: rgba(255, 255, 255, 0.16);
25
- --font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
26
- --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, monospace;
27
- }
28
- * { margin: 0; padding: 0; box-sizing: border-box; }
29
- body {
30
- font-family: var(--font);
31
- background: var(--bg);
32
- color: var(--parchment);
33
- line-height: 1.4;
34
- -webkit-font-smoothing: antialiased;
35
- }
36
-
37
- .nav {
38
- position: sticky; top: 0; z-index: 100;
39
- display: flex; align-items: center; justify-content: space-between;
40
- padding: 14px 32px;
41
- background: rgba(14, 14, 13, 0.9);
42
- backdrop-filter: blur(12px);
43
- border-bottom: 1px solid var(--border-subtle);
44
- }
45
- .nav-brand { font-size: 15px; font-weight: 500; color: var(--parchment); letter-spacing: -0.15px; }
46
- .nav-links { display: flex; gap: 24px; align-items: center; list-style: none; }
47
- .nav-links a {
48
- color: var(--stone); text-decoration: none; font-size: 16px; font-weight: 400;
49
- transition: color 0.2s;
50
- }
51
- .nav-links a:hover { color: var(--parchment); }
52
- .nav-cta {
53
- background: var(--earth); color: var(--ash) !important;
54
- padding: 8px 20px; border-radius: 50px; font-weight: 500; font-size: 14px;
55
- transition: opacity 0.2s;
56
- }
57
- .nav-cta:hover { opacity: 0.8; }
58
-
59
- .hero {
60
- padding: 120px 32px 100px; text-align: center;
61
- max-width: 1200px; margin: 0 auto;
62
- }
63
- .hero h1 {
64
- font-size: 72px; font-weight: 400; letter-spacing: -2.4px; line-height: 1.0;
65
- color: var(--parchment); margin-bottom: 20px;
66
- }
67
- .hero .subtitle {
68
- font-size: 20px; color: var(--ash); letter-spacing: -0.2px;
69
- line-height: 1.4; max-width: 560px; margin: 0 auto 40px;
70
- }
71
- .hero-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
72
- .btn-primary {
73
- display: inline-flex; align-items: center;
74
- background: var(--earth); color: var(--ash);
75
- padding: 12px 28px; border-radius: 50px;
76
- font-size: 16px; font-weight: 500; text-decoration: none;
77
- border: none; cursor: pointer; transition: opacity 0.2s;
78
- font-family: var(--font);
79
- }
80
- .btn-primary:hover { opacity: 0.8; }
81
- .btn-secondary {
82
- display: inline-flex; align-items: center;
83
- background: transparent; color: var(--parchment);
84
- padding: 12px 28px; border-radius: 50px;
85
- font-size: 16px; font-weight: 400; text-decoration: none;
86
- border: 1px solid var(--border); cursor: pointer;
87
- transition: opacity 0.2s; font-family: var(--font);
88
- }
89
- .btn-secondary:hover { opacity: 0.7; }
90
-
91
- .section { max-width: 1200px; margin: 0 auto; padding: 80px 32px; }
92
- .section-title {
93
- font-size: 48px; font-weight: 400; letter-spacing: -0.96px; line-height: 1.2; margin-bottom: 12px;
94
- }
95
- .section-desc { font-size: 18px; color: var(--ash); margin-bottom: 48px; letter-spacing: -0.18px; line-height: 1.3; }
96
- .section-divider {
97
- border: none; border-top: 1px solid var(--border-subtle);
98
- max-width: 1136px; margin: 0 auto;
99
- }
100
-
101
- .color-group { margin-bottom: 40px; }
102
- .color-group-title {
103
- font-size: 12px; font-weight: 400; color: var(--stone);
104
- text-transform: uppercase; letter-spacing: 2.4px; margin-bottom: 16px;
105
- }
106
- .color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
107
- .color-swatch {
108
- border-radius: 12px; overflow: hidden;
109
- background: var(--bg-surface); border: 1px solid var(--border-subtle);
110
- }
111
- .color-swatch-preview { height: 72px; width: 100%; }
112
- .color-swatch-info { padding: 12px; }
113
- .color-swatch-name { font-size: 14px; font-weight: 500; margin-bottom: 2px; }
114
- .color-swatch-hex { font-family: var(--font-mono); font-size: 11px; color: var(--stone); }
115
- .color-swatch-role { font-size: 11px; color: var(--ash); margin-top: 4px; line-height: 1.4; }
116
-
117
- .type-sample { padding: 24px 0; border-bottom: 1px solid var(--border-subtle); }
118
- .type-sample:last-child { border-bottom: none; }
119
- .type-label {
120
- font-size: 12px; color: var(--stone); letter-spacing: 2.4px;
121
- text-transform: uppercase; margin-bottom: 8px;
122
- }
123
- .type-spec { font-size: 12px; color: var(--stone); margin-top: 8px; }
124
-
125
- .button-showcase { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; }
126
- .btn-tag {
127
- background: var(--frosted-btn); color: var(--parchment);
128
- padding: 4px 12px; border-radius: 6px;
129
- font-size: 14px; font-weight: 400; border: none; cursor: pointer;
130
- transition: opacity 0.2s; font-family: var(--font);
131
- }
132
- .btn-tag:hover { opacity: 0.7; }
133
- .btn-ghost {
134
- background: transparent; color: var(--ash);
135
- padding: 12px 28px; border-radius: 50px;
136
- font-size: 16px; font-weight: 400; border: none; cursor: pointer;
137
- text-decoration: underline; text-underline-offset: 3px;
138
- text-decoration-color: var(--charcoal);
139
- transition: color 0.2s; font-family: var(--font);
140
- }
141
- .btn-ghost:hover { color: var(--parchment); }
142
- .btn-label { display: block; font-size: 11px; color: var(--stone); margin-top: 8px; text-align: center; }
143
- .btn-item { text-align: center; }
144
-
145
- .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
146
- .card {
147
- background: var(--bg-surface); border-radius: 14px; padding: 28px;
148
- border: 1px solid var(--border); transition: border-color 0.3s;
149
- }
150
- .card:hover { border-color: rgba(226, 226, 226, 0.5); }
151
- .card-title { font-size: 22px; font-weight: 500; margin-bottom: 8px; line-height: 1.14; }
152
- .card-text { font-size: 16px; color: var(--ash); line-height: 1.4; }
153
- .card-tag {
154
- display: inline-block; padding: 2px 8px;
155
- background: var(--frosted-btn); border-radius: 4px;
156
- font-size: 12px; font-weight: 400; color: var(--parchment);
157
- margin-bottom: 12px; text-transform: uppercase; letter-spacing: 1.4px;
158
- }
159
-
160
- .form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }
161
- .form-group { display: flex; flex-direction: column; gap: 6px; }
162
- .form-label { font-size: 14px; font-weight: 400; color: var(--stone); text-transform: uppercase; letter-spacing: 1.4px; }
163
- .form-input {
164
- background: var(--bg); border: 1px solid var(--border-subtle);
165
- border-radius: 8px; padding: 12px 14px; color: var(--parchment);
166
- font-size: 16px; font-family: var(--font); outline: none;
167
- transition: border-color 0.2s;
168
- }
169
- .form-input::placeholder { color: var(--stone); }
170
- .form-input:focus { border-color: var(--ash); }
171
- .form-input-error { border-color: #c45050; }
172
- .form-error-text { font-size: 12px; color: #c45050; }
173
- textarea.form-input { min-height: 100px; resize: vertical; }
174
-
175
- .spacing-row { display: flex; align-items: center; gap: 16px; margin-bottom: 10px; }
176
- .spacing-box { height: 28px; background: var(--ash); border-radius: 4px; opacity: 0.3; }
177
- .spacing-label { font-size: 12px; color: var(--stone); min-width: 50px; text-align: right; font-family: var(--font-mono); }
178
-
179
- .radius-row { display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-end; }
180
- .radius-item { text-align: center; }
181
- .radius-box {
182
- width: 64px; height: 64px;
183
- background: var(--frosted); border: 1px solid var(--border-subtle); margin-bottom: 8px;
184
- }
185
- .radius-value { font-size: 11px; color: var(--stone); font-family: var(--font-mono); }
186
- .radius-context { font-size: 10px; color: var(--purple-gray); margin-top: 2px; }
187
-
188
- .elevation-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; }
189
- .elevation-card { padding: 24px; border-radius: 12px; background: var(--bg-surface); min-height: 110px; }
190
- .elevation-label { font-size: 14px; font-weight: 500; margin-bottom: 6px; }
191
- .elevation-desc { font-size: 13px; color: var(--ash); line-height: 1.5; }
192
-
193
- .footer {
194
- text-align: center; padding: 48px 32px;
195
- border-top: 1px solid var(--border-subtle); margin-top: 40px;
196
- }
197
- .footer p { font-size: 13px; color: var(--stone); }
198
- .footer a { color: var(--ash); text-decoration: underline; text-decoration-color: var(--charcoal); }
199
-
200
- @media (max-width: 768px) {
201
- .hero h1 { font-size: 48px; letter-spacing: -1.5px; }
202
- .section-title { font-size: 36px; letter-spacing: -0.7px; }
203
- .nav-links { display: none; }
204
- .color-grid { grid-template-columns: repeat(2, 1fr); }
205
- .card-grid { grid-template-columns: 1fr; }
206
- .form-grid { grid-template-columns: 1fr; }
207
- .elevation-grid { grid-template-columns: 1fr; }
208
- }
209
- </style>
210
- </head>
211
- <body>
212
-
213
- <nav class="nav">
214
- <span class="nav-brand">awesome-design-md</span>
215
- <ul class="nav-links">
216
- <li><a href="#colors">Colors</a></li>
217
- <li><a href="#typography">Typography</a></li>
218
- <li><a href="#buttons">Buttons</a></li>
219
- <li><a href="#cards">Cards</a></li>
220
- <li><a href="#forms">Forms</a></li>
221
- <li><a href="#elevation">Elevation</a></li>
222
- <li><a href="#" class="nav-cta">Download</a></li>
223
- </ul>
224
- </nav>
225
-
226
- <section class="hero">
227
- <h1>Design System<br>Inspired by Warp</h1>
228
- <p class="subtitle">A visual catalog of design tokens, components, and patterns extracted from Warp's warm-dark marketing site and documented in DESIGN.md.</p>
229
- <div class="hero-buttons">
230
- <a href="#colors" class="btn-primary">Explore Tokens</a>
231
- <a href="#buttons" class="btn-secondary">View Components</a>
232
- </div>
233
- </section>
234
-
235
- <hr class="section-divider">
236
-
237
- <section class="section" id="colors">
238
- <h2 class="section-title">Color Palette</h2>
239
- <p class="section-desc">Almost monochromatic warm grays — from warm parchment text to earth-tone dark surfaces. No bold accents.</p>
240
-
241
- <div class="color-group">
242
- <h3 class="color-group-title">Primary</h3>
243
- <div class="color-grid">
244
- <div class="color-swatch">
245
- <div class="color-swatch-preview" style="background: #faf9f6;"></div>
246
- <div class="color-swatch-info">
247
- <div class="color-swatch-name">Warm Parchment</div>
248
- <div class="color-swatch-hex">#faf9f6</div>
249
- <div class="color-swatch-role">Primary text, barely-cream off-white</div>
250
- </div>
251
- </div>
252
- <div class="color-swatch">
253
- <div class="color-swatch-preview" style="background: #353534;"></div>
254
- <div class="color-swatch-info">
255
- <div class="color-swatch-name">Earth Gray</div>
256
- <div class="color-swatch-hex">#353534</div>
257
- <div class="color-swatch-role">Button backgrounds, dark surfaces</div>
258
- </div>
259
- </div>
260
- <div class="color-swatch">
261
- <div class="color-swatch-preview" style="background: #0e0e0d; border: 1px solid var(--border-subtle);"></div>
262
- <div class="color-swatch-info">
263
- <div class="color-swatch-name">Deep Void</div>
264
- <div class="color-swatch-hex">#0e0e0d</div>
265
- <div class="color-swatch-role">Page background, warm near-black</div>
266
- </div>
267
- </div>
268
- </div>
269
- </div>
270
-
271
- <div class="color-group">
272
- <h3 class="color-group-title">Neutrals & Text</h3>
273
- <div class="color-grid">
274
- <div class="color-swatch">
275
- <div class="color-swatch-preview" style="background: #afaeac;"></div>
276
- <div class="color-swatch-info">
277
- <div class="color-swatch-name">Ash Gray</div>
278
- <div class="color-swatch-hex">#afaeac</div>
279
- <div class="color-swatch-role">Body text, button text</div>
280
- </div>
281
- </div>
282
- <div class="color-swatch">
283
- <div class="color-swatch-preview" style="background: #868584;"></div>
284
- <div class="color-swatch-info">
285
- <div class="color-swatch-name">Stone Gray</div>
286
- <div class="color-swatch-hex">#868584</div>
287
- <div class="color-swatch-role">Secondary text, labels</div>
288
- </div>
289
- </div>
290
- <div class="color-swatch">
291
- <div class="color-swatch-preview" style="background: #666469;"></div>
292
- <div class="color-swatch-info">
293
- <div class="color-swatch-name">Purple-Tint Gray</div>
294
- <div class="color-swatch-hex">#666469</div>
295
- <div class="color-swatch-role">Link text, subtle purple undertone</div>
296
- </div>
297
- </div>
298
- </div>
299
- </div>
300
-
301
- <div class="color-group">
302
- <h3 class="color-group-title">Surface & Border</h3>
303
- <div class="color-grid">
304
- <div class="color-swatch">
305
- <div class="color-swatch-preview" style="background: rgba(255,255,255,0.04); border: 1px solid var(--border-subtle);"></div>
306
- <div class="color-swatch-info">
307
- <div class="color-swatch-name">Frosted Veil</div>
308
- <div class="color-swatch-hex">rgba(255,255,255,0.04)</div>
309
- <div class="color-swatch-role">Subtle surface overlay</div>
310
- </div>
311
- </div>
312
- <div class="color-swatch">
313
- <div class="color-swatch-preview" style="background: rgba(226,226,226,0.35);"></div>
314
- <div class="color-swatch-info">
315
- <div class="color-swatch-name">Mist Border</div>
316
- <div class="color-swatch-hex">rgba(226,226,226,0.35)</div>
317
- <div class="color-swatch-role">Card borders, containment</div>
318
- </div>
319
- </div>
320
- <div class="color-swatch">
321
- <div class="color-swatch-preview" style="background: rgba(255,255,255,0.16);"></div>
322
- <div class="color-swatch-info">
323
- <div class="color-swatch-name">Frosted Button</div>
324
- <div class="color-swatch-hex">rgba(255,255,255,0.16)</div>
325
- <div class="color-swatch-role">Tag/inline button background</div>
326
- </div>
327
- </div>
328
- </div>
329
- </div>
330
- </section>
331
-
332
- <hr class="section-divider">
333
-
334
- <section class="section" id="typography">
335
- <h2 class="section-title">Typography Scale</h2>
336
- <p class="section-desc">Matter font family — geometric but approachable. Regular weight dominance with editorial uppercase labels.</p>
337
-
338
- <div class="type-sample">
339
- <div class="type-label">Display Hero — 80px / 400 / 1.00 / -2.4px</div>
340
- <div style="font-size: 72px; font-weight: 400; line-height: 1.0; letter-spacing: -2.4px;">The best terminal</div>
341
- <div class="type-spec">Matter Regular (shown in Inter fallback) — maximum compression</div>
342
- </div>
343
-
344
- <div class="type-sample">
345
- <div class="type-label">Section Display — 56px / 400 / 1.20 / -0.56px</div>
346
- <div style="font-size: 48px; font-weight: 400; line-height: 1.2; letter-spacing: -0.56px;">Development environment</div>
347
- <div class="type-spec">Matter Regular — feature section headings</div>
348
- </div>
349
-
350
- <div class="type-sample">
351
- <div class="type-label">Feature Heading — 40px / 400 / 1.10 / -0.4px</div>
352
- <div style="font-size: 40px; font-weight: 400; line-height: 1.1; letter-spacing: -0.4px;">Agents that actually work</div>
353
- <div class="type-spec">Matter Regular — feature block titles</div>
354
- </div>
355
-
356
- <div class="type-sample">
357
- <div class="type-label">Card Title — 22px / 500 / 1.14</div>
358
- <div style="font-size: 22px; font-weight: 500; line-height: 1.14;">Everything you need to ship faster</div>
359
- <div class="type-spec">Matter Medium — emphasized card headers</div>
360
- </div>
361
-
362
- <div class="type-sample">
363
- <div class="type-label">Body Large — 20px / 400 / 1.40 / -0.2px</div>
364
- <div style="font-size: 20px; font-weight: 400; line-height: 1.4; letter-spacing: -0.2px; color: var(--ash);">Warp is the terminal reimagined with AI and collaborative tools for modern development teams.</div>
365
- <div class="type-spec">Matter Regular — relaxed reading rhythm</div>
366
- </div>
367
-
368
- <div class="type-sample">
369
- <div class="type-label">Body — 18px / 400 / 1.30 / -0.18px</div>
370
- <div style="font-size: 18px; font-weight: 400; line-height: 1.3; letter-spacing: -0.18px; color: var(--ash);">Built from the ground up in Rust for speed, with AI integrated at every level.</div>
371
- <div class="type-spec">Matter Regular — standard body paragraphs</div>
372
- </div>
373
-
374
- <div class="type-sample">
375
- <div class="type-label">Uppercase Label — 12px / 400 / 1.35 / 2.4px</div>
376
- <div style="font-size: 12px; font-weight: 400; line-height: 1.35; letter-spacing: 2.4px; text-transform: uppercase; color: var(--stone);">Featured Integration</div>
377
- <div class="type-spec">Matter Regular — editorial categorization, wide tracking</div>
378
- </div>
379
-
380
- <div class="type-sample">
381
- <div class="type-label">Code — 16px / 400 / 1.00</div>
382
- <div style="font-family: var(--font-mono); font-size: 16px; font-weight: 400; line-height: 1.0; color: var(--parchment);">curl -fsSL https://warp.dev/install | bash</div>
383
- <div class="type-spec">Geist Mono / Matter Mono Regular — terminal display</div>
384
- </div>
385
- </section>
386
-
387
- <hr class="section-divider">
388
-
389
- <section class="section" id="buttons">
390
- <h2 class="section-title">Button Variants</h2>
391
- <p class="section-desc">Restrained and muted — dark pills, frosted tags, underline ghosts. No bright CTAs.</p>
392
-
393
- <div class="button-showcase">
394
- <div class="btn-item">
395
- <a href="#" class="btn-primary">Download Warp</a>
396
- <span class="btn-label">Dark Pill / Primary</span>
397
- </div>
398
- <div class="btn-item">
399
- <a href="#" class="btn-secondary">Learn More</a>
400
- <span class="btn-label">Border Pill / Secondary</span>
401
- </div>
402
- <div class="btn-item">
403
- <button class="btn-tag">New Feature</button>
404
- <span class="btn-label">Frosted Tag / 6px</span>
405
- </div>
406
- <div class="btn-item">
407
- <button class="btn-ghost">Read the blog</button>
408
- <span class="btn-label">Ghost / Underline</span>
409
- </div>
410
- <div class="btn-item">
411
- <a href="#" class="btn-primary" style="padding: 8px 20px; font-size: 14px;">Sign Up</a>
412
- <span class="btn-label">Small / Nav CTA</span>
413
- </div>
414
- </div>
415
- </section>
416
-
417
- <hr class="section-divider">
418
-
419
- <section class="section" id="cards">
420
- <h2 class="section-title">Card Examples</h2>
421
- <p class="section-desc">Semi-transparent borders for containment, warm dark surfaces, editorial category tags.</p>
422
-
423
- <div class="card-grid">
424
- <div class="card">
425
- <div class="card-tag">Terminal</div>
426
- <h3 class="card-title">Built in Rust</h3>
427
- <p class="card-text">Blazingly fast terminal performance with native rendering and GPU acceleration for the smoothest experience.</p>
428
- </div>
429
- <div class="card">
430
- <div class="card-tag">AI Agent</div>
431
- <h3 class="card-title">Agent Mode</h3>
432
- <p class="card-text">Let AI agents handle complex terminal workflows — from debugging to deployment — while you focus on building.</p>
433
- </div>
434
- <div class="card">
435
- <div class="card-tag">Collaboration</div>
436
- <h3 class="card-title">Shared Workflows</h3>
437
- <p class="card-text">Share terminal sessions, commands, and configurations with your team. Real-time collaborative development.</p>
438
- </div>
439
- </div>
440
- </section>
441
-
442
- <hr class="section-divider">
443
-
444
- <section class="section" id="forms">
445
- <h2 class="section-title">Form Elements</h2>
446
- <p class="section-desc">Warm dark inputs with subtle borders. Focus brightens the border — no colored rings.</p>
447
-
448
- <div class="form-grid">
449
- <div class="form-group">
450
- <label class="form-label">Full Name</label>
451
- <input type="text" class="form-input" placeholder="Enter your name">
452
- </div>
453
- <div class="form-group">
454
- <label class="form-label">Email (Focus)</label>
455
- <input type="email" class="form-input" placeholder="you@warp.dev" style="border-color: var(--ash);">
456
- </div>
457
- <div class="form-group">
458
- <label class="form-label">API Key (Error)</label>
459
- <input type="text" class="form-input form-input-error" value="invalid-key">
460
- <span class="form-error-text">Invalid key format</span>
461
- </div>
462
- <div class="form-group">
463
- <label class="form-label">Description</label>
464
- <textarea class="form-input" placeholder="Describe your workflow..."></textarea>
465
- </div>
466
- </div>
467
- </section>
468
-
469
- <hr class="section-divider">
470
-
471
- <section class="section" id="spacing">
472
- <h2 class="section-title">Spacing Scale</h2>
473
- <p class="section-desc">8px base unit with editorial-grade spacing for the magazine-like layout.</p>
474
-
475
- <div>
476
- <div class="spacing-row"><span class="spacing-label">4px</span><div class="spacing-box" style="width: 16px;"></div></div>
477
- <div class="spacing-row"><span class="spacing-label">8px</span><div class="spacing-box" style="width: 36px;"></div></div>
478
- <div class="spacing-row"><span class="spacing-label">12px</span><div class="spacing-box" style="width: 56px;"></div></div>
479
- <div class="spacing-row"><span class="spacing-label">16px</span><div class="spacing-box" style="width: 80px;"></div></div>
480
- <div class="spacing-row"><span class="spacing-label">24px</span><div class="spacing-box" style="width: 128px;"></div></div>
481
- <div class="spacing-row"><span class="spacing-label">32px</span><div class="spacing-box" style="width: 180px;"></div></div>
482
- <div class="spacing-row"><span class="spacing-label">36px</span><div class="spacing-box" style="width: 210px;"></div></div>
483
- </div>
484
- </section>
485
-
486
- <hr class="section-divider">
487
-
488
- <section class="section" id="radius">
489
- <h2 class="section-title">Border Radius Scale</h2>
490
- <p class="section-desc">From small tags to full pill CTAs — radius grows with element prominence.</p>
491
-
492
- <div class="radius-row">
493
- <div class="radius-item"><div class="radius-box" style="border-radius: 4px;"></div><div class="radius-value">4px</div><div class="radius-context">Tags</div></div>
494
- <div class="radius-item"><div class="radius-box" style="border-radius: 6px;"></div><div class="radius-value">6px</div><div class="radius-context">Buttons</div></div>
495
- <div class="radius-item"><div class="radius-box" style="border-radius: 8px;"></div><div class="radius-value">8px</div><div class="radius-context">Images</div></div>
496
- <div class="radius-item"><div class="radius-box" style="border-radius: 12px;"></div><div class="radius-value">12px</div><div class="radius-context">Cards</div></div>
497
- <div class="radius-item"><div class="radius-box" style="border-radius: 14px;"></div><div class="radius-value">14px</div><div class="radius-context">Large cards</div></div>
498
- <div class="radius-item"><div class="radius-box" style="border-radius: 40px;"></div><div class="radius-value">40px</div><div class="radius-context">Sections</div></div>
499
- <div class="radius-item"><div class="radius-box" style="border-radius: 50px; width: 64px; height: 40px;"></div><div class="radius-value">50px</div><div class="radius-context">Pill CTA</div></div>
500
- <div class="radius-item"><div class="radius-box" style="border-radius: 200px; width: 120px; height: 12px;"></div><div class="radius-value">200px</div><div class="radius-context">Progress bar</div></div>
501
- </div>
502
- </section>
503
-
504
- <hr class="section-divider">
505
-
506
- <section class="section" id="elevation">
507
- <h2 class="section-title">Elevation & Depth</h2>
508
- <p class="section-desc">Remarkably flat — depth through borders and photography, not shadows.</p>
509
-
510
- <div class="elevation-grid">
511
- <div class="elevation-card" style="box-shadow: none; border: 1px solid var(--border-subtle);">
512
- <div class="elevation-label">Level 0 — Flat</div>
513
- <div class="elevation-desc">No shadow. The warm dark canvas baseline. Most surfaces rest here.</div>
514
- </div>
515
- <div class="elevation-card" style="background: rgba(255,255,255,0.04); border: 1px solid var(--border-subtle);">
516
- <div class="elevation-label">Level 1 — Veil</div>
517
- <div class="elevation-desc">Ultra-subtle white overlay (rgba(255,255,255,0.04)). Barely visible differentiation.</div>
518
- </div>
519
- <div class="elevation-card" style="border: 1px solid var(--border);">
520
- <div class="elevation-label">Level 2 — Border</div>
521
- <div class="elevation-desc">Semi-transparent border (rgba(226,226,226,0.35)). Ghostly containment for cards.</div>
522
- </div>
523
- <div class="elevation-card" style="box-shadow: rgba(0,0,0,0.2) 0px 5px 15px; border: 1px solid var(--border-subtle);">
524
- <div class="elevation-label">Level 3 — Ambient</div>
525
- <div class="elevation-desc">Subtle ambient shadow for floating elements. Used sparingly.</div>
526
- </div>
527
- </div>
528
- </section>
529
-
530
- <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>
531
-
532
- </body>
533
- </html>
package/references/webflow/README.md DELETED
@@ -1,23 +0,0 @@
1
- # Webflow Inspired Design System
2
-
3
- [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/webflow/DESIGN.md) extracted from the public [Webflow](https://webflow.com/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
4
-
5
- ## Files
6
-
7
- | File | Description |
8
- |------|-------------|
9
- | `DESIGN.md` | Complete design system documentation (9 sections) |
10
- | `preview.html` | Interactive design token catalog (light) |
11
- | `preview-dark.html` | Interactive design token catalog (dark) |
12
-
13
- Use [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/webflow/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Webflow design language.
14
-
15
- ## Preview
16
-
17
- A sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.
18
-
19
- ### Dark Mode
20
- ![Webflow Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/webflow/preview-dark-screenshot.png)
21
-
22
- ### Light Mode
23
- ![Webflow Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/webflow/preview-screenshot.png)