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/x.ai/preview.html ADDED
@@ -0,0 +1,409 @@
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: xAI (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=Geist+Mono:wght@300;400;500&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
10
+ <style>
11
+ :root {
12
+ --bg: #f8f8f8;
13
+ --bg-page: #ffffff;
14
+ --dark: #1f2228;
15
+ --white: #ffffff;
16
+ --text-primary: #1f2228;
17
+ --text-secondary: rgba(31, 34, 40, 0.7);
18
+ --text-muted: rgba(31, 34, 40, 0.5);
19
+ --text-disabled: rgba(31, 34, 40, 0.3);
20
+ --border: rgba(31, 34, 40, 0.1);
21
+ --border-strong: rgba(31, 34, 40, 0.2);
22
+ --surface: rgba(31, 34, 40, 0.03);
23
+ --surface-hover: rgba(31, 34, 40, 0.06);
24
+ --ring-blue: rgb(59, 130, 246);
25
+ --font-display: 'Geist Mono', ui-monospace, SFMono-Regular, 'Roboto Mono', Menlo, Monaco, monospace;
26
+ --font-body: 'Inter', -apple-system, system-ui, sans-serif;
27
+ }
28
+ * { margin: 0; padding: 0; box-sizing: border-box; }
29
+ body {
30
+ background: var(--bg-page);
31
+ color: var(--text-primary);
32
+ font-family: var(--font-body);
33
+ font-size: 16px; font-weight: 400; line-height: 1.50;
34
+ -webkit-font-smoothing: antialiased;
35
+ }
36
+
37
+ /* NAV */
38
+ .nav {
39
+ position: sticky; top: 0; z-index: 100;
40
+ display: flex; align-items: center; justify-content: space-between;
41
+ padding: 12px 32px;
42
+ background: rgba(255,255,255,0.90);
43
+ backdrop-filter: blur(12px);
44
+ border-bottom: 1px solid var(--border);
45
+ }
46
+ .nav-brand { font-family: var(--font-display); font-size: 14px; font-weight: 400; color: var(--text-primary); text-decoration: none; text-transform: uppercase; letter-spacing: 1.4px; }
47
+ .nav-links { display: flex; gap: 24px; list-style: none; }
48
+ .nav-links a { font-family: var(--font-body); font-size: 14px; font-weight: 400; color: var(--text-secondary); text-decoration: none; transition: color 0.15s; }
49
+ .nav-links a:hover { color: var(--text-muted); }
50
+ .nav-cta {
51
+ display: inline-block; background: var(--dark); color: var(--white);
52
+ padding: 8px 16px; border-radius: 0px;
53
+ font-family: var(--font-display); font-size: 12px; font-weight: 400;
54
+ text-decoration: none; text-transform: uppercase; letter-spacing: 1.4px;
55
+ transition: opacity 0.15s;
56
+ }
57
+ .nav-cta:hover { opacity: 0.85; }
58
+
59
+ /* HERO */
60
+ .hero { padding: 96px 32px 80px; text-align: center; }
61
+ .hero h1 {
62
+ font-family: var(--font-display); font-size: 64px; font-weight: 300; line-height: 1.20;
63
+ color: var(--text-primary); margin-bottom: 16px;
64
+ }
65
+ .hero p { font-size: 18px; font-weight: 400; line-height: 1.50; color: var(--text-secondary); max-width: 560px; margin: 0 auto 32px; }
66
+ .hero-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
67
+ .btn-primary {
68
+ display: inline-block; background: var(--dark); color: var(--white);
69
+ padding: 12px 24px; border-radius: 0px; border: none;
70
+ font-family: var(--font-display); font-size: 14px; font-weight: 400;
71
+ text-decoration: none; text-transform: uppercase; letter-spacing: 1.4px;
72
+ cursor: pointer; transition: opacity 0.15s;
73
+ }
74
+ .btn-primary:hover { opacity: 0.85; }
75
+ .btn-ghost {
76
+ display: inline-block; background: transparent; color: var(--text-primary);
77
+ padding: 12px 24px; border-radius: 0px;
78
+ border: 1px solid var(--border-strong);
79
+ font-family: var(--font-display); font-size: 14px; font-weight: 400;
80
+ text-decoration: none; text-transform: uppercase; letter-spacing: 1.4px;
81
+ cursor: pointer; transition: opacity 0.15s;
82
+ }
83
+ .btn-ghost:hover { opacity: 0.6; }
84
+
85
+ /* SECTIONS */
86
+ .section { padding: 64px 32px; max-width: 1080px; margin: 0 auto; }
87
+ .section-label { font-family: var(--font-display); font-size: 12px; font-weight: 400; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1.4px; margin-bottom: 8px; }
88
+ .section-title { font-family: var(--font-body); font-size: 30px; font-weight: 400; line-height: 1.20; margin-bottom: 32px; color: var(--text-primary); }
89
+ .section-divider { border: none; border-top: 1px solid var(--border); margin: 0; }
90
+
91
+ /* COLORS */
92
+ .color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 12px; margin-bottom: 24px; }
93
+ .color-swatch { overflow: hidden; border: 1px solid var(--border); }
94
+ .color-swatch-block { height: 72px; width: 100%; }
95
+ .color-swatch-info { padding: 10px 12px; }
96
+ .color-swatch-name { font-size: 13px; font-weight: 400; margin-bottom: 2px; color: var(--text-primary); }
97
+ .color-swatch-hex { font-size: 12px; color: var(--text-muted); font-family: var(--font-display); }
98
+ .color-swatch-role { font-size: 11px; color: var(--text-muted); margin-top: 3px; }
99
+ .color-group-label { font-size: 14px; font-weight: 400; color: var(--text-secondary); margin: 24px 0 10px; }
100
+
101
+ /* TYPOGRAPHY */
102
+ .type-sample { margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid var(--border); }
103
+ .type-sample:last-child { border-bottom: none; }
104
+ .type-meta { font-family: var(--font-display); font-size: 12px; font-weight: 400; color: var(--text-muted); margin-top: 8px; }
105
+
106
+ /* BUTTONS */
107
+ .button-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
108
+ .button-item { text-align: center; }
109
+ .button-label { font-size: 12px; color: var(--text-muted); margin-top: 8px; }
110
+ .btn-text-link {
111
+ display: inline-block; background: none; color: var(--text-primary);
112
+ padding: 8px 16px; font-family: var(--font-body); font-size: 16px;
113
+ font-weight: 400; text-decoration: none; transition: opacity 0.15s;
114
+ }
115
+ .btn-text-link:hover { opacity: 0.5; }
116
+ .badge-mono {
117
+ display: inline-block; background: transparent; color: var(--text-primary);
118
+ padding: 4px 8px; font-family: var(--font-display); font-size: 12px;
119
+ text-transform: uppercase; letter-spacing: 1px;
120
+ border: 1px solid var(--border-strong);
121
+ }
122
+
123
+ /* CARDS */
124
+ .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }
125
+ .card {
126
+ background: var(--surface); padding: 24px;
127
+ border: 1px solid var(--border);
128
+ transition: border-color 0.2s ease;
129
+ }
130
+ .card:hover { border-color: var(--border-strong); }
131
+ .card h3 { font-family: var(--font-body); font-size: 20px; font-weight: 400; margin-bottom: 8px; color: var(--text-primary); }
132
+ .card p { font-size: 14px; color: var(--text-secondary); line-height: 1.60; }
133
+ .card-tag { display: inline-block; font-family: var(--font-display); font-size: 11px; text-transform: uppercase; letter-spacing: 1px; padding: 2px 6px; border: 1px solid var(--border-strong); margin-bottom: 12px; color: var(--text-muted); }
134
+
135
+ /* FORMS */
136
+ .form-group { margin-bottom: 20px; max-width: 400px; }
137
+ .form-label { display: block; font-size: 14px; font-weight: 400; color: var(--text-secondary); margin-bottom: 6px; }
138
+ .form-input {
139
+ width: 100%; background: transparent; color: var(--text-primary);
140
+ border: 1px solid var(--border-strong); padding: 10px 12px; border-radius: 0px;
141
+ font-family: var(--font-body); font-size: 14px; font-weight: 400; outline: none;
142
+ transition: border-color 0.15s;
143
+ }
144
+ .form-input:focus { border-color: var(--ring-blue); box-shadow: 0 0 0 2px rgba(59,130,246,0.3); }
145
+ .form-input--focus { border-color: var(--ring-blue); box-shadow: 0 0 0 2px rgba(59,130,246,0.3); }
146
+ .form-textarea {
147
+ width: 100%; min-height: 80px; background: transparent; color: var(--text-primary);
148
+ border: 1px solid var(--border-strong); padding: 10px 12px; border-radius: 0px;
149
+ font-family: var(--font-body); font-size: 14px; font-weight: 400; resize: vertical; outline: none;
150
+ }
151
+ .form-state-label { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
152
+
153
+ /* SPACING */
154
+ .spacing-row { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin-bottom: 24px; }
155
+ .spacing-item { text-align: center; }
156
+ .spacing-block { background: var(--dark); margin-bottom: 6px; height: 28px; }
157
+ .spacing-value { font-family: var(--font-display); font-size: 11px; font-weight: 400; color: var(--text-muted); }
158
+
159
+ /* RADIUS */
160
+ .radius-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
161
+ .radius-item { text-align: center; }
162
+ .radius-box { width: 64px; height: 64px; background: var(--dark); margin-bottom: 6px; }
163
+ .radius-label { font-family: var(--font-display); font-size: 11px; font-weight: 400; color: var(--text-muted); }
164
+ .radius-context { font-size: 10px; color: var(--text-muted); }
165
+
166
+ /* ELEVATION */
167
+ .elevation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
168
+ .elevation-card { background: var(--bg-page); padding: 20px; text-align: center; }
169
+ .elevation-label { font-size: 14px; font-weight: 400; margin-bottom: 4px; color: var(--text-primary); }
170
+ .elevation-desc { font-family: var(--font-display); font-size: 11px; color: var(--text-muted); }
171
+
172
+ /* DARK SHOWCASE */
173
+ .dark-showcase {
174
+ background: #1f2228; padding: 48px 32px; margin: 0;
175
+ }
176
+ .dark-showcase-inner { max-width: 1080px; margin: 0 auto; }
177
+ .dark-showcase h2 { font-family: var(--font-display); font-size: 48px; font-weight: 300; color: #ffffff; margin-bottom: 16px; line-height: 1.20; }
178
+ .dark-showcase p { font-size: 16px; color: rgba(255,255,255,0.7); line-height: 1.60; margin-bottom: 24px; max-width: 600px; }
179
+ .dark-showcase .btn-row { display: flex; gap: 12px; flex-wrap: wrap; }
180
+ .dark-btn-primary {
181
+ display: inline-block; background: #ffffff; color: #1f2228;
182
+ padding: 12px 24px; border-radius: 0px; border: none;
183
+ font-family: var(--font-display); font-size: 14px; font-weight: 400;
184
+ text-decoration: none; text-transform: uppercase; letter-spacing: 1.4px;
185
+ }
186
+ .dark-btn-ghost {
187
+ display: inline-block; background: transparent; color: #ffffff;
188
+ padding: 12px 24px; border-radius: 0px;
189
+ border: 1px solid rgba(255,255,255,0.2);
190
+ font-family: var(--font-display); font-size: 14px; font-weight: 400;
191
+ text-decoration: none; text-transform: uppercase; letter-spacing: 1.4px;
192
+ }
193
+ .dark-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-top: 32px; }
194
+ .dark-card {
195
+ background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1);
196
+ padding: 24px; transition: border-color 0.2s;
197
+ }
198
+ .dark-card:hover { border-color: rgba(255,255,255,0.2); }
199
+ .dark-card h4 { font-family: var(--font-body); font-size: 18px; color: #ffffff; font-weight: 400; margin-bottom: 8px; }
200
+ .dark-card p { font-size: 14px; color: rgba(255,255,255,0.5); line-height: 1.60; margin: 0; }
201
+
202
+ /* FOOTER */
203
+ .footer { padding: 32px; text-align: center; border-top: 1px solid var(--border); font-size: 13px; color: var(--text-muted); }
204
+ .footer a { color: var(--text-primary); text-decoration: underline; }
205
+
206
+ @media (max-width: 768px) {
207
+ .hero h1 { font-size: 36px; }
208
+ .nav-links { display: none; }
209
+ .section { padding: 48px 20px; }
210
+ .card-grid { grid-template-columns: 1fr; }
211
+ .dark-showcase h2 { font-size: 32px; }
212
+ }
213
+ </style>
214
+ </head>
215
+ <body>
216
+
217
+ <nav class="nav">
218
+ <a class="nav-brand" href="#">awesome-design-md</a>
219
+ <ul class="nav-links">
220
+ <li><a href="#colors">Colors</a></li>
221
+ <li><a href="#typography">Typography</a></li>
222
+ <li><a href="#buttons">Buttons</a></li>
223
+ <li><a href="#cards">Cards</a></li>
224
+ <li><a href="#forms">Forms</a></li>
225
+ <li><a href="#spacing">Spacing</a></li>
226
+ </ul>
227
+ <a class="nav-cta" href="#">TRY GROK</a>
228
+ </nav>
229
+
230
+ <section class="hero">
231
+ <h1>Design System Inspired by xAI</h1>
232
+ <p>A design token catalog generated from DESIGN.md. Every color, font, component, and spacing value -- visualized.</p>
233
+ <div class="hero-buttons">
234
+ <a class="btn-primary" href="#">GET STARTED</a>
235
+ <a class="btn-ghost" href="#">VIEW DOCUMENTATION</a>
236
+ </div>
237
+ </section>
238
+
239
+ <hr class="section-divider">
240
+
241
+ <section class="section" id="colors">
242
+ <div class="section-label">01 / Colors</div>
243
+ <h2 class="section-title">Color Palette</h2>
244
+
245
+ <div class="color-group-label">Primary</div>
246
+ <div class="color-grid">
247
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#1f2228"></div><div class="color-swatch-info"><div class="color-swatch-name">Dark Background</div><div class="color-swatch-hex">#1f2228</div><div class="color-swatch-role">Page background</div></div></div>
248
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#ffffff; border-bottom:1px solid rgba(0,0,0,0.1)"></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">Text, foreground</div></div></div>
249
+ </div>
250
+
251
+ <div class="color-group-label">Text Opacity Scale</div>
252
+ <div class="color-grid">
253
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#1f2228"><div style="width:100%;height:100%;background:rgba(255,255,255,1);"></div></div><div class="color-swatch-info"><div class="color-swatch-name">Text Primary</div><div class="color-swatch-hex">rgba(255,255,255,1)</div><div class="color-swatch-role">Headings, labels</div></div></div>
254
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#1f2228"><div style="width:100%;height:100%;background:rgba(255,255,255,0.7);"></div></div><div class="color-swatch-info"><div class="color-swatch-name">Text Secondary</div><div class="color-swatch-hex">rgba(255,255,255,0.7)</div><div class="color-swatch-role">Descriptions</div></div></div>
255
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#1f2228"><div style="width:100%;height:100%;background:rgba(255,255,255,0.5);"></div></div><div class="color-swatch-info"><div class="color-swatch-name">Text Muted</div><div class="color-swatch-hex">rgba(255,255,255,0.5)</div><div class="color-swatch-role">Hover state, placeholders</div></div></div>
256
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#1f2228"><div style="width:100%;height:100%;background:rgba(255,255,255,0.3);"></div></div><div class="color-swatch-info"><div class="color-swatch-name">Text Disabled</div><div class="color-swatch-hex">rgba(255,255,255,0.3)</div><div class="color-swatch-role">Disabled states</div></div></div>
257
+ </div>
258
+
259
+ <div class="color-group-label">Border & Surface</div>
260
+ <div class="color-grid">
261
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#1f2228"><div style="width:100%;height:100%;background:rgba(255,255,255,0.1);"></div></div><div class="color-swatch-info"><div class="color-swatch-name">Border Default</div><div class="color-swatch-hex">rgba(255,255,255,0.1)</div><div class="color-swatch-role">Cards, dividers</div></div></div>
262
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#1f2228"><div style="width:100%;height:100%;background:rgba(255,255,255,0.2);"></div></div><div class="color-swatch-info"><div class="color-swatch-name">Border Strong</div><div class="color-swatch-hex">rgba(255,255,255,0.2)</div><div class="color-swatch-role">Active, buttons</div></div></div>
263
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#1f2228"><div style="width:100%;height:100%;background:rgba(255,255,255,0.03);"></div></div><div class="color-swatch-info"><div class="color-swatch-name">Surface Subtle</div><div class="color-swatch-hex">rgba(255,255,255,0.03)</div><div class="color-swatch-role">Card backgrounds</div></div></div>
264
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#1f2228"><div style="width:100%;height:100%;background:rgba(255,255,255,0.08);"></div></div><div class="color-swatch-info"><div class="color-swatch-name">Surface Hover</div><div class="color-swatch-hex">rgba(255,255,255,0.08)</div><div class="color-swatch-role">Hover surfaces</div></div></div>
265
+ </div>
266
+
267
+ <div class="color-group-label">Functional</div>
268
+ <div class="color-grid">
269
+ <div class="color-swatch"><div class="color-swatch-block" style="background:rgb(59,130,246)"></div><div class="color-swatch-info"><div class="color-swatch-name">Focus Ring</div><div class="color-swatch-hex">rgb(59, 130, 246)</div><div class="color-swatch-role">Keyboard focus</div></div></div>
270
+ </div>
271
+ </section>
272
+
273
+ <hr class="section-divider">
274
+
275
+ <section class="section" id="typography">
276
+ <div class="section-label">02 / Typography</div>
277
+ <h2 class="section-title">Typography Scale</h2>
278
+
279
+ <div class="type-sample"><div style="font-family:var(--font-display); font-size:72px; font-weight:300; line-height:1.20; color:var(--text-primary);">Display Hero</div><div class="type-meta">Display Hero -- 320px (shown at 72px) / GeistMono / 300 / 1.50</div></div>
280
+ <div class="type-sample"><div style="font-family:var(--font-body); font-size:30px; font-weight:400; line-height:1.20; color:var(--text-primary);">Section Heading</div><div class="type-meta">Section Heading -- 30px / universalSans / 400 / 1.20</div></div>
281
+ <div class="type-sample"><div style="font-family:var(--font-body); font-size:16px; font-weight:400; line-height:1.50; color:var(--text-secondary);">Body text -- xAI is a company working on building artificial intelligence to accelerate human scientific discovery.</div><div class="type-meta">Body -- 16px / universalSans / 400 / 1.50</div></div>
282
+ <div class="type-sample"><div style="font-family:var(--font-display); font-size:14px; font-weight:400; line-height:1.43; text-transform:uppercase; letter-spacing:1.4px; color:var(--text-primary);">Button Label</div><div class="type-meta">Button -- 14px / GeistMono / 400 / uppercase / 1.4px tracking</div></div>
283
+ <div class="type-sample"><div style="font-family:var(--font-body); font-size:14px; font-weight:400; line-height:1.50; color:var(--text-secondary);">Label / Caption text for supporting information</div><div class="type-meta">Label -- 14px / universalSans / 400 / 1.50</div></div>
284
+ <div class="type-sample"><div style="font-family:var(--font-body); font-size:12px; font-weight:400; line-height:1.50; color:var(--text-muted);">Small meta text, timestamps, footnotes</div><div class="type-meta">Small -- 12px / universalSans / 400 / 1.50</div></div>
285
+ <div class="type-sample"><div style="font-family:var(--font-display); font-size:12px; font-weight:400; line-height:1.50; text-transform:uppercase; letter-spacing:1px; color:var(--text-muted);">MONOSPACE TAG</div><div class="type-meta">Tag -- 12px / GeistMono / uppercase / 1px tracking</div></div>
286
+ </section>
287
+
288
+ <hr class="section-divider">
289
+
290
+ <section class="section" id="buttons">
291
+ <div class="section-label">03 / Buttons</div>
292
+ <h2 class="section-title">Button Variants</h2>
293
+ <div class="button-row">
294
+ <div class="button-item"><a class="btn-primary" href="#">GET STARTED</a><div class="button-label">Primary</div></div>
295
+ <div class="button-item"><a class="btn-ghost" href="#">LEARN MORE</a><div class="button-label">Ghost / Outlined</div></div>
296
+ <div class="button-item"><a class="btn-text-link" href="#">Text Link</a><div class="button-label">Text Link</div></div>
297
+ <div class="button-item"><span class="badge-mono">API v2</span><div class="button-label">Mono Tag</div></div>
298
+ </div>
299
+ </section>
300
+
301
+ <hr class="section-divider">
302
+
303
+ <section class="section" id="cards">
304
+ <div class="section-label">04 / Cards</div>
305
+ <h2 class="section-title">Card Examples</h2>
306
+ <div class="card-grid">
307
+ <div class="card">
308
+ <div class="card-tag">MODEL</div>
309
+ <h3>Grok</h3>
310
+ <p>An AI assistant built to be maximally helpful. Grok has real-time knowledge, a conversational style, and handles complex reasoning tasks.</p>
311
+ </div>
312
+ <div class="card" style="border-color: var(--border-strong);">
313
+ <div class="card-tag">RESEARCH</div>
314
+ <h3>Understanding AI</h3>
315
+ <p>Advancing fundamental research in artificial intelligence. Card shown with stronger border for elevated emphasis.</p>
316
+ </div>
317
+ <div class="card">
318
+ <div class="card-tag">API</div>
319
+ <h3>Developer Access</h3>
320
+ <p>Build with Grok through the xAI API. Enterprise-grade performance with straightforward integration.</p>
321
+ </div>
322
+ </div>
323
+ </section>
324
+
325
+ <hr class="section-divider">
326
+
327
+ <!-- Dark Showcase Section -->
328
+ <section class="dark-showcase">
329
+ <div class="dark-showcase-inner">
330
+ <div class="section-label" style="color: rgba(255,255,255,0.4);">Native Dark Context</div>
331
+ <h2>Monospace at Scale</h2>
332
+ <p>xAI's dark-first design uses GeistMono at extreme display sizes. This section shows components in their native dark context -- the true home of the xAI design system.</p>
333
+ <div class="btn-row">
334
+ <a class="dark-btn-primary" href="#">TRY GROK</a>
335
+ <a class="dark-btn-ghost" href="#">VIEW API</a>
336
+ </div>
337
+ <div class="dark-card-grid">
338
+ <div class="dark-card">
339
+ <h4>Real-time Knowledge</h4>
340
+ <p>Access to live information through direct integration with real-time data sources.</p>
341
+ </div>
342
+ <div class="dark-card">
343
+ <h4>Complex Reasoning</h4>
344
+ <p>Advanced chain-of-thought capabilities for multi-step problem solving.</p>
345
+ </div>
346
+ <div class="dark-card">
347
+ <h4>Enterprise Scale</h4>
348
+ <p>Production-ready infrastructure with high throughput and low latency.</p>
349
+ </div>
350
+ </div>
351
+ </div>
352
+ </section>
353
+
354
+ <hr class="section-divider">
355
+
356
+ <section class="section" id="forms">
357
+ <div class="section-label">05 / Forms</div>
358
+ <h2 class="section-title">Form Elements</h2>
359
+ <div class="form-group"><label class="form-label">API Key Name</label><input class="form-input" type="text" placeholder="my-api-key"><div class="form-state-label">Default</div></div>
360
+ <div class="form-group"><label class="form-label">Endpoint URL</label><input class="form-input form-input--focus" type="text" value="https://api.x.ai/v1/chat"><div class="form-state-label">Focus (blue ring)</div></div>
361
+ <div class="form-group"><label class="form-label">System Prompt</label><textarea class="form-textarea" placeholder="You are a helpful assistant..."></textarea></div>
362
+ </section>
363
+
364
+ <hr class="section-divider">
365
+
366
+ <section class="section" id="spacing">
367
+ <div class="section-label">06 / Spacing</div>
368
+ <h2 class="section-title">Spacing Scale</h2>
369
+ <div class="spacing-row">
370
+ <div class="spacing-item"><div class="spacing-block" style="width:4px"></div><div class="spacing-value">4</div></div>
371
+ <div class="spacing-item"><div class="spacing-block" style="width:8px"></div><div class="spacing-value">8</div></div>
372
+ <div class="spacing-item"><div class="spacing-block" style="width:24px"></div><div class="spacing-value">24</div></div>
373
+ <div class="spacing-item"><div class="spacing-block" style="width:48px"></div><div class="spacing-value">48</div></div>
374
+ </div>
375
+ <p style="font-size:14px; color:var(--text-muted); margin-top:8px;">Base unit: 8px. Scale is deliberately sparse -- large jumps create clear hierarchy through whitespace.</p>
376
+ </section>
377
+
378
+ <hr class="section-divider">
379
+
380
+ <section class="section" id="radius">
381
+ <div class="section-label">07 / Radius</div>
382
+ <h2 class="section-title">Border Radius</h2>
383
+ <div class="radius-row">
384
+ <div class="radius-item"><div class="radius-box" style="border-radius:0px"></div><div class="radius-label">0px</div><div class="radius-context">Primary (buttons, cards)</div></div>
385
+ <div class="radius-item"><div class="radius-box" style="border-radius:4px"></div><div class="radius-label">4px</div><div class="radius-context">Secondary containers</div></div>
386
+ </div>
387
+ </section>
388
+
389
+ <hr class="section-divider">
390
+
391
+ <section class="section" id="elevation">
392
+ <div class="section-label">08 / Elevation</div>
393
+ <h2 class="section-title">Elevation (No Shadows)</h2>
394
+ <div class="elevation-grid">
395
+ <div class="elevation-card" style="border: 1px solid var(--border);"><div class="elevation-label">Level 0: Flat</div><div class="elevation-desc">No border, no shadow</div></div>
396
+ <div class="elevation-card" style="background: var(--surface); border: 1px solid var(--border);"><div class="elevation-label">Level 1: Surface</div><div class="elevation-desc">Subtle bg (0.03 opacity)</div></div>
397
+ <div class="elevation-card" style="border: 1px solid var(--border);"><div class="elevation-label">Level 2: Bordered</div><div class="elevation-desc">0.1 opacity border</div></div>
398
+ <div class="elevation-card" style="border: 1px solid var(--border-strong);"><div class="elevation-label">Level 3: Active</div><div class="elevation-desc">0.2 opacity border</div></div>
399
+ <div class="elevation-card" style="box-shadow: 0 0 0 2px rgb(59,130,246);"><div class="elevation-label">Focus</div><div class="elevation-desc">Blue focus ring</div></div>
400
+ </div>
401
+ <p style="font-size:14px; color:var(--text-muted); margin-top:16px;">xAI uses no box-shadows. Depth is communicated through border opacity and background opacity only.</p>
402
+ </section>
403
+
404
+ <footer class="footer">
405
+ Generated from <a href="https://x.ai/">x.ai</a> DESIGN.md -- awesome-design-md
406
+ </footer>
407
+
408
+ </body>
409
+ </html>