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/airbnb/preview-dark.html ADDED
@@ -0,0 +1,234 @@
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: Airbnb (Dark)</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=Nunito+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
10
+ <style>
11
+ :root {
12
+ --white: #1a1a1a; --near-black: #f0f0f0; --rausch: #ff385c; --deep-rausch: #e00b41;
13
+ --secondary: #a0a0a0; --disabled: #666666; --border: #3a3a3a; --surface: #2a2a2a;
14
+ --luxe: #460479; --plus: #92174d; --legal-blue: #428bff; --error: #c13515;
15
+ --shadow-card: rgba(0,0,0,0.02) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 6px, rgba(0,0,0,0.1) 0px 4px 8px;
16
+ --shadow-hover: rgba(0,0,0,0.08) 0px 4px 12px;
17
+ --font: 'Nunito Sans', -apple-system, system-ui, Roboto, Helvetica Neue, sans-serif;
18
+ }
19
+ * { margin:0; padding:0; box-sizing:border-box; }
20
+ body { background:var(--white); color:var(--near-black); font-family:var(--font); font-size:14px; font-weight:400; line-height:1.43; -webkit-font-smoothing:antialiased; }
21
+
22
+ .nav { position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:14px 24px; background:var(--white); border-bottom:1px solid #2a2a2a; }
23
+ .nav-brand { font-size:14px; font-weight:600; color:var(--near-black); text-decoration:none; }
24
+ .nav-links { display:flex; gap:20px; list-style:none; }
25
+ .nav-links a { font-size:14px; font-weight:500; color:var(--secondary); text-decoration:none; transition:color 0.15s; }
26
+ .nav-links a:hover { color:var(--near-black); }
27
+ .nav-cta { display:inline-flex; align-items:center; justify-content:center; background:var(--rausch); color:var(--white); width:40px; height:40px; border-radius:50%; font-size:18px; font-weight:700; text-decoration:none; border:none; }
28
+
29
+ .hero { padding:64px 24px; text-align:center; }
30
+ .hero h1 { font-size:28px; font-weight:700; line-height:1.43; margin-bottom:12px; }
31
+ .hero h1 span { color:var(--rausch); }
32
+ .hero p { font-size:16px; font-weight:400; color:var(--secondary); max-width:480px; margin:0 auto 24px; }
33
+ .hero-buttons { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
34
+ .btn-dark { display:inline-block; background:var(--near-black); color:var(--white); padding:12px 24px; border-radius:8px; font-family:var(--font); font-size:16px; font-weight:500; text-decoration:none; border:none; cursor:pointer; }
35
+ .btn-outline { display:inline-block; background:transparent; color:var(--near-black); padding:12px 24px; border-radius:8px; border:1px solid var(--near-black); font-family:var(--font); font-size:16px; font-weight:500; text-decoration:none; cursor:pointer; }
36
+ .btn-circle { display:inline-flex; align-items:center; justify-content:center; background:var(--surface); color:var(--near-black); width:36px; height:36px; border-radius:50%; font-size:14px; text-decoration:none; border:none; cursor:pointer; transition:box-shadow 0.2s; }
37
+ .btn-circle:hover { box-shadow:var(--shadow-hover); }
38
+
39
+ .section { padding:48px 24px; max-width:1100px; margin:0 auto; }
40
+ .section-label { font-size:12px; font-weight:700; color:var(--secondary); text-transform:uppercase; letter-spacing:0.32px; margin-bottom:8px; }
41
+ .section-title { font-size:22px; font-weight:600; line-height:1.18; letter-spacing:-0.44px; margin-bottom:24px; }
42
+ .section-divider { border:none; border-top:1px solid #2a2a2a; margin:0; }
43
+
44
+ .color-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(145px,1fr)); gap:10px; margin-bottom:20px; }
45
+ .color-swatch { border-radius:14px; overflow:hidden; box-shadow:var(--shadow-card); }
46
+ .color-swatch-block { height:64px; width:100%; }
47
+ .color-swatch-info { padding:10px; }
48
+ .color-swatch-name { font-size:12px; font-weight:600; margin-bottom:2px; }
49
+ .color-swatch-hex { font-size:10px; color:var(--secondary); font-family:monospace; }
50
+ .color-swatch-role { font-size:9px; color:var(--disabled); margin-top:2px; }
51
+ .color-group-label { font-size:12px; font-weight:700; color:var(--secondary); margin:20px 0 8px; }
52
+
53
+ .type-sample { margin-bottom:20px; padding-bottom:16px; border-bottom:1px solid #f5f5f5; }
54
+ .type-sample:last-child { border-bottom:none; }
55
+ .type-meta { font-size:10px; color:var(--disabled); margin-top:4px; font-family:monospace; }
56
+
57
+ .button-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
58
+ .button-item { text-align:center; }
59
+ .button-label { font-size:10px; color:var(--disabled); margin-top:6px; }
60
+
61
+ .card-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:16px; }
62
+ .card { background:var(--white); border-radius:20px; overflow:hidden; box-shadow:var(--shadow-card); }
63
+ .card-img { height:160px; background:var(--surface); display:flex; align-items:center; justify-content:center; color:var(--disabled); font-size:12px; }
64
+ .card-body { padding:16px; }
65
+ .card h3 { font-size:16px; font-weight:600; margin-bottom:4px; }
66
+ .card p { font-size:14px; color:var(--secondary); }
67
+
68
+ .form-group { margin-bottom:16px; max-width:400px; }
69
+ .form-label { display:block; font-size:12px; font-weight:600; margin-bottom:4px; }
70
+ .form-input { width:100%; background:var(--white); color:var(--near-black); border:1px solid var(--border); padding:12px 16px; border-radius:8px; font-family:var(--font); font-size:16px; outline:none; }
71
+ .form-input:focus { border-color:var(--near-black); box-shadow:0 0 0 2px var(--near-black); }
72
+ .form-input--focus { border-color:var(--near-black); box-shadow:0 0 0 2px var(--near-black); }
73
+ .form-input--error { border-color:var(--error); box-shadow:0 0 0 2px var(--error); }
74
+ .form-textarea { width:100%; min-height:80px; background:var(--white); color:var(--near-black); border:1px solid var(--border); padding:12px 16px; border-radius:8px; font-family:var(--font); font-size:16px; resize:vertical; outline:none; }
75
+ .form-state-label { font-size:9px; color:var(--disabled); margin-top:4px; }
76
+
77
+ .spacing-row { display:flex; align-items:flex-end; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
78
+ .spacing-item { text-align:center; }
79
+ .spacing-block { background:var(--rausch); border-radius:4px; margin-bottom:4px; height:24px; opacity:0.7; }
80
+ .spacing-value { font-size:9px; color:var(--disabled); font-family:monospace; }
81
+
82
+ .radius-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
83
+ .radius-item { text-align:center; }
84
+ .radius-box { width:56px; height:56px; background:var(--surface); margin-bottom:4px; }
85
+ .radius-label { font-size:9px; color:var(--disabled); font-family:monospace; }
86
+ .radius-context { font-size:8px; color:var(--disabled); }
87
+
88
+ .elevation-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:12px; }
89
+ .elevation-card { background:var(--white); border-radius:20px; padding:16px; text-align:center; }
90
+ .elevation-label { font-size:13px; font-weight:600; margin-bottom:4px; }
91
+ .elevation-desc { font-size:9px; color:var(--disabled); font-family:monospace; }
92
+
93
+ .footer { padding:24px; text-align:center; border-top:1px solid #2a2a2a; font-size:12px; color:var(--secondary); }
94
+ .footer a { color:var(--rausch); text-decoration:underline; }
95
+
96
+ @media (max-width:744px) { .nav-links { display:none; } .section { padding:32px 16px; } .card-grid { grid-template-columns:1fr; } }
97
+ </style>
98
+ </head>
99
+ <body>
100
+
101
+ <nav class="nav">
102
+ <a class="nav-brand" href="#">awesome-design-md</a>
103
+ <ul class="nav-links">
104
+ <li><a href="#colors">Colors</a></li>
105
+ <li><a href="#typography">Typography</a></li>
106
+ <li><a href="#buttons">Buttons</a></li>
107
+ <li><a href="#cards">Cards</a></li>
108
+ <li><a href="#forms">Forms</a></li>
109
+ </ul>
110
+ <a class="nav-cta" href="#">&#x1F50D;</a>
111
+ </nav>
112
+ <div style="position:fixed;top:16px;right:16px;z-index:200;background:#ff385c;color:#ffffff;font-size:10px;font-weight:700;padding:4px 10px;border-radius:20px;">Dark Mode</div>
113
+
114
+ <section class="hero">
115
+ <h1>Design System Inspired by <span>Airbnb</span></h1>
116
+ <p>A design token catalog generated from DESIGN.md. Every color, font, component, and spacing value — visualized.</p>
117
+ <div class="hero-buttons">
118
+ <a class="btn-dark" href="#">Explore Stays</a>
119
+ <a class="btn-outline" href="#">Become a Host</a>
120
+ </div>
121
+ </section>
122
+
123
+ <hr class="section-divider">
124
+
125
+ <section class="section" id="colors">
126
+ <div class="section-label">01 / Colors</div><h2 class="section-title">Color Palette</h2>
127
+ <div class="color-group-label">Brand</div>
128
+ <div class="color-grid">
129
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#ff385c"></div><div class="color-swatch-info"><div class="color-swatch-name">Rausch Red</div><div class="color-swatch-hex">#ff385c</div><div class="color-swatch-role">Primary CTA</div></div></div>
130
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#e00b41"></div><div class="color-swatch-info"><div class="color-swatch-name">Deep Rausch</div><div class="color-swatch-hex">#e00b41</div><div class="color-swatch-role">Pressed state</div></div></div>
131
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#460479"></div><div class="color-swatch-info"><div class="color-swatch-name">Luxe Purple</div><div class="color-swatch-hex">#460479</div><div class="color-swatch-role">Luxe tier</div></div></div>
132
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#92174d"></div><div class="color-swatch-info"><div class="color-swatch-name">Plus Magenta</div><div class="color-swatch-hex">#92174d</div><div class="color-swatch-role">Plus tier</div></div></div>
133
+ </div>
134
+ <div class="color-group-label">Text & Neutral</div>
135
+ <div class="color-grid">
136
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#222222"></div><div class="color-swatch-info"><div class="color-swatch-name">Near Black</div><div class="color-swatch-hex">#222222</div><div class="color-swatch-role">Primary text</div></div></div>
137
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#6a6a6a"></div><div class="color-swatch-info"><div class="color-swatch-name">Secondary</div><div class="color-swatch-hex">#6a6a6a</div><div class="color-swatch-role">Secondary text</div></div></div>
138
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#c1c1c1"></div><div class="color-swatch-info"><div class="color-swatch-name">Border</div><div class="color-swatch-hex">#c1c1c1</div><div class="color-swatch-role">Borders</div></div></div>
139
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#f2f2f2"></div><div class="color-swatch-info"><div class="color-swatch-name">Surface</div><div class="color-swatch-hex">#f2f2f2</div><div class="color-swatch-role">Circular buttons</div></div></div>
140
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#428bff"></div><div class="color-swatch-info"><div class="color-swatch-name">Legal Blue</div><div class="color-swatch-hex">#428bff</div><div class="color-swatch-role">Legal links</div></div></div>
141
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#c13515"></div><div class="color-swatch-info"><div class="color-swatch-name">Error</div><div class="color-swatch-hex">#c13515</div><div class="color-swatch-role">Error text</div></div></div>
142
+ </div>
143
+ </section>
144
+
145
+ <hr class="section-divider">
146
+
147
+ <section class="section" id="typography">
148
+ <div class="section-label">02 / Typography</div><h2 class="section-title">Typography Scale</h2>
149
+ <div class="type-sample"><div style="font-size:28px; font-weight:700; line-height:1.43;">Section Heading</div><div class="type-meta">Section — 28px / 700 / 1.43 / Cereal VF</div></div>
150
+ <div class="type-sample"><div style="font-size:22px; font-weight:600; line-height:1.18; letter-spacing:-0.44px;">Card Heading</div><div class="type-meta">Card — 22px / 600 / 1.18 / -0.44px</div></div>
151
+ <div class="type-sample"><div style="font-size:20px; font-weight:600; line-height:1.20; letter-spacing:-0.18px;">Feature Title</div><div class="type-meta">Feature — 20px / 600 / 1.20 / -0.18px</div></div>
152
+ <div class="type-sample"><div style="font-size:16px; font-weight:500; line-height:1.25;">UI Medium — Inspiration for future getaways</div><div class="type-meta">UI — 16px / 500 / 1.25</div></div>
153
+ <div class="type-sample"><div style="font-size:14px; font-weight:400; line-height:1.43; color:var(--secondary);">Body — Istanbul, Turkey. Apartment in Kadikoy. 2 guests, 1 bed, 1 bath.</div><div class="type-meta">Body — 14px / 400 / 1.43</div></div>
154
+ <div class="type-sample"><div style="font-size:12px; font-weight:700; line-height:1.33;">Tag Bold — $145 night</div><div class="type-meta">Tag Bold — 12px / 700 / 1.33</div></div>
155
+ <div class="type-sample"><div style="font-size:8px; font-weight:700; line-height:1.25; text-transform:uppercase; letter-spacing:0.32px;">SUPERHOST</div><div class="type-meta">Micro — 8px / 700 / uppercase / +0.32px</div></div>
156
+ </section>
157
+
158
+ <hr class="section-divider">
159
+
160
+ <section class="section" id="buttons">
161
+ <div class="section-label">03 / Buttons</div><h2 class="section-title">Button Variants</h2>
162
+ <div class="button-row">
163
+ <div class="button-item"><a class="btn-dark" href="#">Explore</a><div class="button-label">Primary Dark</div></div>
164
+ <div class="button-item"><a class="btn-outline" href="#">Host</a><div class="button-label">Outlined</div></div>
165
+ <div class="button-item"><a class="btn-circle" href="#">&#8592;</a><div class="button-label">Circle Nav</div></div>
166
+ <div class="button-item"><a class="btn-circle" href="#">&#8594;</a><div class="button-label">Circle Nav</div></div>
167
+ <div class="button-item"><span style="display:inline-flex; align-items:center; justify-content:center; background:var(--rausch); color:var(--white); width:40px; height:40px; border-radius:50%; font-size:18px;">&#x1F50D;</span><div class="button-label">Search</div></div>
168
+ </div>
169
+ </section>
170
+
171
+ <hr class="section-divider">
172
+
173
+ <section class="section" id="cards">
174
+ <div class="section-label">04 / Cards</div><h2 class="section-title">Card Examples</h2>
175
+ <div class="card-grid">
176
+ <div class="card"><div class="card-img">Photo placeholder</div><div class="card-body"><h3>Istanbul, Turkey</h3><p>Entire apartment. 2 guests, 1 bed. $78 night.</p></div></div>
177
+ <div class="card"><div class="card-img" style="background:#eee;">Photo placeholder</div><div class="card-body"><h3>Barcelona, Spain</h3><p>Private room. 3 guests, 2 beds. $92 night.</p></div></div>
178
+ <div class="card"><div class="card-img" style="background:#e8e8e8;">Photo placeholder</div><div class="card-body"><h3>Galveston, TX</h3><p>Entire house. 6 guests, 3 beds. $145 night.</p></div></div>
179
+ </div>
180
+ </section>
181
+
182
+ <hr class="section-divider">
183
+
184
+ <section class="section" id="forms">
185
+ <div class="section-label">05 / Forms</div><h2 class="section-title">Form Elements</h2>
186
+ <div class="form-group"><label class="form-label">Where</label><input class="form-input" type="text" placeholder="Search destinations"><div class="form-state-label">Default</div></div>
187
+ <div class="form-group"><label class="form-label">Check in</label><input class="form-input form-input--focus" type="text" value="Apr 15, 2026"><div class="form-state-label">Focus (dark ring)</div></div>
188
+ <div class="form-group"><label class="form-label">Guests</label><input class="form-input form-input--error" type="text" value="0 guests"><div class="form-state-label">Error</div></div>
189
+ <div class="form-group"><label class="form-label">Message host</label><textarea class="form-textarea" placeholder="Tell your host about your trip..."></textarea></div>
190
+ </section>
191
+
192
+ <hr class="section-divider">
193
+
194
+ <section class="section">
195
+ <div class="section-label">06 / Spacing</div><h2 class="section-title">Spacing Scale</h2>
196
+ <div class="spacing-row">
197
+ <div class="spacing-item"><div class="spacing-block" style="width:4px"></div><div class="spacing-value">4</div></div>
198
+ <div class="spacing-item"><div class="spacing-block" style="width:8px"></div><div class="spacing-value">8</div></div>
199
+ <div class="spacing-item"><div class="spacing-block" style="width:12px"></div><div class="spacing-value">12</div></div>
200
+ <div class="spacing-item"><div class="spacing-block" style="width:16px"></div><div class="spacing-value">16</div></div>
201
+ <div class="spacing-item"><div class="spacing-block" style="width:24px"></div><div class="spacing-value">24</div></div>
202
+ <div class="spacing-item"><div class="spacing-block" style="width:32px"></div><div class="spacing-value">32</div></div>
203
+ </div>
204
+ </section>
205
+
206
+ <hr class="section-divider">
207
+
208
+ <section class="section">
209
+ <div class="section-label">07 / Radius</div><h2 class="section-title">Border Radius</h2>
210
+ <div class="radius-row">
211
+ <div class="radius-item"><div class="radius-box" style="border-radius:8px"></div><div class="radius-label">8px</div><div class="radius-context">Buttons</div></div>
212
+ <div class="radius-item"><div class="radius-box" style="border-radius:14px"></div><div class="radius-label">14px</div><div class="radius-context">Badges</div></div>
213
+ <div class="radius-item"><div class="radius-box" style="border-radius:20px"></div><div class="radius-label">20px</div><div class="radius-context">Cards</div></div>
214
+ <div class="radius-item"><div class="radius-box" style="border-radius:32px"></div><div class="radius-label">32px</div><div class="radius-context">Large</div></div>
215
+ <div class="radius-item"><div class="radius-box" style="border-radius:50%; width:56px; height:56px;"></div><div class="radius-label">50%</div><div class="radius-context">Controls</div></div>
216
+ </div>
217
+ </section>
218
+
219
+ <hr class="section-divider">
220
+
221
+ <section class="section">
222
+ <div class="section-label">08 / Elevation</div><h2 class="section-title">Depth</h2>
223
+ <div class="elevation-grid">
224
+ <div class="elevation-card" style="border:1px solid #ebebeb;"><div class="elevation-label">Flat</div><div class="elevation-desc">No shadow</div></div>
225
+ <div class="elevation-card" style="box-shadow:var(--shadow-card);"><div class="elevation-label">Card</div><div class="elevation-desc">Three-layer warm</div></div>
226
+ <div class="elevation-card" style="box-shadow:var(--shadow-hover);"><div class="elevation-label">Hover</div><div class="elevation-desc">Interactive lift</div></div>
227
+ <div class="elevation-card" style="box-shadow:0 0 0 2px var(--near-black);"><div class="elevation-label">Focus</div><div class="elevation-desc">Dark focus ring</div></div>
228
+ </div>
229
+ </section>
230
+
231
+ <footer class="footer">Generated from <a href="https://airbnb.com/">airbnb.com</a> DESIGN.md — awesome-design-md</footer>
232
+
233
+ </body>
234
+ </html>
package/design-md/airbnb/preview.html ADDED
@@ -0,0 +1,233 @@
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: Airbnb (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=Nunito+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
10
+ <style>
11
+ :root {
12
+ --white: #ffffff; --near-black: #222222; --rausch: #ff385c; --deep-rausch: #e00b41;
13
+ --secondary: #6a6a6a; --disabled: #929292; --border: #c1c1c1; --surface: #f2f2f2;
14
+ --luxe: #460479; --plus: #92174d; --legal-blue: #428bff; --error: #c13515;
15
+ --shadow-card: rgba(0,0,0,0.02) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 6px, rgba(0,0,0,0.1) 0px 4px 8px;
16
+ --shadow-hover: rgba(0,0,0,0.08) 0px 4px 12px;
17
+ --font: 'Nunito Sans', -apple-system, system-ui, Roboto, Helvetica Neue, sans-serif;
18
+ }
19
+ * { margin:0; padding:0; box-sizing:border-box; }
20
+ body { background:var(--white); color:var(--near-black); font-family:var(--font); font-size:14px; font-weight:400; line-height:1.43; -webkit-font-smoothing:antialiased; }
21
+
22
+ .nav { position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:14px 24px; background:var(--white); border-bottom:1px solid #ebebeb; }
23
+ .nav-brand { font-size:14px; font-weight:600; color:var(--near-black); text-decoration:none; }
24
+ .nav-links { display:flex; gap:20px; list-style:none; }
25
+ .nav-links a { font-size:14px; font-weight:500; color:var(--secondary); text-decoration:none; transition:color 0.15s; }
26
+ .nav-links a:hover { color:var(--near-black); }
27
+ .nav-cta { display:inline-flex; align-items:center; justify-content:center; background:var(--rausch); color:var(--white); width:40px; height:40px; border-radius:50%; font-size:18px; font-weight:700; text-decoration:none; border:none; }
28
+
29
+ .hero { padding:64px 24px; text-align:center; }
30
+ .hero h1 { font-size:28px; font-weight:700; line-height:1.43; margin-bottom:12px; }
31
+ .hero h1 span { color:var(--rausch); }
32
+ .hero p { font-size:16px; font-weight:400; color:var(--secondary); max-width:480px; margin:0 auto 24px; }
33
+ .hero-buttons { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
34
+ .btn-dark { display:inline-block; background:var(--near-black); color:var(--white); padding:12px 24px; border-radius:8px; font-family:var(--font); font-size:16px; font-weight:500; text-decoration:none; border:none; cursor:pointer; }
35
+ .btn-outline { display:inline-block; background:transparent; color:var(--near-black); padding:12px 24px; border-radius:8px; border:1px solid var(--near-black); font-family:var(--font); font-size:16px; font-weight:500; text-decoration:none; cursor:pointer; }
36
+ .btn-circle { display:inline-flex; align-items:center; justify-content:center; background:var(--surface); color:var(--near-black); width:36px; height:36px; border-radius:50%; font-size:14px; text-decoration:none; border:none; cursor:pointer; transition:box-shadow 0.2s; }
37
+ .btn-circle:hover { box-shadow:var(--shadow-hover); }
38
+
39
+ .section { padding:48px 24px; max-width:1100px; margin:0 auto; }
40
+ .section-label { font-size:12px; font-weight:700; color:var(--secondary); text-transform:uppercase; letter-spacing:0.32px; margin-bottom:8px; }
41
+ .section-title { font-size:22px; font-weight:600; line-height:1.18; letter-spacing:-0.44px; margin-bottom:24px; }
42
+ .section-divider { border:none; border-top:1px solid #ebebeb; margin:0; }
43
+
44
+ .color-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(145px,1fr)); gap:10px; margin-bottom:20px; }
45
+ .color-swatch { border-radius:14px; overflow:hidden; box-shadow:var(--shadow-card); }
46
+ .color-swatch-block { height:64px; width:100%; }
47
+ .color-swatch-info { padding:10px; }
48
+ .color-swatch-name { font-size:12px; font-weight:600; margin-bottom:2px; }
49
+ .color-swatch-hex { font-size:10px; color:var(--secondary); font-family:monospace; }
50
+ .color-swatch-role { font-size:9px; color:var(--disabled); margin-top:2px; }
51
+ .color-group-label { font-size:12px; font-weight:700; color:var(--secondary); margin:20px 0 8px; }
52
+
53
+ .type-sample { margin-bottom:20px; padding-bottom:16px; border-bottom:1px solid #f5f5f5; }
54
+ .type-sample:last-child { border-bottom:none; }
55
+ .type-meta { font-size:10px; color:var(--disabled); margin-top:4px; font-family:monospace; }
56
+
57
+ .button-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
58
+ .button-item { text-align:center; }
59
+ .button-label { font-size:10px; color:var(--disabled); margin-top:6px; }
60
+
61
+ .card-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:16px; }
62
+ .card { background:var(--white); border-radius:20px; overflow:hidden; box-shadow:var(--shadow-card); }
63
+ .card-img { height:160px; background:var(--surface); display:flex; align-items:center; justify-content:center; color:var(--disabled); font-size:12px; }
64
+ .card-body { padding:16px; }
65
+ .card h3 { font-size:16px; font-weight:600; margin-bottom:4px; }
66
+ .card p { font-size:14px; color:var(--secondary); }
67
+
68
+ .form-group { margin-bottom:16px; max-width:400px; }
69
+ .form-label { display:block; font-size:12px; font-weight:600; margin-bottom:4px; }
70
+ .form-input { width:100%; background:var(--white); color:var(--near-black); border:1px solid var(--border); padding:12px 16px; border-radius:8px; font-family:var(--font); font-size:16px; outline:none; }
71
+ .form-input:focus { border-color:var(--near-black); box-shadow:0 0 0 2px var(--near-black); }
72
+ .form-input--focus { border-color:var(--near-black); box-shadow:0 0 0 2px var(--near-black); }
73
+ .form-input--error { border-color:var(--error); box-shadow:0 0 0 2px var(--error); }
74
+ .form-textarea { width:100%; min-height:80px; background:var(--white); color:var(--near-black); border:1px solid var(--border); padding:12px 16px; border-radius:8px; font-family:var(--font); font-size:16px; resize:vertical; outline:none; }
75
+ .form-state-label { font-size:9px; color:var(--disabled); margin-top:4px; }
76
+
77
+ .spacing-row { display:flex; align-items:flex-end; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
78
+ .spacing-item { text-align:center; }
79
+ .spacing-block { background:var(--rausch); border-radius:4px; margin-bottom:4px; height:24px; opacity:0.7; }
80
+ .spacing-value { font-size:9px; color:var(--disabled); font-family:monospace; }
81
+
82
+ .radius-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
83
+ .radius-item { text-align:center; }
84
+ .radius-box { width:56px; height:56px; background:var(--surface); margin-bottom:4px; }
85
+ .radius-label { font-size:9px; color:var(--disabled); font-family:monospace; }
86
+ .radius-context { font-size:8px; color:var(--disabled); }
87
+
88
+ .elevation-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:12px; }
89
+ .elevation-card { background:var(--white); border-radius:20px; padding:16px; text-align:center; }
90
+ .elevation-label { font-size:13px; font-weight:600; margin-bottom:4px; }
91
+ .elevation-desc { font-size:9px; color:var(--disabled); font-family:monospace; }
92
+
93
+ .footer { padding:24px; text-align:center; border-top:1px solid #ebebeb; font-size:12px; color:var(--secondary); }
94
+ .footer a { color:var(--rausch); text-decoration:underline; }
95
+
96
+ @media (max-width:744px) { .nav-links { display:none; } .section { padding:32px 16px; } .card-grid { grid-template-columns:1fr; } }
97
+ </style>
98
+ </head>
99
+ <body>
100
+
101
+ <nav class="nav">
102
+ <a class="nav-brand" href="#">awesome-design-md</a>
103
+ <ul class="nav-links">
104
+ <li><a href="#colors">Colors</a></li>
105
+ <li><a href="#typography">Typography</a></li>
106
+ <li><a href="#buttons">Buttons</a></li>
107
+ <li><a href="#cards">Cards</a></li>
108
+ <li><a href="#forms">Forms</a></li>
109
+ </ul>
110
+ <a class="nav-cta" href="#">&#x1F50D;</a>
111
+ </nav>
112
+
113
+ <section class="hero">
114
+ <h1>Design System Inspired by <span>Airbnb</span></h1>
115
+ <p>A design token catalog generated from DESIGN.md. Every color, font, component, and spacing value — visualized.</p>
116
+ <div class="hero-buttons">
117
+ <a class="btn-dark" href="#">Explore Stays</a>
118
+ <a class="btn-outline" href="#">Become a Host</a>
119
+ </div>
120
+ </section>
121
+
122
+ <hr class="section-divider">
123
+
124
+ <section class="section" id="colors">
125
+ <div class="section-label">01 / Colors</div><h2 class="section-title">Color Palette</h2>
126
+ <div class="color-group-label">Brand</div>
127
+ <div class="color-grid">
128
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#ff385c"></div><div class="color-swatch-info"><div class="color-swatch-name">Rausch Red</div><div class="color-swatch-hex">#ff385c</div><div class="color-swatch-role">Primary CTA</div></div></div>
129
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#e00b41"></div><div class="color-swatch-info"><div class="color-swatch-name">Deep Rausch</div><div class="color-swatch-hex">#e00b41</div><div class="color-swatch-role">Pressed state</div></div></div>
130
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#460479"></div><div class="color-swatch-info"><div class="color-swatch-name">Luxe Purple</div><div class="color-swatch-hex">#460479</div><div class="color-swatch-role">Luxe tier</div></div></div>
131
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#92174d"></div><div class="color-swatch-info"><div class="color-swatch-name">Plus Magenta</div><div class="color-swatch-hex">#92174d</div><div class="color-swatch-role">Plus tier</div></div></div>
132
+ </div>
133
+ <div class="color-group-label">Text & Neutral</div>
134
+ <div class="color-grid">
135
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#222222"></div><div class="color-swatch-info"><div class="color-swatch-name">Near Black</div><div class="color-swatch-hex">#222222</div><div class="color-swatch-role">Primary text</div></div></div>
136
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#6a6a6a"></div><div class="color-swatch-info"><div class="color-swatch-name">Secondary</div><div class="color-swatch-hex">#6a6a6a</div><div class="color-swatch-role">Secondary text</div></div></div>
137
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#c1c1c1"></div><div class="color-swatch-info"><div class="color-swatch-name">Border</div><div class="color-swatch-hex">#c1c1c1</div><div class="color-swatch-role">Borders</div></div></div>
138
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#f2f2f2"></div><div class="color-swatch-info"><div class="color-swatch-name">Surface</div><div class="color-swatch-hex">#f2f2f2</div><div class="color-swatch-role">Circular buttons</div></div></div>
139
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#428bff"></div><div class="color-swatch-info"><div class="color-swatch-name">Legal Blue</div><div class="color-swatch-hex">#428bff</div><div class="color-swatch-role">Legal links</div></div></div>
140
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#c13515"></div><div class="color-swatch-info"><div class="color-swatch-name">Error</div><div class="color-swatch-hex">#c13515</div><div class="color-swatch-role">Error text</div></div></div>
141
+ </div>
142
+ </section>
143
+
144
+ <hr class="section-divider">
145
+
146
+ <section class="section" id="typography">
147
+ <div class="section-label">02 / Typography</div><h2 class="section-title">Typography Scale</h2>
148
+ <div class="type-sample"><div style="font-size:28px; font-weight:700; line-height:1.43;">Section Heading</div><div class="type-meta">Section — 28px / 700 / 1.43 / Cereal VF</div></div>
149
+ <div class="type-sample"><div style="font-size:22px; font-weight:600; line-height:1.18; letter-spacing:-0.44px;">Card Heading</div><div class="type-meta">Card — 22px / 600 / 1.18 / -0.44px</div></div>
150
+ <div class="type-sample"><div style="font-size:20px; font-weight:600; line-height:1.20; letter-spacing:-0.18px;">Feature Title</div><div class="type-meta">Feature — 20px / 600 / 1.20 / -0.18px</div></div>
151
+ <div class="type-sample"><div style="font-size:16px; font-weight:500; line-height:1.25;">UI Medium — Inspiration for future getaways</div><div class="type-meta">UI — 16px / 500 / 1.25</div></div>
152
+ <div class="type-sample"><div style="font-size:14px; font-weight:400; line-height:1.43; color:var(--secondary);">Body — Istanbul, Turkey. Apartment in Kadikoy. 2 guests, 1 bed, 1 bath.</div><div class="type-meta">Body — 14px / 400 / 1.43</div></div>
153
+ <div class="type-sample"><div style="font-size:12px; font-weight:700; line-height:1.33;">Tag Bold — $145 night</div><div class="type-meta">Tag Bold — 12px / 700 / 1.33</div></div>
154
+ <div class="type-sample"><div style="font-size:8px; font-weight:700; line-height:1.25; text-transform:uppercase; letter-spacing:0.32px;">SUPERHOST</div><div class="type-meta">Micro — 8px / 700 / uppercase / +0.32px</div></div>
155
+ </section>
156
+
157
+ <hr class="section-divider">
158
+
159
+ <section class="section" id="buttons">
160
+ <div class="section-label">03 / Buttons</div><h2 class="section-title">Button Variants</h2>
161
+ <div class="button-row">
162
+ <div class="button-item"><a class="btn-dark" href="#">Explore</a><div class="button-label">Primary Dark</div></div>
163
+ <div class="button-item"><a class="btn-outline" href="#">Host</a><div class="button-label">Outlined</div></div>
164
+ <div class="button-item"><a class="btn-circle" href="#">&#8592;</a><div class="button-label">Circle Nav</div></div>
165
+ <div class="button-item"><a class="btn-circle" href="#">&#8594;</a><div class="button-label">Circle Nav</div></div>
166
+ <div class="button-item"><span style="display:inline-flex; align-items:center; justify-content:center; background:var(--rausch); color:var(--white); width:40px; height:40px; border-radius:50%; font-size:18px;">&#x1F50D;</span><div class="button-label">Search</div></div>
167
+ </div>
168
+ </section>
169
+
170
+ <hr class="section-divider">
171
+
172
+ <section class="section" id="cards">
173
+ <div class="section-label">04 / Cards</div><h2 class="section-title">Card Examples</h2>
174
+ <div class="card-grid">
175
+ <div class="card"><div class="card-img">Photo placeholder</div><div class="card-body"><h3>Istanbul, Turkey</h3><p>Entire apartment. 2 guests, 1 bed. $78 night.</p></div></div>
176
+ <div class="card"><div class="card-img" style="background:#eee;">Photo placeholder</div><div class="card-body"><h3>Barcelona, Spain</h3><p>Private room. 3 guests, 2 beds. $92 night.</p></div></div>
177
+ <div class="card"><div class="card-img" style="background:#e8e8e8;">Photo placeholder</div><div class="card-body"><h3>Galveston, TX</h3><p>Entire house. 6 guests, 3 beds. $145 night.</p></div></div>
178
+ </div>
179
+ </section>
180
+
181
+ <hr class="section-divider">
182
+
183
+ <section class="section" id="forms">
184
+ <div class="section-label">05 / Forms</div><h2 class="section-title">Form Elements</h2>
185
+ <div class="form-group"><label class="form-label">Where</label><input class="form-input" type="text" placeholder="Search destinations"><div class="form-state-label">Default</div></div>
186
+ <div class="form-group"><label class="form-label">Check in</label><input class="form-input form-input--focus" type="text" value="Apr 15, 2026"><div class="form-state-label">Focus (dark ring)</div></div>
187
+ <div class="form-group"><label class="form-label">Guests</label><input class="form-input form-input--error" type="text" value="0 guests"><div class="form-state-label">Error</div></div>
188
+ <div class="form-group"><label class="form-label">Message host</label><textarea class="form-textarea" placeholder="Tell your host about your trip..."></textarea></div>
189
+ </section>
190
+
191
+ <hr class="section-divider">
192
+
193
+ <section class="section">
194
+ <div class="section-label">06 / Spacing</div><h2 class="section-title">Spacing Scale</h2>
195
+ <div class="spacing-row">
196
+ <div class="spacing-item"><div class="spacing-block" style="width:4px"></div><div class="spacing-value">4</div></div>
197
+ <div class="spacing-item"><div class="spacing-block" style="width:8px"></div><div class="spacing-value">8</div></div>
198
+ <div class="spacing-item"><div class="spacing-block" style="width:12px"></div><div class="spacing-value">12</div></div>
199
+ <div class="spacing-item"><div class="spacing-block" style="width:16px"></div><div class="spacing-value">16</div></div>
200
+ <div class="spacing-item"><div class="spacing-block" style="width:24px"></div><div class="spacing-value">24</div></div>
201
+ <div class="spacing-item"><div class="spacing-block" style="width:32px"></div><div class="spacing-value">32</div></div>
202
+ </div>
203
+ </section>
204
+
205
+ <hr class="section-divider">
206
+
207
+ <section class="section">
208
+ <div class="section-label">07 / Radius</div><h2 class="section-title">Border Radius</h2>
209
+ <div class="radius-row">
210
+ <div class="radius-item"><div class="radius-box" style="border-radius:8px"></div><div class="radius-label">8px</div><div class="radius-context">Buttons</div></div>
211
+ <div class="radius-item"><div class="radius-box" style="border-radius:14px"></div><div class="radius-label">14px</div><div class="radius-context">Badges</div></div>
212
+ <div class="radius-item"><div class="radius-box" style="border-radius:20px"></div><div class="radius-label">20px</div><div class="radius-context">Cards</div></div>
213
+ <div class="radius-item"><div class="radius-box" style="border-radius:32px"></div><div class="radius-label">32px</div><div class="radius-context">Large</div></div>
214
+ <div class="radius-item"><div class="radius-box" style="border-radius:50%; width:56px; height:56px;"></div><div class="radius-label">50%</div><div class="radius-context">Controls</div></div>
215
+ </div>
216
+ </section>
217
+
218
+ <hr class="section-divider">
219
+
220
+ <section class="section">
221
+ <div class="section-label">08 / Elevation</div><h2 class="section-title">Depth</h2>
222
+ <div class="elevation-grid">
223
+ <div class="elevation-card" style="border:1px solid #ebebeb;"><div class="elevation-label">Flat</div><div class="elevation-desc">No shadow</div></div>
224
+ <div class="elevation-card" style="box-shadow:var(--shadow-card);"><div class="elevation-label">Card</div><div class="elevation-desc">Three-layer warm</div></div>
225
+ <div class="elevation-card" style="box-shadow:var(--shadow-hover);"><div class="elevation-label">Hover</div><div class="elevation-desc">Interactive lift</div></div>
226
+ <div class="elevation-card" style="box-shadow:0 0 0 2px var(--near-black);"><div class="elevation-label">Focus</div><div class="elevation-desc">Dark focus ring</div></div>
227
+ </div>
228
+ </section>
229
+
230
+ <footer class="footer">Generated from <a href="https://airbnb.com/">airbnb.com</a> DESIGN.md — awesome-design-md</footer>
231
+
232
+ </body>
233
+ </html>
package/design-md/airtable/DESIGN.md ADDED
@@ -0,0 +1,89 @@
1
+ # Design System: Airtable
2
+
3
+ ## 1. Visual Theme & Atmosphere
4
+
5
+ Airtable's website is a clean, enterprise-friendly platform that communicates "sophisticated simplicity" through a white canvas with deep navy text (`#181d26`) and Airtable Blue (`#1b61c9`) as the primary interactive accent. The Haas font family (display + text variants) creates a Swiss-precision typography system with positive letter-spacing throughout.
6
+
7
+ **Key Characteristics:**
8
+ - White canvas with deep navy text (`#181d26`)
9
+ - Airtable Blue (`#1b61c9`) as primary CTA and link color
10
+ - Haas + Haas Groot Disp dual font system
11
+ - Positive letter-spacing on body text (0.08px–0.28px)
12
+ - 12px radius buttons, 16px–32px for cards
13
+ - Multi-layer blue-tinted shadow: `rgba(45,127,249,0.28) 0px 1px 3px`
14
+ - Semantic theme tokens: `--theme_*` CSS variable naming
15
+
16
+ ## 2. Color Palette & Roles
17
+
18
+ ### Primary
19
+ - **Deep Navy** (`#181d26`): Primary text
20
+ - **Airtable Blue** (`#1b61c9`): CTA buttons, links
21
+ - **White** (`#ffffff`): Primary surface
22
+ - **Spotlight** (`rgba(249,252,255,0.97)`): `--theme_button-text-spotlight`
23
+
24
+ ### Semantic
25
+ - **Success Green** (`#006400`): `--theme_success-text`
26
+ - **Weak Text** (`rgba(4,14,32,0.69)`): `--theme_text-weak`
27
+ - **Secondary Active** (`rgba(7,12,20,0.82)`): `--theme_button-text-secondary-active`
28
+
29
+ ### Neutral
30
+ - **Dark Gray** (`#333333`): Secondary text
31
+ - **Mid Blue** (`#254fad`): Link/accent blue variant
32
+ - **Border** (`#e0e2e6`): Card borders
33
+ - **Light Surface** (`#f8fafc`): Subtle surface
34
+
35
+ ### Shadows
36
+ - **Blue-tinted** (`rgba(0,0,0,0.32) 0px 0px 1px, rgba(0,0,0,0.08) 0px 0px 2px, rgba(45,127,249,0.28) 0px 1px 3px, rgba(0,0,0,0.06) 0px 0px 0px 0.5px inset`)
37
+ - **Soft** (`rgba(15,48,106,0.05) 0px 0px 20px`)
38
+
39
+ ## 3. Typography Rules
40
+
41
+ ### Font Families
42
+ - **Primary**: `Haas`, fallbacks: `-apple-system, system-ui, Segoe UI, Roboto`
43
+ - **Display**: `Haas Groot Disp`, fallback: `Haas`
44
+
45
+ ### Hierarchy
46
+
47
+ | Role | Font | Size | Weight | Line Height | Letter Spacing |
48
+ |------|------|------|--------|-------------|----------------|
49
+ | Display Hero | Haas | 48px | 400 | 1.15 | normal |
50
+ | Display Bold | Haas Groot Disp | 48px | 900 | 1.50 | normal |
51
+ | Section Heading | Haas | 40px | 400 | 1.25 | normal |
52
+ | Sub-heading | Haas | 32px | 400–500 | 1.15–1.25 | normal |
53
+ | Card Title | Haas | 24px | 400 | 1.20–1.30 | 0.12px |
54
+ | Feature | Haas | 20px | 400 | 1.25–1.50 | 0.1px |
55
+ | Body | Haas | 18px | 400 | 1.35 | 0.18px |
56
+ | Body Medium | Haas | 16px | 500 | 1.30 | 0.08–0.16px |
57
+ | Button | Haas | 16px | 500 | 1.25–1.30 | 0.08px |
58
+ | Caption | Haas | 14px | 400–500 | 1.25–1.35 | 0.07–0.28px |
59
+
60
+ ## 4. Component Stylings
61
+
62
+ ### Buttons
63
+ - **Primary Blue**: `#1b61c9`, white text, 16px 24px padding, 12px radius
64
+ - **White**: white bg, `#181d26` text, 12px radius, 1px border white
65
+ - **Cookie Consent**: `#1b61c9` bg, 2px radius (sharp)
66
+
67
+ ### Cards: `1px solid #e0e2e6`, 16px–24px radius
68
+ ### Inputs: Standard Haas styling
69
+
70
+ ## 5. Layout
71
+ - Spacing: 1–48px (8px base)
72
+ - Radius: 2px (small), 12px (buttons), 16px (cards), 24px (sections), 32px (large), 50% (circles)
73
+
74
+ ## 6. Depth
75
+ - Blue-tinted multi-layer shadow system
76
+ - Soft ambient: `rgba(15,48,106,0.05) 0px 0px 20px`
77
+
78
+ ## 7. Do's and Don'ts
79
+ ### Do: Use Airtable Blue for CTAs, Haas with positive tracking, 12px radius buttons
80
+ ### Don't: Skip positive letter-spacing, use heavy shadows
81
+
82
+ ## 8. Responsive Behavior
83
+ Breakpoints: 425–1664px (23 breakpoints)
84
+
85
+ ## 9. Agent Prompt Guide
86
+ - Text: Deep Navy (`#181d26`)
87
+ - CTA: Airtable Blue (`#1b61c9`)
88
+ - Background: White (`#ffffff`)
89
+ - Border: `#e0e2e6`
package/design-md/airtable/README.md ADDED
@@ -0,0 +1,23 @@
1
+ # Airtable Inspired Design System
2
+
3
+ [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/airtable/DESIGN.md) extracted from the public [airtable](https://airtable.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/airtable/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Airtable 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
+ ![Airtable Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/airtable/preview-dark-screenshot.png)
21
+
22
+ ### Light Mode
23
+ ![Airtable Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/airtable/preview-screenshot.png)