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/elevenlabs/preview.html ADDED
@@ -0,0 +1,253 @@
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: ElevenLabs (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=Inter:wght@300;400;500;700&family=Geist+Mono&display=swap" rel="stylesheet">
10
+ <style>
11
+ :root {
12
+ --white: #ffffff; --light: #f5f5f5; --warm-stone: rgba(245,242,239,0.8);
13
+ --black: #000000; --dark-gray: #4e4e4e; --warm-gray: #777169;
14
+ --border: #e5e5e5; --border-subtle: rgba(0,0,0,0.05);
15
+ --shadow-card: rgba(0,0,0,0.06) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 1px 2px, rgba(0,0,0,0.04) 0px 2px 4px;
16
+ --shadow-btn: rgba(0,0,0,0.4) 0px 0px 1px, rgba(0,0,0,0.04) 0px 4px 4px;
17
+ --shadow-warm: rgba(78,50,23,0.04) 0px 6px 16px;
18
+ --shadow-inset: rgb(255,255,255) 0px 0px 0px 0px inset, rgba(0,0,0,0.075) 0px 0px 0px 0.5px inset;
19
+ --font-sans: 'Inter', system-ui, sans-serif;
20
+ --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
21
+ }
22
+ * { margin:0; padding:0; box-sizing:border-box; }
23
+ body { background:var(--white); color:var(--black); font-family:var(--font-sans); font-size:16px; font-weight:400; line-height:1.50; letter-spacing:0.16px; -webkit-font-smoothing:antialiased; }
24
+
25
+ .nav { position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:12px 32px; background:rgba(255,255,255,0.9); backdrop-filter:blur(12px); border-bottom:1px solid var(--border-subtle); }
26
+ .nav-brand { font-size:14px; font-weight:500; color:var(--black); text-decoration:none; }
27
+ .nav-links { display:flex; gap:24px; list-style:none; }
28
+ .nav-links a { font-size:15px; font-weight:500; color:var(--dark-gray); text-decoration:none; letter-spacing:0.15px; transition:color 0.15s; }
29
+ .nav-links a:hover { color:var(--black); }
30
+ .nav-cta { display:inline-block; background:var(--black); color:var(--white); padding:6px 16px; border-radius:9999px; font-size:14px; font-weight:500; text-decoration:none; }
31
+
32
+ .hero { padding:100px 32px 80px; text-align:center; }
33
+ .hero h1 { font-size:48px; font-weight:300; line-height:1.08; letter-spacing:-0.96px; margin-bottom:16px; }
34
+ .hero p { font-size:18px; font-weight:400; line-height:1.60; letter-spacing:0.18px; color:var(--dark-gray); max-width:520px; margin:0 auto 32px; }
35
+ .hero-buttons { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
36
+ .btn-black { display:inline-block; background:var(--black); color:var(--white); padding:8px 20px; border-radius:9999px; font-size:15px; font-weight:500; text-decoration:none; border:none; cursor:pointer; }
37
+ .btn-warm { display:inline-block; background:var(--warm-stone); color:var(--black); padding:10px 20px; border-radius:30px; font-size:15px; font-weight:500; text-decoration:none; border:none; cursor:pointer; box-shadow:var(--shadow-warm); }
38
+ .btn-white { display:inline-block; background:var(--white); color:var(--black); padding:8px 18px; border-radius:9999px; font-size:14px; font-weight:500; text-decoration:none; border:none; cursor:pointer; box-shadow:var(--shadow-btn); }
39
+ .btn-upper { display:inline-block; background:var(--black); color:var(--white); padding:8px 18px; border-radius:9999px; font-size:14px; font-weight:700; text-decoration:none; text-transform:uppercase; letter-spacing:0.7px; border:none; cursor:pointer; }
40
+
41
+ .section { padding:64px 32px; max-width:1100px; margin:0 auto; }
42
+ .section-label { font-family:var(--font-mono); font-size:12px; font-weight:500; color:var(--warm-gray); margin-bottom:8px; }
43
+ .section-title { font-size:36px; font-weight:300; line-height:1.17; margin-bottom:32px; }
44
+ .section-divider { border:none; border-top:1px solid var(--border); margin:0; }
45
+
46
+ .color-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:12px; margin-bottom:24px; }
47
+ .color-swatch { border-radius:16px; overflow:hidden; box-shadow:var(--shadow-inset); }
48
+ .color-swatch-block { height:72px; width:100%; }
49
+ .color-swatch-info { padding:10px 12px; }
50
+ .color-swatch-name { font-size:13px; font-weight:500; margin-bottom:2px; }
51
+ .color-swatch-hex { font-size:11px; color:var(--warm-gray); font-family:var(--font-mono); }
52
+ .color-swatch-role { font-size:10px; color:var(--warm-gray); margin-top:3px; }
53
+ .color-group-label { font-size:14px; font-weight:500; color:var(--dark-gray); margin:24px 0 10px; }
54
+
55
+ .type-sample { margin-bottom:28px; padding-bottom:24px; border-bottom:1px solid var(--light); }
56
+ .type-sample:last-child { border-bottom:none; }
57
+ .type-meta { font-family:var(--font-mono); font-size:11px; color:var(--warm-gray); margin-top:6px; }
58
+
59
+ .button-row { display:flex; gap:16px; flex-wrap:wrap; align-items:center; }
60
+ .button-item { text-align:center; }
61
+ .button-label { font-size:11px; font-weight:500; color:var(--warm-gray); margin-top:8px; }
62
+
63
+ .card-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); gap:16px; }
64
+ .card { background:var(--white); border-radius:20px; padding:24px; box-shadow:var(--shadow-card); }
65
+ .card h3 { font-size:20px; font-weight:300; margin-bottom:8px; }
66
+ .card p { font-size:14px; color:var(--dark-gray); line-height:1.50; letter-spacing:0.14px; }
67
+
68
+ .form-group { margin-bottom:16px; max-width:400px; }
69
+ .form-label { display:block; font-size:14px; font-weight:500; margin-bottom:6px; letter-spacing:0.14px; }
70
+ .form-input { width:100%; background:var(--white); color:var(--black); border:1px solid var(--border); padding:10px 14px; border-radius:12px; font-family:var(--font-sans); font-size:15px; outline:none; box-shadow:var(--shadow-inset); transition:box-shadow 0.15s; }
71
+ .form-input:focus { box-shadow:0 0 0 2px rgb(147,197,253); }
72
+ .form-input--focus { box-shadow:0 0 0 2px rgb(147,197,253); }
73
+ .form-input--error { border-color:#ef4444; box-shadow:0 0 0 2px rgba(239,68,68,0.3); }
74
+ .form-textarea { width:100%; min-height:80px; background:var(--white); color:var(--black); border:1px solid var(--border); padding:10px 14px; border-radius:12px; font-family:var(--font-sans); font-size:15px; resize:vertical; outline:none; box-shadow:var(--shadow-inset); }
75
+ .form-state-label { font-size:10px; color:var(--warm-gray); margin-top:4px; }
76
+
77
+ .spacing-row { display:flex; align-items:flex-end; gap:10px; flex-wrap:wrap; margin-bottom:20px; }
78
+ .spacing-item { text-align:center; }
79
+ .spacing-block { background:var(--black); border-radius:4px; margin-bottom:6px; height:28px; opacity:0.15; }
80
+ .spacing-value { font-family:var(--font-mono); font-size:10px; color:var(--warm-gray); }
81
+
82
+ .radius-row { display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
83
+ .radius-item { text-align:center; }
84
+ .radius-box { width:60px; height:60px; background:var(--light); margin-bottom:6px; box-shadow:var(--shadow-inset); }
85
+ .radius-label { font-family:var(--font-mono); font-size:10px; color:var(--warm-gray); }
86
+ .radius-context { font-size:9px; color:var(--warm-gray); }
87
+
88
+ .elevation-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:16px; }
89
+ .elevation-card { background:var(--white); border-radius:20px; padding:20px; text-align:center; }
90
+ .elevation-label { font-size:14px; font-weight:500; margin-bottom:4px; }
91
+ .elevation-desc { font-family:var(--font-mono); font-size:10px; color:var(--warm-gray); }
92
+
93
+ .footer { padding:32px; text-align:center; border-top:1px solid var(--border); font-size:13px; color:var(--warm-gray); letter-spacing:0.13px; }
94
+ .footer a { color:var(--black); text-decoration:underline; }
95
+
96
+ @media (max-width:1024px) {
97
+ .hero h1 { font-size:36px; }
98
+ .nav-links { display:none; }
99
+ .section { padding:48px 20px; }
100
+ .card-grid { grid-template-columns:1fr; }
101
+ }
102
+ </style>
103
+ </head>
104
+ <body>
105
+
106
+ <nav class="nav">
107
+ <a class="nav-brand" href="#">awesome-design-md</a>
108
+ <ul class="nav-links">
109
+ <li><a href="#colors">Colors</a></li>
110
+ <li><a href="#typography">Typography</a></li>
111
+ <li><a href="#buttons">Buttons</a></li>
112
+ <li><a href="#cards">Cards</a></li>
113
+ <li><a href="#forms">Forms</a></li>
114
+ <li><a href="#spacing">Spacing</a></li>
115
+ </ul>
116
+ <a class="nav-cta" href="#">Get Started</a>
117
+ </nav>
118
+
119
+ <section class="hero">
120
+ <h1>Design System<br>Inspired by ElevenLabs</h1>
121
+ <p>A design token catalog generated from DESIGN.md. Every color, font, component, and spacing value — visualized.</p>
122
+ <div class="hero-buttons">
123
+ <a class="btn-black" href="#">Try for Free</a>
124
+ <a class="btn-warm" href="#">Explore Voice AI</a>
125
+ </div>
126
+ </section>
127
+
128
+ <hr class="section-divider">
129
+
130
+ <section class="section" id="colors">
131
+ <div class="section-label">01 / Colors</div>
132
+ <h2 class="section-title">Color Palette</h2>
133
+ <div class="color-group-label">Primary</div>
134
+ <div class="color-grid">
135
+ <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">Primary surface</div></div></div>
136
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#f5f5f5"></div><div class="color-swatch-info"><div class="color-swatch-name">Light Gray</div><div class="color-swatch-hex">#f5f5f5</div><div class="color-swatch-role">Section background</div></div></div>
137
+ <div class="color-swatch"><div class="color-swatch-block" style="background:rgba(245,242,239,0.8)"></div><div class="color-swatch-info"><div class="color-swatch-name">Warm Stone</div><div class="color-swatch-hex">rgba(245,242,239,0.8)</div><div class="color-swatch-role">Featured CTA</div></div></div>
138
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#000000"></div><div class="color-swatch-info"><div class="color-swatch-name">Black</div><div class="color-swatch-hex">#000000</div><div class="color-swatch-role">Text, buttons</div></div></div>
139
+ </div>
140
+ <div class="color-group-label">Neutral Scale</div>
141
+ <div class="color-grid">
142
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#4e4e4e"></div><div class="color-swatch-info"><div class="color-swatch-name">Dark Gray</div><div class="color-swatch-hex">#4e4e4e</div><div class="color-swatch-role">Secondary text</div></div></div>
143
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#777169"></div><div class="color-swatch-info"><div class="color-swatch-name">Warm Gray</div><div class="color-swatch-hex">#777169</div><div class="color-swatch-role">Muted text, links</div></div></div>
144
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#e5e5e5"></div><div class="color-swatch-info"><div class="color-swatch-name">Border</div><div class="color-swatch-hex">#e5e5e5</div><div class="color-swatch-role">Borders, dividers</div></div></div>
145
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#292524"></div><div class="color-swatch-info"><div class="color-swatch-name">Near Black</div><div class="color-swatch-hex">#292524</div><div class="color-swatch-role">Dark sections</div></div></div>
146
+ </div>
147
+ </section>
148
+
149
+ <hr class="section-divider">
150
+
151
+ <section class="section" id="typography">
152
+ <div class="section-label">02 / Typography</div>
153
+ <h2 class="section-title">Typography Scale</h2>
154
+ <div class="type-sample"><div style="font-size:48px; font-weight:300; line-height:1.08; letter-spacing:-0.96px;">Display Hero</div><div class="type-meta">Display — 48px / 300 / 1.08 / -0.96px / Waldenburg</div></div>
155
+ <div class="type-sample"><div style="font-size:36px; font-weight:300; line-height:1.17;">Section Heading</div><div class="type-meta">Section — 36px / 300 / 1.17 / Waldenburg</div></div>
156
+ <div class="type-sample"><div style="font-size:32px; font-weight:300; line-height:1.13;">Card Heading</div><div class="type-meta">Card — 32px / 300 / 1.13 / Waldenburg</div></div>
157
+ <div class="type-sample"><div style="font-size:20px; font-weight:400; line-height:1.35;">Body Large — Bringing every conversation to life</div><div class="type-meta">Body Large — 20px / 400 / 1.35 / Inter</div></div>
158
+ <div class="type-sample"><div style="font-size:18px; font-weight:400; line-height:1.60; letter-spacing:0.18px;">Body — The most realistic AI voice platform. Create natural-sounding speech in any language.</div><div class="type-meta">Body — 18px / 400 / 1.60 / +0.18px / Inter</div></div>
159
+ <div class="type-sample"><div style="font-size:15px; font-weight:500; line-height:1.47; letter-spacing:0.15px;">Nav / Button</div><div class="type-meta">Nav — 15px / 500 / 1.47 / +0.15px / Inter</div></div>
160
+ <div class="type-sample"><div style="font-size:14px; font-weight:700; line-height:1.10; text-transform:uppercase; letter-spacing:0.7px;">Uppercase CTA</div><div class="type-meta">CTA — 14px / 700 / uppercase / +0.7px / WaldenburgFH</div></div>
161
+ <div class="type-sample"><div style="font-size:14px; font-weight:400; line-height:1.43; letter-spacing:0.14px;">Caption — Last updated 3 hours ago</div><div class="type-meta">Caption — 14px / 400 / 1.43 / +0.14px / Inter</div></div>
162
+ <div class="type-sample"><div style="font-family:var(--font-mono); font-size:13px; font-weight:400; line-height:1.85; color:var(--dark-gray);">const audio = await elevenlabs.generate({ text: "Hello" })</div><div class="type-meta">Code — 13px / 400 / 1.85 / Geist Mono</div></div>
163
+ </section>
164
+
165
+ <hr class="section-divider">
166
+
167
+ <section class="section" id="buttons">
168
+ <div class="section-label">03 / Buttons</div>
169
+ <h2 class="section-title">Button Variants</h2>
170
+ <div class="button-row">
171
+ <div class="button-item"><a class="btn-black" href="#">Try for Free</a><div class="button-label">Black Pill</div></div>
172
+ <div class="button-item"><a class="btn-warm" href="#">Explore Voice AI</a><div class="button-label">Warm Stone</div></div>
173
+ <div class="button-item"><a class="btn-white" href="#">Learn More</a><div class="button-label">White Shadow</div></div>
174
+ <div class="button-item"><a class="btn-upper" href="#">Get Started</a><div class="button-label">Uppercase Bold</div></div>
175
+ </div>
176
+ </section>
177
+
178
+ <hr class="section-divider">
179
+
180
+ <section class="section" id="cards">
181
+ <div class="section-label">04 / Cards</div>
182
+ <h2 class="section-title">Card Examples</h2>
183
+ <div class="card-grid">
184
+ <div class="card"><h3>Text to Speech</h3><p>Generate natural, expressive speech from text in any language with the most realistic AI voices.</p></div>
185
+ <div class="card" style="box-shadow:rgba(0,0,0,0.4) 0px 0px 1px, rgba(0,0,0,0.04) 0px 4px 4px;"><h3>Voice Cloning</h3><p>Create a digital replica of any voice with just a few minutes of audio. Elevated shadow variant.</p></div>
186
+ <div class="card" style="background:var(--light);"><h3>Audio Native</h3><p>Turn any written content into engaging audio. Light gray background variant for section differentiation.</p></div>
187
+ </div>
188
+ </section>
189
+
190
+ <hr class="section-divider">
191
+
192
+ <section class="section" id="forms">
193
+ <div class="section-label">05 / Forms</div>
194
+ <h2 class="section-title">Form Elements</h2>
195
+ <div class="form-group"><label class="form-label">Voice Name</label><input class="form-input" type="text" placeholder="My Custom Voice"><div class="form-state-label">Default (inset border shadow)</div></div>
196
+ <div class="form-group"><label class="form-label">Language</label><input class="form-input form-input--focus" type="text" value="English"><div class="form-state-label">Focus (blue ring)</div></div>
197
+ <div class="form-group"><label class="form-label">API Key</label><input class="form-input form-input--error" type="text" value="invalid_key"><div class="form-state-label">Error (red ring)</div></div>
198
+ <div class="form-group"><label class="form-label">Text Input</label><textarea class="form-textarea" placeholder="Enter text to convert to speech..."></textarea></div>
199
+ </section>
200
+
201
+ <hr class="section-divider">
202
+
203
+ <section class="section" id="spacing">
204
+ <div class="section-label">06 / Spacing</div>
205
+ <h2 class="section-title">Spacing Scale</h2>
206
+ <div class="spacing-row">
207
+ <div class="spacing-item"><div class="spacing-block" style="width:4px"></div><div class="spacing-value">4</div></div>
208
+ <div class="spacing-item"><div class="spacing-block" style="width:8px"></div><div class="spacing-value">8</div></div>
209
+ <div class="spacing-item"><div class="spacing-block" style="width:12px"></div><div class="spacing-value">12</div></div>
210
+ <div class="spacing-item"><div class="spacing-block" style="width:16px"></div><div class="spacing-value">16</div></div>
211
+ <div class="spacing-item"><div class="spacing-block" style="width:20px"></div><div class="spacing-value">20</div></div>
212
+ <div class="spacing-item"><div class="spacing-block" style="width:24px"></div><div class="spacing-value">24</div></div>
213
+ <div class="spacing-item"><div class="spacing-block" style="width:32px"></div><div class="spacing-value">32</div></div>
214
+ <div class="spacing-item"><div class="spacing-block" style="width:40px"></div><div class="spacing-value">40</div></div>
215
+ </div>
216
+ </section>
217
+
218
+ <hr class="section-divider">
219
+
220
+ <section class="section" id="radius">
221
+ <div class="section-label">07 / Radius</div>
222
+ <h2 class="section-title">Border Radius Scale</h2>
223
+ <div class="radius-row">
224
+ <div class="radius-item"><div class="radius-box" style="border-radius:4px"></div><div class="radius-label">4px</div><div class="radius-context">Tags</div></div>
225
+ <div class="radius-item"><div class="radius-box" style="border-radius:8px"></div><div class="radius-label">8px</div><div class="radius-context">Small</div></div>
226
+ <div class="radius-item"><div class="radius-box" style="border-radius:12px"></div><div class="radius-label">12px</div><div class="radius-context">Inputs</div></div>
227
+ <div class="radius-item"><div class="radius-box" style="border-radius:16px"></div><div class="radius-label">16px</div><div class="radius-context">Cards</div></div>
228
+ <div class="radius-item"><div class="radius-box" style="border-radius:20px"></div><div class="radius-label">20px</div><div class="radius-context">Panels</div></div>
229
+ <div class="radius-item"><div class="radius-box" style="border-radius:24px"></div><div class="radius-label">24px</div><div class="radius-context">Sections</div></div>
230
+ <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">Buttons</div></div>
231
+ </div>
232
+ </section>
233
+
234
+ <hr class="section-divider">
235
+
236
+ <section class="section" id="elevation">
237
+ <div class="section-label">08 / Elevation</div>
238
+ <h2 class="section-title">Elevation &amp; Depth</h2>
239
+ <div class="elevation-grid">
240
+ <div class="elevation-card" style="box-shadow:var(--shadow-inset);"><div class="elevation-label">Inset Edge</div><div class="elevation-desc">0.5px inset border</div></div>
241
+ <div class="elevation-card" style="box-shadow:var(--shadow-card);"><div class="elevation-label">Card</div><div class="elevation-desc">Outline + subtle lift</div></div>
242
+ <div class="elevation-card" style="box-shadow:var(--shadow-btn);"><div class="elevation-label">Button</div><div class="elevation-desc">Strong outline + lift</div></div>
243
+ <div class="elevation-card" style="box-shadow:var(--shadow-warm);"><div class="elevation-label">Warm Lift</div><div class="elevation-desc">Warm-tinted shadow</div></div>
244
+ <div class="elevation-card" style="box-shadow:0 0 0 2px rgb(147,197,253);"><div class="elevation-label">Focus</div><div class="elevation-desc">Blue ring</div></div>
245
+ </div>
246
+ </section>
247
+
248
+ <footer class="footer">
249
+ Generated from <a href="https://elevenlabs.io/">elevenlabs.io</a> DESIGN.md — awesome-design-md
250
+ </footer>
251
+
252
+ </body>
253
+ </html>
package/design-md/expo/DESIGN.md ADDED
@@ -0,0 +1,281 @@
1
+ # Design System: Expo
2
+
3
+ ## 1. Visual Theme & Atmosphere
4
+
5
+ Expo's interface is a luminous, confidence-radiating developer platform built on the premise that tools for building apps should feel as polished as the apps themselves. The entire experience lives on a bright, airy canvas — a cool-tinted off-white (`#f0f0f3`) that gives the page a subtle technological coolness without the starkness of pure white. This is a site that breathes: enormous vertical spacing between sections creates a gallery-like pace where each feature gets its own "room."
6
+
7
+ The design language is decisively monochromatic — pure black (`#000000`) headlines against the lightest possible backgrounds, with a spectrum of cool blue-grays (`#60646c`, `#b0b4ba`, `#555860`) handling all secondary communication. Color is almost entirely absent from the interface itself; when it appears, it's reserved for product screenshots, app icons, and the React universe illustration — making the actual content burst with life against the neutral canvas.
8
+
9
+ What makes Expo distinctive is its pill-shaped geometry. Buttons, tabs, video containers, and even images use generously rounded or fully pill-shaped corners (24px–9999px), creating an organic, approachable feel that contradicts the typical sharp-edged developer tool aesthetic. Combined with tight letter-spacing on massive headlines (-1.6px to -3px at 64px), the result is a design that's simultaneously premium and friendly — like an Apple product page reimagined for developers.
10
+
11
+ **Key Characteristics:**
12
+ - Luminous cool-white canvas (`#f0f0f3`) with gallery-like vertical spacing
13
+ - Strictly monochromatic: pure black headlines, cool blue-gray body text, no decorative color
14
+ - Pill-shaped geometry everywhere — buttons, tabs, containers, images (24px–9999px radius)
15
+ - Massive display headlines (64px) with extreme negative letter-spacing (-1.6px to -3px)
16
+ - Inter as the sole typeface, used at weights 400–900 for full expressive range
17
+ - Whisper-soft shadows that barely lift elements from the surface
18
+ - Product screenshots as the only source of color in the interface
19
+
20
+ ## 2. Color Palette & Roles
21
+
22
+ ### Primary
23
+ - **Expo Black** (`#000000`): The absolute anchor — used for primary headlines, CTA buttons, and the brand identity. Pure black on cool white creates maximum contrast without feeling aggressive.
24
+ - **Near Black** (`#1c2024`): The primary text color for body content — a barely perceptible blue-black that's softer than pure #000 for extended reading.
25
+
26
+ ### Secondary & Accent
27
+ - **Link Cobalt** (`#0d74ce`): The standard link color — a trustworthy, saturated blue that signals interactivity without competing with the monochrome hierarchy.
28
+ - **Legal Blue** (`#476cff`): A brighter, more saturated blue for legal/footer links — slightly more attention-grabbing than Link Cobalt.
29
+ - **Widget Sky** (`#47c2ff`): A light, friendly cyan-blue for widget branding elements — the brightest accent in the system.
30
+ - **Preview Purple** (`#8145b5`): A rich violet used for "preview" or beta feature indicators — creating clear visual distinction from standard content.
31
+
32
+ ### Surface & Background
33
+ - **Cloud Gray** (`#f0f0f3`): The primary page background — a cool off-white with the faintest blue-violet tint. Not warm, not sterile — precisely technological.
34
+ - **Pure White** (`#ffffff`): Card surfaces, button backgrounds, and elevated content containers. Creates a clear "lifted" distinction from Cloud Gray.
35
+ - **Widget Dark** (`#1a1a1a`): Dark surface for dark-theme widgets and overlay elements.
36
+ - **Banner Dark** (`#171717`): The darkest surface variant, used for promotional banners and high-contrast containers.
37
+
38
+ ### Neutrals & Text
39
+ - **Slate Gray** (`#60646c`): The workhorse secondary text color (305 instances). A cool blue-gray that's authoritative without being heavy.
40
+ - **Mid Slate** (`#555860`): Slightly darker than Slate, used for emphasized secondary text.
41
+ - **Silver** (`#b0b4ba`): Tertiary text, placeholders, and de-emphasized metadata. Comfortably readable but clearly receded.
42
+ - **Pewter** (`#999999`): Accordion icons and deeply de-emphasized UI elements in dark contexts.
43
+ - **Light Silver** (`#cccccc`): Arrow icons and decorative elements in dark contexts.
44
+ - **Dark Slate** (`#363a3f`): Borders on dark surfaces, switch tracks, and emphasized containment.
45
+ - **Charcoal** (`#333333`): Dark mode switch backgrounds and deep secondary surfaces.
46
+
47
+ ### Semantic & Accent
48
+ - **Warning Amber** (`#ab6400`): A warm, deep amber for warning states — deliberately not bright yellow, conveying seriousness.
49
+ - **Destructive Rose** (`#eb8e90`): A soft pink-coral for disabled destructive actions — gentler than typical red, reducing alarm fatigue.
50
+ - **Border Lavender** (`#e0e1e6`): Standard card/container borders — a cool lavender-gray that's visible without being heavy.
51
+ - **Input Border** (`#d9d9e0`): Button and form element borders — slightly warmer/darker than card borders for interactive elements.
52
+ - **Dark Focus Ring** (`#2547d0`): Deep blue for keyboard focus indicators in dark theme contexts.
53
+
54
+ ### Gradient System
55
+ - The design is notably **gradient-free** in the interface layer. Visual richness comes from product screenshots, the React universe illustration, and careful shadow layering rather than color gradients. This absence IS the design decision — gradients would undermine the clinical precision.
56
+
57
+ ## 3. Typography Rules
58
+
59
+ ### Font Family
60
+ - **Primary**: `Inter`, with fallbacks: `-apple-system, system-ui`
61
+ - **Monospace**: `JetBrains Mono`, with fallback: `ui-monospace`
62
+ - **System Fallback**: `system-ui, Segoe UI, Roboto, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji`
63
+
64
+ ### Hierarchy
65
+
66
+ | Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
67
+ |------|------|------|--------|-------------|----------------|-------|
68
+ | Display / Hero | Inter | 64px (4rem) | 700–900 | 1.10 (tight) | -1.6px to -3px | Maximum impact, extreme tracking |
69
+ | Section Heading | Inter | 48px (3rem) | 600 | 1.10 (tight) | -2px | Feature section anchors |
70
+ | Sub-heading | Inter | 20px (1.25rem) | 600 | 1.20 (tight) | -0.25px | Card titles, feature names |
71
+ | Body Large | Inter | 18px (1.13rem) | 400–500 | 1.40 | normal | Intro paragraphs, section descriptions |
72
+ | Body / Button | Inter | 16px (1rem) | 400–700 | 1.25–1.40 | normal | Standard text, nav links, buttons |
73
+ | Caption / Label | Inter | 14px (0.88rem) | 400–600 | 1.00–1.40 | normal | Descriptions, metadata, badge text |
74
+ | Tag / Small | Inter | 12px (0.75rem) | 500 | 1.00–1.60 | normal | Smallest sans-serif text, badges |
75
+ | Code Body | JetBrains Mono | 16px (1rem) | 400–600 | 1.40 | normal | Inline code, terminal commands |
76
+ | Code Caption | JetBrains Mono | 14px (0.88rem) | 400–600 | 1.40 | normal | Code snippets, technical labels |
77
+ | Code Small | JetBrains Mono | 12px (0.75rem) | 400 | 1.60 | normal | Uppercase tech tags |
78
+
79
+ ### Principles
80
+ - **One typeface, full expression**: Inter is the only sans-serif, used from weight 400 (regular) through 900 (black). This gives the design a unified voice while still achieving dramatic contrast between whisper-light body text and thundering display headlines.
81
+ - **Extreme negative tracking at scale**: Headlines at 64px use -1.6px to -3px letter-spacing, creating ultra-dense text blocks that feel like logotypes. This aggressive compression is the signature typographic move.
82
+ - **Weight as hierarchy**: 700–900 for display, 600 for headings, 500 for emphasis, 400 for body. The jumps are decisive — no ambiguous in-between weights.
83
+ - **Consistent 1.40 body line-height**: Nearly all body and UI text shares 1.40 line-height, creating a rhythmic vertical consistency.
84
+
85
+ ## 4. Component Stylings
86
+
87
+ ### Buttons
88
+
89
+ **Primary (White on border)**
90
+ - Background: Pure White (`#ffffff`)
91
+ - Text: Near Black (`#1c2024`)
92
+ - Padding: 0px 12px (compact, content-driven height)
93
+ - Border: thin solid Input Border (`1px solid #d9d9e0`)
94
+ - Radius: subtly rounded (6px)
95
+ - Shadow: subtle combined shadow on hover
96
+ - The understated default — clean, professional, unheroic
97
+
98
+ **Primary Pill**
99
+ - Same as Primary but with pill-shaped radius (9999px)
100
+ - Used for hero CTAs and high-emphasis actions
101
+ - The extra roundness signals "start here"
102
+
103
+ **Dark Primary**
104
+ - Background: Expo Black (`#000000`)
105
+ - Text: Pure White (`#ffffff`)
106
+ - Pill-shaped (9999px) or generously rounded (32–36px)
107
+ - No border (black IS the border)
108
+ - The maximum-emphasis CTA — reserved for primary conversion actions
109
+
110
+ ### Cards & Containers
111
+ - Background: Pure White (`#ffffff`) — clearly lifted from Cloud Gray page
112
+ - Border: thin solid Border Lavender (`1px solid #e0e1e6`) for standard cards
113
+ - Radius: comfortably rounded (8px) for standard cards; generously rounded (16–24px) for featured containers
114
+ - Shadow Level 1: Whisper (`rgba(0,0,0,0.08) 0px 3px 6px, rgba(0,0,0,0.07) 0px 2px 4px`) — barely perceptible lift
115
+ - Shadow Level 2: Standard (`rgba(0,0,0,0.1) 0px 10px 20px, rgba(0,0,0,0.05) 0px 3px 6px`) — clear floating elevation
116
+ - Hover: likely subtle shadow deepening or background shift
117
+
118
+ ### Inputs & Forms
119
+ - Background: Pure White (`#ffffff`)
120
+ - Text: Near Black (`#1c2024`)
121
+ - Border: thin solid Input Border (`1px solid #d9d9e0`)
122
+ - Padding: 0px 12px (inline with button sizing)
123
+ - Radius: subtly rounded (6px)
124
+ - Focus: blue ring shadow via CSS custom property
125
+
126
+ ### Navigation
127
+ - Sticky top nav on transparent/blurred background
128
+ - Logo: Expo wordmark in black
129
+ - Links: Near Black (`#1c2024`) or Slate Gray (`#60646c`) at 14–16px Inter weight 500
130
+ - CTA: Black pill button ("Sign Up") on the right
131
+ - GitHub star badge as social proof
132
+ - Status indicator ("All Systems Operational") with green dot
133
+
134
+ ### Image Treatment
135
+ - Product screenshots and device mockups are the visual heroes
136
+ - Generously rounded corners (24px) on video and image containers
137
+ - Screenshots shown in realistic device frames
138
+ - Dark UI screenshots provide contrast against the light canvas
139
+ - Full-bleed within rounded containers
140
+
141
+ ### Distinctive Components
142
+
143
+ **Universe React Logo**
144
+ - Animated/illustrated React logo as the visual centerpiece
145
+ - Connects Expo's identity to the React ecosystem
146
+ - The only illustrative element on an otherwise photographic page
147
+
148
+ **Device Preview Grid**
149
+ - Multiple device types (phone, tablet, web) shown simultaneously
150
+ - Demonstrates cross-platform capability visually
151
+ - Each device uses realistic device chrome
152
+
153
+ **Status Badge**
154
+ - "All Systems Operational" pill in the nav
155
+ - Green dot + text — compact trust signal
156
+ - Pill-shaped (36px radius)
157
+
158
+ ## 5. Layout Principles
159
+
160
+ ### Spacing System
161
+ - Base unit: 8px
162
+ - Scale: 1px, 2px, 4px, 8px, 12px, 16px, 24px, 32px, 40px, 48px, 64px, 80px, 96px, 144px
163
+ - Button padding: 0px 12px (unusually compact — height driven by line-height)
164
+ - Card internal padding: approximately 24–32px
165
+ - Section vertical spacing: enormous (estimated 96–144px between major sections)
166
+ - Component gap: 16–24px between sibling elements
167
+
168
+ ### Grid & Container
169
+ - Max container width: approximately 1200–1400px, centered
170
+ - Hero: centered single-column with massive breathing room
171
+ - Feature sections: alternating layouts (image left/right, full-width showcases)
172
+ - Card grids: 2–3 column for feature highlights
173
+ - Full-width sections with contained inner content
174
+
175
+ ### Whitespace Philosophy
176
+ - **Gallery-like pacing**: Each section feels like its own exhibit, surrounded by vast empty space. This creates a premium, unhurried browsing experience.
177
+ - **Breathing room is the design**: The generous whitespace IS the primary design element — it communicates confidence, quality, and that each feature deserves individual attention.
178
+ - **Content islands**: Sections float as isolated "islands" in the white space, connected by scrolling rather than visual continuation.
179
+
180
+ ### Border Radius Scale
181
+ - Nearly squared (4px): Small inline elements, tags
182
+ - Subtly rounded (6px): Buttons, form inputs, combo boxes — the functional interactive radius
183
+ - Comfortably rounded (8px): Standard content cards, containers
184
+ - Generously rounded (16px): Feature tabs, content panels
185
+ - Very rounded (24px): Buttons, video/image containers, tabpanels — the signature softness
186
+ - Highly rounded (32–36px): Hero CTAs, status badges, nav buttons
187
+ - Pill-shaped (9999px): Primary action buttons, tags, avatars — maximum friendliness
188
+
189
+ ## 6. Depth & Elevation
190
+
191
+ | Level | Treatment | Use |
192
+ |-------|-----------|-----|
193
+ | Flat (Level 0) | No shadow | Cloud Gray page background, inline text |
194
+ | Surface (Level 1) | White bg, no shadow | Standard white cards on Cloud Gray |
195
+ | Whisper (Level 2) | `rgba(0,0,0,0.08) 0px 3px 6px` + `rgba(0,0,0,0.07) 0px 2px 4px` | Subtle card lift, hover states |
196
+ | Elevated (Level 3) | `rgba(0,0,0,0.1) 0px 10px 20px` + `rgba(0,0,0,0.05) 0px 3px 6px` | Feature showcases, product screenshots |
197
+ | Modal (Level 4) | Dark overlay (`--dialog-overlay-background-color`) + heavy shadow | Dialogs, overlays |
198
+
199
+ **Shadow Philosophy**: Expo uses shadows as gentle whispers rather than architectural statements. The primary depth mechanism is **background color contrast** — white cards floating on Cloud Gray — rather than shadow casting. When shadows appear, they're soft, diffused, and directional (downward), creating the feeling of paper hovering millimeters above a desk.
200
+
201
+ ## 7. Do's and Don'ts
202
+
203
+ ### Do
204
+ - Use Cloud Gray (`#f0f0f3`) as the page background and Pure White (`#ffffff`) for elevated cards — the two-tone light system is essential
205
+ - Keep display headlines at extreme negative letter-spacing (-1.6px to -3px at 64px) for the signature compressed look
206
+ - Use pill-shaped (9999px) radius for primary CTA buttons — the organic shape is core to the identity
207
+ - Reserve black (`#000000`) for headlines and primary CTAs — it carries maximum authority on the light canvas
208
+ - Use Slate Gray (`#60646c`) for secondary text — it's the precise balance between readable and receded
209
+ - Maintain enormous vertical spacing between sections (96px+) — the gallery pacing defines the premium feel
210
+ - Use product screenshots as the primary visual content — the interface stays monochrome, the products bring color
211
+ - Apply Inter at the full weight range (400–900) — weight contrast IS the hierarchy
212
+
213
+ ### Don't
214
+ - Don't introduce decorative colors into the interface chrome — the monochromatic palette is intentional
215
+ - Don't use sharp corners (border-radius < 6px) on interactive elements — the pill/rounded geometry is the signature
216
+ - Don't reduce section spacing below 64px — the breathing room is the design
217
+ - Don't use heavy drop shadows — depth comes from background contrast and whisper-soft shadows
218
+ - Don't mix in additional typefaces — Inter handles everything from display to caption
219
+ - Don't use letter-spacing wider than -0.25px on body text — extreme tracking is reserved for display only
220
+ - Don't use borders heavier than 2px — containment is subtle, achieved through background color and gentle borders
221
+ - Don't add gradients to the interface — visual richness comes from content, not decoration
222
+ - Don't use saturated colors outside of semantic contexts — the palette is strictly grayscale + functional blue
223
+
224
+ ## 8. Responsive Behavior
225
+
226
+ ### Breakpoints
227
+ | Name | Width | Key Changes |
228
+ |------|-------|-------------|
229
+ | Mobile | <640px | Single column, hamburger nav, stacked cards, hero text scales to ~36px |
230
+ | Tablet | 640–1024px | 2-column grids, condensed nav, medium hero text |
231
+ | Desktop | >1024px | Full multi-column layout, expanded nav, massive hero (64px) |
232
+
233
+ *Only one explicit breakpoint detected (640px), suggesting a fluid, container-query or min()/clamp()-based responsive system rather than fixed breakpoint snapping.*
234
+
235
+ ### Touch Targets
236
+ - Buttons use generous radius (24–36px) creating large, finger-friendly surfaces
237
+ - Navigation links spaced with adequate gap
238
+ - Status badge sized for touch (36px radius)
239
+ - Minimum recommended: 44x44px
240
+
241
+ ### Collapsing Strategy
242
+ - **Navigation**: Full horizontal nav with CTA collapses to hamburger on mobile
243
+ - **Feature sections**: Multi-column → stacked single column
244
+ - **Hero text**: 64px → ~36px progressive scaling
245
+ - **Device previews**: Grid → stacked/carousel
246
+ - **Cards**: Side-by-side → vertical stacking
247
+ - **Spacing**: Reduces proportionally but maintains generous rhythm
248
+
249
+ ### Image Behavior
250
+ - Product screenshots scale proportionally
251
+ - Device mockups may simplify or show fewer devices on mobile
252
+ - Rounded corners maintained at all sizes
253
+ - Lazy loading for below-fold content
254
+
255
+ ## 9. Agent Prompt Guide
256
+
257
+ ### Quick Color Reference
258
+ - Primary CTA / Headlines: "Expo Black (#000000)"
259
+ - Page Background: "Cloud Gray (#f0f0f3)"
260
+ - Card Surface: "Pure White (#ffffff)"
261
+ - Body Text: "Near Black (#1c2024)"
262
+ - Secondary Text: "Slate Gray (#60646c)"
263
+ - Borders: "Border Lavender (#e0e1e6)"
264
+ - Links: "Link Cobalt (#0d74ce)"
265
+ - Tertiary Text: "Silver (#b0b4ba)"
266
+
267
+ ### Example Component Prompts
268
+ - "Create a hero section on Cloud Gray (#f0f0f3) with a massive headline at 64px Inter weight 700, line-height 1.10, letter-spacing -3px. Text in Expo Black (#000000). Below, add a subtitle in Slate Gray (#60646c) at 18px. Place a black pill-shaped CTA button (9999px radius) beneath."
269
+ - "Design a feature card on Pure White (#ffffff) with a 1px solid Border Lavender (#e0e1e6) border and comfortably rounded corners (8px). Title in Near Black (#1c2024) at 20px Inter weight 600, description in Slate Gray (#60646c) at 16px. Add a whisper shadow (rgba(0,0,0,0.08) 0px 3px 6px)."
270
+ - "Build a navigation bar with Expo logo on the left, text links in Near Black (#1c2024) at 14px Inter weight 500, and a black pill CTA button on the right. Background: transparent with blur backdrop. Bottom border: 1px solid Border Lavender (#e0e1e6)."
271
+ - "Create a code block using JetBrains Mono at 14px on a Pure White surface with Border Lavender border and 8px radius. Code in Near Black, keywords in Link Cobalt (#0d74ce)."
272
+ - "Design a status badge pill (9999px radius) with a green dot and 'All Systems Operational' text in Inter 12px weight 500. Background: Pure White, border: 1px solid Input Border (#d9d9e0)."
273
+
274
+ ### Iteration Guide
275
+ 1. Focus on ONE component at a time
276
+ 2. Reference specific color names and hex codes — "use Slate Gray (#60646c)" not "make it gray"
277
+ 3. Use radius values deliberately — 6px for buttons, 8px for cards, 24px for images, 9999px for pills
278
+ 4. Describe the "feel" alongside measurements — "enormous breathing room with 96px section spacing"
279
+ 5. Always specify Inter and the exact weight — weight contrast IS the hierarchy
280
+ 6. For shadows, specify "whisper shadow" or "standard elevation" from the elevation table
281
+ 7. Keep the interface monochrome — let product content be the color
package/design-md/expo/README.md ADDED
@@ -0,0 +1,24 @@
1
+ # Expo Inspired Design System
2
+
3
+ [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/expo/DESIGN.md) extracted from the public [expo](https://expo.dev/) 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/expo/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Expo 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
+ ![Expo Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/expo/preview-dark-screenshot.png)
22
+
23
+ ### Light Mode
24
+ ![Expo Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/expo/preview-screenshot.png)