awesome-design-md 1.0.0

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 (220) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +172 -0
  3. package/bin/cli.mjs +126 -0
  4. package/design-md/airbnb/DESIGN.md +246 -0
  5. package/design-md/airbnb/README.md +23 -0
  6. package/design-md/airbnb/preview-dark.html +234 -0
  7. package/design-md/airbnb/preview.html +233 -0
  8. package/design-md/airtable/DESIGN.md +89 -0
  9. package/design-md/airtable/README.md +23 -0
  10. package/design-md/airtable/preview-dark.html +165 -0
  11. package/design-md/airtable/preview.html +164 -0
  12. package/design-md/apple/DESIGN.md +313 -0
  13. package/design-md/apple/README.md +24 -0
  14. package/design-md/apple/preview-dark.html +422 -0
  15. package/design-md/apple/preview.html +416 -0
  16. package/design-md/bmw/DESIGN.md +180 -0
  17. package/design-md/bmw/README.md +23 -0
  18. package/design-md/bmw/preview-dark.html +211 -0
  19. package/design-md/bmw/preview.html +210 -0
  20. package/design-md/cal/DESIGN.md +259 -0
  21. package/design-md/cal/README.md +23 -0
  22. package/design-md/cal/preview-dark.html +449 -0
  23. package/design-md/cal/preview.html +575 -0
  24. package/design-md/claude/DESIGN.md +312 -0
  25. package/design-md/claude/README.md +24 -0
  26. package/design-md/claude/preview-dark.html +803 -0
  27. package/design-md/claude/preview.html +826 -0
  28. package/design-md/clay/DESIGN.md +304 -0
  29. package/design-md/clay/README.md +23 -0
  30. package/design-md/clay/preview-dark.html +318 -0
  31. package/design-md/clay/preview.html +317 -0
  32. package/design-md/clickhouse/DESIGN.md +281 -0
  33. package/design-md/clickhouse/README.md +24 -0
  34. package/design-md/clickhouse/preview-dark.html +834 -0
  35. package/design-md/clickhouse/preview.html +786 -0
  36. package/design-md/cohere/DESIGN.md +266 -0
  37. package/design-md/cohere/README.md +24 -0
  38. package/design-md/cohere/preview-dark.html +810 -0
  39. package/design-md/cohere/preview.html +814 -0
  40. package/design-md/coinbase/DESIGN.md +129 -0
  41. package/design-md/coinbase/README.md +23 -0
  42. package/design-md/coinbase/preview-dark.html +164 -0
  43. package/design-md/coinbase/preview.html +163 -0
  44. package/design-md/composio/DESIGN.md +307 -0
  45. package/design-md/composio/README.md +24 -0
  46. package/design-md/composio/preview-dark.html +958 -0
  47. package/design-md/composio/preview.html +933 -0
  48. package/design-md/cursor/DESIGN.md +309 -0
  49. package/design-md/cursor/README.md +24 -0
  50. package/design-md/cursor/preview-dark.html +395 -0
  51. package/design-md/cursor/preview.html +385 -0
  52. package/design-md/elevenlabs/DESIGN.md +265 -0
  53. package/design-md/elevenlabs/README.md +23 -0
  54. package/design-md/elevenlabs/preview-dark.html +254 -0
  55. package/design-md/elevenlabs/preview.html +253 -0
  56. package/design-md/expo/DESIGN.md +281 -0
  57. package/design-md/expo/README.md +24 -0
  58. package/design-md/expo/preview-dark.html +536 -0
  59. package/design-md/expo/preview.html +536 -0
  60. package/design-md/figma/DESIGN.md +220 -0
  61. package/design-md/figma/README.md +24 -0
  62. package/design-md/figma/preview-dark.html +831 -0
  63. package/design-md/figma/preview.html +841 -0
  64. package/design-md/framer/DESIGN.md +246 -0
  65. package/design-md/framer/README.md +23 -0
  66. package/design-md/framer/preview-dark.html +904 -0
  67. package/design-md/framer/preview.html +885 -0
  68. package/design-md/hashicorp/DESIGN.md +278 -0
  69. package/design-md/hashicorp/README.md +24 -0
  70. package/design-md/hashicorp/preview-dark.html +1206 -0
  71. package/design-md/hashicorp/preview.html +1195 -0
  72. package/design-md/ibm/DESIGN.md +332 -0
  73. package/design-md/ibm/README.md +24 -0
  74. package/design-md/ibm/preview-dark.html +445 -0
  75. package/design-md/ibm/preview.html +430 -0
  76. package/design-md/intercom/DESIGN.md +146 -0
  77. package/design-md/intercom/README.md +23 -0
  78. package/design-md/intercom/preview-dark.html +185 -0
  79. package/design-md/intercom/preview.html +184 -0
  80. package/design-md/kraken/DESIGN.md +125 -0
  81. package/design-md/kraken/README.md +23 -0
  82. package/design-md/kraken/preview-dark.html +169 -0
  83. package/design-md/kraken/preview.html +168 -0
  84. package/design-md/linear.app/DESIGN.md +367 -0
  85. package/design-md/linear.app/README.md +24 -0
  86. package/design-md/linear.app/preview-dark.html +385 -0
  87. package/design-md/linear.app/preview.html +375 -0
  88. package/design-md/lovable/DESIGN.md +298 -0
  89. package/design-md/lovable/README.md +24 -0
  90. package/design-md/lovable/preview-dark.html +351 -0
  91. package/design-md/lovable/preview.html +350 -0
  92. package/design-md/minimax/DESIGN.md +257 -0
  93. package/design-md/minimax/README.md +24 -0
  94. package/design-md/minimax/preview-dark.html +1267 -0
  95. package/design-md/minimax/preview.html +1253 -0
  96. package/design-md/mintlify/DESIGN.md +326 -0
  97. package/design-md/mintlify/README.md +24 -0
  98. package/design-md/mintlify/preview-dark.html +411 -0
  99. package/design-md/mintlify/preview.html +400 -0
  100. package/design-md/miro/DESIGN.md +108 -0
  101. package/design-md/miro/README.md +23 -0
  102. package/design-md/miro/preview-dark.html +174 -0
  103. package/design-md/miro/preview.html +173 -0
  104. package/design-md/mistral.ai/DESIGN.md +261 -0
  105. package/design-md/mistral.ai/README.md +24 -0
  106. package/design-md/mistral.ai/preview-dark.html +813 -0
  107. package/design-md/mistral.ai/preview.html +812 -0
  108. package/design-md/mongodb/DESIGN.md +266 -0
  109. package/design-md/mongodb/README.md +23 -0
  110. package/design-md/mongodb/preview-dark.html +262 -0
  111. package/design-md/mongodb/preview.html +261 -0
  112. package/design-md/notion/DESIGN.md +309 -0
  113. package/design-md/notion/README.md +24 -0
  114. package/design-md/notion/preview-dark.html +374 -0
  115. package/design-md/notion/preview.html +366 -0
  116. package/design-md/nvidia/DESIGN.md +293 -0
  117. package/design-md/nvidia/README.md +24 -0
  118. package/design-md/nvidia/preview-dark.html +376 -0
  119. package/design-md/nvidia/preview.html +368 -0
  120. package/design-md/ollama/DESIGN.md +267 -0
  121. package/design-md/ollama/README.md +24 -0
  122. package/design-md/ollama/preview-dark.html +678 -0
  123. package/design-md/ollama/preview.html +678 -0
  124. package/design-md/opencode.ai/DESIGN.md +281 -0
  125. package/design-md/opencode.ai/README.md +24 -0
  126. package/design-md/opencode.ai/preview-dark.html +368 -0
  127. package/design-md/opencode.ai/preview.html +359 -0
  128. package/design-md/pinterest/DESIGN.md +230 -0
  129. package/design-md/pinterest/README.md +23 -0
  130. package/design-md/pinterest/preview-dark.html +233 -0
  131. package/design-md/pinterest/preview.html +232 -0
  132. package/design-md/posthog/DESIGN.md +256 -0
  133. package/design-md/posthog/README.md +23 -0
  134. package/design-md/posthog/preview-dark.html +701 -0
  135. package/design-md/posthog/preview.html +751 -0
  136. package/design-md/raycast/DESIGN.md +268 -0
  137. package/design-md/raycast/README.md +23 -0
  138. package/design-md/raycast/preview-dark.html +608 -0
  139. package/design-md/raycast/preview.html +690 -0
  140. package/design-md/replicate/DESIGN.md +261 -0
  141. package/design-md/replicate/README.md +24 -0
  142. package/design-md/replicate/preview-dark.html +828 -0
  143. package/design-md/replicate/preview.html +831 -0
  144. package/design-md/resend/DESIGN.md +303 -0
  145. package/design-md/resend/README.md +23 -0
  146. package/design-md/resend/preview-dark.html +357 -0
  147. package/design-md/resend/preview.html +356 -0
  148. package/design-md/revolut/DESIGN.md +185 -0
  149. package/design-md/revolut/README.md +23 -0
  150. package/design-md/revolut/preview-dark.html +234 -0
  151. package/design-md/revolut/preview.html +233 -0
  152. package/design-md/runwayml/DESIGN.md +244 -0
  153. package/design-md/runwayml/README.md +24 -0
  154. package/design-md/runwayml/preview-dark.html +664 -0
  155. package/design-md/runwayml/preview.html +665 -0
  156. package/design-md/sanity/DESIGN.md +357 -0
  157. package/design-md/sanity/README.md +24 -0
  158. package/design-md/sanity/preview-dark.html +995 -0
  159. package/design-md/sanity/preview.html +1140 -0
  160. package/design-md/sentry/DESIGN.md +262 -0
  161. package/design-md/sentry/README.md +24 -0
  162. package/design-md/sentry/preview-dark.html +628 -0
  163. package/design-md/sentry/preview.html +953 -0
  164. package/design-md/spacex/DESIGN.md +194 -0
  165. package/design-md/spacex/README.md +23 -0
  166. package/design-md/spacex/preview-dark.html +223 -0
  167. package/design-md/spacex/preview.html +222 -0
  168. package/design-md/spotify/DESIGN.md +246 -0
  169. package/design-md/spotify/README.md +23 -0
  170. package/design-md/spotify/preview-dark.html +231 -0
  171. package/design-md/spotify/preview.html +230 -0
  172. package/design-md/stripe/DESIGN.md +322 -0
  173. package/design-md/stripe/README.md +24 -0
  174. package/design-md/stripe/preview-dark.html +430 -0
  175. package/design-md/stripe/preview.html +421 -0
  176. package/design-md/supabase/DESIGN.md +255 -0
  177. package/design-md/supabase/README.md +24 -0
  178. package/design-md/supabase/preview-dark.html +977 -0
  179. package/design-md/supabase/preview.html +955 -0
  180. package/design-md/superhuman/DESIGN.md +252 -0
  181. package/design-md/superhuman/README.md +23 -0
  182. package/design-md/superhuman/preview-dark.html +975 -0
  183. package/design-md/superhuman/preview.html +953 -0
  184. package/design-md/together.ai/DESIGN.md +263 -0
  185. package/design-md/together.ai/README.md +24 -0
  186. package/design-md/together.ai/preview-dark.html +892 -0
  187. package/design-md/together.ai/preview.html +897 -0
  188. package/design-md/uber/DESIGN.md +295 -0
  189. package/design-md/uber/README.md +24 -0
  190. package/design-md/uber/preview-dark.html +1164 -0
  191. package/design-md/uber/preview.html +1163 -0
  192. package/design-md/vercel/DESIGN.md +310 -0
  193. package/design-md/vercel/README.md +24 -0
  194. package/design-md/vercel/preview-dark.html +370 -0
  195. package/design-md/vercel/preview.html +369 -0
  196. package/design-md/voltagent/DESIGN.md +323 -0
  197. package/design-md/voltagent/README.md +24 -0
  198. package/design-md/voltagent/preview-dark.html +487 -0
  199. package/design-md/voltagent/preview.html +766 -0
  200. package/design-md/warp/DESIGN.md +253 -0
  201. package/design-md/warp/README.md +23 -0
  202. package/design-md/warp/preview-dark.html +502 -0
  203. package/design-md/warp/preview.html +535 -0
  204. package/design-md/webflow/DESIGN.md +92 -0
  205. package/design-md/webflow/README.md +23 -0
  206. package/design-md/webflow/preview-dark.html +147 -0
  207. package/design-md/webflow/preview.html +146 -0
  208. package/design-md/wise/DESIGN.md +173 -0
  209. package/design-md/wise/README.md +23 -0
  210. package/design-md/wise/preview-dark.html +230 -0
  211. package/design-md/wise/preview.html +229 -0
  212. package/design-md/x.ai/DESIGN.md +257 -0
  213. package/design-md/x.ai/README.md +24 -0
  214. package/design-md/x.ai/preview-dark.html +358 -0
  215. package/design-md/x.ai/preview.html +409 -0
  216. package/design-md/zapier/DESIGN.md +328 -0
  217. package/design-md/zapier/README.md +24 -0
  218. package/design-md/zapier/preview-dark.html +382 -0
  219. package/design-md/zapier/preview.html +374 -0
  220. package/package.json +33 -0
package/design-md/clay/preview.html ADDED
@@ -0,0 +1,317 @@
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 Preview: Clay (Light)</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=Space+Mono:wght@400;700&family=DM+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
10
+ <style>
11
+ :root {
12
+ --cream: #faf9f7;
13
+ --black: #000000;
14
+ --white: #ffffff;
15
+ --oat: #dad4c8;
16
+ --oat-light: #eee9df;
17
+ --silver: #9f9b93;
18
+ --charcoal: #55534e;
19
+ --matcha-300: #84e7a5;
20
+ --matcha-600: #078a52;
21
+ --matcha-800: #02492a;
22
+ --slushie-500: #3bd3fd;
23
+ --slushie-800: #0089ad;
24
+ --lemon-400: #f8cc65;
25
+ --lemon-500: #fbbd41;
26
+ --ube-300: #c1b0ff;
27
+ --ube-800: #43089f;
28
+ --pomegranate-400: #fc7981;
29
+ --blueberry-800: #01418d;
30
+ --badge-bg: #f0f8ff;
31
+ --badge-text: #3859f9;
32
+ --focus: rgb(20,110,245);
33
+ --font-sans: 'DM Sans', Arial, sans-serif;
34
+ --font-mono: 'Space Mono', monospace;
35
+ }
36
+ * { margin: 0; padding: 0; box-sizing: border-box; }
37
+ body {
38
+ background: var(--cream);
39
+ color: var(--black);
40
+ font-family: var(--font-sans);
41
+ font-size: 16px; font-weight: 400; line-height: 1.50;
42
+ -webkit-font-smoothing: antialiased;
43
+ }
44
+
45
+ .nav {
46
+ position: sticky; top: 0; z-index: 100;
47
+ display: flex; align-items: center; justify-content: space-between;
48
+ padding: 14px 32px;
49
+ background: rgba(250,249,247,0.9);
50
+ backdrop-filter: blur(12px);
51
+ border-bottom: 1px solid var(--oat);
52
+ }
53
+ .nav-brand { font-size: 15px; font-weight: 600; color: var(--black); text-decoration: none; }
54
+ .nav-links { display: flex; gap: 24px; list-style: none; }
55
+ .nav-links a { font-size: 15px; font-weight: 500; color: var(--charcoal); text-decoration: none; transition: color 0.15s; }
56
+ .nav-links a:hover { color: var(--black); }
57
+ .nav-cta {
58
+ display: inline-block; background: var(--black); color: var(--white);
59
+ padding: 8px 18px; border-radius: 12px; font-size: 14px; font-weight: 500;
60
+ text-decoration: none; transition: all 0.3s;
61
+ }
62
+ .nav-cta:hover { transform: translateY(-2px) rotateZ(-2deg); box-shadow: rgb(0,0,0) -3px 3px; }
63
+
64
+ .hero { padding: 80px 32px 64px; max-width: 1000px; margin: 0 auto; }
65
+ .hero h1 { font-size: 72px; font-weight: 600; line-height: 1.00; letter-spacing: -3.2px; margin-bottom: 16px; }
66
+ .hero p { font-size: 20px; font-weight: 400; line-height: 1.40; color: var(--silver); max-width: 560px; margin-bottom: 32px; }
67
+ .hero-buttons { display: flex; gap: 12px; flex-wrap: wrap; }
68
+ .btn-solid { display: inline-block; background: var(--black); color: var(--white); padding: 10px 20px; border-radius: 12px; font-family: var(--font-sans); font-size: 16px; font-weight: 500; text-decoration: none; cursor: pointer; border: none; transition: all 0.3s; }
69
+ .btn-solid:hover { transform: translateY(-3px) rotateZ(-4deg); box-shadow: rgb(0,0,0) -5px 5px; }
70
+ .btn-outline { display: inline-block; background: transparent; color: var(--black); padding: 10px 20px; border-radius: 4px; border: 1px solid #717989; font-family: var(--font-sans); font-size: 16px; font-weight: 500; text-decoration: none; cursor: pointer; transition: all 0.3s; }
71
+ .btn-outline:hover { background: var(--ube-800); color: white; transform: translateY(-3px) rotateZ(-4deg); box-shadow: rgb(0,0,0) -5px 5px; }
72
+ .btn-white { display: inline-block; background: var(--white); color: var(--black); padding: 8px 16px; border-radius: 12px; border: 1px solid var(--oat); font-family: var(--font-sans); font-size: 14px; font-weight: 500; text-decoration: none; cursor: pointer; transition: all 0.3s; }
73
+ .btn-white:hover { transform: translateY(-2px) rotateZ(-2deg); box-shadow: rgba(0,0,0,0.1) -3px 3px; }
74
+
75
+ .section { padding: 64px 32px; max-width: 1100px; margin: 0 auto; }
76
+ .section-label { font-family: var(--font-mono); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.08px; color: var(--silver); margin-bottom: 8px; }
77
+ .section-title { font-size: 32px; font-weight: 600; line-height: 1.10; letter-spacing: -0.64px; margin-bottom: 32px; }
78
+ .section-divider { border: none; border-top: 1px solid var(--oat); margin: 0; }
79
+ .section-divider-dashed { border: none; border-top: 1px dashed var(--oat); margin: 0; }
80
+
81
+ .color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)); gap: 12px; margin-bottom: 24px; }
82
+ .color-swatch { border-radius: 12px; overflow: hidden; border: 1px solid var(--oat); background: var(--white); }
83
+ .color-swatch-block { height: 68px; width: 100%; }
84
+ .color-swatch-info { padding: 10px; }
85
+ .color-swatch-name { font-size: 12px; font-weight: 600; margin-bottom: 2px; }
86
+ .color-swatch-hex { font-size: 11px; color: var(--silver); font-family: var(--font-mono); }
87
+ .color-swatch-role { font-size: 10px; color: var(--charcoal); margin-top: 3px; }
88
+ .color-group-label { font-size: 14px; font-weight: 600; color: var(--charcoal); margin: 24px 0 10px; }
89
+
90
+ .type-sample { margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--oat-light); }
91
+ .type-sample:last-child { border-bottom: none; }
92
+ .type-meta { font-family: var(--font-mono); font-size: 11px; color: var(--silver); margin-top: 6px; }
93
+
94
+ .button-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
95
+ .button-item { text-align: center; }
96
+ .button-label { font-size: 11px; font-weight: 500; color: var(--silver); margin-top: 8px; }
97
+
98
+ .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
99
+ .card { background: var(--white); border: 1px solid var(--oat); border-radius: 24px; padding: 24px; box-shadow: rgba(0,0,0,0.1) 0px 1px 1px, rgba(0,0,0,0.04) 0px -1px 1px inset, rgba(0,0,0,0.05) 0px -0.5px 1px; }
100
+ .card-dashed { background: var(--white); border: 1px dashed var(--oat); border-radius: 24px; padding: 24px; }
101
+ .card-colored { border-radius: 24px; padding: 24px; color: var(--white); }
102
+ .card h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.4px; margin-bottom: 8px; }
103
+ .card p, .card-dashed p, .card-colored p { font-size: 14px; line-height: 1.50; }
104
+ .card-badge { display: inline-block; font-size: 9.6px; font-weight: 600; padding: 2px 6px; border-radius: 11px; margin-bottom: 12px; }
105
+
106
+ .form-group { margin-bottom: 16px; max-width: 400px; }
107
+ .form-label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 6px; }
108
+ .form-input { width: 100%; background: var(--white); color: var(--black); border: 1px solid #717989; padding: 8px 12px; border-radius: 4px; font-family: var(--font-sans); font-size: 14px; outline: none; }
109
+ .form-input:focus { outline: 2px solid var(--focus); }
110
+ .form-input--focus { outline: 2px solid var(--focus); }
111
+ .form-input--error { border-color: var(--pomegranate-400); outline: 2px solid var(--pomegranate-400); }
112
+ .form-textarea { width: 100%; min-height: 80px; background: var(--white); color: var(--black); border: 1px solid #717989; padding: 8px 12px; border-radius: 4px; font-family: var(--font-sans); font-size: 14px; resize: vertical; outline: none; }
113
+ .form-state-label { font-size: 10px; color: var(--silver); margin-top: 4px; }
114
+
115
+ .spacing-row { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
116
+ .spacing-item { text-align: center; }
117
+ .spacing-block { background: var(--matcha-600); border-radius: 4px; margin-bottom: 6px; height: 28px; }
118
+ .spacing-value { font-family: var(--font-mono); font-size: 10px; color: var(--silver); }
119
+
120
+ .radius-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
121
+ .radius-item { text-align: center; }
122
+ .radius-box { width: 60px; height: 60px; background: var(--lemon-500); margin-bottom: 6px; }
123
+ .radius-label { font-family: var(--font-mono); font-size: 10px; color: var(--silver); }
124
+ .radius-context { font-size: 9px; color: var(--charcoal); }
125
+
126
+ .elevation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
127
+ .elevation-card { background: var(--white); border-radius: 24px; padding: 20px; text-align: center; border: 1px solid var(--oat); }
128
+ .elevation-label { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
129
+ .elevation-desc { font-family: var(--font-mono); font-size: 10px; color: var(--silver); }
130
+
131
+ .footer { padding: 40px 32px; text-align: center; background: var(--white); border-top: 1px solid var(--oat); border-radius: 40px 40px 0 0; font-size: 13px; color: var(--silver); }
132
+ .footer a { color: var(--matcha-600); text-decoration: underline; }
133
+
134
+ @media (max-width: 767px) {
135
+ .hero h1 { font-size: 44px; letter-spacing: -1.32px; }
136
+ .nav-links { display: none; }
137
+ .section { padding: 48px 20px; }
138
+ .card-grid { grid-template-columns: 1fr; }
139
+ }
140
+ </style>
141
+ </head>
142
+ <body>
143
+
144
+ <nav class="nav">
145
+ <a class="nav-brand" href="#">awesome-design-md</a>
146
+ <ul class="nav-links">
147
+ <li><a href="#colors">Colors</a></li>
148
+ <li><a href="#typography">Typography</a></li>
149
+ <li><a href="#buttons">Buttons</a></li>
150
+ <li><a href="#cards">Cards</a></li>
151
+ <li><a href="#forms">Forms</a></li>
152
+ <li><a href="#spacing">Spacing</a></li>
153
+ </ul>
154
+ <a class="nav-cta" href="#">Get Started</a>
155
+ </nav>
156
+
157
+ <section class="hero">
158
+ <h1>Design System<br>Inspired by Clay</h1>
159
+ <p>A design token catalog generated from DESIGN.md. Every color, font, component, and spacing value — visualized.</p>
160
+ <div class="hero-buttons">
161
+ <a class="btn-solid" href="#">Start Building</a>
162
+ <a class="btn-outline" href="#">Documentation</a>
163
+ </div>
164
+ </section>
165
+
166
+ <hr class="section-divider">
167
+
168
+ <section class="section" id="colors">
169
+ <div class="section-label">01 / Colors</div>
170
+ <h2 class="section-title">Color Palette</h2>
171
+
172
+ <div class="color-group-label">Primary</div>
173
+ <div class="color-grid">
174
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#000000"></div><div class="color-swatch-info"><div class="color-swatch-name">Clay Black</div><div class="color-swatch-hex">#000000</div><div class="color-swatch-role">Text, headings</div></div></div>
175
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#ffffff"></div><div class="color-swatch-info"><div class="color-swatch-name">Pure White</div><div class="color-swatch-hex">#ffffff</div><div class="color-swatch-role">Cards, buttons</div></div></div>
176
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#faf9f7"></div><div class="color-swatch-info"><div class="color-swatch-name">Warm Cream</div><div class="color-swatch-hex">#faf9f7</div><div class="color-swatch-role">Page background</div></div></div>
177
+ </div>
178
+
179
+ <div class="color-group-label">Swatch Palette</div>
180
+ <div class="color-grid">
181
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#84e7a5"></div><div class="color-swatch-info"><div class="color-swatch-name">Matcha 300</div><div class="color-swatch-hex">#84e7a5</div><div class="color-swatch-role">Light green</div></div></div>
182
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#078a52"></div><div class="color-swatch-info"><div class="color-swatch-name">Matcha 600</div><div class="color-swatch-hex">#078a52</div><div class="color-swatch-role">Mid green</div></div></div>
183
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#02492a"></div><div class="color-swatch-info"><div class="color-swatch-name">Matcha 800</div><div class="color-swatch-hex">#02492a</div><div class="color-swatch-role">Deep green sections</div></div></div>
184
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#3bd3fd"></div><div class="color-swatch-info"><div class="color-swatch-name">Slushie 500</div><div class="color-swatch-hex">#3bd3fd</div><div class="color-swatch-role">Bright cyan</div></div></div>
185
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#fbbd41"></div><div class="color-swatch-info"><div class="color-swatch-name">Lemon 500</div><div class="color-swatch-hex">#fbbd41</div><div class="color-swatch-role">Primary gold</div></div></div>
186
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#c1b0ff"></div><div class="color-swatch-info"><div class="color-swatch-name">Ube 300</div><div class="color-swatch-hex">#c1b0ff</div><div class="color-swatch-role">Soft lavender</div></div></div>
187
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#43089f"></div><div class="color-swatch-info"><div class="color-swatch-name">Ube 800</div><div class="color-swatch-hex">#43089f</div><div class="color-swatch-role">Deep purple</div></div></div>
188
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#fc7981"></div><div class="color-swatch-info"><div class="color-swatch-name">Pomegranate 400</div><div class="color-swatch-hex">#fc7981</div><div class="color-swatch-role">Coral pink</div></div></div>
189
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#01418d"></div><div class="color-swatch-info"><div class="color-swatch-name">Blueberry 800</div><div class="color-swatch-hex">#01418d</div><div class="color-swatch-role">Deep navy</div></div></div>
190
+ </div>
191
+
192
+ <div class="color-group-label">Neutral & Border</div>
193
+ <div class="color-grid">
194
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#9f9b93"></div><div class="color-swatch-info"><div class="color-swatch-name">Warm Silver</div><div class="color-swatch-hex">#9f9b93</div><div class="color-swatch-role">Secondary text</div></div></div>
195
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#55534e"></div><div class="color-swatch-info"><div class="color-swatch-name">Warm Charcoal</div><div class="color-swatch-hex">#55534e</div><div class="color-swatch-role">Tertiary text</div></div></div>
196
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#dad4c8"></div><div class="color-swatch-info"><div class="color-swatch-name">Oat Border</div><div class="color-swatch-hex">#dad4c8</div><div class="color-swatch-role">Primary border</div></div></div>
197
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#eee9df"></div><div class="color-swatch-info"><div class="color-swatch-name">Oat Light</div><div class="color-swatch-hex">#eee9df</div><div class="color-swatch-role">Secondary border</div></div></div>
198
+ </div>
199
+ </section>
200
+
201
+ <hr class="section-divider-dashed">
202
+
203
+ <section class="section" id="typography">
204
+ <div class="section-label">02 / Typography</div>
205
+ <h2 class="section-title">Typography Scale</h2>
206
+
207
+ <div class="type-sample"><div style="font-size:72px; font-weight:600; line-height:1.00; letter-spacing:-3.2px;">Display Hero</div><div class="type-meta">Display — 80px / 600 / 1.00 / -3.2px / Roobert</div></div>
208
+ <div class="type-sample"><div style="font-size:52px; font-weight:600; line-height:1.00; letter-spacing:-2.4px;">Display Secondary</div><div class="type-meta">Secondary — 60px / 600 / 1.00 / -2.4px / Roobert</div></div>
209
+ <div class="type-sample"><div style="font-size:44px; font-weight:600; line-height:1.10; letter-spacing:-1.32px;">Section Heading</div><div class="type-meta">Section — 44px / 600 / 1.10 / -1.32px / Roobert</div></div>
210
+ <div class="type-sample"><div style="font-size:32px; font-weight:600; line-height:1.10; letter-spacing:-0.64px;">Card Heading</div><div class="type-meta">Card — 32px / 600 / 1.10 / -0.64px / Roobert</div></div>
211
+ <div class="type-sample"><div style="font-size:20px; font-weight:600; line-height:1.40; letter-spacing:-0.4px;">Feature Title</div><div class="type-meta">Feature — 20px / 600 / 1.40 / -0.4px / Roobert</div></div>
212
+ <div class="type-sample"><div style="font-size:18px; font-weight:400; line-height:1.60; letter-spacing:-0.36px;">Body — Go to market with unique data — and the ability to act on it. Clay helps sales teams build pipeline.</div><div class="type-meta">Body — 18px / 400 / 1.60 / -0.36px / Roobert</div></div>
213
+ <div class="type-sample"><div style="font-size:16px; font-weight:500; line-height:1.50; letter-spacing:-0.16px;">Button — Start your free trial</div><div class="type-meta">Button — 16px / 500 / 1.50 / -0.16px / Roobert</div></div>
214
+ <div class="type-sample"><div style="font-size:14px; font-weight:400; line-height:1.50;">Caption — Updated 3 minutes ago</div><div class="type-meta">Caption — 14px / 400 / 1.50 / Roobert</div></div>
215
+ <div class="type-sample"><div style="font-size:12px; font-weight:600; line-height:1.20; text-transform:uppercase; letter-spacing:1.08px;">Uppercase Label</div><div class="type-meta">Label — 12px / 600 / uppercase / 1.08px / Roobert</div></div>
216
+ <div class="type-sample"><div style="font-family:var(--font-mono); font-size:14px; font-weight:400; line-height:1.50; color:var(--matcha-600);">clay.people.enrich({ email: 'user@company.com' })</div><div class="type-meta">Code — 14px / 400 / Space Mono</div></div>
217
+ </section>
218
+
219
+ <hr class="section-divider">
220
+
221
+ <section class="section" id="buttons">
222
+ <div class="section-label">03 / Buttons</div>
223
+ <h2 class="section-title">Button Variants</h2>
224
+ <div class="button-row">
225
+ <div class="button-item"><a class="btn-solid" href="#">Start Building</a><div class="button-label">Primary Solid</div></div>
226
+ <div class="button-item"><a class="btn-white" href="#">Learn More</a><div class="button-label">White Card</div></div>
227
+ <div class="button-item"><a class="btn-outline" href="#">View Docs</a><div class="button-label">Ghost Outlined</div></div>
228
+ <div class="button-item"><span class="card-badge" style="background:var(--badge-bg); color:var(--badge-text);">NEW FEATURE</span><div class="button-label">Badge</div></div>
229
+ </div>
230
+ <p style="font-size:13px; color:var(--silver); margin-top:16px;">Hover over buttons to see the playful rotateZ + hard shadow animation.</p>
231
+ </section>
232
+
233
+ <hr class="section-divider-dashed">
234
+
235
+ <section class="section" id="cards">
236
+ <div class="section-label">04 / Cards</div>
237
+ <h2 class="section-title">Card Examples</h2>
238
+ <div class="card-grid">
239
+ <div class="card">
240
+ <div class="card-badge" style="background:rgba(7,138,82,0.1); color:var(--matcha-600);">Data Enrichment</div>
241
+ <h3>Turn data into action</h3>
242
+ <p style="color:var(--charcoal);">Enrich any record with 100+ data providers. Build automated workflows with Clay tables.</p>
243
+ </div>
244
+ <div class="card-dashed">
245
+ <div class="card-badge" style="background:rgba(67,8,159,0.1); color:var(--ube-800);">Dashed Border</div>
246
+ <h3>Flexible integrations</h3>
247
+ <p style="color:var(--charcoal);">Connect to any CRM, email tool, or data source. Dashed border variant for secondary content.</p>
248
+ </div>
249
+ <div class="card-colored" style="background:var(--matcha-800);">
250
+ <div class="card-badge" style="background:rgba(132,231,165,0.2); color:var(--matcha-300);">Colored Section</div>
251
+ <h3>Growth on autopilot</h3>
252
+ <p style="color:rgba(255,255,255,0.8);">Full-width colored section using the Matcha 800 swatch background.</p>
253
+ </div>
254
+ </div>
255
+ </section>
256
+
257
+ <hr class="section-divider">
258
+
259
+ <section class="section" id="forms">
260
+ <div class="section-label">05 / Forms</div>
261
+ <h2 class="section-title">Form Elements</h2>
262
+ <div class="form-group"><label class="form-label">Company Name</label><input class="form-input" type="text" placeholder="Acme Corp"><div class="form-state-label">Default</div></div>
263
+ <div class="form-group"><label class="form-label">Email</label><input class="form-input form-input--focus" type="email" value="user@clay.com"><div class="form-state-label">Focus (blue ring)</div></div>
264
+ <div class="form-group"><label class="form-label">Domain</label><input class="form-input form-input--error" type="text" value="invalid"><div class="form-state-label">Error (pomegranate ring)</div></div>
265
+ <div class="form-group"><label class="form-label">Notes</label><textarea class="form-textarea" placeholder="Add enrichment notes..."></textarea></div>
266
+ </section>
267
+
268
+ <hr class="section-divider-dashed">
269
+
270
+ <section class="section" id="spacing">
271
+ <div class="section-label">06 / Spacing</div>
272
+ <h2 class="section-title">Spacing Scale</h2>
273
+ <div class="spacing-row">
274
+ <div class="spacing-item"><div class="spacing-block" style="width:2px"></div><div class="spacing-value">2</div></div>
275
+ <div class="spacing-item"><div class="spacing-block" style="width:4px"></div><div class="spacing-value">4</div></div>
276
+ <div class="spacing-item"><div class="spacing-block" style="width:8px"></div><div class="spacing-value">8</div></div>
277
+ <div class="spacing-item"><div class="spacing-block" style="width:12px"></div><div class="spacing-value">12</div></div>
278
+ <div class="spacing-item"><div class="spacing-block" style="width:16px"></div><div class="spacing-value">16</div></div>
279
+ <div class="spacing-item"><div class="spacing-block" style="width:20px"></div><div class="spacing-value">20</div></div>
280
+ <div class="spacing-item"><div class="spacing-block" style="width:24px"></div><div class="spacing-value">24</div></div>
281
+ </div>
282
+ </section>
283
+
284
+ <hr class="section-divider">
285
+
286
+ <section class="section" id="radius">
287
+ <div class="section-label">07 / Radius</div>
288
+ <h2 class="section-title">Border Radius Scale</h2>
289
+ <div class="radius-row">
290
+ <div class="radius-item"><div class="radius-box" style="border-radius:4px"></div><div class="radius-label">4px</div><div class="radius-context">Inputs</div></div>
291
+ <div class="radius-item"><div class="radius-box" style="border-radius:8px"></div><div class="radius-label">8px</div><div class="radius-context">Small cards</div></div>
292
+ <div class="radius-item"><div class="radius-box" style="border-radius:12px"></div><div class="radius-label">12px</div><div class="radius-context">Buttons</div></div>
293
+ <div class="radius-item"><div class="radius-box" style="border-radius:24px"></div><div class="radius-label">24px</div><div class="radius-context">Feature cards</div></div>
294
+ <div class="radius-item"><div class="radius-box" style="border-radius:40px"></div><div class="radius-label">40px</div><div class="radius-context">Sections</div></div>
295
+ <div class="radius-item"><div class="radius-box" style="border-radius:9999px; width:60px; height:60px;"></div><div class="radius-label">pill</div><div class="radius-context">CTAs</div></div>
296
+ </div>
297
+ </section>
298
+
299
+ <hr class="section-divider-dashed">
300
+
301
+ <section class="section" id="elevation">
302
+ <div class="section-label">08 / Elevation</div>
303
+ <h2 class="section-title">Elevation &amp; Depth</h2>
304
+ <div class="elevation-grid">
305
+ <div class="elevation-card"><div class="elevation-label">Level 0: Flat</div><div class="elevation-desc">Cream canvas</div></div>
306
+ <div class="elevation-card" style="box-shadow: rgba(0,0,0,0.1) 0px 1px 1px, rgba(0,0,0,0.04) 0px -1px 1px inset, rgba(0,0,0,0.05) 0px -0.5px 1px;"><div class="elevation-label">Level 1: Clay</div><div class="elevation-desc">Multi-layer + inset</div></div>
307
+ <div class="elevation-card" style="box-shadow: rgb(0,0,0) -7px 7px; transform: rotateZ(-2deg);"><div class="elevation-label">Level 2: Hover Hard</div><div class="elevation-desc">Hard offset shadow</div></div>
308
+ <div class="elevation-card" style="outline: 2px solid rgb(20,110,245);"><div class="elevation-label">Focus</div><div class="elevation-desc">Blue focus ring</div></div>
309
+ </div>
310
+ </section>
311
+
312
+ <footer class="footer">
313
+ Generated from <a href="https://clay.com/">clay.com</a> DESIGN.md — awesome-design-md
314
+ </footer>
315
+
316
+ </body>
317
+ </html>
package/design-md/clickhouse/DESIGN.md ADDED
@@ -0,0 +1,281 @@
1
+ # Design System: ClickHouse
2
+
3
+ ## 1. Visual Theme & Atmosphere
4
+
5
+ ClickHouse's interface is a high-performance cockpit rendered in acid yellow-green on obsidian black — a design that screams "speed" before you read a single word. The entire experience lives in darkness: pure black backgrounds (`#000000`) with dark charcoal cards (`#414141` borders) creating a terminal-grade aesthetic where the only chromatic interruption is the signature neon yellow-green (`#faff69`) that slashes across CTAs, borders, and highlighted moments like a highlighter pen on a dark console.
6
+
7
+ The typography is aggressively heavy — Inter at weight 900 (Black) for the hero headline at 96px creates text blocks that feel like they have physical mass. This "database for AI" site communicates raw power through visual weight: thick type, high-contrast neon accents, and performance stats displayed as oversized numbers. There's nothing subtle about ClickHouse's design, and that's entirely the point — it mirrors the product's promise of extreme speed and performance.
8
+
9
+ What makes ClickHouse distinctive is the electrifying tension between the near-black canvas and the neon yellow-green accent. This color combination (`#faff69` on `#000000`) creates one of the highest-contrast pairings in any tech brand, making every CTA button, every highlighted card, and every accent border impossible to miss. Supporting this is a forest green (`#166534`) for secondary CTAs that adds depth to the action hierarchy without competing with the neon.
10
+
11
+ **Key Characteristics:**
12
+ - Pure black canvas (#000000) with neon yellow-green (#faff69) accent — maximum contrast
13
+ - Extra-heavy display typography: Inter at weight 900 (Black) up to 96px
14
+ - Dark charcoal card system with #414141 borders at 80% opacity
15
+ - Forest green (#166534) secondary CTA buttons
16
+ - Performance stats as oversized display numbers
17
+ - Uppercase labels with wide letter-spacing (1.4px) for navigation structure
18
+ - Active/pressed state shifts text to pale yellow (#f4f692)
19
+ - All links hover to neon yellow-green — unified interactive signal
20
+ - Inset shadows on select elements creating "pressed into the surface" depth
21
+
22
+ ## 2. Color Palette & Roles
23
+
24
+ ### Primary
25
+ - **Neon Volt** (`#faff69`): The signature brand color — a vivid acid yellow-green that's the sole chromatic accent on the black canvas. Used for primary CTAs, accent borders, link hovers, and highlighted moments.
26
+ - **Forest Green** (`#166534`): Secondary CTA color — a deep, saturated green for "Get Started" and primary action buttons that need distinction from the neon.
27
+ - **Dark Forest** (`#14572f`): A darker green variant for borders and secondary accents.
28
+
29
+ ### Secondary & Accent
30
+ - **Pale Yellow** (`#f4f692`): Active/pressed state text color — a softer, more muted version of Neon Volt for state feedback.
31
+ - **Border Olive** (`#4f5100`): A dark olive-yellow for ghost button borders — the neon's muted sibling.
32
+ - **Olive Dark** (`#161600`): The darkest neon-tinted color for subtle brand text.
33
+
34
+ ### Surface & Background
35
+ - **Pure Black** (`#000000`): The primary page background — absolute black for maximum contrast.
36
+ - **Near Black** (`#141414`): Button backgrounds and slightly elevated dark surfaces.
37
+ - **Charcoal** (`#414141`): The primary border color at 80% opacity — the workhorse for card and container containment.
38
+ - **Deep Charcoal** (`#343434`): Darker border variant for subtle division lines.
39
+ - **Hover Gray** (`#3a3a3a`): Button hover state background — slightly lighter than Near Black.
40
+
41
+ ### Neutrals & Text
42
+ - **Pure White** (`#ffffff`): Primary text on dark surfaces.
43
+ - **Silver** (`#a0a0a0`): Secondary body text and muted content.
44
+ - **Mid Gray** (`#585858` at 28%): Subtle gray overlay for depth effects.
45
+ - **Border Gray** (`#e5e7eb`): Light border variant (used in rare light contexts).
46
+
47
+ ### Gradient System
48
+ - **None in the traditional sense.** ClickHouse uses flat color blocks and high-contrast borders. The "gradient" is the contrast itself — neon yellow-green against pure black creates a visual intensity that gradients would dilute.
49
+
50
+ ## 3. Typography Rules
51
+
52
+ ### Font Family
53
+ - **Primary**: `Inter` (Next.js optimized variant `__Inter_d1b8ee`)
54
+ - **Secondary Display**: `Basier` (`__basier_a58b65`), with fallbacks: `Arial, Helvetica`
55
+ - **Code**: `Inconsolata` (`__Inconsolata_a25f62`)
56
+
57
+ ### Hierarchy
58
+
59
+ | Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
60
+ |------|------|------|--------|-------------|----------------|-------|
61
+ | Display Mega | Inter | 96px (6rem) | 900 | 1.00 (tight) | normal | Maximum impact, extra-heavy |
62
+ | Display / Hero | Inter | 72px (4.5rem) | 700 | 1.00 (tight) | normal | Section hero titles |
63
+ | Feature Heading | Basier | 36px (2.25rem) | 600 | 1.30 (tight) | normal | Feature section anchors |
64
+ | Sub-heading | Inter / Basier | 24px (1.5rem) | 600–700 | 1.17–1.38 | normal | Card headings |
65
+ | Feature Title | Inter / Basier | 20px (1.25rem) | 600–700 | 1.40 | normal | Small feature titles |
66
+ | Body Large | Inter | 18px (1.13rem) | 400–700 | 1.56 | normal | Intro paragraphs, button text |
67
+ | Body / Button | Inter | 16px (1rem) | 400–700 | 1.50 | normal | Standard body, nav, buttons |
68
+ | Caption | Inter | 14px (0.88rem) | 400–700 | 1.43 | normal | Metadata, descriptions, links |
69
+ | Uppercase Label | Inter | 14px (0.88rem) | 600 | 1.43 | 1.4px | Section overlines, wide-tracked |
70
+ | Code | Inconsolata | 16px (1rem) | 600 | 1.50 | normal | Code blocks, commands |
71
+ | Small | Inter | 12px (0.75rem) | 500 | 1.33 | normal | Smallest text |
72
+ | Micro | Inter | 11.2px (0.7rem) | 500 | 1.79 (relaxed) | normal | Tags, tiny labels |
73
+
74
+ ### Principles
75
+ - **Weight 900 is the weapon**: The display headline uses Inter Black (900) — a weight most sites never touch. Combined with 96px size, this creates text with a physical, almost architectural presence.
76
+ - **Full weight spectrum**: The system uses 400, 500, 600, 700, and 900 — covering the full gamut. Weight IS hierarchy.
77
+ - **Uppercase with maximum tracking**: Section overlines use 1.4px letter-spacing — wider than most systems — creating bold structural labels that stand out against the dense dark background.
78
+ - **Dual sans-serif**: Inter handles display and body; Basier handles feature section headings at 600 weight. This creates a subtle personality shift between "data/performance" (Inter) and "product/feature" (Basier) contexts.
79
+
80
+ ## 4. Component Stylings
81
+
82
+ ### Buttons
83
+
84
+ **Neon Primary**
85
+ - Background: Neon Volt (`#faff69`)
86
+ - Text: Near Black (`#151515`)
87
+ - Padding: 0px 16px
88
+ - Radius: sharp (4px)
89
+ - Border: `1px solid #faff69`
90
+ - Hover: background shifts to dark (`rgb(29, 29, 29)`), text stays
91
+ - Active: text shifts to Pale Yellow (`#f4f692`)
92
+ - The eye-catching CTA — neon on black
93
+
94
+ **Dark Solid**
95
+ - Background: Near Black (`#141414`)
96
+ - Text: Pure White (`#ffffff`)
97
+ - Padding: 12px 16px
98
+ - Radius: 4px or 8px
99
+ - Border: `1px solid #141414`
100
+ - Hover: bg shifts to Hover Gray (`#3a3a3a`), text to 80% opacity
101
+ - Active: text to Pale Yellow
102
+ - The standard action button
103
+
104
+ **Forest Green**
105
+ - Background: Forest Green (`#166534`)
106
+ - Text: Pure White (`#ffffff`)
107
+ - Padding: 12px 16px
108
+ - Border: `1px solid #141414`
109
+ - Hover: same dark shift
110
+ - Active: Pale Yellow text
111
+ - The "Get Started" / primary conversion button
112
+
113
+ **Ghost / Outlined**
114
+ - Background: transparent
115
+ - Text: Pure White (`#ffffff`)
116
+ - Padding: 0px 32px
117
+ - Radius: 4px
118
+ - Border: `1px solid #4f5100` (olive-tinted)
119
+ - Hover: dark bg shift
120
+ - Active: Pale Yellow text
121
+ - Secondary actions with neon-tinted border
122
+
123
+ **Pill Toggle**
124
+ - Background: transparent
125
+ - Radius: pill (9999px)
126
+ - Used for toggle/switch elements
127
+
128
+ ### Cards & Containers
129
+ - Background: transparent or Near Black
130
+ - Border: `1px solid rgba(65, 65, 65, 0.8)` — the signature charcoal containment
131
+ - Radius: 4px (small elements) or 8px (cards, containers)
132
+ - Shadow Level 1: subtle (`rgba(0,0,0,0.1) 0px 1px 3px, rgba(0,0,0,0.1) 0px 1px 2px -1px`)
133
+ - Shadow Level 2: medium (`rgba(0,0,0,0.1) 0px 10px 15px -3px, rgba(0,0,0,0.1) 0px 4px 6px -4px`)
134
+ - Shadow Level 3: inset (`rgba(0,0,0,0.06) 0px 4px 4px, rgba(0,0,0,0.14) 0px 4px 25px inset`) — the "pressed" effect
135
+ - Neon-highlighted cards: selected/active cards get neon yellow-green border or accent
136
+
137
+ ### Navigation
138
+ - Dark nav on black background
139
+ - Logo: ClickHouse wordmark + icon in yellow/neon
140
+ - Links: white text, hover to Neon Volt (#faff69)
141
+ - CTA: Neon Volt button or Forest Green button
142
+ - Uppercase labels for categories
143
+
144
+ ### Distinctive Components
145
+
146
+ **Performance Stats**
147
+ - Oversized numbers (72px+, weight 700–900)
148
+ - Brief descriptions beneath
149
+ - High-contrast neon accents on key metrics
150
+ - The primary visual proof of performance claims
151
+
152
+ **Neon-Highlighted Card**
153
+ - Standard dark card with neon yellow-green border highlight
154
+ - Creates "selected" or "featured" treatment
155
+ - The accent border makes the card pop against the dark canvas
156
+
157
+ **Code Blocks**
158
+ - Dark surface with Inconsolata at weight 600
159
+ - Neon and white syntax highlighting
160
+ - Terminal-like aesthetic
161
+
162
+ **Trust Bar**
163
+ - Company logos on dark background
164
+ - Monochrome/white logo treatment
165
+ - Horizontal layout
166
+
167
+ ## 5. Layout Principles
168
+
169
+ ### Spacing System
170
+ - Base unit: 8px
171
+ - Scale: 2px, 6px, 7px, 8px, 10px, 12px, 16px, 20px, 24px, 25px, 32px, 40px, 44px, 48px, 64px
172
+ - Button padding: 12px 16px (standard), 0px 16px (compact), 0px 32px (wide ghost)
173
+ - Section vertical spacing: generous (48–64px)
174
+
175
+ ### Grid & Container
176
+ - Max container width: up to 2200px (extra-wide) with responsive scaling
177
+ - Hero: full-width dark with massive typography
178
+ - Feature sections: multi-column card grids with dark borders
179
+ - Stats: horizontal metric bar
180
+ - Full-dark page — no light sections
181
+
182
+ ### Whitespace Philosophy
183
+ - **Dark void as canvas**: The pure black background provides infinite depth — elements float in darkness.
184
+ - **Dense information**: Feature cards and stats are packed with data, reflecting the database product's performance focus.
185
+ - **Neon highlights as wayfinding**: Yellow-green accents guide the eye through the dark interface like runway lights.
186
+
187
+ ### Border Radius Scale
188
+ - Sharp (4px): Buttons, badges, small elements, code blocks
189
+ - Comfortable (8px): Cards, containers, dividers
190
+ - Pill (9999px): Toggle buttons, status indicators
191
+
192
+ ## 6. Depth & Elevation
193
+
194
+ | Level | Treatment | Use |
195
+ |-------|-----------|-----|
196
+ | Flat (Level 0) | No shadow | Black background, text blocks |
197
+ | Bordered (Level 1) | `1px solid rgba(65,65,65,0.8)` | Standard cards, containers |
198
+ | Subtle (Level 2) | `0px 1px 3px rgba(0,0,0,0.1)` | Subtle card lift |
199
+ | Elevated (Level 3) | `0px 10px 15px -3px rgba(0,0,0,0.1)` | Feature cards, hover states |
200
+ | Pressed/Inset (Level 4) | `0px 4px 25px rgba(0,0,0,0.14) inset` | Active/pressed elements — "sunk into the surface" |
201
+ | Neon Highlight (Level 5) | Neon Volt border (`#faff69`) | Featured/selected cards, maximum emphasis |
202
+
203
+ **Shadow Philosophy**: ClickHouse uses shadows on a black canvas, where they're barely visible — they exist more for subtle dimensionality than obvious elevation. The most distinctive depth mechanism is the **inset shadow** (Level 4), which creates a "pressed into the surface" effect unique to ClickHouse. The neon border highlight (Level 5) is the primary attention-getting depth mechanism.
204
+
205
+ ## 7. Do's and Don'ts
206
+
207
+ ### Do
208
+ - Use Neon Volt (#faff69) as the sole chromatic accent — it must pop against pure black
209
+ - Use Inter at weight 900 for hero display text — the extreme weight IS the personality
210
+ - Keep everything on pure black (#000000) — never use dark gray as the page background
211
+ - Use charcoal borders (rgba(65,65,65,0.8)) for all card containment
212
+ - Apply Forest Green (#166534) for primary CTA buttons — distinct from neon for action hierarchy
213
+ - Show performance stats as oversized display numbers — it's the core visual argument
214
+ - Use uppercase with wide letter-spacing (1.4px) for section labels
215
+ - Apply Pale Yellow (#f4f692) for active/pressed text states
216
+ - Link hovers should ALWAYS shift to Neon Volt — unified interactive feedback
217
+
218
+ ### Don't
219
+ - Don't introduce additional colors — the palette is strictly black, neon, green, and gray
220
+ - Don't use the neon as a background fill — it's an accent and border color only (except on CTA buttons)
221
+ - Don't reduce display weight below 700 — heavy weight is core to the personality
222
+ - Don't use light/white backgrounds anywhere — the entire experience is dark
223
+ - Don't round corners beyond 8px — the sharp geometry reflects database precision
224
+ - Don't use soft/diffused shadows on black — they're invisible. Use border-based depth instead
225
+ - Don't skip the inset shadow on active states — the "pressed" effect is distinctive
226
+ - Don't use warm neutrals — all grays are perfectly neutral
227
+
228
+ ## 8. Responsive Behavior
229
+
230
+ ### Breakpoints
231
+ | Name | Width | Key Changes |
232
+ |------|-------|-------------|
233
+ | Mobile | <640px | Single column, stacked cards |
234
+ | Small Tablet | 640–768px | Minor adjustments |
235
+ | Tablet | 768–1024px | 2-column grids |
236
+ | Desktop | 1024–1280px | Standard layout |
237
+ | Large Desktop | 1280–1536px | Expanded content |
238
+ | Ultra-wide | 1536–2200px | Maximum container width |
239
+
240
+ ### Touch Targets
241
+ - Buttons with 12px 16px padding minimum
242
+ - Card surfaces as touch targets
243
+ - Adequate nav link spacing
244
+
245
+ ### Collapsing Strategy
246
+ - **Hero text**: 96px → 72px → 48px → 36px
247
+ - **Feature grids**: Multi-column → 2 → 1 column
248
+ - **Stats**: Horizontal → stacked
249
+ - **Navigation**: Full → hamburger
250
+
251
+ ### Image Behavior
252
+ - Product screenshots maintain aspect ratio
253
+ - Code blocks use horizontal scroll on narrow screens
254
+ - All images on dark backgrounds
255
+
256
+ ## 9. Agent Prompt Guide
257
+
258
+ ### Quick Color Reference
259
+ - Brand Accent: "Neon Volt (#faff69)"
260
+ - Page Background: "Pure Black (#000000)"
261
+ - CTA Green: "Forest Green (#166534)"
262
+ - Card Border: "Charcoal (rgba(65,65,65,0.8))"
263
+ - Primary Text: "Pure White (#ffffff)"
264
+ - Secondary Text: "Silver (#a0a0a0)"
265
+ - Active State: "Pale Yellow (#f4f692)"
266
+ - Button Surface: "Near Black (#141414)"
267
+
268
+ ### Example Component Prompts
269
+ - "Create a hero section on Pure Black (#000000) with a massive headline at 96px Inter weight 900, line-height 1.0. Pure White text. Add a Neon Volt (#faff69) CTA button (dark text, 4px radius, 0px 16px padding) and a ghost button (transparent, 1px solid #4f5100 border)."
270
+ - "Design a feature card on black with 1px solid rgba(65,65,65,0.8) border and 8px radius. Title at 24px Inter weight 700, body at 16px in Silver (#a0a0a0). Add a neon-highlighted variant with 1px solid #faff69 border."
271
+ - "Build a performance stats bar: large numbers at 72px Inter weight 700 in Pure White. Brief descriptions at 14px in Silver. On black background."
272
+ - "Create a Forest Green (#166534) CTA button: white text, 12px 16px padding, 4px radius, 1px solid #141414 border. Hover: bg shifts to #3a3a3a, text to 80% opacity."
273
+ - "Design an uppercase section label: 14px Inter weight 600, letter-spacing 1.4px, uppercase. Silver (#a0a0a0) text on black background."
274
+
275
+ ### Iteration Guide
276
+ 1. Keep everything on pure black — no dark gray alternatives
277
+ 2. Neon Volt (#faff69) is for accents and CTAs only — never large backgrounds
278
+ 3. Weight 900 for hero, 700 for headings, 600 for labels, 400-500 for body
279
+ 4. Active states use Pale Yellow (#f4f692) — not just opacity changes
280
+ 5. All links hover to Neon Volt — consistent interactive feedback
281
+ 6. Charcoal borders (rgba(65,65,65,0.8)) are the primary depth mechanism
package/design-md/clickhouse/README.md ADDED
@@ -0,0 +1,24 @@
1
+ # ClickHouse Inspired Design System
2
+
3
+ [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/clickhouse/DESIGN.md) extracted from the public [clickhouse](https://clickhouse.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
+
14
+ Use [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/clickhouse/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the ClickHouse design language.
15
+
16
+ ## Preview
17
+
18
+ A sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.
19
+
20
+ ### Dark Mode
21
+ ![ClickHouse Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/clickhouse/preview-dark-screenshot.png)
22
+
23
+ ### Light Mode
24
+ ![ClickHouse Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/clickhouse/preview-screenshot.png)