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/spacex/preview.html ADDED
@@ -0,0 +1,222 @@
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: SpaceX (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=Share+Tech&display=swap" rel="stylesheet">
10
+ <style>
11
+ :root {
12
+ --black: #000000; --spectral: #f0f0fa; --ghost-bg: rgba(240,240,250,0.1);
13
+ --ghost-border: rgba(240,240,250,0.35); --overlay: rgba(0,0,0,0.5);
14
+ --font: 'Share Tech', Arial, Verdana, sans-serif;
15
+ }
16
+ * { margin:0; padding:0; box-sizing:border-box; }
17
+ body { background:var(--black); color:var(--spectral); font-family:var(--font); font-size:16px; line-height:1.50; text-transform:uppercase; letter-spacing:0.5px; -webkit-font-smoothing:antialiased; }
18
+
19
+ .nav { position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:12px 32px; background:rgba(0,0,0,0.7); backdrop-filter:blur(8px); }
20
+ .nav-brand { font-size:13px; font-weight:700; color:var(--spectral); text-decoration:none; letter-spacing:1.17px; }
21
+ .nav-links { display:flex; gap:24px; list-style:none; }
22
+ .nav-links a { font-size:12px; font-weight:400; color:rgba(240,240,250,0.7); text-decoration:none; letter-spacing:1px; transition:color 0.2s; }
23
+ .nav-links a:hover { color:var(--spectral); }
24
+ .nav-cta { display:inline-block; background:var(--ghost-bg); color:var(--spectral); padding:8px 18px; border-radius:32px; border:1px solid var(--ghost-border); font-size:12px; font-weight:700; letter-spacing:1.17px; text-decoration:none; }
25
+
26
+ .hero { padding:120px 32px 80px; text-align:left; max-width:900px; margin:0 auto; background:linear-gradient(180deg, rgba(0,0,20,0.9) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.9) 100%); min-height:60vh; display:flex; flex-direction:column; justify-content:center; }
27
+ .hero h1 { font-size:48px; font-weight:700; line-height:1.00; letter-spacing:0.96px; margin-bottom:16px; }
28
+ .hero p { font-size:16px; font-weight:400; line-height:1.70; letter-spacing:0.5px; color:rgba(240,240,250,0.7); max-width:500px; margin-bottom:32px; text-transform:none; }
29
+ .hero-buttons { display:flex; gap:12px; }
30
+ .btn-ghost { display:inline-block; background:var(--ghost-bg); color:var(--spectral); padding:14px 24px; border-radius:32px; border:1px solid var(--ghost-border); font-family:var(--font); font-size:13px; font-weight:700; letter-spacing:1.17px; text-decoration:none; cursor:pointer; transition:background 0.2s; }
31
+ .btn-ghost:hover { background:rgba(240,240,250,0.2); }
32
+
33
+ .section { padding:64px 32px; max-width:900px; margin:0 auto; }
34
+ .section-label { font-size:10px; font-weight:400; letter-spacing:1px; color:rgba(240,240,250,0.5); margin-bottom:8px; }
35
+ .section-title { font-size:32px; font-weight:700; line-height:1.00; letter-spacing:0.96px; margin-bottom:32px; }
36
+ .section-divider { border:none; border-top:1px solid rgba(240,240,250,0.1); margin:0; }
37
+
38
+ .color-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:12px; margin-bottom:24px; }
39
+ .color-swatch { border-radius:4px; overflow:hidden; border:1px solid rgba(240,240,250,0.15); }
40
+ .color-swatch-block { height:72px; width:100%; }
41
+ .color-swatch-info { padding:10px; }
42
+ .color-swatch-name { font-size:11px; font-weight:700; letter-spacing:0.5px; margin-bottom:2px; }
43
+ .color-swatch-hex { font-size:10px; color:rgba(240,240,250,0.5); }
44
+ .color-swatch-role { font-size:9px; color:rgba(240,240,250,0.4); margin-top:3px; text-transform:none; }
45
+ .color-group-label { font-size:12px; font-weight:700; letter-spacing:1px; color:rgba(240,240,250,0.6); margin:24px 0 10px; }
46
+
47
+ .type-sample { margin-bottom:28px; padding-bottom:24px; border-bottom:1px solid rgba(240,240,250,0.08); }
48
+ .type-sample:last-child { border-bottom:none; }
49
+ .type-meta { font-size:10px; color:rgba(240,240,250,0.4); margin-top:6px; letter-spacing:0.5px; }
50
+
51
+ .button-row { display:flex; gap:16px; flex-wrap:wrap; align-items:center; }
52
+ .button-item { text-align:center; }
53
+ .button-label { font-size:10px; color:rgba(240,240,250,0.4); margin-top:8px; letter-spacing:0.5px; }
54
+
55
+ .card-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:16px; }
56
+ .card { background:rgba(240,240,250,0.03); border:1px solid rgba(240,240,250,0.1); border-radius:4px; padding:24px; }
57
+ .card h3 { font-size:16px; font-weight:700; letter-spacing:0.96px; margin-bottom:8px; }
58
+ .card p { font-size:14px; color:rgba(240,240,250,0.6); line-height:1.50; text-transform:none; letter-spacing:normal; }
59
+
60
+ .form-group { margin-bottom:16px; max-width:400px; }
61
+ .form-label { display:block; font-size:12px; font-weight:700; letter-spacing:1px; margin-bottom:6px; }
62
+ .form-input { width:100%; background:rgba(240,240,250,0.05); color:var(--spectral); border:1px solid var(--ghost-border); padding:12px 16px; border-radius:4px; font-family:var(--font); font-size:14px; outline:none; text-transform:none; letter-spacing:normal; }
63
+ .form-input:focus { border-color:var(--spectral); }
64
+ .form-input--focus { border-color:var(--spectral); }
65
+ .form-input--error { border-color:#ff4444; }
66
+ .form-textarea { width:100%; min-height:80px; background:rgba(240,240,250,0.05); color:var(--spectral); border:1px solid var(--ghost-border); padding:12px 16px; border-radius:4px; font-family:var(--font); font-size:14px; resize:vertical; outline:none; text-transform:none; letter-spacing:normal; }
67
+ .form-state-label { font-size:9px; color:rgba(240,240,250,0.4); margin-top:4px; }
68
+
69
+ .spacing-row { display:flex; align-items:flex-end; gap:10px; flex-wrap:wrap; margin-bottom:20px; }
70
+ .spacing-item { text-align:center; }
71
+ .spacing-block { background:var(--spectral); opacity:0.2; border-radius:2px; margin-bottom:6px; height:28px; }
72
+ .spacing-value { font-size:10px; color:rgba(240,240,250,0.4); }
73
+
74
+ .radius-row { display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
75
+ .radius-item { text-align:center; }
76
+ .radius-box { width:60px; height:60px; border:1px solid rgba(240,240,250,0.2); margin-bottom:6px; }
77
+ .radius-label { font-size:10px; color:rgba(240,240,250,0.4); }
78
+
79
+ .elevation-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:16px; }
80
+ .elevation-card { border:1px solid rgba(240,240,250,0.08); border-radius:4px; padding:20px; text-align:center; }
81
+ .elevation-label { font-size:13px; font-weight:700; letter-spacing:0.5px; margin-bottom:4px; }
82
+ .elevation-desc { font-size:10px; color:rgba(240,240,250,0.4); text-transform:none; letter-spacing:normal; }
83
+
84
+ .footer { padding:32px; text-align:center; border-top:1px solid rgba(240,240,250,0.1); font-size:11px; color:rgba(240,240,250,0.4); }
85
+ .footer a { color:var(--spectral); text-decoration:underline; }
86
+
87
+ @media (max-width:600px) {
88
+ .hero h1 { font-size:32px; }
89
+ .nav-links { display:none; }
90
+ .section { padding:48px 20px; }
91
+ }
92
+ </style>
93
+ </head>
94
+ <body>
95
+
96
+ <nav class="nav">
97
+ <a class="nav-brand" href="#">awesome-design-md</a>
98
+ <ul class="nav-links">
99
+ <li><a href="#colors">Colors</a></li>
100
+ <li><a href="#typography">Typography</a></li>
101
+ <li><a href="#buttons">Buttons</a></li>
102
+ <li><a href="#cards">Cards</a></li>
103
+ <li><a href="#spacing">Spacing</a></li>
104
+ </ul>
105
+ <a class="nav-cta" href="#">Learn More</a>
106
+ </nav>
107
+
108
+ <section class="hero">
109
+ <h1>Design System<br>Inspired by SpaceX</h1>
110
+ <p>A design token catalog generated from DESIGN.md. Every color, font, and spacing value — visualized against the void.</p>
111
+ <div class="hero-buttons">
112
+ <a class="btn-ghost" href="#">Explore Tokens</a>
113
+ <a class="btn-ghost" href="#">View Source</a>
114
+ </div>
115
+ </section>
116
+
117
+ <hr class="section-divider">
118
+
119
+ <section class="section" id="colors">
120
+ <div class="section-label">01 / Colors</div>
121
+ <h2 class="section-title">Color Palette</h2>
122
+ <div class="color-grid">
123
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#000000"></div><div class="color-swatch-info"><div class="color-swatch-name">Space Black</div><div class="color-swatch-hex">#000000</div><div class="color-swatch-role">Page background</div></div></div>
124
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#f0f0fa"></div><div class="color-swatch-info"><div class="color-swatch-name">Spectral White</div><div class="color-swatch-hex">#f0f0fa</div><div class="color-swatch-role">Text, headings</div></div></div>
125
+ <div class="color-swatch"><div class="color-swatch-block" style="background:rgba(240,240,250,0.1); border:1px solid rgba(240,240,250,0.3)"></div><div class="color-swatch-info"><div class="color-swatch-name">Ghost Surface</div><div class="color-swatch-hex">rgba(f0f0fa, 0.1)</div><div class="color-swatch-role">Button background</div></div></div>
126
+ <div class="color-swatch"><div class="color-swatch-block" style="background:rgba(0,0,0,0.5)"></div><div class="color-swatch-info"><div class="color-swatch-name">Dark Overlay</div><div class="color-swatch-hex">rgba(0,0,0,0.5)</div><div class="color-swatch-role">Photo overlay</div></div></div>
127
+ </div>
128
+ </section>
129
+
130
+ <hr class="section-divider">
131
+
132
+ <section class="section" id="typography">
133
+ <div class="section-label">02 / Typography</div>
134
+ <h2 class="section-title">Typography Scale</h2>
135
+ <div class="type-sample"><div style="font-size:48px; font-weight:700; line-height:1.00; letter-spacing:0.96px;">MAKING LIFE MULTIPLANETARY</div><div class="type-meta">Display — 48px / bold / 1.00 / +0.96px / D-DIN-Bold / uppercase</div></div>
136
+ <div class="type-sample"><div style="font-size:16px; font-weight:400; line-height:1.70; text-transform:none; letter-spacing:normal;">SpaceX designs, manufactures and launches advanced rockets and spacecraft. The company was founded to revolutionize space technology.</div><div class="type-meta">Body — 16px / 400 / 1.70 / D-DIN</div></div>
137
+ <div class="type-sample"><div style="font-size:13px; font-weight:700; line-height:0.94; letter-spacing:1.17px;">FALCON 9 &middot; STARSHIP &middot; DRAGON</div><div class="type-meta">Nav Bold — 13px / 700 / 0.94 / +1.17px / uppercase</div></div>
138
+ <div class="type-sample"><div style="font-size:12px; font-weight:400; line-height:1.00; letter-spacing:1px;">MISSION OVERVIEW</div><div class="type-meta">Caption — 12px / 400 / 1.00 / uppercase / +1px</div></div>
139
+ <div class="type-sample"><div style="font-size:10px; font-weight:400; line-height:0.94; letter-spacing:1px;">LAUNCH DATE: 2026-04-15</div><div class="type-meta">Micro — 10px / 400 / 0.94 / uppercase / +1px</div></div>
140
+ </section>
141
+
142
+ <hr class="section-divider">
143
+
144
+ <section class="section" id="buttons">
145
+ <div class="section-label">03 / Buttons</div>
146
+ <h2 class="section-title">Button Variants</h2>
147
+ <div class="button-row">
148
+ <div class="button-item"><a class="btn-ghost" href="#">Learn More</a><div class="button-label">Ghost Button</div></div>
149
+ <div class="button-item"><a class="btn-ghost" style="background:rgba(240,240,250,0.2);" href="#">Hover State</a><div class="button-label">Ghost Hover</div></div>
150
+ </div>
151
+ <p style="font-size:12px; color:rgba(240,240,250,0.4); margin-top:16px; text-transform:none; letter-spacing:normal;">SpaceX uses only one button variant — the ghost button. The absence of variety IS the design.</p>
152
+ </section>
153
+
154
+ <hr class="section-divider">
155
+
156
+ <section class="section" id="cards">
157
+ <div class="section-label">04 / Cards</div>
158
+ <h2 class="section-title">Content Sections</h2>
159
+ <div class="card-grid">
160
+ <div class="card"><h3>Falcon 9</h3><p>The world's first orbital-class reusable rocket. Designed for reliable and safe transport of people and payloads.</p></div>
161
+ <div class="card"><h3>Starship</h3><p>The most powerful launch vehicle ever developed. Designed to carry crew and cargo to Mars and beyond.</p></div>
162
+ </div>
163
+ <p style="font-size:11px; color:rgba(240,240,250,0.3); margin-top:16px; text-transform:none; letter-spacing:normal;">Note: SpaceX does not use traditional cards — all content sits directly on full-viewport photography. These are representational.</p>
164
+ </section>
165
+
166
+ <hr class="section-divider">
167
+
168
+ <section class="section" id="forms">
169
+ <div class="section-label">05 / Forms</div>
170
+ <h2 class="section-title">Form Elements</h2>
171
+ <div class="form-group"><label class="form-label">Mission Name</label><input class="form-input" type="text" placeholder="STARSHIP MISSION"><div class="form-state-label">Default (ghost border)</div></div>
172
+ <div class="form-group"><label class="form-label">Launch Site</label><input class="form-input form-input--focus" type="text" value="STARBASE, TEXAS"><div class="form-state-label">Focus (spectral white border)</div></div>
173
+ <div class="form-group"><label class="form-label">Payload</label><input class="form-input form-input--error" type="text" value="EXCEEDS CAPACITY"><div class="form-state-label">Error</div></div>
174
+ <div class="form-group"><label class="form-label">Notes</label><textarea class="form-textarea" placeholder="Mission briefing notes..."></textarea></div>
175
+ </section>
176
+
177
+ <hr class="section-divider">
178
+
179
+ <section class="section" id="spacing">
180
+ <div class="section-label">06 / Spacing</div>
181
+ <h2 class="section-title">Spacing Scale</h2>
182
+ <div class="spacing-row">
183
+ <div class="spacing-item"><div class="spacing-block" style="width:3px"></div><div class="spacing-value">3</div></div>
184
+ <div class="spacing-item"><div class="spacing-block" style="width:5px"></div><div class="spacing-value">5</div></div>
185
+ <div class="spacing-item"><div class="spacing-block" style="width:12px"></div><div class="spacing-value">12</div></div>
186
+ <div class="spacing-item"><div class="spacing-block" style="width:18px"></div><div class="spacing-value">18</div></div>
187
+ <div class="spacing-item"><div class="spacing-block" style="width:24px"></div><div class="spacing-value">24</div></div>
188
+ <div class="spacing-item"><div class="spacing-block" style="width:30px"></div><div class="spacing-value">30</div></div>
189
+ </div>
190
+ </section>
191
+
192
+ <hr class="section-divider">
193
+
194
+ <section class="section">
195
+ <div class="section-label">07 / Radius</div>
196
+ <h2 class="section-title">Border Radius</h2>
197
+ <div class="radius-row">
198
+ <div class="radius-item"><div class="radius-box" style="border-radius:4px"></div><div class="radius-label">4px</div></div>
199
+ <div class="radius-item"><div class="radius-box" style="border-radius:32px"></div><div class="radius-label">32px</div></div>
200
+ </div>
201
+ <p style="font-size:11px; color:rgba(240,240,250,0.3); margin-top:12px; text-transform:none; letter-spacing:normal;">Minimal radius system — 4px for utility, 32px for buttons.</p>
202
+ </section>
203
+
204
+ <hr class="section-divider">
205
+
206
+ <section class="section">
207
+ <div class="section-label">08 / Elevation</div>
208
+ <h2 class="section-title">Depth</h2>
209
+ <div class="elevation-grid">
210
+ <div class="elevation-card"><div class="elevation-label">Photography</div><div class="elevation-desc">Full-viewport imagery</div></div>
211
+ <div class="elevation-card" style="background:rgba(0,0,0,0.5);"><div class="elevation-label">Overlay</div><div class="elevation-desc">Dark gradient for text</div></div>
212
+ <div class="elevation-card" style="background:var(--ghost-bg); border-color:var(--ghost-border);"><div class="elevation-label">Ghost</div><div class="elevation-desc">Interactive surface</div></div>
213
+ </div>
214
+ <p style="font-size:11px; color:rgba(240,240,250,0.3); margin-top:12px; text-transform:none; letter-spacing:normal;">Zero shadows. Depth from photography only.</p>
215
+ </section>
216
+
217
+ <footer class="footer">
218
+ Generated from <a href="https://spacex.com/">spacex.com</a> DESIGN.md — awesome-design-md
219
+ </footer>
220
+
221
+ </body>
222
+ </html>
package/design-md/spotify/DESIGN.md ADDED
@@ -0,0 +1,246 @@
1
+ # Design System: Spotify
2
+
3
+ ## 1. Visual Theme & Atmosphere
4
+
5
+ Spotify's web interface is a dark, immersive music player that wraps listeners in a near-black cocoon (`#121212`, `#181818`, `#1f1f1f`) where album art and content become the primary source of color. The design philosophy is "content-first darkness" — the UI recedes into shadow so that music, podcasts, and playlists can glow. Every surface is a shade of charcoal, creating a theater-like environment where the only true color comes from the iconic Spotify Green (`#1ed760`) and the album artwork itself.
6
+
7
+ The typography uses SpotifyMixUI and SpotifyMixUITitle — proprietary fonts from the CircularSp family (Circular by Lineto, customized for Spotify) with an extensive fallback stack that includes Arabic, Hebrew, Cyrillic, Greek, Devanagari, and CJK fonts, reflecting Spotify's global reach. The type system is compact and functional: 700 (bold) for emphasis and navigation, 600 (semibold) for secondary emphasis, and 400 (regular) for body. Buttons use uppercase with positive letter-spacing (1.4px–2px) for a systematic, label-like quality.
8
+
9
+ What distinguishes Spotify is its pill-and-circle geometry. Primary buttons use 500px–9999px radius (full pill), circular play buttons use 50% radius, and search inputs are 500px pills. Combined with heavy shadows (`rgba(0,0,0,0.5) 0px 8px 24px`) on elevated elements and a unique inset border-shadow combo (`rgb(18,18,18) 0px 1px 0px, rgb(124,124,124) 0px 0px 0px 1px inset`), the result is an interface that feels like a premium audio device — tactile, rounded, and built for touch.
10
+
11
+ **Key Characteristics:**
12
+ - Near-black immersive dark theme (`#121212`–`#1f1f1f`) — UI disappears behind content
13
+ - Spotify Green (`#1ed760`) as singular brand accent — never decorative, always functional
14
+ - SpotifyMixUI/CircularSp font family with global script support
15
+ - Pill buttons (500px–9999px) and circular controls (50%) — rounded, touch-optimized
16
+ - Uppercase button labels with wide letter-spacing (1.4px–2px)
17
+ - Heavy shadows on elevated elements (`rgba(0,0,0,0.5) 0px 8px 24px`)
18
+ - Semantic colors: negative red (`#f3727f`), warning orange (`#ffa42b`), announcement blue (`#539df5`)
19
+ - Album art as the primary color source — the UI is achromatic by design
20
+
21
+ ## 2. Color Palette & Roles
22
+
23
+ ### Primary Brand
24
+ - **Spotify Green** (`#1ed760`): Primary brand accent — play buttons, active states, CTAs
25
+ - **Near Black** (`#121212`): Deepest background surface
26
+ - **Dark Surface** (`#181818`): Cards, containers, elevated surfaces
27
+ - **Mid Dark** (`#1f1f1f`): Button backgrounds, interactive surfaces
28
+
29
+ ### Text
30
+ - **White** (`#ffffff`): `--text-base`, primary text
31
+ - **Silver** (`#b3b3b3`): Secondary text, muted labels, inactive nav
32
+ - **Near White** (`#cbcbcb`): Slightly brighter secondary text
33
+ - **Light** (`#fdfdfd`): Near-pure white for maximum emphasis
34
+
35
+ ### Semantic
36
+ - **Negative Red** (`#f3727f`): `--text-negative`, error states
37
+ - **Warning Orange** (`#ffa42b`): `--text-warning`, warning states
38
+ - **Announcement Blue** (`#539df5`): `--text-announcement`, info states
39
+
40
+ ### Surface & Border
41
+ - **Dark Card** (`#252525`): Elevated card surface
42
+ - **Mid Card** (`#272727`): Alternate card surface
43
+ - **Border Gray** (`#4d4d4d`): Button borders on dark
44
+ - **Light Border** (`#7c7c7c`): Outlined button borders, muted links
45
+ - **Separator** (`#b3b3b3`): Divider lines
46
+ - **Light Surface** (`#eeeeee`): Light-mode buttons (rare)
47
+ - **Spotify Green Border** (`#1db954`): Green accent border variant
48
+
49
+ ### Shadows
50
+ - **Heavy** (`rgba(0,0,0,0.5) 0px 8px 24px`): Dialogs, menus, elevated panels
51
+ - **Medium** (`rgba(0,0,0,0.3) 0px 8px 8px`): Cards, dropdowns
52
+ - **Inset Border** (`rgb(18,18,18) 0px 1px 0px, rgb(124,124,124) 0px 0px 0px 1px inset`): Input border-shadow combo
53
+
54
+ ## 3. Typography Rules
55
+
56
+ ### Font Families
57
+ - **Title**: `SpotifyMixUITitle`, fallbacks: `CircularSp-Arab, CircularSp-Hebr, CircularSp-Cyrl, CircularSp-Grek, CircularSp-Deva, Helvetica Neue, helvetica, arial, Hiragino Sans, Hiragino Kaku Gothic ProN, Meiryo, MS Gothic`
58
+ - **UI / Body**: `SpotifyMixUI`, same fallback stack
59
+
60
+ ### Hierarchy
61
+
62
+ | Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
63
+ |------|------|------|--------|-------------|----------------|-------|
64
+ | Section Title | SpotifyMixUITitle | 24px (1.50rem) | 700 | normal | normal | Bold title weight |
65
+ | Feature Heading | SpotifyMixUI | 18px (1.13rem) | 600 | 1.30 (tight) | normal | Semibold section heads |
66
+ | Body Bold | SpotifyMixUI | 16px (1.00rem) | 700 | normal | normal | Emphasized text |
67
+ | Body | SpotifyMixUI | 16px (1.00rem) | 400 | normal | normal | Standard body |
68
+ | Button Uppercase | SpotifyMixUI | 14px (0.88rem) | 600–700 | 1.00 (tight) | 1.4px–2px | `text-transform: uppercase` |
69
+ | Button | SpotifyMixUI | 14px (0.88rem) | 700 | normal | 0.14px | Standard button |
70
+ | Nav Link Bold | SpotifyMixUI | 14px (0.88rem) | 700 | normal | normal | Navigation |
71
+ | Nav Link | SpotifyMixUI | 14px (0.88rem) | 400 | normal | normal | Inactive nav |
72
+ | Caption Bold | SpotifyMixUI | 14px (0.88rem) | 700 | 1.50–1.54 | normal | Bold metadata |
73
+ | Caption | SpotifyMixUI | 14px (0.88rem) | 400 | normal | normal | Metadata |
74
+ | Small Bold | SpotifyMixUI | 12px (0.75rem) | 700 | 1.50 | normal | Tags, counts |
75
+ | Small | SpotifyMixUI | 12px (0.75rem) | 400 | normal | normal | Fine print |
76
+ | Badge | SpotifyMixUI | 10.5px (0.66rem) | 600 | 1.33 | normal | `text-transform: capitalize` |
77
+ | Micro | SpotifyMixUI | 10px (0.63rem) | 400 | normal | normal | Smallest text |
78
+
79
+ ### Principles
80
+ - **Bold/regular binary**: Most text is either 700 (bold) or 400 (regular), with 600 used sparingly. This creates a clear visual hierarchy through weight contrast rather than size variation.
81
+ - **Uppercase buttons as system**: Button labels use uppercase + wide letter-spacing (1.4px–2px), creating a systematic "label" voice distinct from content text.
82
+ - **Compact sizing**: The range is 10px–24px — narrower than most systems. Spotify's type is compact and functional, designed for scanning playlists, not reading articles.
83
+ - **Global script support**: The extensive fallback stack (Arabic, Hebrew, Cyrillic, Greek, Devanagari, CJK) reflects Spotify's 180+ market reach.
84
+
85
+ ## 4. Component Stylings
86
+
87
+ ### Buttons
88
+
89
+ **Dark Pill**
90
+ - Background: `#1f1f1f`
91
+ - Text: `#ffffff` or `#b3b3b3`
92
+ - Padding: 8px 16px
93
+ - Radius: 9999px (full pill)
94
+ - Use: Navigation pills, secondary actions
95
+
96
+ **Dark Large Pill**
97
+ - Background: `#181818`
98
+ - Text: `#ffffff`
99
+ - Padding: 0px 43px
100
+ - Radius: 500px
101
+ - Use: Primary app navigation buttons
102
+
103
+ **Light Pill**
104
+ - Background: `#eeeeee`
105
+ - Text: `#181818`
106
+ - Radius: 500px
107
+ - Use: Light-mode CTAs (cookie consent, marketing)
108
+
109
+ **Outlined Pill**
110
+ - Background: transparent
111
+ - Text: `#ffffff`
112
+ - Border: `1px solid #7c7c7c`
113
+ - Padding: 4px 16px 4px 36px (asymmetric for icon)
114
+ - Radius: 9999px
115
+ - Use: Follow buttons, secondary actions
116
+
117
+ **Circular Play**
118
+ - Background: `#1f1f1f`
119
+ - Text: `#ffffff`
120
+ - Padding: 12px
121
+ - Radius: 50% (circle)
122
+ - Use: Play/pause controls
123
+
124
+ ### Cards & Containers
125
+ - Background: `#181818` or `#1f1f1f`
126
+ - Radius: 6px–8px
127
+ - No visible borders on most cards
128
+ - Hover: slight background lightening
129
+ - Shadow: `rgba(0,0,0,0.3) 0px 8px 8px` on elevated
130
+
131
+ ### Inputs
132
+ - Search input: `#1f1f1f` background, `#ffffff` text
133
+ - Radius: 500px (pill)
134
+ - Padding: 12px 96px 12px 48px (icon-aware)
135
+ - Focus: border becomes `#000000`, outline `1px solid`
136
+
137
+ ### Navigation
138
+ - Dark sidebar with SpotifyMixUI 14px weight 700 for active, 400 for inactive
139
+ - `#b3b3b3` muted color for inactive items, `#ffffff` for active
140
+ - Circular icon buttons (50% radius)
141
+ - Spotify logo top-left in green
142
+
143
+ ## 5. Layout Principles
144
+
145
+ ### Spacing System
146
+ - Base unit: 8px
147
+ - Scale: 1px, 2px, 3px, 4px, 5px, 6px, 8px, 10px, 12px, 14px, 15px, 16px, 20px
148
+
149
+ ### Grid & Container
150
+ - Sidebar (fixed) + main content area
151
+ - Grid-based album/playlist cards
152
+ - Full-width now-playing bar at bottom
153
+ - Responsive content area fills remaining space
154
+
155
+ ### Whitespace Philosophy
156
+ - **Dark compression**: Spotify packs content densely — playlist grids, track lists, and navigation are all tightly spaced. The dark background provides visual rest between elements without needing large gaps.
157
+ - **Content density over breathing room**: This is an app, not a marketing site. Every pixel serves the listening experience.
158
+
159
+ ### Border Radius Scale
160
+ - Minimal (2px): Badges, explicit tags
161
+ - Subtle (4px): Inputs, small elements
162
+ - Standard (6px): Album art containers, cards
163
+ - Comfortable (8px): Sections, dialogs
164
+ - Medium (10px–20px): Panels, overlay elements
165
+ - Large (100px): Large pill buttons
166
+ - Pill (500px): Primary buttons, search input
167
+ - Full Pill (9999px): Navigation pills, search
168
+ - Circle (50%): Play buttons, avatars, icons
169
+
170
+ ## 6. Depth & Elevation
171
+
172
+ | Level | Treatment | Use |
173
+ |-------|-----------|-----|
174
+ | Base (Level 0) | `#121212` background | Deepest layer, page background |
175
+ | Surface (Level 1) | `#181818` or `#1f1f1f` | Cards, sidebar, containers |
176
+ | Elevated (Level 2) | `rgba(0,0,0,0.3) 0px 8px 8px` | Dropdown menus, hover cards |
177
+ | Dialog (Level 3) | `rgba(0,0,0,0.5) 0px 8px 24px` | Modals, overlays, menus |
178
+ | Inset (Border) | `rgb(18,18,18) 0px 1px 0px, rgb(124,124,124) 0px 0px 0px 1px inset` | Input borders |
179
+
180
+ **Shadow Philosophy**: Spotify uses notably heavy shadows for a dark-themed app. The 0.5 opacity shadow at 24px blur creates a dramatic "floating in darkness" effect for dialogs and menus, while the 0.3 opacity at 8px blur provides a more subtle card lift. The unique inset border-shadow combination on inputs creates a recessed, tactile quality.
181
+
182
+ ## 7. Do's and Don'ts
183
+
184
+ ### Do
185
+ - Use near-black backgrounds (`#121212`–`#1f1f1f`) — depth through shade variation
186
+ - Apply Spotify Green (`#1ed760`) only for play controls, active states, and primary CTAs
187
+ - Use pill shape (500px–9999px) for all buttons — circular (50%) for play controls
188
+ - Apply uppercase + wide letter-spacing (1.4px–2px) on button labels
189
+ - Keep typography compact (10px–24px range) — this is an app, not a magazine
190
+ - Use heavy shadows (`0.3–0.5 opacity`) for elevated elements on dark backgrounds
191
+ - Let album art provide color — the UI itself is achromatic
192
+
193
+ ### Don't
194
+ - Don't use Spotify Green decoratively or on backgrounds — it's functional only
195
+ - Don't use light backgrounds for primary surfaces — the dark immersion is core
196
+ - Don't skip the pill/circle geometry on buttons — square buttons break the identity
197
+ - Don't use thin/subtle shadows — on dark backgrounds, shadows need to be heavy to be visible
198
+ - Don't add additional brand colors — green + achromatic grays is the complete palette
199
+ - Don't use relaxed line-heights — Spotify's typography is compact and dense
200
+ - Don't expose raw gray borders — use shadow-based or inset borders instead
201
+
202
+ ## 8. Responsive Behavior
203
+
204
+ ### Breakpoints
205
+ | Name | Width | Key Changes |
206
+ |------|-------|-------------|
207
+ | Mobile Small | <425px | Compact mobile layout |
208
+ | Mobile | 425–576px | Standard mobile |
209
+ | Tablet | 576–768px | 2-column grid |
210
+ | Tablet Large | 768–896px | Expanded layout |
211
+ | Desktop Small | 896–1024px | Sidebar visible |
212
+ | Desktop | 1024–1280px | Full desktop layout |
213
+ | Large Desktop | >1280px | Expanded grid |
214
+
215
+ ### Collapsing Strategy
216
+ - Sidebar: full → collapsed → hidden
217
+ - Album grid: 5 columns → 3 → 2 → 1
218
+ - Now-playing bar: maintained at all sizes
219
+ - Search: pill input maintained, width adjusts
220
+ - Navigation: sidebar → bottom bar on mobile
221
+
222
+ ## 9. Agent Prompt Guide
223
+
224
+ ### Quick Color Reference
225
+ - Background: Near Black (`#121212`)
226
+ - Surface: Dark Card (`#181818`)
227
+ - Text: White (`#ffffff`)
228
+ - Secondary text: Silver (`#b3b3b3`)
229
+ - Accent: Spotify Green (`#1ed760`)
230
+ - Border: `#4d4d4d`
231
+ - Error: Negative Red (`#f3727f`)
232
+
233
+ ### Example Component Prompts
234
+ - "Create a dark card: #181818 background, 8px radius. Title at 16px SpotifyMixUI weight 700, white text. Subtitle at 14px weight 400, #b3b3b3. Shadow rgba(0,0,0,0.3) 0px 8px 8px on hover."
235
+ - "Design a pill button: #1f1f1f background, white text, 9999px radius, 8px 16px padding. 14px SpotifyMixUI weight 700, uppercase, letter-spacing 1.4px."
236
+ - "Build a circular play button: Spotify Green (#1ed760) background, #000000 icon, 50% radius, 12px padding."
237
+ - "Create search input: #1f1f1f background, white text, 500px radius, 12px 48px padding. Inset border: rgb(124,124,124) 0px 0px 0px 1px inset."
238
+ - "Design navigation sidebar: #121212 background. Active items: 14px weight 700, white. Inactive: 14px weight 400, #b3b3b3."
239
+
240
+ ### Iteration Guide
241
+ 1. Start with #121212 — everything lives in near-black darkness
242
+ 2. Spotify Green for functional highlights only (play, active, CTA)
243
+ 3. Pill everything — 500px for large, 9999px for small, 50% for circular
244
+ 4. Uppercase + wide tracking on buttons — the systematic label voice
245
+ 5. Heavy shadows (0.3–0.5 opacity) for elevation — light shadows are invisible on dark
246
+ 6. Album art provides all the color — the UI stays achromatic
package/design-md/spotify/README.md ADDED
@@ -0,0 +1,23 @@
1
+ # Spotify Inspired Design System
2
+
3
+ [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/spotify/DESIGN.md) extracted from the public [spotify](https://spotify.com/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
4
+
5
+ ## Files
6
+
7
+ | File | Description |
8
+ |------|-------------|
9
+ | `DESIGN.md` | Complete design system documentation (9 sections) |
10
+ | `preview.html` | Interactive design token catalog (light) |
11
+ | `preview-dark.html` | Interactive design token catalog (dark) |
12
+
13
+ Use [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/spotify/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Spotify design language.
14
+
15
+ ## Preview
16
+
17
+ A sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.
18
+
19
+ ### Dark Mode
20
+ ![Spotify Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/spotify/preview-dark-screenshot.png)
21
+
22
+ ### Light Mode
23
+ ![Spotify Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/spotify/preview-screenshot.png)