yaclty/awesome-design-md
1
0
Fork 0
mirror of https://github.com/VoltAgent/awesome-design-md.git synced 2026-05-14 13:06:57 +08:00
Code Issues Packages Projects Releases Wiki Activity

update design md's

Browse Source
This commit is contained in:
necatiozmen 2026-04-08 20:26:59 +03:00
parent 7cf42b918d
commit 1ebace0eea
116 changed files with 322 additions and 600 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
design-md/airbnb/preview-dark.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design System Preview: Airbnb (Dark)</title> <title>Design System Inspired by Airbnb</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;500;600;700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
@ -99,7 +99,7 @@
<body> <body>
<nav class="nav"> <nav class="nav">
<a class="nav-brand" href="#">awesome-design-md</a> <span class="nav-brand">awesome-design-md</span>
<ul class="nav-links"> <ul class="nav-links">
<li><a href="#colors">Colors</a></li> <li><a href="#colors">Colors</a></li>
<li><a href="#typography">Typography</a></li> <li><a href="#typography">Typography</a></li>
@ -228,7 +228,7 @@
</div> </div>
</section> </section>
<footer class="footer">Generated from <a href="https://airbnb.com/">airbnb.com</a> DESIGN.md — awesome-design-md</footer> <footer class="footer">Maintained by <a href="https://github.com/VoltAgent/voltagent" target="_blank" rel="noopener noreferrer" style="text-decoration:none;"><img src="https://github.com/VoltAgent.png?size=32" alt="VoltAgent" width="14" height="14" style="border-radius:3px;vertical-align:-2px;margin-right:3px;">VoltAgent</a> team</footer>
</body> </body>
</html> </html>

6
design-md/airbnb/preview.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design System Preview: Airbnb (Light)</title> <title>Design System Inspired by Airbnb</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;500;600;700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
@ -99,7 +99,7 @@
<body> <body>
<nav class="nav"> <nav class="nav">
<a class="nav-brand" href="#">awesome-design-md</a> <span class="nav-brand">awesome-design-md</span>
<ul class="nav-links"> <ul class="nav-links">
<li><a href="#colors">Colors</a></li> <li><a href="#colors">Colors</a></li>
<li><a href="#typography">Typography</a></li> <li><a href="#typography">Typography</a></li>
@ -227,7 +227,7 @@
</div> </div>
</section> </section>
<footer class="footer">Generated from <a href="https://airbnb.com/">airbnb.com</a> DESIGN.md — awesome-design-md</footer> <footer class="footer">Maintained by <a href="https://github.com/VoltAgent/voltagent" target="_blank" rel="noopener noreferrer" style="text-decoration:none;"><img src="https://github.com/VoltAgent.png?size=32" alt="VoltAgent" width="14" height="14" style="border-radius:3px;vertical-align:-2px;margin-right:3px;">VoltAgent</a> team</footer>
</body> </body>
</html> </html>

6
design-md/airtable/preview-dark.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design System Preview: Airtable (Dark)</title> <title>Design System Inspired by Airtable</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;900&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;900&display=swap" rel="stylesheet">
@ -85,7 +85,7 @@
</head> </head>
<body> <body>
<nav class="nav"><a class="nav-brand" href="#">awesome-design-md</a><ul class="nav-links"><li><a href="#colors">Colors</a></li><li><a href="#typography">Typography</a></li><li><a href="#buttons">Buttons</a></li><li><a href="#cards">Cards</a></li><li><a href="#forms">Forms</a></li></ul><a class="nav-cta" href="#">Sign up for free</a></nav> <nav class="nav"><span class="nav-brand">awesome-design-md</span><ul class="nav-links"><li><a href="#colors">Colors</a></li><li><a href="#typography">Typography</a></li><li><a href="#buttons">Buttons</a></li><li><a href="#cards">Cards</a></li><li><a href="#forms">Forms</a></li></ul><a class="nav-cta" href="#">Sign up for free</a></nav>
<div style="position:fixed;top:16px;right:16px;z-index:200;background:#1b61c9;color:#fff;font-size:9px;font-weight:500;padding:4px 10px;border-radius:12px;">Dark Mode</div> <div style="position:fixed;top:16px;right:16px;z-index:200;background:#1b61c9;color:#fff;font-size:9px;font-weight:500;padding:4px 10px;border-radius:12px;">Dark Mode</div>
<section class="hero"><h1>Design System<br>Inspired by <span>Airtable</span></h1><p>Every color, font, and component — connected in one workspace.</p><div class="hero-buttons"><a class="btn-blue" href="#">Sign up for free</a><a class="btn-outline" href="#">Contact sales</a></div></section> <section class="hero"><h1>Design System<br>Inspired by <span>Airtable</span></h1><p>Every color, font, and component — connected in one workspace.</p><div class="hero-buttons"><a class="btn-blue" href="#">Sign up for free</a><a class="btn-outline" href="#">Contact sales</a></div></section>
@ -159,7 +159,7 @@
<section class="section"><div class="section-label">08 / Elevation</div><h2 class="section-title">Depth</h2> <section class="section"><div class="section-label">08 / Elevation</div><h2 class="section-title">Depth</h2>
<div class="elevation-grid"><div class="elevation-card" style="border:1px solid var(--border);"><div class="elevation-label">Flat</div><div class="elevation-desc">Border only</div></div><div class="elevation-card" style="box-shadow:rgba(0,0,0,0.32) 0px 0px 1px, rgba(45,127,249,0.28) 0px 1px 3px;"><div class="elevation-label">Blue Shadow</div><div class="elevation-desc">Blue-tinted multi-layer</div></div><div class="elevation-card" style="box-shadow:rgba(15,48,106,0.05) 0px 0px 20px;"><div class="elevation-label">Soft</div><div class="elevation-desc">Ambient navy glow</div></div></div></section> <div class="elevation-grid"><div class="elevation-card" style="border:1px solid var(--border);"><div class="elevation-label">Flat</div><div class="elevation-desc">Border only</div></div><div class="elevation-card" style="box-shadow:rgba(0,0,0,0.32) 0px 0px 1px, rgba(45,127,249,0.28) 0px 1px 3px;"><div class="elevation-label">Blue Shadow</div><div class="elevation-desc">Blue-tinted multi-layer</div></div><div class="elevation-card" style="box-shadow:rgba(15,48,106,0.05) 0px 0px 20px;"><div class="elevation-label">Soft</div><div class="elevation-desc">Ambient navy glow</div></div></div></section>
<footer class="footer">Generated from <a href="https://airtable.com/">airtable.com</a> DESIGN.md — awesome-design-md</footer> <footer class="footer">Maintained by <a href="https://github.com/VoltAgent/voltagent" target="_blank" rel="noopener noreferrer" style="text-decoration:none;"><img src="https://github.com/VoltAgent.png?size=32" alt="VoltAgent" width="14" height="14" style="border-radius:3px;vertical-align:-2px;margin-right:3px;">VoltAgent</a> team</footer>
</body> </body>
</html> </html>

6
design-md/airtable/preview.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design System Preview: Airtable (Light)</title> <title>Design System Inspired by Airtable</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;900&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;900&display=swap" rel="stylesheet">
@ -85,7 +85,7 @@
</head> </head>
<body> <body>
<nav class="nav"><a class="nav-brand" href="#">awesome-design-md</a><ul class="nav-links"><li><a href="#colors">Colors</a></li><li><a href="#typography">Typography</a></li><li><a href="#buttons">Buttons</a></li><li><a href="#cards">Cards</a></li><li><a href="#forms">Forms</a></li></ul><a class="nav-cta" href="#">Sign up for free</a></nav> <nav class="nav"><span class="nav-brand">awesome-design-md</span><ul class="nav-links"><li><a href="#colors">Colors</a></li><li><a href="#typography">Typography</a></li><li><a href="#buttons">Buttons</a></li><li><a href="#cards">Cards</a></li><li><a href="#forms">Forms</a></li></ul><a class="nav-cta" href="#">Sign up for free</a></nav>
<section class="hero"><h1>Design System<br>Inspired by <span>Airtable</span></h1><p>Every color, font, and component — connected in one workspace.</p><div class="hero-buttons"><a class="btn-blue" href="#">Sign up for free</a><a class="btn-outline" href="#">Contact sales</a></div></section> <section class="hero"><h1>Design System<br>Inspired by <span>Airtable</span></h1><p>Every color, font, and component — connected in one workspace.</p><div class="hero-buttons"><a class="btn-blue" href="#">Sign up for free</a><a class="btn-outline" href="#">Contact sales</a></div></section>
@ -158,7 +158,7 @@
<section class="section"><div class="section-label">08 / Elevation</div><h2 class="section-title">Depth</h2> <section class="section"><div class="section-label">08 / Elevation</div><h2 class="section-title">Depth</h2>
<div class="elevation-grid"><div class="elevation-card" style="border:1px solid var(--border);"><div class="elevation-label">Flat</div><div class="elevation-desc">Border only</div></div><div class="elevation-card" style="box-shadow:rgba(0,0,0,0.32) 0px 0px 1px, rgba(45,127,249,0.28) 0px 1px 3px;"><div class="elevation-label">Blue Shadow</div><div class="elevation-desc">Blue-tinted multi-layer</div></div><div class="elevation-card" style="box-shadow:rgba(15,48,106,0.05) 0px 0px 20px;"><div class="elevation-label">Soft</div><div class="elevation-desc">Ambient navy glow</div></div></div></section> <div class="elevation-grid"><div class="elevation-card" style="border:1px solid var(--border);"><div class="elevation-label">Flat</div><div class="elevation-desc">Border only</div></div><div class="elevation-card" style="box-shadow:rgba(0,0,0,0.32) 0px 0px 1px, rgba(45,127,249,0.28) 0px 1px 3px;"><div class="elevation-label">Blue Shadow</div><div class="elevation-desc">Blue-tinted multi-layer</div></div><div class="elevation-card" style="box-shadow:rgba(15,48,106,0.05) 0px 0px 20px;"><div class="elevation-label">Soft</div><div class="elevation-desc">Ambient navy glow</div></div></div></section>
<footer class="footer">Generated from <a href="https://airtable.com/">airtable.com</a> DESIGN.md — awesome-design-md</footer> <footer class="footer">Maintained by <a href="https://github.com/VoltAgent/voltagent" target="_blank" rel="noopener noreferrer" style="text-decoration:none;"><img src="https://github.com/VoltAgent.png?size=32" alt="VoltAgent" width="14" height="14" style="border-radius:3px;vertical-align:-2px;margin-right:3px;">VoltAgent</a> team</footer>
</body> </body>
</html> </html>

8
design-md/apple/preview-dark.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design System Preview: Apple (Dark)</title> <title>Design System Inspired by Apple</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
@ -213,7 +213,7 @@
<body> <body>
<nav class="nav"> <nav class="nav">
<a class="nav-brand" href="#">awesome-design-md</a> <span class="nav-brand">awesome-design-md</span>
<ul class="nav-links"> <ul class="nav-links">
<li><a href="#colors">Colors</a></li> <li><a href="#colors">Colors</a></li>
<li><a href="#typography">Typography</a></li> <li><a href="#typography">Typography</a></li>
@ -414,9 +414,7 @@
</div> </div>
</section> </section>
<footer class="footer"> <footer class="footer">Maintained by <a href="https://github.com/VoltAgent/voltagent" target="_blank" rel="noopener noreferrer" style="text-decoration:none;"><img src="https://github.com/VoltAgent.png?size=32" alt="VoltAgent" width="14" height="14" style="border-radius:3px;vertical-align:-2px;margin-right:3px;">VoltAgent</a> team</footer>
Generated from <a href="https://apple.com/">apple.com</a> DESIGN.md -- awesome-design-md
</footer>
</body> </body>
</html> </html>

8
design-md/apple/preview.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design System Preview: Apple (Light)</title> <title>Design System Inspired by Apple</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
@ -208,7 +208,7 @@
<body> <body>
<nav class="nav"> <nav class="nav">
<a class="nav-brand" href="#">awesome-design-md</a> <span class="nav-brand">awesome-design-md</span>
<ul class="nav-links"> <ul class="nav-links">
<li><a href="#colors">Colors</a></li> <li><a href="#colors">Colors</a></li>
<li><a href="#typography">Typography</a></li> <li><a href="#typography">Typography</a></li>
@ -408,9 +408,7 @@
</div> </div>
</section> </section>
<footer class="footer"> <footer class="footer">Maintained by <a href="https://github.com/VoltAgent/voltagent" target="_blank" rel="noopener noreferrer" style="text-decoration:none;"><img src="https://github.com/VoltAgent.png?size=32" alt="VoltAgent" width="14" height="14" style="border-radius:3px;vertical-align:-2px;margin-right:3px;">VoltAgent</a> team</footer>
Generated from <a href="https://apple.com/">apple.com</a> DESIGN.md -- awesome-design-md
</footer>
</body> </body>
</html> </html>

6
design-md/bmw/preview-dark.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design System Preview: BMW (Dark)</title> <title>Design System Inspired by BMW</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700;900&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700;900&display=swap" rel="stylesheet">
@ -91,7 +91,7 @@
<body> <body>
<nav class="nav"> <nav class="nav">
<a class="nav-brand" href="#">awesome-design-md</a> <span class="nav-brand">awesome-design-md</span>
<ul class="nav-links"> <ul class="nav-links">
<li><a href="#colors">Colors</a></li> <li><a href="#colors">Colors</a></li>
<li><a href="#typography">Typography</a></li> <li><a href="#typography">Typography</a></li>
@ -205,7 +205,7 @@
</div> </div>
</section> </section>
<footer class="footer">Generated from <a href="https://www.bmw.com/">bmw.com</a> DESIGN.md — awesome-design-md</footer> <footer class="footer">Maintained by <a href="https://github.com/VoltAgent/voltagent" target="_blank" rel="noopener noreferrer" style="text-decoration:none;"><img src="https://github.com/VoltAgent.png?size=32" alt="VoltAgent" width="14" height="14" style="border-radius:3px;vertical-align:-2px;margin-right:3px;">VoltAgent</a> team</footer>
</body> </body>
</html> </html>

6
design-md/bmw/preview.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design System Preview: BMW (Light)</title> <title>Design System Inspired by BMW</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700;900&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700;900&display=swap" rel="stylesheet">
@ -91,7 +91,7 @@
<body> <body>
<nav class="nav"> <nav class="nav">
<a class="nav-brand" href="#">awesome-design-md</a> <span class="nav-brand">awesome-design-md</span>
<ul class="nav-links"> <ul class="nav-links">
<li><a href="#colors">Colors</a></li> <li><a href="#colors">Colors</a></li>
<li><a href="#typography">Typography</a></li> <li><a href="#typography">Typography</a></li>
@ -204,7 +204,7 @@
</div> </div>
</section> </section>
<footer class="footer">Generated from <a href="https://www.bmw.com/">bmw.com</a> DESIGN.md — awesome-design-md</footer> <footer class="footer">Maintained by <a href="https://github.com/VoltAgent/voltagent" target="_blank" rel="noopener noreferrer" style="text-decoration:none;"><img src="https://github.com/VoltAgent.png?size=32" alt="VoltAgent" width="14" height="14" style="border-radius:3px;vertical-align:-2px;margin-right:3px;">VoltAgent</a> team</footer>
</body> </body>
</html> </html>

4
design-md/cal/preview-dark.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design System Inspired by Cal.com — Dark Mode</title> <title>Design System Inspired by Cal.com</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cal+Sans&family=Inter:wght@300;400;500;600;700&family=Roboto+Mono:wght@500;600&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Cal+Sans&family=Inter:wght@300;400;500;600;700&family=Roboto+Mono:wght@500;600&display=swap" rel="stylesheet">
@ -443,7 +443,7 @@
</div> </div>
</section> </section>
<footer>Generated from DESIGN.md — Cal.com Design System Catalog (Dark Mode)</footer> <footer class="footer">Maintained by <a href="https://github.com/VoltAgent/voltagent" target="_blank" rel="noopener noreferrer" style="text-decoration:none;"><img src="https://github.com/VoltAgent.png?size=32" alt="VoltAgent" width="14" height="14" style="border-radius:3px;vertical-align:-2px;margin-right:3px;">VoltAgent</a> team</footer>
</body> </body>
</html> </html>

2
design-md/cal/preview.html
View File

@ -569,7 +569,7 @@
</div> </div>
</section> </section>
<footer>Generated from DESIGN.md — Cal.com Design System Catalog</footer> <footer class="footer">Maintained by <a href="https://github.com/VoltAgent/voltagent" target="_blank" rel="noopener noreferrer" style="text-decoration:none;"><img src="https://github.com/VoltAgent.png?size=32" alt="VoltAgent" width="14" height="14" style="border-radius:3px;vertical-align:-2px;margin-right:3px;">VoltAgent</a> team</footer>
</body> </body>
</html> </html>

6
design-md/claude/preview-dark.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design System Preview: Claude / Anthropic (Dark)</title> <title>Design System Inspired by Claude</title>
<style> <style>
:root { :root {
/* Primary */ /* Primary */
@ -394,7 +394,7 @@
<!-- NAV --> <!-- NAV -->
<nav class="nav"> <nav class="nav">
<div class="nav-brand"><span class="logo-mark">C</span> Claude</div> <span class="nav-brand">awesome-design-md</span>
<div class="nav-links"> <div class="nav-links">
<a href="#colors">Colors</a> <a href="#colors">Colors</a>
<a href="#typography">Typography</a> <a href="#typography">Typography</a>
@ -408,7 +408,7 @@
<!-- HERO --> <!-- HERO -->
<section class="hero"> <section class="hero">
<h1>Design System Preview:<br><span>Claude</span></h1> <h1>Design System<br>Inspired by Claude</h1>
<p>Auto-generated design token catalog from DESIGN.md</p> <p>Auto-generated design token catalog from DESIGN.md</p>
<div class="hero-buttons"> <div class="hero-buttons">
<button class="btn-brand">Explore Tokens</button> <button class="btn-brand">Explore Tokens</button>

6
design-md/claude/preview.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design System Preview: Claude / Anthropic (Light)</title> <title>Design System Inspired by Claude</title>
<style> <style>
:root { :root {
/* Primary */ /* Primary */
@ -417,7 +417,7 @@
<!-- NAV --> <!-- NAV -->
<nav class="nav"> <nav class="nav">
<div class="nav-brand"><span class="logo-mark">C</span> Claude</div> <span class="nav-brand">awesome-design-md</span>
<div class="nav-links"> <div class="nav-links">
<a href="#colors">Colors</a> <a href="#colors">Colors</a>
<a href="#typography">Typography</a> <a href="#typography">Typography</a>
@ -431,7 +431,7 @@
<!-- HERO --> <!-- HERO -->
<section class="hero"> <section class="hero">
<h1>Design System Preview:<br><span>Claude</span></h1> <h1>Design System<br>Inspired by Claude</h1>
<p>Auto-generated design token catalog from DESIGN.md</p> <p>Auto-generated design token catalog from DESIGN.md</p>
<div class="hero-buttons"> <div class="hero-buttons">
<button class="btn-brand">Explore Tokens</button> <button class="btn-brand">Explore Tokens</button>

8
design-md/clay/preview-dark.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design System Preview: Clay (Dark)</title> <title>Design System Inspired by Clay</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=DM+Sans:wght@400;500;600;700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=DM+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
@ -142,7 +142,7 @@
<body> <body>
<nav class="nav"> <nav class="nav">
<a class="nav-brand" href="#">awesome-design-md</a> <span class="nav-brand">awesome-design-md</span>
<ul class="nav-links"> <ul class="nav-links">
<li><a href="#colors">Colors</a></li> <li><a href="#colors">Colors</a></li>
<li><a href="#typography">Typography</a></li> <li><a href="#typography">Typography</a></li>
@ -310,9 +310,7 @@
</div> </div>
</section> </section>
<footer class="footer"> <footer class="footer">Maintained by <a href="https://github.com/VoltAgent/voltagent" target="_blank" rel="noopener noreferrer" style="text-decoration:none;"><img src="https://github.com/VoltAgent.png?size=32" alt="VoltAgent" width="14" height="14" style="border-radius:3px;vertical-align:-2px;margin-right:3px;">VoltAgent</a> team</footer>
Generated from <a href="https://clay.com/">clay.com</a> DESIGN.md — awesome-design-md
</footer>
</body> </body>
</html> </html>

8
design-md/clay/preview.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design System Preview: Clay (Light)</title> <title>Design System Inspired by Clay</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=DM+Sans:wght@400;500;600;700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=DM+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
@ -142,7 +142,7 @@
<body> <body>
<nav class="nav"> <nav class="nav">
<a class="nav-brand" href="#">awesome-design-md</a> <span class="nav-brand">awesome-design-md</span>
<ul class="nav-links"> <ul class="nav-links">
<li><a href="#colors">Colors</a></li> <li><a href="#colors">Colors</a></li>
<li><a href="#typography">Typography</a></li> <li><a href="#typography">Typography</a></li>
@ -309,9 +309,7 @@
</div> </div>
</section> </section>
<footer class="footer"> <footer class="footer">Maintained by <a href="https://github.com/VoltAgent/voltagent" target="_blank" rel="noopener noreferrer" style="text-decoration:none;"><img src="https://github.com/VoltAgent.png?size=32" alt="VoltAgent" width="14" height="14" style="border-radius:3px;vertical-align:-2px;margin-right:3px;">VoltAgent</a> team</footer>
Generated from <a href="https://clay.com/">clay.com</a> DESIGN.md — awesome-design-md
</footer>
</body> </body>
</html> </html>

6
design-md/clickhouse/preview-dark.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design System Preview: ClickHouse (Dark)</title> <title>Design System Inspired by ClickHouse</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900&family=Inconsolata:wght@400;600&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900&family=Inconsolata:wght@400;600&display=swap" rel="stylesheet">
@ -442,7 +442,7 @@
<!-- NAV --> <!-- NAV -->
<nav class="nav"> <nav class="nav">
<div class="nav-brand"><span class="icon">CH</span> ClickHouse</div> <span class="nav-brand">awesome-design-md</span>
<div class="nav-links"> <div class="nav-links">
<a href="#colors">Colors</a> <a href="#colors">Colors</a>
<a href="#typography">Typography</a> <a href="#typography">Typography</a>
@ -456,7 +456,7 @@
<!-- HERO --> <!-- HERO -->
<section class="hero"> <section class="hero">
<h1>Design System Preview:<br><span>ClickHouse</span></h1> <h1>Design System<br>Inspired by ClickHouse</h1>
<p>Auto-generated design token catalog from DESIGN.md &mdash; Dark mode (native)</p> <p>Auto-generated design token catalog from DESIGN.md &mdash; Dark mode (native)</p>
<div class="hero-buttons"> <div class="hero-buttons">
<button class="btn-neon">Explore Tokens</button> <button class="btn-neon">Explore Tokens</button>

6
design-md/clickhouse/preview.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design System Preview: ClickHouse (Light)</title> <title>Design System Inspired by ClickHouse</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900&family=Inconsolata:wght@400;600&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900&family=Inconsolata:wght@400;600&display=swap" rel="stylesheet">
@ -410,7 +410,7 @@
<!-- NAV --> <!-- NAV -->
<nav class="nav"> <nav class="nav">
<div class="nav-brand"><span class="icon">CH</span> ClickHouse</div> <span class="nav-brand">awesome-design-md</span>
<div class="nav-links"> <div class="nav-links">
<a href="#colors">Colors</a> <a href="#colors">Colors</a>
<a href="#typography">Typography</a> <a href="#typography">Typography</a>
@ -424,7 +424,7 @@
<!-- HERO --> <!-- HERO -->
<section class="hero"> <section class="hero">
<h1>Design System Preview:<br><span>ClickHouse</span></h1> <h1>Design System<br>Inspired by ClickHouse</h1>
<p>Auto-generated design token catalog from DESIGN.md &mdash; Light mode (inverted)</p> <p>Auto-generated design token catalog from DESIGN.md &mdash; Light mode (inverted)</p>
<div class="hero-buttons"> <div class="hero-buttons">
<button class="btn-neon">Explore Tokens</button> <button class="btn-neon">Explore Tokens</button>

13
design-md/cohere/preview-dark.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design System Preview: Cohere (Dark)</title> <title>Design System Inspired by Cohere</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">
@ -440,14 +440,7 @@
<!-- NAV --> <!-- NAV -->
<nav class="nav"> <nav class="nav">
<div class="nav-brand"> <span class="nav-brand">awesome-design-md</span>
<svg viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="14" cy="14" r="13" stroke="currentColor" stroke-width="2"/>
<path d="M8 14 C8 10, 12 8, 14 8 C16 8, 20 10, 20 14 C20 18, 16 20, 14 20 C12 20, 8 18, 8 14Z" fill="currentColor" opacity="0.15"/>
<circle cx="14" cy="14" r="4" fill="currentColor"/>
</svg>
cohere
</div>
<div class="nav-links"> <div class="nav-links">
<a href="#colors">Colors</a> <a href="#colors">Colors</a>
<a href="#typography">Typography</a> <a href="#typography">Typography</a>
@ -461,7 +454,7 @@
<!-- HERO --> <!-- HERO -->
<section class="hero"> <section class="hero">
<h1>Design System Preview:<br><span>Cohere</span></h1> <h1>Design System<br>Inspired by Cohere</h1>
<p>Auto-generated design token catalog from DESIGN.md</p> <p>Auto-generated design token catalog from DESIGN.md</p>
<div class="hero-buttons"> <div class="hero-buttons">
<button class="btn-light-solid">Explore Tokens</button> <button class="btn-light-solid">Explore Tokens</button>

13
design-md/cohere/preview.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design System Preview: Cohere (Light)</title> <title>Design System Inspired by Cohere</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">
@ -444,14 +444,7 @@
<!-- NAV --> <!-- NAV -->
<nav class="nav"> <nav class="nav">
<div class="nav-brand"> <span class="nav-brand">awesome-design-md</span>
<svg viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="14" cy="14" r="13" stroke="currentColor" stroke-width="2"/>
<path d="M8 14 C8 10, 12 8, 14 8 C16 8, 20 10, 20 14 C20 18, 16 20, 14 20 C12 20, 8 18, 8 14Z" fill="currentColor" opacity="0.15"/>
<circle cx="14" cy="14" r="4" fill="currentColor"/>
</svg>
cohere
</div>
<div class="nav-links"> <div class="nav-links">
<a href="#colors">Colors</a> <a href="#colors">Colors</a>
<a href="#typography">Typography</a> <a href="#typography">Typography</a>
@ -465,7 +458,7 @@
<!-- HERO --> <!-- HERO -->
<section class="hero"> <section class="hero">
<h1>Design System Preview:<br><span>Cohere</span></h1> <h1>Design System<br>Inspired by Cohere</h1>
<p>Auto-generated design token catalog from DESIGN.md</p> <p>Auto-generated design token catalog from DESIGN.md</p>
<div class="hero-buttons"> <div class="hero-buttons">
<button class="btn-dark-solid">Explore Tokens</button> <button class="btn-dark-solid">Explore Tokens</button>

6
design-md/coinbase/preview-dark.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design System Preview: Coinbase (Dark)</title> <title>Design System Inspired by Coinbase</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
@ -91,7 +91,7 @@
</head> </head>
<body> <body>
<nav class="nav"><a class="nav-brand" href="#">awesome-design-md</a><ul class="nav-links"><li><a href="#colors">Colors</a></li><li><a href="#typography">Typography</a></li><li><a href="#buttons">Buttons</a></li><li><a href="#cards">Cards</a></li><li><a href="#forms">Forms</a></li></ul><a class="nav-cta" href="#">Sign up</a></nav> <nav class="nav"><span class="nav-brand">awesome-design-md</span><ul class="nav-links"><li><a href="#colors">Colors</a></li><li><a href="#typography">Typography</a></li><li><a href="#buttons">Buttons</a></li><li><a href="#cards">Cards</a></li><li><a href="#forms">Forms</a></li></ul><a class="nav-cta" href="#">Sign up</a></nav>
<div style="position:fixed;top:16px;right:16px;z-index:200;background:#0052ff;color:#ffffff;font-size:10px;font-weight:600;padding:4px 12px;border-radius:56px;">Dark Mode</div> <div style="position:fixed;top:16px;right:16px;z-index:200;background:#0052ff;color:#ffffff;font-size:10px;font-weight:600;padding:4px 12px;border-radius:56px;">Dark Mode</div>
<section class="hero"><h1>Design System<br>Inspired by <span>Coinbase</span></h1><p>Every color, font, and component — visualized with crypto-grade precision.</p><div class="hero-buttons"><a class="btn-blue" href="#">Get Started</a><a class="btn-gray" href="#">Learn More</a></div></section> <section class="hero"><h1>Design System<br>Inspired by <span>Coinbase</span></h1><p>Every color, font, and component — visualized with crypto-grade precision.</p><div class="hero-buttons"><a class="btn-blue" href="#">Get Started</a><a class="btn-gray" href="#">Learn More</a></div></section>
@ -158,7 +158,7 @@
<section class="section"><div class="section-label">08 / Elevation</div><h2 class="section-title">Depth</h2> <section class="section"><div class="section-label">08 / Elevation</div><h2 class="section-title">Depth</h2>
<div class="elevation-grid"><div class="elevation-card"><div class="elevation-label">Flat</div><div class="elevation-desc">No shadow</div></div><div class="elevation-card" style="box-shadow:0 0 0 1px var(--blue);"><div class="elevation-label">Focus</div><div class="elevation-desc">Blue ring</div></div></div></section> <div class="elevation-grid"><div class="elevation-card"><div class="elevation-label">Flat</div><div class="elevation-desc">No shadow</div></div><div class="elevation-card" style="box-shadow:0 0 0 1px var(--blue);"><div class="elevation-label">Focus</div><div class="elevation-desc">Blue ring</div></div></div></section>
<footer class="footer">Generated from <a href="https://coinbase.com/">coinbase.com</a> DESIGN.md — awesome-design-md</footer> <footer class="footer">Maintained by <a href="https://github.com/VoltAgent/voltagent" target="_blank" rel="noopener noreferrer" style="text-decoration:none;"><img src="https://github.com/VoltAgent.png?size=32" alt="VoltAgent" width="14" height="14" style="border-radius:3px;vertical-align:-2px;margin-right:3px;">VoltAgent</a> team</footer>
</body> </body>
</html> </html>

6
design-md/coinbase/preview.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design System Preview: Coinbase (Light)</title> <title>Design System Inspired by Coinbase</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
@ -91,7 +91,7 @@
</head> </head>
<body> <body>
<nav class="nav"><a class="nav-brand" href="#">awesome-design-md</a><ul class="nav-links"><li><a href="#colors">Colors</a></li><li><a href="#typography">Typography</a></li><li><a href="#buttons">Buttons</a></li><li><a href="#cards">Cards</a></li><li><a href="#forms">Forms</a></li></ul><a class="nav-cta" href="#">Sign up</a></nav> <nav class="nav"><span class="nav-brand">awesome-design-md</span><ul class="nav-links"><li><a href="#colors">Colors</a></li><li><a href="#typography">Typography</a></li><li><a href="#buttons">Buttons</a></li><li><a href="#cards">Cards</a></li><li><a href="#forms">Forms</a></li></ul><a class="nav-cta" href="#">Sign up</a></nav>
<section class="hero"><h1>Design System<br>Inspired by <span>Coinbase</span></h1><p>Every color, font, and component — visualized with crypto-grade precision.</p><div class="hero-buttons"><a class="btn-blue" href="#">Get Started</a><a class="btn-gray" href="#">Learn More</a></div></section> <section class="hero"><h1>Design System<br>Inspired by <span>Coinbase</span></h1><p>Every color, font, and component — visualized with crypto-grade precision.</p><div class="hero-buttons"><a class="btn-blue" href="#">Get Started</a><a class="btn-gray" href="#">Learn More</a></div></section>
@ -157,7 +157,7 @@
<section class="section"><div class="section-label">08 / Elevation</div><h2 class="section-title">Depth</h2> <section class="section"><div class="section-label">08 / Elevation</div><h2 class="section-title">Depth</h2>
<div class="elevation-grid"><div class="elevation-card"><div class="elevation-label">Flat</div><div class="elevation-desc">No shadow</div></div><div class="elevation-card" style="box-shadow:0 0 0 1px var(--blue);"><div class="elevation-label">Focus</div><div class="elevation-desc">Blue ring</div></div></div></section> <div class="elevation-grid"><div class="elevation-card"><div class="elevation-label">Flat</div><div class="elevation-desc">No shadow</div></div><div class="elevation-card" style="box-shadow:0 0 0 1px var(--blue);"><div class="elevation-label">Focus</div><div class="elevation-desc">Blue ring</div></div></div></section>
<footer class="footer">Generated from <a href="https://coinbase.com/">coinbase.com</a> DESIGN.md — awesome-design-md</footer> <footer class="footer">Maintained by <a href="https://github.com/VoltAgent/voltagent" target="_blank" rel="noopener noreferrer" style="text-decoration:none;"><img src="https://github.com/VoltAgent.png?size=32" alt="VoltAgent" width="14" height="14" style="border-radius:3px;vertical-align:-2px;margin-right:3px;">VoltAgent</a> team</footer>
</body> </body>
</html> </html>

6
design-md/composio/preview-dark.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design System Preview: Composio (Dark)</title> <title>Design System Inspired by Composio</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet">
@ -427,7 +427,7 @@
<!-- NAV --> <!-- NAV -->
<nav class="nav"> <nav class="nav">
<div class="nav-brand">Composio</div> <span class="nav-brand">awesome-design-md</span>
<div class="nav-links"> <div class="nav-links">
<a href="#colors">Colors</a> <a href="#colors">Colors</a>
<a href="#typography">Typography</a> <a href="#typography">Typography</a>
@ -442,7 +442,7 @@
<!-- HERO --> <!-- HERO -->
<section class="hero"> <section class="hero">
<h1>Design System Preview:<br>Composio</h1> <h1>Design System<br>Inspired by Composio</h1>
<p>Auto-generated design token catalog from DESIGN.md &mdash; Dark Mode</p> <p>Auto-generated design token catalog from DESIGN.md &mdash; Dark Mode</p>
<div class="hero-buttons"> <div class="hero-buttons">
<button class="btn-primary">Explore Tokens</button> <button class="btn-primary">Explore Tokens</button>

6
design-md/composio/preview.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design System Preview: Composio</title> <title>Design System Inspired by Composio</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet">
@ -402,7 +402,7 @@
<!-- NAV --> <!-- NAV -->
<nav class="nav"> <nav class="nav">
<div class="nav-brand">Composio</div> <span class="nav-brand">awesome-design-md</span>
<div class="nav-links"> <div class="nav-links">
<a href="#colors">Colors</a> <a href="#colors">Colors</a>
<a href="#typography">Typography</a> <a href="#typography">Typography</a>
@ -417,7 +417,7 @@
<!-- HERO --> <!-- HERO -->
<section class="hero"> <section class="hero">
<h1>Design System Preview:<br>Composio</h1> <h1>Design System<br>Inspired by Composio</h1>
<p>Auto-generated design token catalog from DESIGN.md</p> <p>Auto-generated design token catalog from DESIGN.md</p>
<div class="hero-buttons"> <div class="hero-buttons">
<button class="btn-primary">Explore Tokens</button> <button class="btn-primary">Explore Tokens</button>

8
design-md/cursor/preview-dark.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design System Preview: Cursor (Dark)</title> <title>Design System Inspired by Cursor</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;600;700&family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;600;700&family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600&display=swap" rel="stylesheet">
@ -203,7 +203,7 @@
<div class="dark-badge">Dark Mode</div> <div class="dark-badge">Dark Mode</div>
<nav class="nav"> <nav class="nav">
<a class="nav-brand" href="#">awesome-design-md</a> <span class="nav-brand">awesome-design-md</span>
<ul class="nav-links"> <ul class="nav-links">
<li><a href="#colors">Colors</a></li> <li><a href="#colors">Colors</a></li>
<li><a href="#typography">Typography</a></li> <li><a href="#typography">Typography</a></li>
@ -387,9 +387,7 @@
</div> </div>
</section> </section>
<footer class="footer"> <footer class="footer">Maintained by <a href="https://github.com/VoltAgent/voltagent" target="_blank" rel="noopener noreferrer" style="text-decoration:none;"><img src="https://github.com/VoltAgent.png?size=32" alt="VoltAgent" width="14" height="14" style="border-radius:3px;vertical-align:-2px;margin-right:3px;">VoltAgent</a> team</footer>
Generated from <a href="https://cursor.com/">cursor.com</a> DESIGN.md -- awesome-design-md
</footer>
</body> </body>
</html> </html>

8
design-md/cursor/preview.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design System Preview: Cursor (Light)</title> <title>Design System Inspired by Cursor</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;600;700&family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;600;700&family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600&display=swap" rel="stylesheet">
@ -193,7 +193,7 @@
<body> <body>
<nav class="nav"> <nav class="nav">
<a class="nav-brand" href="#">awesome-design-md</a> <span class="nav-brand">awesome-design-md</span>
<ul class="nav-links"> <ul class="nav-links">
<li><a href="#colors">Colors</a></li> <li><a href="#colors">Colors</a></li>
<li><a href="#typography">Typography</a></li> <li><a href="#typography">Typography</a></li>
@ -377,9 +377,7 @@
</div> </div>
</section> </section>
<footer class="footer"> <footer class="footer">Maintained by <a href="https://github.com/VoltAgent/voltagent" target="_blank" rel="noopener noreferrer" style="text-decoration:none;"><img src="https://github.com/VoltAgent.png?size=32" alt="VoltAgent" width="14" height="14" style="border-radius:3px;vertical-align:-2px;margin-right:3px;">VoltAgent</a> team</footer>
Generated from <a href="https://cursor.com/">cursor.com</a> DESIGN.md -- awesome-design-md
</footer>
</body> </body>
</html> </html>

8
design-md/elevenlabs/preview-dark.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design System Preview: ElevenLabs (Dark)</title> <title>Design System Inspired by ElevenLabs</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&family=Geist+Mono&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&family=Geist+Mono&display=swap" rel="stylesheet">
@ -104,7 +104,7 @@
<body> <body>
<nav class="nav"> <nav class="nav">
<a class="nav-brand" href="#">awesome-design-md</a> <span class="nav-brand">awesome-design-md</span>
<ul class="nav-links"> <ul class="nav-links">
<li><a href="#colors">Colors</a></li> <li><a href="#colors">Colors</a></li>
<li><a href="#typography">Typography</a></li> <li><a href="#typography">Typography</a></li>
@ -246,9 +246,7 @@
</div> </div>
</section> </section>
<footer class="footer"> <footer class="footer">Maintained by <a href="https://github.com/VoltAgent/voltagent" target="_blank" rel="noopener noreferrer" style="text-decoration:none;"><img src="https://github.com/VoltAgent.png?size=32" alt="VoltAgent" width="14" height="14" style="border-radius:3px;vertical-align:-2px;margin-right:3px;">VoltAgent</a> team</footer>
Generated from <a href="https://elevenlabs.io/">elevenlabs.io</a> DESIGN.md — awesome-design-md
</footer>
</body> </body>
</html> </html>

8
design-md/elevenlabs/preview.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design System Preview: ElevenLabs (Light)</title> <title>Design System Inspired by ElevenLabs</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&family=Geist+Mono&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&family=Geist+Mono&display=swap" rel="stylesheet">
@ -104,7 +104,7 @@
<body> <body>
<nav class="nav"> <nav class="nav">
<a class="nav-brand" href="#">awesome-design-md</a> <span class="nav-brand">awesome-design-md</span>
<ul class="nav-links"> <ul class="nav-links">
<li><a href="#colors">Colors</a></li> <li><a href="#colors">Colors</a></li>
<li><a href="#typography">Typography</a></li> <li><a href="#typography">Typography</a></li>
@ -245,9 +245,7 @@
</div> </div>
</section> </section>
<footer class="footer"> <footer class="footer">Maintained by <a href="https://github.com/VoltAgent/voltagent" target="_blank" rel="noopener noreferrer" style="text-decoration:none;"><img src="https://github.com/VoltAgent.png?size=32" alt="VoltAgent" width="14" height="14" style="border-radius:3px;vertical-align:-2px;margin-right:3px;">VoltAgent</a> team</footer>
Generated from <a href="https://elevenlabs.io/">elevenlabs.io</a> DESIGN.md — awesome-design-md
</footer>
</body> </body>
</html> </html>

9
design-md/expo/preview-dark.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design System Preview: Expo (Dark)</title> <title>Design System Inspired by Expo</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
@ -312,10 +312,7 @@
<!-- NAV --> <!-- NAV -->
<nav class="nav"> <nav class="nav">
<div class="nav-brand"> <span class="nav-brand">awesome-design-md</span>
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
Expo
</div>
<div class="nav-links"> <div class="nav-links">
<a href="#colors">Colors</a> <a href="#colors">Colors</a>
<a href="#typography">Typography</a> <a href="#typography">Typography</a>
@ -330,7 +327,7 @@
<!-- HERO --> <!-- HERO -->
<section class="hero"> <section class="hero">
<h1>Design System Preview:<br>Expo</h1> <h1>Design System<br>Inspired by Expo</h1>
<p>Auto-generated design token catalog from DESIGN.md</p> <p>Auto-generated design token catalog from DESIGN.md</p>
<div class="hero-buttons"> <div class="hero-buttons">
<button class="btn-primary-pill">Explore Tokens</button> <button class="btn-primary-pill">Explore Tokens</button>

9
design-md/expo/preview.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design System Preview: Expo (Light)</title> <title>Design System Inspired by Expo</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
@ -312,10 +312,7 @@
<!-- NAV --> <!-- NAV -->
<nav class="nav"> <nav class="nav">
<div class="nav-brand"> <span class="nav-brand">awesome-design-md</span>
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
Expo
</div>
<div class="nav-links"> <div class="nav-links">
<a href="#colors">Colors</a> <a href="#colors">Colors</a>
<a href="#typography">Typography</a> <a href="#typography">Typography</a>
@ -330,7 +327,7 @@
<!-- HERO --> <!-- HERO -->
<section class="hero"> <section class="hero">
<h1>Design System Preview:<br>Expo</h1> <h1>Design System<br>Inspired by Expo</h1>
<p>Auto-generated design token catalog from DESIGN.md</p> <p>Auto-generated design token catalog from DESIGN.md</p>
<div class="hero-buttons"> <div class="hero-buttons">
<button class="btn-primary-pill">Explore Tokens</button> <button class="btn-primary-pill">Explore Tokens</button>

11
design-md/ferrari/preview-dark.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design System Inspired by Ferrari — Dark Mode</title> <title>Design System Inspired by Ferrari</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Barlow+Condensed:wght@400;500;600;700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Barlow+Condensed:wght@400;500;600;700&display=swap" rel="stylesheet">
@ -652,7 +652,7 @@
<!-- NAV --> <!-- NAV -->
<nav> <nav>
<a href="#" class="nav-brand">awesome-design-md</a> <span class="nav-brand">awesome-design-md</span>
<ul class="nav-links"> <ul class="nav-links">
<li><a href="#colors">Colors</a></li> <li><a href="#colors">Colors</a></li>
<li><a href="#typography">Typography</a></li> <li><a href="#typography">Typography</a></li>
@ -666,7 +666,7 @@
<!-- HERO --> <!-- HERO -->
<section class="hero"> <section class="hero">
<div class="label-tag">Design Token Catalog</div> <div class="label-tag">Design System Inspired by Ferrari</div>
<h1>Design System Inspired by Ferrari</h1> <h1>Design System Inspired by Ferrari</h1>
<p class="subtitle">A visual reference generated from DESIGN.md — every color, type rule, and component token documented</p> <p class="subtitle">A visual reference generated from DESIGN.md — every color, type rule, and component token documented</p>
<div class="label-tag">Precision Engineering Meets Editorial Design</div> <div class="label-tag">Precision Engineering Meets Editorial Design</div>
@ -1156,10 +1156,7 @@
</div> </div>
<!-- FOOTER --> <!-- FOOTER -->
<footer style="background:var(--absolute-black);padding:40px;text-align:center;margin-top:40px;border-top:1px solid var(--card-border);"> <footer class="footer">Maintained by <a href="https://github.com/VoltAgent/voltagent" target="_blank" rel="noopener noreferrer" style="text-decoration:none;"><img src="https://github.com/VoltAgent.png?size=32" alt="VoltAgent" width="14" height="14" style="border-radius:3px;vertical-align:-2px;margin-right:3px;">VoltAgent</a> team</footer>
<p style="font-family:var(--font-body);font-size:12px;color:var(--text-muted);letter-spacing:1px;text-transform:uppercase;">Generated from DESIGN.md — Ferrari Design System Tokens</p>
<p style="font-family:var(--font-heading);font-size:13px;color:var(--text-tertiary);margin-top:8px;">awesome-design-md</p>
</footer>
</body> </body>
</html> </html>

9
design-md/ferrari/preview.html
View File

@ -612,7 +612,7 @@
<!-- NAV --> <!-- NAV -->
<nav> <nav>
<a href="#" class="nav-brand">awesome-design-md</a> <span class="nav-brand">awesome-design-md</span>
<ul class="nav-links"> <ul class="nav-links">
<li><a href="#colors">Colors</a></li> <li><a href="#colors">Colors</a></li>
<li><a href="#typography">Typography</a></li> <li><a href="#typography">Typography</a></li>
@ -626,7 +626,7 @@
<!-- HERO --> <!-- HERO -->
<section class="hero"> <section class="hero">
<div class="label-tag">Design Token Catalog</div> <div class="label-tag">Design System Inspired by Ferrari</div>
<h1>Design System Inspired by Ferrari</h1> <h1>Design System Inspired by Ferrari</h1>
<p class="subtitle">A visual reference generated from DESIGN.md — every color, type rule, and component token documented</p> <p class="subtitle">A visual reference generated from DESIGN.md — every color, type rule, and component token documented</p>
<div class="label-tag">Precision Engineering Meets Editorial Design</div> <div class="label-tag">Precision Engineering Meets Editorial Design</div>
@ -1116,10 +1116,7 @@
</div> </div>
<!-- FOOTER --> <!-- FOOTER -->
<footer style="background:var(--dark-surface);padding:40px;text-align:center;margin-top:40px;"> <footer class="footer">Maintained by <a href="https://github.com/VoltAgent/voltagent" target="_blank" rel="noopener noreferrer" style="text-decoration:none;"><img src="https://github.com/VoltAgent.png?size=32" alt="VoltAgent" width="14" height="14" style="border-radius:3px;vertical-align:-2px;margin-right:3px;">VoltAgent</a> team</footer>
<p style="font-family:var(--font-body);font-size:12px;color:var(--silver-gray);letter-spacing:1px;text-transform:uppercase;">Generated from DESIGN.md — Ferrari Design System Tokens</p>
<p style="font-family:var(--font-heading);font-size:13px;color:var(--mid-gray);margin-top:8px;">awesome-design-md</p>
</footer>
</body> </body>
</html> </html>

15
design-md/figma/preview-dark.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design System Preview: Figma (Dark)</title> <title>Design System Inspired by Figma</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">
@ -501,16 +501,7 @@
<!-- NAV --> <!-- NAV -->
<nav class="nav"> <nav class="nav">
<div class="nav-brand"> <span class="nav-brand">awesome-design-md</span>
<svg viewBox="0 0 38 57" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M19 28.5C19 23.2533 23.2533 19 28.5 19C33.7467 19 38 23.2533 38 28.5C38 33.7467 33.7467 38 28.5 38C23.2533 38 19 33.7467 19 28.5Z" fill="#1ABCFE"/>
<path d="M0 47.5C0 42.2533 4.25329 38 9.5 38H19V47.5C19 52.7467 14.7467 57 9.5 57C4.25329 57 0 52.7467 0 47.5Z" fill="#0ACF83"/>
<path d="M19 0V19H28.5C33.7467 19 38 14.7467 38 9.5C38 4.25329 33.7467 0 28.5 0H19Z" fill="#FF7262"/>
<path d="M0 9.5C0 14.7467 4.25329 19 9.5 19H19V0H9.5C4.25329 0 0 4.25329 0 9.5Z" fill="#F24E1E"/>
<path d="M0 28.5C0 33.7467 4.25329 38 9.5 38H19V19H9.5C4.25329 19 0 23.2533 0 28.5Z" fill="#A259FF"/>
</svg>
Figma
</div>
<div class="nav-links"> <div class="nav-links">
<a href="#colors">Colors</a> <a href="#colors">Colors</a>
<a href="#typography">Typography</a> <a href="#typography">Typography</a>
@ -530,7 +521,7 @@
<button class="product-tab">Prototyping</button> <button class="product-tab">Prototyping</button>
<button class="product-tab">Slides</button> <button class="product-tab">Slides</button>
</div> </div>
<h1>Design System Preview:<br>Figma</h1> <h1>Design System<br>Inspired by Figma</h1>
<p>Auto-generated design token catalog from DESIGN.md</p> <p>Auto-generated design token catalog from DESIGN.md</p>
<div class="hero-buttons"> <div class="hero-buttons">
<button class="btn-hero-primary">Explore Tokens</button> <button class="btn-hero-primary">Explore Tokens</button>

15
design-md/figma/preview.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design System Preview: Figma (Light)</title> <title>Design System Inspired by Figma</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">
@ -506,16 +506,7 @@
<!-- NAV --> <!-- NAV -->
<nav class="nav"> <nav class="nav">
<div class="nav-brand"> <span class="nav-brand">awesome-design-md</span>
<svg viewBox="0 0 38 57" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M19 28.5C19 23.2533 23.2533 19 28.5 19C33.7467 19 38 23.2533 38 28.5C38 33.7467 33.7467 38 28.5 38C23.2533 38 19 33.7467 19 28.5Z" fill="#1ABCFE"/>
<path d="M0 47.5C0 42.2533 4.25329 38 9.5 38H19V47.5C19 52.7467 14.7467 57 9.5 57C4.25329 57 0 52.7467 0 47.5Z" fill="#0ACF83"/>
<path d="M19 0V19H28.5C33.7467 19 38 14.7467 38 9.5C38 4.25329 33.7467 0 28.5 0H19Z" fill="#FF7262"/>
<path d="M0 9.5C0 14.7467 4.25329 19 9.5 19H19V0H9.5C4.25329 0 0 4.25329 0 9.5Z" fill="#F24E1E"/>
<path d="M0 28.5C0 33.7467 4.25329 38 9.5 38H19V19H9.5C4.25329 19 0 23.2533 0 28.5Z" fill="#A259FF"/>
</svg>
Figma
</div>
<div class="nav-links"> <div class="nav-links">
<a href="#colors">Colors</a> <a href="#colors">Colors</a>
<a href="#typography">Typography</a> <a href="#typography">Typography</a>
@ -535,7 +526,7 @@
<button class="product-tab">Prototyping</button> <button class="product-tab">Prototyping</button>
<button class="product-tab">Slides</button> <button class="product-tab">Slides</button>
</div> </div>
<h1>Design System Preview:<br>Figma</h1> <h1>Design System<br>Inspired by Figma</h1>
<p>Auto-generated design token catalog from DESIGN.md</p> <p>Auto-generated design token catalog from DESIGN.md</p>
<div class="hero-buttons"> <div class="hero-buttons">
<button class="btn-hero-primary">Explore Tokens</button> <button class="btn-hero-primary">Explore Tokens</button>

6
design-md/framer/preview-dark.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design System Inspired by Framer — Dark Mode</title> <title>Design System Inspired by Framer</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;300;400;500;600;700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;300;400;500;600;700&display=swap" rel="stylesheet">
@ -896,9 +896,7 @@
</section> </section>
<!-- FOOTER --> <!-- FOOTER -->
<footer class="footer"> <footer class="footer">Maintained by <a href="https://github.com/VoltAgent/voltagent" target="_blank" rel="noopener noreferrer" style="text-decoration:none;"><img src="https://github.com/VoltAgent.png?size=32" alt="VoltAgent" width="14" height="14" style="border-radius:3px;vertical-align:-2px;margin-right:3px;">VoltAgent</a> team</footer>
<p>Design system extracted from <a href="https://framer.com">framer.com</a> — Generated by awesome-design-md</p>
</footer>
</body> </body>
</html> </html>

4
design-md/framer/preview.html
View File

@ -877,9 +877,7 @@
</section> </section>
<!-- FOOTER --> <!-- FOOTER -->
<footer class="footer"> <footer class="footer">Maintained by <a href="https://github.com/VoltAgent/voltagent" target="_blank" rel="noopener noreferrer" style="text-decoration:none;"><img src="https://github.com/VoltAgent.png?size=32" alt="VoltAgent" width="14" height="14" style="border-radius:3px;vertical-align:-2px;margin-right:3px;">VoltAgent</a> team</footer>
<p>Design system extracted from <a href="https://framer.com">framer.com</a> — Generated by awesome-design-md</p>
</footer>
</body> </body>
</html> </html>

10
design-md/hashicorp/preview-dark.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design System Preview: HashiCorp (Dark)</title> <title>Design System Inspired by HashiCorp</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
@ -702,9 +702,7 @@
<!-- NAV --> <!-- NAV -->
<nav class="nav"> <nav class="nav">
<div class="nav-brand"> <span class="nav-brand">awesome-design-md</span>
awesome-design-md
</div>
<div class="nav-links"> <div class="nav-links">
<a href="#colors">Colors</a> <a href="#colors">Colors</a>
<a href="#typography">Typography</a> <a href="#typography">Typography</a>
@ -1198,9 +1196,7 @@
</section> </section>
<!-- FOOTER --> <!-- FOOTER -->
<footer class="footer"> <footer class="footer">Maintained by <a href="https://github.com/VoltAgent/voltagent" target="_blank" rel="noopener noreferrer" style="text-decoration:none;"><img src="https://github.com/VoltAgent.png?size=32" alt="VoltAgent" width="14" height="14" style="border-radius:3px;vertical-align:-2px;margin-right:3px;">VoltAgent</a> team</footer>
<p>Design system tokens extracted from the public <a href="https://hashicorp.com" target="_blank">hashicorp.com</a> website. This is not the official HashiCorp design system.<br>Built for <strong>awesome-design-md</strong> &mdash; a curated collection of design system references.</p>
</footer>
</body> </body>
</html> </html>

8
design-md/hashicorp/preview.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design System Preview: HashiCorp (Light)</title> <title>Design System Inspired by HashiCorp</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
@ -677,7 +677,7 @@
<!-- NAV --> <!-- NAV -->
<nav class="nav"> <nav class="nav">
<div class="nav-brand">awesome-design-md</div> <span class="nav-brand">awesome-design-md</span>
<div class="nav-links"> <div class="nav-links">
<a href="#colors">Colors</a> <a href="#colors">Colors</a>
<a href="#typography">Typography</a> <a href="#typography">Typography</a>
@ -1187,9 +1187,7 @@
</section> </section>
<!-- FOOTER --> <!-- FOOTER -->
<footer class="footer"> <footer class="footer">Maintained by <a href="https://github.com/VoltAgent/voltagent" target="_blank" rel="noopener noreferrer" style="text-decoration:none;"><img src="https://github.com/VoltAgent.png?size=32" alt="VoltAgent" width="14" height="14" style="border-radius:3px;vertical-align:-2px;margin-right:3px;">VoltAgent</a> team</footer>
<p>Design system tokens extracted from the public <a href="https://hashicorp.com" target="_blank">hashicorp.com</a> website. This is not the official HashiCorp design system.<br>Built for <strong>awesome-design-md</strong> &mdash; a curated collection of design system references.</p>
</footer>
</body> </body>
</html> </html>

8
design-md/ibm/preview-dark.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design System Preview: IBM (Dark)</title> <title>Design System Inspired by IBM</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;600&family=IBM+Plex+Mono:wght@400;500;600&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;600&family=IBM+Plex+Mono:wght@400;500;600&display=swap" rel="stylesheet">
@ -231,7 +231,7 @@
<div class="dark-badge">Dark Mode</div> <div class="dark-badge">Dark Mode</div>
<nav class="nav"> <nav class="nav">
<a class="nav-brand" href="#">awesome-design-md</a> <span class="nav-brand">awesome-design-md</span>
<ul class="nav-links"> <ul class="nav-links">
<li><a href="#colors">Colors</a></li> <li><a href="#colors">Colors</a></li>
<li><a href="#typography">Typography</a></li> <li><a href="#typography">Typography</a></li>
@ -437,9 +437,7 @@
</section> </section>
</div> </div>
<footer class="footer"> <footer class="footer">Maintained by <a href="https://github.com/VoltAgent/voltagent" target="_blank" rel="noopener noreferrer" style="text-decoration:none;"><img src="https://github.com/VoltAgent.png?size=32" alt="VoltAgent" width="14" height="14" style="border-radius:3px;vertical-align:-2px;margin-right:3px;">VoltAgent</a> team</footer>
Generated from <a href="https://ibm.com/">ibm.com</a> DESIGN.md &mdash; awesome-design-md &mdash; Dark Mode
</footer>
</body> </body>
</html> </html>

8
design-md/ibm/preview.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design System Preview: IBM (Light)</title> <title>Design System Inspired by IBM</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;600&family=IBM+Plex+Mono:wght@400;500;600&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;600&family=IBM+Plex+Mono:wght@400;500;600&display=swap" rel="stylesheet">
@ -215,7 +215,7 @@
<body> <body>
<nav class="nav"> <nav class="nav">
<a class="nav-brand" href="#">awesome-design-md</a> <span class="nav-brand">awesome-design-md</span>
<ul class="nav-links"> <ul class="nav-links">
<li><a href="#colors">Colors</a></li> <li><a href="#colors">Colors</a></li>
<li><a href="#typography">Typography</a></li> <li><a href="#typography">Typography</a></li>
@ -422,9 +422,7 @@
</section> </section>
</div> </div>
<footer class="footer"> <footer class="footer">Maintained by <a href="https://github.com/VoltAgent/voltagent" target="_blank" rel="noopener noreferrer" style="text-decoration:none;"><img src="https://github.com/VoltAgent.png?size=32" alt="VoltAgent" width="14" height="14" style="border-radius:3px;vertical-align:-2px;margin-right:3px;">VoltAgent</a> team</footer>
Generated from <a href="https://ibm.com/">ibm.com</a> DESIGN.md &mdash; awesome-design-md
</footer>
</body> </body>
</html> </html>

6
design-md/intercom/preview-dark.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design System Preview: Intercom (Dark)</title> <title>Design System Inspired by Intercom</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700&display=swap" rel="stylesheet">
@ -91,7 +91,7 @@
</head> </head>
<body> <body>
<nav class="nav"><a class="nav-brand" href="#">awesome-design-md</a><ul class="nav-links"><li><a href="#colors">Colors</a></li><li><a href="#typography">Typography</a></li><li><a href="#buttons">Buttons</a></li><li><a href="#cards">Cards</a></li><li><a href="#forms">Forms</a></li></ul><a class="nav-cta" href="#">Start free trial</a></nav> <nav class="nav"><span class="nav-brand">awesome-design-md</span><ul class="nav-links"><li><a href="#colors">Colors</a></li><li><a href="#typography">Typography</a></li><li><a href="#buttons">Buttons</a></li><li><a href="#cards">Cards</a></li><li><a href="#forms">Forms</a></li></ul><a class="nav-cta" href="#">Start free trial</a></nav>
<div style="position:fixed;top:16px;right:16px;z-index:200;background:#ff5600;color:#ffffff;font-size:10px;font-weight:400;padding:4px 10px;border-radius:4px;">Dark Mode</div> <div style="position:fixed;top:16px;right:16px;z-index:200;background:#ff5600;color:#ffffff;font-size:10px;font-weight:400;padding:4px 10px;border-radius:4px;">Dark Mode</div>
<section class="hero"><h1>Design System<br>Inspired by <span>Intercom</span></h1><p>Every color, font, and component — visualized with warm precision.</p><div class="hero-buttons"><a class="btn-dark" href="#">Get a demo</a><a class="btn-outline" href="#">Start free trial</a></div></section> <section class="hero"><h1>Design System<br>Inspired by <span>Intercom</span></h1><p>Every color, font, and component — visualized with warm precision.</p><div class="hero-buttons"><a class="btn-dark" href="#">Get a demo</a><a class="btn-outline" href="#">Start free trial</a></div></section>
@ -179,7 +179,7 @@
<section class="section"><div class="section-label">08 / Elevation</div><h2 class="section-title">Depth</h2> <section class="section"><div class="section-label">08 / Elevation</div><h2 class="section-title">Depth</h2>
<div class="elevation-grid"><div class="elevation-card"><div class="elevation-label">Flat</div><div class="elevation-desc">No shadow — warm borders</div></div><div class="elevation-card" style="border-color:var(--black);"><div class="elevation-label">Focus</div><div class="elevation-desc">Black border</div></div></div></section> <div class="elevation-grid"><div class="elevation-card"><div class="elevation-label">Flat</div><div class="elevation-desc">No shadow — warm borders</div></div><div class="elevation-card" style="border-color:var(--black);"><div class="elevation-label">Focus</div><div class="elevation-desc">Black border</div></div></div></section>
<footer class="footer">Generated from <a href="https://www.intercom.com/">intercom.com</a> DESIGN.md — awesome-design-md</footer> <footer class="footer">Maintained by <a href="https://github.com/VoltAgent/voltagent" target="_blank" rel="noopener noreferrer" style="text-decoration:none;"><img src="https://github.com/VoltAgent.png?size=32" alt="VoltAgent" width="14" height="14" style="border-radius:3px;vertical-align:-2px;margin-right:3px;">VoltAgent</a> team</footer>
</body> </body>
</html> </html>

6
design-md/intercom/preview.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design System Preview: Intercom (Light)</title> <title>Design System Inspired by Intercom</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700&display=swap" rel="stylesheet">
@ -91,7 +91,7 @@
</head> </head>
<body> <body>
<nav class="nav"><a class="nav-brand" href="#">awesome-design-md</a><ul class="nav-links"><li><a href="#colors">Colors</a></li><li><a href="#typography">Typography</a></li><li><a href="#buttons">Buttons</a></li><li><a href="#cards">Cards</a></li><li><a href="#forms">Forms</a></li></ul><a class="nav-cta" href="#">Start free trial</a></nav> <nav class="nav"><span class="nav-brand">awesome-design-md</span><ul class="nav-links"><li><a href="#colors">Colors</a></li><li><a href="#typography">Typography</a></li><li><a href="#buttons">Buttons</a></li><li><a href="#cards">Cards</a></li><li><a href="#forms">Forms</a></li></ul><a class="nav-cta" href="#">Start free trial</a></nav>
<section class="hero"><h1>Design System<br>Inspired by <span>Intercom</span></h1><p>Every color, font, and component — visualized with warm precision.</p><div class="hero-buttons"><a class="btn-dark" href="#">Get a demo</a><a class="btn-outline" href="#">Start free trial</a></div></section> <section class="hero"><h1>Design System<br>Inspired by <span>Intercom</span></h1><p>Every color, font, and component — visualized with warm precision.</p><div class="hero-buttons"><a class="btn-dark" href="#">Get a demo</a><a class="btn-outline" href="#">Start free trial</a></div></section>
@ -178,7 +178,7 @@
<section class="section"><div class="section-label">08 / Elevation</div><h2 class="section-title">Depth</h2> <section class="section"><div class="section-label">08 / Elevation</div><h2 class="section-title">Depth</h2>
<div class="elevation-grid"><div class="elevation-card"><div class="elevation-label">Flat</div><div class="elevation-desc">No shadow — warm borders</div></div><div class="elevation-card" style="border-color:var(--black);"><div class="elevation-label">Focus</div><div class="elevation-desc">Black border</div></div></div></section> <div class="elevation-grid"><div class="elevation-card"><div class="elevation-label">Flat</div><div class="elevation-desc">No shadow — warm borders</div></div><div class="elevation-card" style="border-color:var(--black);"><div class="elevation-label">Focus</div><div class="elevation-desc">Black border</div></div></div></section>
<footer class="footer">Generated from <a href="https://www.intercom.com/">intercom.com</a> DESIGN.md — awesome-design-md</footer> <footer class="footer">Maintained by <a href="https://github.com/VoltAgent/voltagent" target="_blank" rel="noopener noreferrer" style="text-decoration:none;"><img src="https://github.com/VoltAgent.png?size=32" alt="VoltAgent" width="14" height="14" style="border-radius:3px;vertical-align:-2px;margin-right:3px;">VoltAgent</a> team</footer>
</body> </body>
</html> </html>

6
design-md/kraken/preview-dark.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design System Preview: Kraken (Dark)</title> <title>Design System Inspired by Kraken</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
@ -88,7 +88,7 @@
</head> </head>
<body> <body>
<nav class="nav"><a class="nav-brand" href="#">awesome-design-md</a><ul class="nav-links"><li><a href="#colors">Colors</a></li><li><a href="#typography">Typography</a></li><li><a href="#buttons">Buttons</a></li><li><a href="#cards">Cards</a></li><li><a href="#forms">Forms</a></li></ul><a class="nav-cta" href="#">Sign Up</a></nav> <nav class="nav"><span class="nav-brand">awesome-design-md</span><ul class="nav-links"><li><a href="#colors">Colors</a></li><li><a href="#typography">Typography</a></li><li><a href="#buttons">Buttons</a></li><li><a href="#cards">Cards</a></li><li><a href="#forms">Forms</a></li></ul><a class="nav-cta" href="#">Sign Up</a></nav>
<div style="position:fixed;top:16px;right:16px;z-index:200;background:#7132f5;color:#ffffff;font-size:10px;font-weight:600;padding:4px 12px;border-radius:12px;">Dark Mode</div> <div style="position:fixed;top:16px;right:16px;z-index:200;background:#7132f5;color:#ffffff;font-size:10px;font-weight:600;padding:4px 12px;border-radius:12px;">Dark Mode</div>
<section class="hero"><h1>Design System<br>Inspired by <span>Kraken</span></h1><p>Every color, font, and component — visualized with crypto-exchange precision.</p><div class="hero-buttons"><a class="btn-purple" href="#">Create Account</a><a class="btn-outline" href="#">Explore</a></div></section> <section class="hero"><h1>Design System<br>Inspired by <span>Kraken</span></h1><p>Every color, font, and component — visualized with crypto-exchange precision.</p><div class="hero-buttons"><a class="btn-purple" href="#">Create Account</a><a class="btn-outline" href="#">Explore</a></div></section>
@ -163,7 +163,7 @@
<section class="section"><div class="section-label">08 / Elevation</div><h2 class="section-title">Depth</h2> <section class="section"><div class="section-label">08 / Elevation</div><h2 class="section-title">Depth</h2>
<div class="elevation-grid"><div class="elevation-card"><div class="elevation-label">Flat</div><div class="elevation-desc">No shadow</div></div><div class="elevation-card" style="box-shadow:rgba(0,0,0,0.03) 0px 4px 24px;"><div class="elevation-label">Subtle</div><div class="elevation-desc">4px 24px at 0.03</div></div><div class="elevation-card" style="box-shadow:0 0 0 1px var(--purple);"><div class="elevation-label">Focus</div><div class="elevation-desc">Purple ring</div></div></div></section> <div class="elevation-grid"><div class="elevation-card"><div class="elevation-label">Flat</div><div class="elevation-desc">No shadow</div></div><div class="elevation-card" style="box-shadow:rgba(0,0,0,0.03) 0px 4px 24px;"><div class="elevation-label">Subtle</div><div class="elevation-desc">4px 24px at 0.03</div></div><div class="elevation-card" style="box-shadow:0 0 0 1px var(--purple);"><div class="elevation-label">Focus</div><div class="elevation-desc">Purple ring</div></div></div></section>
<footer class="footer">Generated from <a href="https://kraken.com/">kraken.com</a> DESIGN.md — awesome-design-md</footer> <footer class="footer">Maintained by <a href="https://github.com/VoltAgent/voltagent" target="_blank" rel="noopener noreferrer" style="text-decoration:none;"><img src="https://github.com/VoltAgent.png?size=32" alt="VoltAgent" width="14" height="14" style="border-radius:3px;vertical-align:-2px;margin-right:3px;">VoltAgent</a> team</footer>
</body> </body>
</html> </html>

6
design-md/kraken/preview.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design System Preview: Kraken (Light)</title> <title>Design System Inspired by Kraken</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
@ -88,7 +88,7 @@
</head> </head>
<body> <body>
<nav class="nav"><a class="nav-brand" href="#">awesome-design-md</a><ul class="nav-links"><li><a href="#colors">Colors</a></li><li><a href="#typography">Typography</a></li><li><a href="#buttons">Buttons</a></li><li><a href="#cards">Cards</a></li><li><a href="#forms">Forms</a></li></ul><a class="nav-cta" href="#">Sign Up</a></nav> <nav class="nav"><span class="nav-brand">awesome-design-md</span><ul class="nav-links"><li><a href="#colors">Colors</a></li><li><a href="#typography">Typography</a></li><li><a href="#buttons">Buttons</a></li><li><a href="#cards">Cards</a></li><li><a href="#forms">Forms</a></li></ul><a class="nav-cta" href="#">Sign Up</a></nav>
<section class="hero"><h1>Design System<br>Inspired by <span>Kraken</span></h1><p>Every color, font, and component — visualized with crypto-exchange precision.</p><div class="hero-buttons"><a class="btn-purple" href="#">Create Account</a><a class="btn-outline" href="#">Explore</a></div></section> <section class="hero"><h1>Design System<br>Inspired by <span>Kraken</span></h1><p>Every color, font, and component — visualized with crypto-exchange precision.</p><div class="hero-buttons"><a class="btn-purple" href="#">Create Account</a><a class="btn-outline" href="#">Explore</a></div></section>
@ -162,7 +162,7 @@
<section class="section"><div class="section-label">08 / Elevation</div><h2 class="section-title">Depth</h2> <section class="section"><div class="section-label">08 / Elevation</div><h2 class="section-title">Depth</h2>
<div class="elevation-grid"><div class="elevation-card"><div class="elevation-label">Flat</div><div class="elevation-desc">No shadow</div></div><div class="elevation-card" style="box-shadow:rgba(0,0,0,0.03) 0px 4px 24px;"><div class="elevation-label">Subtle</div><div class="elevation-desc">4px 24px at 0.03</div></div><div class="elevation-card" style="box-shadow:0 0 0 1px var(--purple);"><div class="elevation-label">Focus</div><div class="elevation-desc">Purple ring</div></div></div></section> <div class="elevation-grid"><div class="elevation-card"><div class="elevation-label">Flat</div><div class="elevation-desc">No shadow</div></div><div class="elevation-card" style="box-shadow:rgba(0,0,0,0.03) 0px 4px 24px;"><div class="elevation-label">Subtle</div><div class="elevation-desc">4px 24px at 0.03</div></div><div class="elevation-card" style="box-shadow:0 0 0 1px var(--purple);"><div class="elevation-label">Focus</div><div class="elevation-desc">Purple ring</div></div></div></section>
<footer class="footer">Generated from <a href="https://kraken.com/">kraken.com</a> DESIGN.md — awesome-design-md</footer> <footer class="footer">Maintained by <a href="https://github.com/VoltAgent/voltagent" target="_blank" rel="noopener noreferrer" style="text-decoration:none;"><img src="https://github.com/VoltAgent.png?size=32" alt="VoltAgent" width="14" height="14" style="border-radius:3px;vertical-align:-2px;margin-right:3px;">VoltAgent</a> team</footer>
</body> </body>
</html> </html>

4
design-md/lamborghini/preview-dark.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design System Inspired by Lamborghini — Dark Mode</title> <title>Design System Inspired by Lamborghini</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
@ -297,7 +297,7 @@
</div> </div>
</section> </section>
<footer><p>Design System Inspired by Lamborghini — Generated from DESIGN.md by awesome-design-md</p></footer> <footer class="footer">Maintained by <a href="https://github.com/VoltAgent/voltagent" target="_blank" rel="noopener noreferrer" style="text-decoration:none;"><img src="https://github.com/VoltAgent.png?size=32" alt="VoltAgent" width="14" height="14" style="border-radius:3px;vertical-align:-2px;margin-right:3px;">VoltAgent</a> team</footer>
</body> </body>
</html> </html>

2
design-md/lamborghini/preview.html
View File

@ -375,7 +375,7 @@
</div> </div>
</section> </section>
<footer><p>Design System Inspired by Lamborghini — Generated from DESIGN.md by awesome-design-md</p></footer> <footer class="footer">Maintained by <a href="https://github.com/VoltAgent/voltagent" target="_blank" rel="noopener noreferrer" style="text-decoration:none;"><img src="https://github.com/VoltAgent.png?size=32" alt="VoltAgent" width="14" height="14" style="border-radius:3px;vertical-align:-2px;margin-right:3px;">VoltAgent</a> team</footer>
</body> </body>
</html> </html>

8
design-md/linear.app/preview-dark.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design System Preview: Linear (Dark)</title> <title>Design System Inspired by Linear</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
@ -186,7 +186,7 @@
<div class="dark-badge">Dark Mode</div> <div class="dark-badge">Dark Mode</div>
<nav class="nav"> <nav class="nav">
<a class="nav-brand" href="#">awesome-design-md</a> <span class="nav-brand">awesome-design-md</span>
<ul class="nav-links"> <ul class="nav-links">
<li><a href="#colors">Colors</a></li> <li><a href="#colors">Colors</a></li>
<li><a href="#typography">Typography</a></li> <li><a href="#typography">Typography</a></li>
@ -377,9 +377,7 @@
</div> </div>
</section> </section>
<footer class="footer"> <footer class="footer">Maintained by <a href="https://github.com/VoltAgent/voltagent" target="_blank" rel="noopener noreferrer" style="text-decoration:none;"><img src="https://github.com/VoltAgent.png?size=32" alt="VoltAgent" width="14" height="14" style="border-radius:3px;vertical-align:-2px;margin-right:3px;">VoltAgent</a> team</footer>
Generated from <a href="https://linear.app/">linear.app</a> DESIGN.md — awesome-design-md
</footer>
</body> </body>
</html> </html>

8
design-md/linear.app/preview.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design System Preview: Linear (Light)</title> <title>Design System Inspired by Linear</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
@ -174,7 +174,7 @@
<body> <body>
<nav class="nav"> <nav class="nav">
<a class="nav-brand" href="#">awesome-design-md</a> <span class="nav-brand">awesome-design-md</span>
<ul class="nav-links"> <ul class="nav-links">
<li><a href="#colors">Colors</a></li> <li><a href="#colors">Colors</a></li>
<li><a href="#typography">Typography</a></li> <li><a href="#typography">Typography</a></li>
@ -367,9 +367,7 @@
</div> </div>
</section> </section>
<footer class="footer"> <footer class="footer">Maintained by <a href="https://github.com/VoltAgent/voltagent" target="_blank" rel="noopener noreferrer" style="text-decoration:none;"><img src="https://github.com/VoltAgent.png?size=32" alt="VoltAgent" width="14" height="14" style="border-radius:3px;vertical-align:-2px;margin-right:3px;">VoltAgent</a> team</footer>
Generated from <a href="https://linear.app/">linear.app</a> DESIGN.md — awesome-design-md
</footer>
</body> </body>
</html> </html>

8
design-md/lovable/preview-dark.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design System Preview: Lovable (Dark)</title> <title>Design System Inspired by Lovable</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;480;500;600&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;480;500;600&display=swap" rel="stylesheet">
@ -177,7 +177,7 @@
<body> <body>
<nav class="nav"> <nav class="nav">
<a class="nav-brand" href="#">awesome-design-md</a> <span class="nav-brand">awesome-design-md</span>
<ul class="nav-links"> <ul class="nav-links">
<li><a href="#colors">Colors</a></li> <li><a href="#colors">Colors</a></li>
<li><a href="#typography">Typography</a></li> <li><a href="#typography">Typography</a></li>
@ -343,9 +343,7 @@
</div> </div>
</section> </section>
<footer class="footer"> <footer class="footer">Maintained by <a href="https://github.com/VoltAgent/voltagent" target="_blank" rel="noopener noreferrer" style="text-decoration:none;"><img src="https://github.com/VoltAgent.png?size=32" alt="VoltAgent" width="14" height="14" style="border-radius:3px;vertical-align:-2px;margin-right:3px;">VoltAgent</a> team</footer>
Generated from <a href="https://lovable.dev/">lovable.dev</a> DESIGN.md — awesome-design-md
</footer>
</body> </body>
</html> </html>

8
design-md/lovable/preview.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design System Preview: Lovable (Light)</title> <title>Design System Inspired by Lovable</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;480;500;600&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;480;500;600&display=swap" rel="stylesheet">
@ -177,7 +177,7 @@
<body> <body>
<nav class="nav"> <nav class="nav">
<a class="nav-brand" href="#">awesome-design-md</a> <span class="nav-brand">awesome-design-md</span>
<ul class="nav-links"> <ul class="nav-links">
<li><a href="#colors">Colors</a></li> <li><a href="#colors">Colors</a></li>
<li><a href="#typography">Typography</a></li> <li><a href="#typography">Typography</a></li>
@ -342,9 +342,7 @@
</div> </div>
</section> </section>
<footer class="footer"> <footer class="footer">Maintained by <a href="https://github.com/VoltAgent/voltagent" target="_blank" rel="noopener noreferrer" style="text-decoration:none;"><img src="https://github.com/VoltAgent.png?size=32" alt="VoltAgent" width="14" height="14" style="border-radius:3px;vertical-align:-2px;margin-right:3px;">VoltAgent</a> team</footer>
Generated from <a href="https://lovable.dev/">lovable.dev</a> DESIGN.md — awesome-design-md
</footer>
</body> </body>
</html> </html>

11
design-md/minimax/preview-dark.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design System Preview: MiniMax (Dark)</title> <title>Design System Inspired by MiniMax</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Outfit:wght@400;500;600;700&family=Poppins:wght@400;500;600&family=Roboto:wght@400;500;600&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Outfit:wght@400;500;600;700&family=Poppins:wght@400;500;600&family=Roboto:wght@400;500;600&display=swap" rel="stylesheet">
@ -686,7 +686,7 @@
<!-- NAV --> <!-- NAV -->
<nav class="nav"> <nav class="nav">
<div class="nav-brand">awesome-design-md</div> <span class="nav-brand">awesome-design-md</span>
<div class="nav-links"> <div class="nav-links">
<a href="#colors" class="active">Colors</a> <a href="#colors" class="active">Colors</a>
<a href="#typography">Typography</a> <a href="#typography">Typography</a>
@ -1256,12 +1256,7 @@
</section> </section>
<!-- FOOTER --> <!-- FOOTER -->
<footer class="footer"> <footer class="footer">Maintained by <a href="https://github.com/VoltAgent/voltagent" target="_blank" rel="noopener noreferrer" style="text-decoration:none;"><img src="https://github.com/VoltAgent.png?size=32" alt="VoltAgent" width="14" height="14" style="border-radius:3px;vertical-align:-2px;margin-right:3px;">VoltAgent</a> team</footer>
<div class="footer-inner">
<span class="footer-brand">awesome-design-md</span>
<span class="footer-note">Design system preview inspired by MiniMax</span>
</div>
</footer>
</body> </body>
</html> </html>

11
design-md/minimax/preview.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design System Preview: MiniMax (Light)</title> <title>Design System Inspired by MiniMax</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Outfit:wght@400;500;600;700&family=Poppins:wght@400;500;600&family=Roboto:wght@400;500;600&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Outfit:wght@400;500;600;700&family=Poppins:wght@400;500;600&family=Roboto:wght@400;500;600&display=swap" rel="stylesheet">
@ -672,7 +672,7 @@
<!-- NAV --> <!-- NAV -->
<nav class="nav"> <nav class="nav">
<div class="nav-brand">awesome-design-md</div> <span class="nav-brand">awesome-design-md</span>
<div class="nav-links"> <div class="nav-links">
<a href="#colors" class="active">Colors</a> <a href="#colors" class="active">Colors</a>
<a href="#typography">Typography</a> <a href="#typography">Typography</a>
@ -1242,12 +1242,7 @@
</section> </section>
<!-- FOOTER --> <!-- FOOTER -->
<footer class="footer"> <footer class="footer">Maintained by <a href="https://github.com/VoltAgent/voltagent" target="_blank" rel="noopener noreferrer" style="text-decoration:none;"><img src="https://github.com/VoltAgent.png?size=32" alt="VoltAgent" width="14" height="14" style="border-radius:3px;vertical-align:-2px;margin-right:3px;">VoltAgent</a> team</footer>
<div class="footer-inner">
<span class="footer-brand">awesome-design-md</span>
<span class="footer-note">Design system preview inspired by MiniMax</span>
</div>
</footer>
</body> </body>
</html> </html>

8
design-md/mintlify/preview-dark.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design System Preview: Mintlify (Dark)</title> <title>Design System Inspired by Mintlify</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">
@ -217,7 +217,7 @@
<div class="dark-badge">Dark Mode</div> <div class="dark-badge">Dark Mode</div>
<nav class="nav"> <nav class="nav">
<a class="nav-brand" href="#">awesome-design-md</a> <span class="nav-brand">awesome-design-md</span>
<ul class="nav-links"> <ul class="nav-links">
<li><a href="#colors">Colors</a></li> <li><a href="#colors">Colors</a></li>
<li><a href="#typography">Typography</a></li> <li><a href="#typography">Typography</a></li>
@ -403,9 +403,7 @@
</div> </div>
</section> </section>
<footer class="footer"> <footer class="footer">Maintained by <a href="https://github.com/VoltAgent/voltagent" target="_blank" rel="noopener noreferrer" style="text-decoration:none;"><img src="https://github.com/VoltAgent.png?size=32" alt="VoltAgent" width="14" height="14" style="border-radius:3px;vertical-align:-2px;margin-right:3px;">VoltAgent</a> team</footer>
Generated from <a href="https://mintlify.com/">mintlify.com</a> DESIGN.md — awesome-design-md
</footer>
</body> </body>
</html> </html>

8
design-md/mintlify/preview.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design System Preview: Mintlify (Light)</title> <title>Design System Inspired by Mintlify</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">
@ -206,7 +206,7 @@
<body> <body>
<nav class="nav"> <nav class="nav">
<a class="nav-brand" href="#">awesome-design-md</a> <span class="nav-brand">awesome-design-md</span>
<ul class="nav-links"> <ul class="nav-links">
<li><a href="#colors">Colors</a></li> <li><a href="#colors">Colors</a></li>
<li><a href="#typography">Typography</a></li> <li><a href="#typography">Typography</a></li>
@ -392,9 +392,7 @@
</div> </div>
</section> </section>
<footer class="footer"> <footer class="footer">Maintained by <a href="https://github.com/VoltAgent/voltagent" target="_blank" rel="noopener noreferrer" style="text-decoration:none;"><img src="https://github.com/VoltAgent.png?size=32" alt="VoltAgent" width="14" height="14" style="border-radius:3px;vertical-align:-2px;margin-right:3px;">VoltAgent</a> team</footer>
Generated from <a href="https://mintlify.com/">mintlify.com</a> DESIGN.md — awesome-design-md
</footer>
</body> </body>
</html> </html>

6
design-md/miro/preview-dark.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design System Preview: Miro (Dark)</title> <title>Design System Inspired by Miro</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans:wght@400;500;600&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans:wght@400;500;600&display=swap" rel="stylesheet">
@ -85,7 +85,7 @@
</head> </head>
<body> <body>
<nav class="nav"><a class="nav-brand" href="#">awesome-design-md</a><ul class="nav-links"><li><a href="#colors">Colors</a></li><li><a href="#typography">Typography</a></li><li><a href="#buttons">Buttons</a></li><li><a href="#cards">Cards</a></li><li><a href="#forms">Forms</a></li></ul><a class="nav-cta" href="#">Sign up free</a></nav> <nav class="nav"><span class="nav-brand">awesome-design-md</span><ul class="nav-links"><li><a href="#colors">Colors</a></li><li><a href="#typography">Typography</a></li><li><a href="#buttons">Buttons</a></li><li><a href="#cards">Cards</a></li><li><a href="#forms">Forms</a></li></ul><a class="nav-cta" href="#">Sign up free</a></nav>
<div style="position:fixed;top:16px;right:16px;z-index:200;background:#5b76fe;color:#fff;font-size:9px;font-weight:700;padding:4px 10px;border-radius:8px;">Dark Mode</div> <div style="position:fixed;top:16px;right:16px;z-index:200;background:#5b76fe;color:#fff;font-size:9px;font-weight:700;padding:4px 10px;border-radius:8px;">Dark Mode</div>
<section class="hero"><h1>Design System<br>Inspired by <span>Miro</span></h1><p>Every color, font, and component — visualized with collaborative precision.</p><div class="hero-buttons"><a class="btn-blue" href="#">Sign up free</a><a class="btn-outline" href="#">Contact sales</a></div></section> <section class="hero"><h1>Design System<br>Inspired by <span>Miro</span></h1><p>Every color, font, and component — visualized with collaborative precision.</p><div class="hero-buttons"><a class="btn-blue" href="#">Sign up free</a><a class="btn-outline" href="#">Contact sales</a></div></section>
@ -168,7 +168,7 @@
<section class="section"><div class="section-label">08 / Elevation</div><h2 class="section-title">Depth</h2> <section class="section"><div class="section-label">08 / Elevation</div><h2 class="section-title">Depth</h2>
<div class="elevation-grid"><div class="elevation-card" style="box-shadow:var(--ring) 0px 0px 0px 1px;"><div class="elevation-label">Ring</div><div class="elevation-desc">1px ring border</div></div><div class="elevation-card" style="box-shadow:0 0 0 1px var(--blue);"><div class="elevation-label">Focus</div><div class="elevation-desc">Blue ring</div></div></div></section> <div class="elevation-grid"><div class="elevation-card" style="box-shadow:var(--ring) 0px 0px 0px 1px;"><div class="elevation-label">Ring</div><div class="elevation-desc">1px ring border</div></div><div class="elevation-card" style="box-shadow:0 0 0 1px var(--blue);"><div class="elevation-label">Focus</div><div class="elevation-desc">Blue ring</div></div></div></section>
<footer class="footer">Generated from <a href="https://miro.com/">miro.com</a> DESIGN.md — awesome-design-md</footer> <footer class="footer">Maintained by <a href="https://github.com/VoltAgent/voltagent" target="_blank" rel="noopener noreferrer" style="text-decoration:none;"><img src="https://github.com/VoltAgent.png?size=32" alt="VoltAgent" width="14" height="14" style="border-radius:3px;vertical-align:-2px;margin-right:3px;">VoltAgent</a> team</footer>
</body> </body>
</html> </html>

6
design-md/miro/preview.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design System Preview: Miro (Light)</title> <title>Design System Inspired by Miro</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans:wght@400;500;600&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans:wght@400;500;600&display=swap" rel="stylesheet">
@ -85,7 +85,7 @@
</head> </head>
<body> <body>
<nav class="nav"><a class="nav-brand" href="#">awesome-design-md</a><ul class="nav-links"><li><a href="#colors">Colors</a></li><li><a href="#typography">Typography</a></li><li><a href="#buttons">Buttons</a></li><li><a href="#cards">Cards</a></li><li><a href="#forms">Forms</a></li></ul><a class="nav-cta" href="#">Sign up free</a></nav> <nav class="nav"><span class="nav-brand">awesome-design-md</span><ul class="nav-links"><li><a href="#colors">Colors</a></li><li><a href="#typography">Typography</a></li><li><a href="#buttons">Buttons</a></li><li><a href="#cards">Cards</a></li><li><a href="#forms">Forms</a></li></ul><a class="nav-cta" href="#">Sign up free</a></nav>
<section class="hero"><h1>Design System<br>Inspired by <span>Miro</span></h1><p>Every color, font, and component — visualized with collaborative precision.</p><div class="hero-buttons"><a class="btn-blue" href="#">Sign up free</a><a class="btn-outline" href="#">Contact sales</a></div></section> <section class="hero"><h1>Design System<br>Inspired by <span>Miro</span></h1><p>Every color, font, and component — visualized with collaborative precision.</p><div class="hero-buttons"><a class="btn-blue" href="#">Sign up free</a><a class="btn-outline" href="#">Contact sales</a></div></section>
@ -167,7 +167,7 @@
<section class="section"><div class="section-label">08 / Elevation</div><h2 class="section-title">Depth</h2> <section class="section"><div class="section-label">08 / Elevation</div><h2 class="section-title">Depth</h2>
<div class="elevation-grid"><div class="elevation-card" style="box-shadow:var(--ring) 0px 0px 0px 1px;"><div class="elevation-label">Ring</div><div class="elevation-desc">1px ring border</div></div><div class="elevation-card" style="box-shadow:0 0 0 1px var(--blue);"><div class="elevation-label">Focus</div><div class="elevation-desc">Blue ring</div></div></div></section> <div class="elevation-grid"><div class="elevation-card" style="box-shadow:var(--ring) 0px 0px 0px 1px;"><div class="elevation-label">Ring</div><div class="elevation-desc">1px ring border</div></div><div class="elevation-card" style="box-shadow:0 0 0 1px var(--blue);"><div class="elevation-label">Focus</div><div class="elevation-desc">Blue ring</div></div></div></section>
<footer class="footer">Generated from <a href="https://miro.com/">miro.com</a> DESIGN.md — awesome-design-md</footer> <footer class="footer">Maintained by <a href="https://github.com/VoltAgent/voltagent" target="_blank" rel="noopener noreferrer" style="text-decoration:none;"><img src="https://github.com/VoltAgent.png?size=32" alt="VoltAgent" width="14" height="14" style="border-radius:3px;vertical-align:-2px;margin-right:3px;">VoltAgent</a> team</footer>
</body> </body>
</html> </html>

13
design-md/mistral.ai/preview-dark.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design System Preview: Mistral AI (Dark)</title> <title>Design System Inspired by Mistral AI</title>
<style> <style>
:root { :root {
--color-mistral-orange: #fa520f; --color-mistral-orange: #fa520f;
@ -430,14 +430,7 @@
<!-- NAV --> <!-- NAV -->
<nav class="nav"> <nav class="nav">
<div class="nav-brand"> <span class="nav-brand">awesome-design-md</span>
<div class="mistral-block">
<span style="background: #ffd900;"></span>
<span style="background: #ffa110;"></span>
<span style="background: #ff8105;"></span>
<span style="background: #fb6424;"></span>
<span style="background: #fa520f;"></span>
</div>
Mistral AI Mistral AI
</div> </div>
<div class="nav-links"> <div class="nav-links">
@ -461,7 +454,7 @@
<span style="background: #fb6424;"></span> <span style="background: #fb6424;"></span>
<span style="background: #fa520f;"></span> <span style="background: #fa520f;"></span>
</div> </div>
<h1>Design System Preview:<br><span>Mistral AI</span></h1> <h1>Design System<br>Inspired by Mistral AI</h1>
<p>Warm golden tokens from the sunshine gradient design system</p> <p>Warm golden tokens from the sunshine gradient design system</p>
<div class="hero-buttons"> <div class="hero-buttons">
<button class="btn-cream">Explore Tokens</button> <button class="btn-cream">Explore Tokens</button>

13
design-md/mistral.ai/preview.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design System Preview: Mistral AI (Light)</title> <title>Design System Inspired by Mistral AI</title>
<style> <style>
:root { :root {
--color-mistral-orange: #fa520f; --color-mistral-orange: #fa520f;
@ -429,14 +429,7 @@
<!-- NAV --> <!-- NAV -->
<nav class="nav"> <nav class="nav">
<div class="nav-brand"> <span class="nav-brand">awesome-design-md</span>
<div class="mistral-block">
<span style="background: #ffd900;"></span>
<span style="background: #ffa110;"></span>
<span style="background: #ff8105;"></span>
<span style="background: #fb6424;"></span>
<span style="background: #fa520f;"></span>
</div>
Mistral AI Mistral AI
</div> </div>
<div class="nav-links"> <div class="nav-links">
@ -460,7 +453,7 @@
<span style="background: #fb6424;"></span> <span style="background: #fb6424;"></span>
<span style="background: #fa520f;"></span> <span style="background: #fa520f;"></span>
</div> </div>
<h1>Design System Preview:<br><span>Mistral AI</span></h1> <h1>Design System<br>Inspired by Mistral AI</h1>
<p>Warm golden tokens from the sunshine gradient design system</p> <p>Warm golden tokens from the sunshine gradient design system</p>
<div class="hero-buttons"> <div class="hero-buttons">
<button class="btn-dark">Explore Tokens</button> <button class="btn-dark">Explore Tokens</button>

8
design-md/mongodb/preview-dark.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design System Preview: MongoDB (Dark)</title> <title>Design System Inspired by MongoDB</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Inter:wght@300;400;500;600;700&family=Source+Code+Pro:wght@400;500;600&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Inter:wght@300;400;500;600;700&family=Source+Code+Pro:wght@400;500;600&display=swap" rel="stylesheet">
@ -107,7 +107,7 @@
<body> <body>
<nav class="nav"> <nav class="nav">
<a class="nav-brand" href="#">awesome-design-md</a> <span class="nav-brand">awesome-design-md</span>
<ul class="nav-links"> <ul class="nav-links">
<li><a href="#colors">Colors</a></li> <li><a href="#colors">Colors</a></li>
<li><a href="#typography">Typography</a></li> <li><a href="#typography">Typography</a></li>
@ -254,9 +254,7 @@
</div> </div>
</section> </section>
<footer class="footer"> <footer class="footer">Maintained by <a href="https://github.com/VoltAgent/voltagent" target="_blank" rel="noopener noreferrer" style="text-decoration:none;"><img src="https://github.com/VoltAgent.png?size=32" alt="VoltAgent" width="14" height="14" style="border-radius:3px;vertical-align:-2px;margin-right:3px;">VoltAgent</a> team</footer>
Generated from <a href="https://www.mongodb.com/">mongodb.com</a> DESIGN.md — awesome-design-md
</footer>
</body> </body>
</html> </html>

8
design-md/mongodb/preview.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design System Preview: MongoDB (Light)</title> <title>Design System Inspired by MongoDB</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Inter:wght@300;400;500;600;700&family=Source+Code+Pro:wght@400;500;600&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Inter:wght@300;400;500;600;700&family=Source+Code+Pro:wght@400;500;600&display=swap" rel="stylesheet">
@ -107,7 +107,7 @@
<body> <body>
<nav class="nav"> <nav class="nav">
<a class="nav-brand" href="#">awesome-design-md</a> <span class="nav-brand">awesome-design-md</span>
<ul class="nav-links"> <ul class="nav-links">
<li><a href="#colors">Colors</a></li> <li><a href="#colors">Colors</a></li>
<li><a href="#typography">Typography</a></li> <li><a href="#typography">Typography</a></li>
@ -253,9 +253,7 @@
</div> </div>
</section> </section>
<footer class="footer"> <footer class="footer">Maintained by <a href="https://github.com/VoltAgent/voltagent" target="_blank" rel="noopener noreferrer" style="text-decoration:none;"><img src="https://github.com/VoltAgent.png?size=32" alt="VoltAgent" width="14" height="14" style="border-radius:3px;vertical-align:-2px;margin-right:3px;">VoltAgent</a> team</footer>
Generated from <a href="https://www.mongodb.com/">mongodb.com</a> DESIGN.md — awesome-design-md
</footer>
</body> </body>
</html> </html>

8
design-md/notion/preview-dark.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design System Preview: Notion (Dark)</title> <title>Design System Inspired by Notion</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
@ -182,7 +182,7 @@
<body> <body>
<nav class="nav"> <nav class="nav">
<a class="nav-brand" href="#">awesome-design-md</a> <span class="nav-brand">awesome-design-md</span>
<ul class="nav-links"> <ul class="nav-links">
<li><a href="#colors">Colors</a></li> <li><a href="#colors">Colors</a></li>
<li><a href="#typography">Typography</a></li> <li><a href="#typography">Typography</a></li>
@ -366,9 +366,7 @@
</div> </div>
</div> </div>
<footer class="footer"> <footer class="footer">Maintained by <a href="https://github.com/VoltAgent/voltagent" target="_blank" rel="noopener noreferrer" style="text-decoration:none;"><img src="https://github.com/VoltAgent.png?size=32" alt="VoltAgent" width="14" height="14" style="border-radius:3px;vertical-align:-2px;margin-right:3px;">VoltAgent</a> team</footer>
Generated from <a href="https://notion.com/">notion.com</a> DESIGN.md -- awesome-design-md
</footer>
</body> </body>
</html> </html>

8
design-md/notion/preview.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design System Preview: Notion (Light)</title> <title>Design System Inspired by Notion</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
@ -175,7 +175,7 @@
<body> <body>
<nav class="nav"> <nav class="nav">
<a class="nav-brand" href="#">awesome-design-md</a> <span class="nav-brand">awesome-design-md</span>
<ul class="nav-links"> <ul class="nav-links">
<li><a href="#colors">Colors</a></li> <li><a href="#colors">Colors</a></li>
<li><a href="#typography">Typography</a></li> <li><a href="#typography">Typography</a></li>
@ -358,9 +358,7 @@
</div> </div>
</div> </div>
<footer class="footer"> <footer class="footer">Maintained by <a href="https://github.com/VoltAgent/voltagent" target="_blank" rel="noopener noreferrer" style="text-decoration:none;"><img src="https://github.com/VoltAgent.png?size=32" alt="VoltAgent" width="14" height="14" style="border-radius:3px;vertical-align:-2px;margin-right:3px;">VoltAgent</a> team</footer>
Generated from <a href="https://notion.com/">notion.com</a> DESIGN.md -- awesome-design-md
</footer>
</body> </body>
</html> </html>

8
design-md/nvidia/preview-dark.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design System Preview: NVIDIA (Dark)</title> <title>Design System Inspired by NVIDIA</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
@ -180,7 +180,7 @@
<body> <body>
<nav class="nav"> <nav class="nav">
<a class="nav-brand" href="#">awesome-design-md</a> <span class="nav-brand">awesome-design-md</span>
<ul class="nav-links"> <ul class="nav-links">
<li><a href="#colors">Colors</a></li> <li><a href="#colors">Colors</a></li>
<li><a href="#typography">Typography</a></li> <li><a href="#typography">Typography</a></li>
@ -368,9 +368,7 @@
</div> </div>
</section> </section>
<footer class="footer"> <footer class="footer">Maintained by <a href="https://github.com/VoltAgent/voltagent" target="_blank" rel="noopener noreferrer" style="text-decoration:none;"><img src="https://github.com/VoltAgent.png?size=32" alt="VoltAgent" width="14" height="14" style="border-radius:3px;vertical-align:-2px;margin-right:3px;">VoltAgent</a> team</footer>
Generated from <a href="https://nvidia.com/">nvidia.com</a> DESIGN.md -- awesome-design-md
</footer>
</body> </body>
</html> </html>

8
design-md/nvidia/preview.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design System Preview: NVIDIA (Light)</title> <title>Design System Inspired by NVIDIA</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
@ -172,7 +172,7 @@
<body> <body>
<nav class="nav"> <nav class="nav">
<a class="nav-brand" href="#">awesome-design-md</a> <span class="nav-brand">awesome-design-md</span>
<ul class="nav-links"> <ul class="nav-links">
<li><a href="#colors">Colors</a></li> <li><a href="#colors">Colors</a></li>
<li><a href="#typography">Typography</a></li> <li><a href="#typography">Typography</a></li>
@ -360,9 +360,7 @@
</div> </div>
</section> </section>
<footer class="footer"> <footer class="footer">Maintained by <a href="https://github.com/VoltAgent/voltagent" target="_blank" rel="noopener noreferrer" style="text-decoration:none;"><img src="https://github.com/VoltAgent.png?size=32" alt="VoltAgent" width="14" height="14" style="border-radius:3px;vertical-align:-2px;margin-right:3px;">VoltAgent</a> team</footer>
Generated from <a href="https://nvidia.com/">nvidia.com</a> DESIGN.md -- awesome-design-md
</footer>
</body> </body>
</html> </html>

6
design-md/ollama/preview-dark.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design System Preview: Ollama (Dark)</title> <title>Design System Inspired by Ollama</title>
<style> <style>
:root { :root {
--color-black: #000000; --color-black: #000000;
@ -361,7 +361,7 @@
<!-- NAV --> <!-- NAV -->
<nav class="nav"> <nav class="nav">
<div class="nav-brand"><span class="llama">&#x1F999;</span> ollama</div> <span class="nav-brand">awesome-design-md</span>
<div class="nav-links"> <div class="nav-links">
<a href="#colors">Colors</a> <a href="#colors">Colors</a>
<a href="#typography">Typography</a> <a href="#typography">Typography</a>
@ -375,7 +375,7 @@
<!-- HERO --> <!-- HERO -->
<section class="hero"> <section class="hero">
<h1>Design System Preview:<br>Ollama</h1> <h1>Design System<br>Inspired by Ollama</h1>
<p>Radical minimalism in pure grayscale. Zero color, zero shadows, zero excess.</p> <p>Radical minimalism in pure grayscale. Zero color, zero shadows, zero excess.</p>
<div class="hero-buttons"> <div class="hero-buttons">
<button class="btn-white-pill-dark">Explore Tokens</button> <button class="btn-white-pill-dark">Explore Tokens</button>

6
design-md/ollama/preview.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design System Preview: Ollama (Light)</title> <title>Design System Inspired by Ollama</title>
<style> <style>
:root { :root {
--color-black: #000000; --color-black: #000000;
@ -361,7 +361,7 @@
<!-- NAV --> <!-- NAV -->
<nav class="nav"> <nav class="nav">
<div class="nav-brand"><span class="llama">&#x1F999;</span> ollama</div> <span class="nav-brand">awesome-design-md</span>
<div class="nav-links"> <div class="nav-links">
<a href="#colors">Colors</a> <a href="#colors">Colors</a>
<a href="#typography">Typography</a> <a href="#typography">Typography</a>
@ -375,7 +375,7 @@
<!-- HERO --> <!-- HERO -->
<section class="hero"> <section class="hero">
<h1>Design System Preview:<br>Ollama</h1> <h1>Design System<br>Inspired by Ollama</h1>
<p>Radical minimalism in pure grayscale. Zero color, zero shadows, zero excess.</p> <p>Radical minimalism in pure grayscale. Zero color, zero shadows, zero excess.</p>
<div class="hero-buttons"> <div class="hero-buttons">
<button class="btn-black-pill">Explore Tokens</button> <button class="btn-black-pill">Explore Tokens</button>

8
design-md/opencode.ai/preview-dark.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design System Preview: OpenCode (Dark)</title> <title>Design System Inspired by OpenCode.ai</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;700&display=swap" rel="stylesheet">
@ -192,7 +192,7 @@
<div class="dark-badge">Dark Mode</div> <div class="dark-badge">Dark Mode</div>
<nav class="nav"> <nav class="nav">
<a class="nav-brand" href="#">awesome-design-md</a> <span class="nav-brand">awesome-design-md</span>
<ul class="nav-links"> <ul class="nav-links">
<li><a href="#colors">Colors</a></li> <li><a href="#colors">Colors</a></li>
<li><a href="#typography">Typography</a></li> <li><a href="#typography">Typography</a></li>
@ -360,9 +360,7 @@
</div> </div>
</section> </section>
<footer class="footer"> <footer class="footer">Maintained by <a href="https://github.com/VoltAgent/voltagent" target="_blank" rel="noopener noreferrer" style="text-decoration:none;"><img src="https://github.com/VoltAgent.png?size=32" alt="VoltAgent" width="14" height="14" style="border-radius:3px;vertical-align:-2px;margin-right:3px;">VoltAgent</a> team</footer>
Generated from <a href="https://opencode.ai/">opencode.ai</a> DESIGN.md -- awesome-design-md
</footer>
</body> </body>
</html> </html>

8
design-md/opencode.ai/preview.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design System Preview: OpenCode (Light)</title> <title>Design System Inspired by OpenCode.ai</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;700&display=swap" rel="stylesheet">
@ -183,7 +183,7 @@
<body> <body>
<nav class="nav"> <nav class="nav">
<a class="nav-brand" href="#">awesome-design-md</a> <span class="nav-brand">awesome-design-md</span>
<ul class="nav-links"> <ul class="nav-links">
<li><a href="#colors">Colors</a></li> <li><a href="#colors">Colors</a></li>
<li><a href="#typography">Typography</a></li> <li><a href="#typography">Typography</a></li>
@ -351,9 +351,7 @@
</div> </div>
</section> </section>
<footer class="footer"> <footer class="footer">Maintained by <a href="https://github.com/VoltAgent/voltagent" target="_blank" rel="noopener noreferrer" style="text-decoration:none;"><img src="https://github.com/VoltAgent.png?size=32" alt="VoltAgent" width="14" height="14" style="border-radius:3px;vertical-align:-2px;margin-right:3px;">VoltAgent</a> team</footer>
Generated from <a href="https://opencode.ai/">opencode.ai</a> DESIGN.md -- awesome-design-md
</footer>
</body> </body>
</html> </html>

6
design-md/pinterest/preview-dark.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design System Preview: Pinterest (Dark)</title> <title>Design System Inspired by Pinterest</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;500;600;700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
@ -95,7 +95,7 @@
<body> <body>
<nav class="nav"> <nav class="nav">
<a class="nav-brand" href="#">awesome-design-md</a> <span class="nav-brand">awesome-design-md</span>
<ul class="nav-links"> <ul class="nav-links">
<li><a href="#colors">Colors</a></li> <li><a href="#colors">Colors</a></li>
<li><a href="#typography">Typography</a></li> <li><a href="#typography">Typography</a></li>
@ -227,7 +227,7 @@
<p style="font-size:11px; color:var(--warm-silver); margin-top:12px;">Pinterest uses minimal shadows — depth comes from photography and warm surface colors.</p> <p style="font-size:11px; color:var(--warm-silver); margin-top:12px;">Pinterest uses minimal shadows — depth comes from photography and warm surface colors.</p>
</section> </section>
<footer class="footer">Generated from <a href="https://pinterest.com/">pinterest.com</a> DESIGN.md — awesome-design-md</footer> <footer class="footer">Maintained by <a href="https://github.com/VoltAgent/voltagent" target="_blank" rel="noopener noreferrer" style="text-decoration:none;"><img src="https://github.com/VoltAgent.png?size=32" alt="VoltAgent" width="14" height="14" style="border-radius:3px;vertical-align:-2px;margin-right:3px;">VoltAgent</a> team</footer>
</body> </body>
</html> </html>

6
design-md/pinterest/preview.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design System Preview: Pinterest (Light)</title> <title>Design System Inspired by Pinterest</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;500;600;700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
@ -95,7 +95,7 @@
<body> <body>
<nav class="nav"> <nav class="nav">
<a class="nav-brand" href="#">awesome-design-md</a> <span class="nav-brand">awesome-design-md</span>
<ul class="nav-links"> <ul class="nav-links">
<li><a href="#colors">Colors</a></li> <li><a href="#colors">Colors</a></li>
<li><a href="#typography">Typography</a></li> <li><a href="#typography">Typography</a></li>
@ -226,7 +226,7 @@
<p style="font-size:11px; color:var(--warm-silver); margin-top:12px;">Pinterest uses minimal shadows — depth comes from photography and warm surface colors.</p> <p style="font-size:11px; color:var(--warm-silver); margin-top:12px;">Pinterest uses minimal shadows — depth comes from photography and warm surface colors.</p>
</section> </section>
<footer class="footer">Generated from <a href="https://pinterest.com/">pinterest.com</a> DESIGN.md — awesome-design-md</footer> <footer class="footer">Maintained by <a href="https://github.com/VoltAgent/voltagent" target="_blank" rel="noopener noreferrer" style="text-decoration:none;"><img src="https://github.com/VoltAgent.png?size=32" alt="VoltAgent" width="14" height="14" style="border-radius:3px;vertical-align:-2px;margin-right:3px;">VoltAgent</a> team</footer>
</body> </body>
</html> </html>

6
design-md/posthog/preview-dark.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design System Inspired by PostHog — Dark Mode</title> <title>Design System Inspired by PostHog</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700;800&family=Source+Code+Pro:wght@400;500&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700;800&family=Source+Code+Pro:wght@400;500&display=swap" rel="stylesheet">
@ -693,9 +693,7 @@
</div> </div>
</section> </section>
<footer> <footer class="footer">Maintained by <a href="https://github.com/VoltAgent/voltagent" target="_blank" rel="noopener noreferrer" style="text-decoration:none;"><img src="https://github.com/VoltAgent.png?size=32" alt="VoltAgent" width="14" height="14" style="border-radius:3px;vertical-align:-2px;margin-right:3px;">VoltAgent</a> team</footer>
Generated from DESIGN.md — PostHog Design System Catalog (Dark Mode)
</footer>
</body> </body>
</html> </html>

4
design-md/posthog/preview.html
View File

@ -743,9 +743,7 @@
</div> </div>
</section> </section>
<footer> <footer class="footer">Maintained by <a href="https://github.com/VoltAgent/voltagent" target="_blank" rel="noopener noreferrer" style="text-decoration:none;"><img src="https://github.com/VoltAgent.png?size=32" alt="VoltAgent" width="14" height="14" style="border-radius:3px;vertical-align:-2px;margin-right:3px;">VoltAgent</a> team</footer>
Generated from DESIGN.md — PostHog Design System Catalog
</footer>
</body> </body>
</html> </html>

6
design-md/raycast/preview-dark.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design System Inspired by Raycast — Dark Mode</title> <title>Design System Inspired by Raycast</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
@ -600,9 +600,7 @@
</div> </div>
</section> </section>
<footer class="footer"> <footer class="footer">Maintained by <a href="https://github.com/VoltAgent/voltagent" target="_blank" rel="noopener noreferrer" style="text-decoration:none;"><img src="https://github.com/VoltAgent.png?size=32" alt="VoltAgent" width="14" height="14" style="border-radius:3px;vertical-align:-2px;margin-right:3px;">VoltAgent</a> team</footer>
<p>Design system extracted from <a href="https://raycast.com">raycast.com</a> — Generated by awesome-design-md</p>
</footer>
</body> </body>
</html> </html>

4
design-md/raycast/preview.html
View File

@ -682,9 +682,7 @@
</div> </div>
</section> </section>
<footer class="footer"> <footer class="footer">Maintained by <a href="https://github.com/VoltAgent/voltagent" target="_blank" rel="noopener noreferrer" style="text-decoration:none;"><img src="https://github.com/VoltAgent.png?size=32" alt="VoltAgent" width="14" height="14" style="border-radius:3px;vertical-align:-2px;margin-right:3px;">VoltAgent</a> team</footer>
<p>Design system extracted from <a href="https://raycast.com">raycast.com</a> — Generated by awesome-design-md</p>
</footer>
</body> </body>
</html> </html>

9
design-md/renault/preview-dark.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design System Inspired by Renault — Dark Mode</title> <title>Design System Inspired by Renault</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;600;700;800&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;600;700;800&display=swap" rel="stylesheet">
@ -219,7 +219,7 @@
<!-- NAV --> <!-- NAV -->
<nav> <nav>
<a href="#" class="nav-brand">awesome-design-md</a> <span class="nav-brand">awesome-design-md</span>
<ul class="nav-links"> <ul class="nav-links">
<li><a href="#colors">Colors</a></li> <li><a href="#colors">Colors</a></li>
<li><a href="#typography">Typography</a></li> <li><a href="#typography">Typography</a></li>
@ -400,10 +400,7 @@
</div> </div>
<!-- FOOTER --> <!-- FOOTER -->
<footer style="background:var(--absolute-black);padding:40px;text-align:center;margin-top:40px;border-top:1px solid var(--card-border);"> <footer class="footer">Maintained by <a href="https://github.com/VoltAgent/voltagent" target="_blank" rel="noopener noreferrer" style="text-decoration:none;"><img src="https://github.com/VoltAgent.png?size=32" alt="VoltAgent" width="14" height="14" style="border-radius:3px;vertical-align:-2px;margin-right:3px;">VoltAgent</a> team</footer>
<p style="font-size:12px;color:var(--text-muted);">Generated from DESIGN.md — Renault Design System Tokens</p>
<p style="font-size:13px;font-weight:700;color:var(--text-secondary);margin-top:8px;">awesome-design-md</p>
</footer>
</body> </body>
</html> </html>

7
design-md/renault/preview.html
View File

@ -360,7 +360,7 @@
<!-- NAV --> <!-- NAV -->
<nav> <nav>
<a href="#" class="nav-brand">awesome-design-md</a> <span class="nav-brand">awesome-design-md</span>
<ul class="nav-links"> <ul class="nav-links">
<li><a href="#colors">Colors</a></li> <li><a href="#colors">Colors</a></li>
<li><a href="#typography">Typography</a></li> <li><a href="#typography">Typography</a></li>
@ -600,10 +600,7 @@
</div> </div>
<!-- FOOTER --> <!-- FOOTER -->
<footer style="background:var(--absolute-black);padding:40px;text-align:center;margin-top:40px;"> <footer class="footer">Maintained by <a href="https://github.com/VoltAgent/voltagent" target="_blank" rel="noopener noreferrer" style="text-decoration:none;"><img src="https://github.com/VoltAgent.png?size=32" alt="VoltAgent" width="14" height="14" style="border-radius:3px;vertical-align:-2px;margin-right:3px;">VoltAgent</a> team</footer>
<p style="font-size:12px;color:var(--warm-gray);">Generated from DESIGN.md — Renault Design System Tokens</p>
<p style="font-size:13px;font-weight:700;color:var(--pure-white);margin-top:8px;">awesome-design-md</p>
</footer>
</body> </body>
</html> </html>

6
design-md/replicate/preview-dark.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design System Preview: Replicate (Dark)</title> <title>Design System Inspired by Replicate</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400&display=swap" rel="stylesheet">
@ -447,7 +447,7 @@
<!-- NAV --> <!-- NAV -->
<nav class="nav"> <nav class="nav">
<div class="nav-brand"><div class="logo-icon"></div> Replicate</div> <span class="nav-brand">awesome-design-md</span>
<div class="nav-links"> <div class="nav-links">
<a href="#colors">Colors</a> <a href="#colors">Colors</a>
<a href="#typography">Typography</a> <a href="#typography">Typography</a>
@ -461,7 +461,7 @@
<!-- HERO --> <!-- HERO -->
<section class="hero"> <section class="hero">
<h1>Design System Preview:<br>Replicate</h1> <h1>Design System<br>Inspired by Replicate</h1>
<p>Auto-generated design token catalog from DESIGN.md</p> <p>Auto-generated design token catalog from DESIGN.md</p>
<div class="hero-buttons"> <div class="hero-buttons">
<button class="btn-hero-dark">Explore Tokens</button> <button class="btn-hero-dark">Explore Tokens</button>

6
design-md/replicate/preview.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design System Preview: Replicate (Light)</title> <title>Design System Inspired by Replicate</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400&display=swap" rel="stylesheet">
@ -450,7 +450,7 @@
<!-- NAV --> <!-- NAV -->
<nav class="nav"> <nav class="nav">
<div class="nav-brand"><div class="logo-icon"></div> Replicate</div> <span class="nav-brand">awesome-design-md</span>
<div class="nav-links"> <div class="nav-links">
<a href="#colors">Colors</a> <a href="#colors">Colors</a>
<a href="#typography">Typography</a> <a href="#typography">Typography</a>
@ -464,7 +464,7 @@
<!-- HERO --> <!-- HERO -->
<section class="hero"> <section class="hero">
<h1>Design System Preview:<br>Replicate</h1> <h1>Design System<br>Inspired by Replicate</h1>
<p>Auto-generated design token catalog from DESIGN.md</p> <p>Auto-generated design token catalog from DESIGN.md</p>
<div class="hero-buttons"> <div class="hero-buttons">
<button class="btn-hero-dark">Explore Tokens</button> <button class="btn-hero-dark">Explore Tokens</button>

8
design-md/resend/preview-dark.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design System Preview: Resend (Dark)</title> <title>Design System Inspired by Resend</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=DM+Serif+Display&family=Commit+Mono&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=DM+Serif+Display&family=Commit+Mono&display=swap" rel="stylesheet">
@ -171,7 +171,7 @@
<body> <body>
<nav class="nav"> <nav class="nav">
<a class="nav-brand" href="#">awesome-design-md</a> <span class="nav-brand">awesome-design-md</span>
<ul class="nav-links"> <ul class="nav-links">
<li><a href="#colors">Colors</a></li> <li><a href="#colors">Colors</a></li>
<li><a href="#typography">Typography</a></li> <li><a href="#typography">Typography</a></li>
@ -349,9 +349,7 @@
</div> </div>
</section> </section>
<footer class="footer"> <footer class="footer">Maintained by <a href="https://github.com/VoltAgent/voltagent" target="_blank" rel="noopener noreferrer" style="text-decoration:none;"><img src="https://github.com/VoltAgent.png?size=32" alt="VoltAgent" width="14" height="14" style="border-radius:3px;vertical-align:-2px;margin-right:3px;">VoltAgent</a> team</footer>
Generated from <a href="https://resend.com/">resend.com</a> DESIGN.md — awesome-design-md
</footer>
</body> </body>
</html> </html>

8
design-md/resend/preview.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design System Preview: Resend (Light)</title> <title>Design System Inspired by Resend</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=DM+Serif+Display&family=Commit+Mono&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=DM+Serif+Display&family=Commit+Mono&display=swap" rel="stylesheet">
@ -171,7 +171,7 @@
<body> <body>
<nav class="nav"> <nav class="nav">
<a class="nav-brand" href="#">awesome-design-md</a> <span class="nav-brand">awesome-design-md</span>
<ul class="nav-links"> <ul class="nav-links">
<li><a href="#colors">Colors</a></li> <li><a href="#colors">Colors</a></li>
<li><a href="#typography">Typography</a></li> <li><a href="#typography">Typography</a></li>
@ -348,9 +348,7 @@
</div> </div>
</section> </section>
<footer class="footer"> <footer class="footer">Maintained by <a href="https://github.com/VoltAgent/voltagent" target="_blank" rel="noopener noreferrer" style="text-decoration:none;"><img src="https://github.com/VoltAgent.png?size=32" alt="VoltAgent" width="14" height="14" style="border-radius:3px;vertical-align:-2px;margin-right:3px;">VoltAgent</a> team</footer>
Generated from <a href="https://resend.com/">resend.com</a> DESIGN.md — awesome-design-md
</footer>
</body> </body>
</html> </html>

6
design-md/revolut/preview-dark.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design System Preview: Revolut (Dark)</title> <title>Design System Inspired by Revolut</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=DM+Sans:wght@400;500&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=DM+Sans:wght@400;500&display=swap" rel="stylesheet">
@ -99,7 +99,7 @@
<body> <body>
<nav class="nav"> <nav class="nav">
<a class="nav-brand" href="#">awesome-design-md</a> <span class="nav-brand">awesome-design-md</span>
<ul class="nav-links"> <ul class="nav-links">
<li><a href="#colors">Colors</a></li> <li><a href="#colors">Colors</a></li>
<li><a href="#typography">Typography</a></li> <li><a href="#typography">Typography</a></li>
@ -228,7 +228,7 @@
</div> </div>
</section> </section>
<footer class="footer">Generated from <a href="https://revolut.com/">revolut.com</a> DESIGN.md — awesome-design-md</footer> <footer class="footer">Maintained by <a href="https://github.com/VoltAgent/voltagent" target="_blank" rel="noopener noreferrer" style="text-decoration:none;"><img src="https://github.com/VoltAgent.png?size=32" alt="VoltAgent" width="14" height="14" style="border-radius:3px;vertical-align:-2px;margin-right:3px;">VoltAgent</a> team</footer>
</body> </body>
</html> </html>

6
design-md/revolut/preview.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design System Preview: Revolut (Light)</title> <title>Design System Inspired by Revolut</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=DM+Sans:wght@400;500&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=DM+Sans:wght@400;500&display=swap" rel="stylesheet">
@ -99,7 +99,7 @@
<body> <body>
<nav class="nav"> <nav class="nav">
<a class="nav-brand" href="#">awesome-design-md</a> <span class="nav-brand">awesome-design-md</span>
<ul class="nav-links"> <ul class="nav-links">
<li><a href="#colors">Colors</a></li> <li><a href="#colors">Colors</a></li>
<li><a href="#typography">Typography</a></li> <li><a href="#typography">Typography</a></li>
@ -227,7 +227,7 @@
</div> </div>
</section> </section>
<footer class="footer">Generated from <a href="https://revolut.com/">revolut.com</a> DESIGN.md — awesome-design-md</footer> <footer class="footer">Maintained by <a href="https://github.com/VoltAgent/voltagent" target="_blank" rel="noopener noreferrer" style="text-decoration:none;"><img src="https://github.com/VoltAgent.png?size=32" alt="VoltAgent" width="14" height="14" style="border-radius:3px;vertical-align:-2px;margin-right:3px;">VoltAgent</a> team</footer>
</body> </body>
</html> </html>

6
design-md/runwayml/preview-dark.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design System Preview: Runway (Dark)</title> <title>Design System Inspired by RunwayML</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;600&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;600&display=swap" rel="stylesheet">
@ -343,7 +343,7 @@
<!-- NAV --> <!-- NAV -->
<nav class="nav"> <nav class="nav">
<div class="nav-brand">Runway</div> <span class="nav-brand">awesome-design-md</span>
<div class="nav-links"> <div class="nav-links">
<a href="#colors">Colors</a> <a href="#colors">Colors</a>
<a href="#typography">Typography</a> <a href="#typography">Typography</a>
@ -356,7 +356,7 @@
<!-- HERO --> <!-- HERO -->
<section class="hero"> <section class="hero">
<h1>Design System Preview:<br>Runway</h1> <h1>Design System<br>Inspired by RunwayML</h1>
<p>Cinematic, minimal, editorial design tokens from DESIGN.md</p> <p>Cinematic, minimal, editorial design tokens from DESIGN.md</p>
<div class="hero-buttons"> <div class="hero-buttons">
<button class="btn-primary">Explore Tokens</button> <button class="btn-primary">Explore Tokens</button>

6
design-md/runwayml/preview.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design System Preview: Runway (Light)</title> <title>Design System Inspired by RunwayML</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;600&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;600&display=swap" rel="stylesheet">
@ -344,7 +344,7 @@
<!-- NAV --> <!-- NAV -->
<nav class="nav"> <nav class="nav">
<div class="nav-brand">Runway</div> <span class="nav-brand">awesome-design-md</span>
<div class="nav-links"> <div class="nav-links">
<a href="#colors">Colors</a> <a href="#colors">Colors</a>
<a href="#typography">Typography</a> <a href="#typography">Typography</a>
@ -357,7 +357,7 @@
<!-- HERO --> <!-- HERO -->
<section class="hero"> <section class="hero">
<h1>Design System Preview:<br>Runway</h1> <h1>Design System<br>Inspired by RunwayML</h1>
<p>Cinematic, minimal, editorial design tokens from DESIGN.md</p> <p>Cinematic, minimal, editorial design tokens from DESIGN.md</p>
<div class="hero-buttons"> <div class="hero-buttons">
<button class="btn-primary">Explore Tokens</button> <button class="btn-primary">Explore Tokens</button>

11
design-md/sanity/preview-dark.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design System Preview: Sanity (Dark)</title> <title>Design System Inspired by Sanity</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap" rel="stylesheet">
@ -520,7 +520,7 @@
<!-- NAV --> <!-- NAV -->
<nav class="nav"> <nav class="nav">
<a href="#" class="nav-brand">awesome-design-md</a> <span class="nav-brand">awesome-design-md</span>
<div class="nav-links"> <div class="nav-links">
<a href="#colors">Colors</a> <a href="#colors">Colors</a>
<a href="#typography">Typography</a> <a href="#typography">Typography</a>
@ -984,12 +984,7 @@
</section> </section>
<!-- FOOTER --> <!-- FOOTER -->
<footer style="border-top: 1px solid var(--border-subtle); padding: 48px 32px;"> <footer class="footer">Maintained by <a href="https://github.com/VoltAgent/voltagent" target="_blank" rel="noopener noreferrer" style="text-decoration:none;"><img src="https://github.com/VoltAgent.png?size=32" alt="VoltAgent" width="14" height="14" style="border-radius:3px;vertical-align:-2px;margin-right:3px;">VoltAgent</a> team</footer>
<div style="max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px;">
<span style="font-size: 13px; color: var(--text-secondary); font-family: var(--font-mono);">Design tokens extracted from sanity.io</span>
<span style="font-size: 12px; color: var(--text-tertiary); font-family: var(--font-mono); text-transform: uppercase;">awesome-design-md</span>
</div>
</footer>
</body> </body>
</html> </html>

11
design-md/sanity/preview.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design System Preview: Sanity (Light)</title> <title>Design System Inspired by Sanity</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap" rel="stylesheet">
@ -596,7 +596,7 @@
<!-- NAV --> <!-- NAV -->
<nav class="nav"> <nav class="nav">
<a href="#" class="nav-brand">awesome-design-md</a> <span class="nav-brand">awesome-design-md</span>
<div class="nav-links"> <div class="nav-links">
<a href="#colors">Colors</a> <a href="#colors">Colors</a>
<a href="#typography">Typography</a> <a href="#typography">Typography</a>
@ -1129,12 +1129,7 @@
</section> </section>
<!-- FOOTER --> <!-- FOOTER -->
<footer style="background: var(--bg-dark-section); padding: 48px 32px; margin-top: 0;"> <footer class="footer">Maintained by <a href="https://github.com/VoltAgent/voltagent" target="_blank" rel="noopener noreferrer" style="text-decoration:none;"><img src="https://github.com/VoltAgent.png?size=32" alt="VoltAgent" width="14" height="14" style="border-radius:3px;vertical-align:-2px;margin-right:3px;">VoltAgent</a> team</footer>
<div style="max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px;">
<span style="font-size: 13px; color: var(--text-on-dark-secondary); font-family: var(--font-mono);">Design tokens extracted from sanity.io</span>
<span style="font-size: 12px; color: var(--text-on-dark-tertiary); font-family: var(--font-mono); text-transform: uppercase;">awesome-design-md</span>
</div>
</footer>
</body> </body>
</html> </html>

8
design-md/sentry/preview-dark.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design System Preview: Sentry (Dark)</title> <title>Design System Inspired by Sentry</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700&display=swap" rel="stylesheet">
@ -456,7 +456,7 @@
<div class="dark-badge">Dark Mode</div> <div class="dark-badge">Dark Mode</div>
<nav class="nav"> <nav class="nav">
<a class="nav-brand" href="#">awesome-design-md</a> <span class="nav-brand">awesome-design-md</span>
<ul class="nav-links"> <ul class="nav-links">
<li><a href="#colors">Colors</a></li> <li><a href="#colors">Colors</a></li>
<li><a href="#typography">Typography</a></li> <li><a href="#typography">Typography</a></li>
@ -620,9 +620,7 @@
</div> </div>
</section> </section>
<footer class="footer"> <footer class="footer">Maintained by <a href="https://github.com/VoltAgent/voltagent" target="_blank" rel="noopener noreferrer" style="text-decoration:none;"><img src="https://github.com/VoltAgent.png?size=32" alt="VoltAgent" width="14" height="14" style="border-radius:3px;vertical-align:-2px;margin-right:3px;">VoltAgent</a> team</footer>
Generated from <a href="https://sentry.io/welcome/">sentry.io</a> DESIGN.md &mdash; awesome-design-md
</footer>
</body> </body>
</html> </html>

8
design-md/sentry/preview.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design System Preview: Sentry (Light)</title> <title>Design System Inspired by Sentry</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700&display=swap" rel="stylesheet">
@ -528,7 +528,7 @@
<!-- NAV --> <!-- NAV -->
<nav class="nav"> <nav class="nav">
<a class="nav-brand" href="#">awesome-design-md</a> <span class="nav-brand">awesome-design-md</span>
<ul class="nav-links"> <ul class="nav-links">
<li><a href="#colors">Colors</a></li> <li><a href="#colors">Colors</a></li>
<li><a href="#typography">Typography</a></li> <li><a href="#typography">Typography</a></li>
@ -945,9 +945,7 @@
</section> </section>
<!-- FOOTER --> <!-- FOOTER -->
<footer class="footer"> <footer class="footer">Maintained by <a href="https://github.com/VoltAgent/voltagent" target="_blank" rel="noopener noreferrer" style="text-decoration:none;"><img src="https://github.com/VoltAgent.png?size=32" alt="VoltAgent" width="14" height="14" style="border-radius:3px;vertical-align:-2px;margin-right:3px;">VoltAgent</a> team</footer>
Generated from <a href="https://sentry.io/welcome/">sentry.io</a> DESIGN.md &mdash; awesome-design-md
</footer>
</body> </body>
</html> </html>

8
design-md/spacex/preview-dark.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design System Preview: SpaceX (Dark)</title> <title>Design System Inspired by SpaceX</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Share+Tech&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Share+Tech&display=swap" rel="stylesheet">
@ -94,7 +94,7 @@
<body> <body>
<nav class="nav"> <nav class="nav">
<a class="nav-brand" href="#">awesome-design-md</a> <span class="nav-brand">awesome-design-md</span>
<ul class="nav-links"> <ul class="nav-links">
<li><a href="#colors">Colors</a></li> <li><a href="#colors">Colors</a></li>
<li><a href="#typography">Typography</a></li> <li><a href="#typography">Typography</a></li>
@ -215,9 +215,7 @@
<p style="font-size:11px; color:rgba(240,240,250,0.3); margin-top:12px; text-transform:none; letter-spacing:normal;">Zero shadows. Depth from photography only.</p> <p style="font-size:11px; color:rgba(240,240,250,0.3); margin-top:12px; text-transform:none; letter-spacing:normal;">Zero shadows. Depth from photography only.</p>
</section> </section>
<footer class="footer"> <footer class="footer">Maintained by <a href="https://github.com/VoltAgent/voltagent" target="_blank" rel="noopener noreferrer" style="text-decoration:none;"><img src="https://github.com/VoltAgent.png?size=32" alt="VoltAgent" width="14" height="14" style="border-radius:3px;vertical-align:-2px;margin-right:3px;">VoltAgent</a> team</footer>
Generated from <a href="https://spacex.com/">spacex.com</a> DESIGN.md — awesome-design-md
</footer>
</body> </body>
</html> </html>

8
design-md/spacex/preview.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design System Preview: SpaceX (Light)</title> <title>Design System Inspired by SpaceX</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Share+Tech&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Share+Tech&display=swap" rel="stylesheet">
@ -94,7 +94,7 @@
<body> <body>
<nav class="nav"> <nav class="nav">
<a class="nav-brand" href="#">awesome-design-md</a> <span class="nav-brand">awesome-design-md</span>
<ul class="nav-links"> <ul class="nav-links">
<li><a href="#colors">Colors</a></li> <li><a href="#colors">Colors</a></li>
<li><a href="#typography">Typography</a></li> <li><a href="#typography">Typography</a></li>
@ -214,9 +214,7 @@
<p style="font-size:11px; color:rgba(240,240,250,0.3); margin-top:12px; text-transform:none; letter-spacing:normal;">Zero shadows. Depth from photography only.</p> <p style="font-size:11px; color:rgba(240,240,250,0.3); margin-top:12px; text-transform:none; letter-spacing:normal;">Zero shadows. Depth from photography only.</p>
</section> </section>
<footer class="footer"> <footer class="footer">Maintained by <a href="https://github.com/VoltAgent/voltagent" target="_blank" rel="noopener noreferrer" style="text-decoration:none;"><img src="https://github.com/VoltAgent.png?size=32" alt="VoltAgent" width="14" height="14" style="border-radius:3px;vertical-align:-2px;margin-right:3px;">VoltAgent</a> team</footer>
Generated from <a href="https://spacex.com/">spacex.com</a> DESIGN.md — awesome-design-md
</footer>
</body> </body>
</html> </html>

6
design-md/spotify/preview-dark.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design System Preview: Spotify (Dark)</title> <title>Design System Inspired by Spotify</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
@ -98,7 +98,7 @@
<body> <body>
<nav class="nav"> <nav class="nav">
<a class="nav-brand" href="#">awesome-design-md</a> <span class="nav-brand">awesome-design-md</span>
<ul class="nav-links"> <ul class="nav-links">
<li><a href="#colors">Colors</a></li> <li><a href="#colors">Colors</a></li>
<li><a href="#typography">Typography</a></li> <li><a href="#typography">Typography</a></li>
@ -225,7 +225,7 @@
</div> </div>
</section> </section>
<footer class="footer">Generated from <a href="https://spotify.com/">spotify.com</a> DESIGN.md — awesome-design-md</footer> <footer class="footer">Maintained by <a href="https://github.com/VoltAgent/voltagent" target="_blank" rel="noopener noreferrer" style="text-decoration:none;"><img src="https://github.com/VoltAgent.png?size=32" alt="VoltAgent" width="14" height="14" style="border-radius:3px;vertical-align:-2px;margin-right:3px;">VoltAgent</a> team</footer>
</body> </body>
</html> </html>

6
design-md/spotify/preview.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design System Preview: Spotify (Light)</title> <title>Design System Inspired by Spotify</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
@ -98,7 +98,7 @@
<body> <body>
<nav class="nav"> <nav class="nav">
<a class="nav-brand" href="#">awesome-design-md</a> <span class="nav-brand">awesome-design-md</span>
<ul class="nav-links"> <ul class="nav-links">
<li><a href="#colors">Colors</a></li> <li><a href="#colors">Colors</a></li>
<li><a href="#typography">Typography</a></li> <li><a href="#typography">Typography</a></li>
@ -224,7 +224,7 @@
</div> </div>
</section> </section>
<footer class="footer">Generated from <a href="https://spotify.com/">spotify.com</a> DESIGN.md — awesome-design-md</footer> <footer class="footer">Maintained by <a href="https://github.com/VoltAgent/voltagent" target="_blank" rel="noopener noreferrer" style="text-decoration:none;"><img src="https://github.com/VoltAgent.png?size=32" alt="VoltAgent" width="14" height="14" style="border-radius:3px;vertical-align:-2px;margin-right:3px;">VoltAgent</a> team</footer>
</body> </body>
</html> </html>

8
design-md/stripe/preview-dark.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design System Preview: Stripe (Dark)</title> <title>Design System Inspired by Stripe</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400;500;700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400;500;700&display=swap" rel="stylesheet">
@ -231,7 +231,7 @@
<body> <body>
<nav class="nav"> <nav class="nav">
<a class="nav-brand" href="#">awesome-design-md</a> <span class="nav-brand">awesome-design-md</span>
<ul class="nav-links"> <ul class="nav-links">
<li><a href="#colors">Colors</a></li> <li><a href="#colors">Colors</a></li>
<li><a href="#typography">Typography</a></li> <li><a href="#typography">Typography</a></li>
@ -422,9 +422,7 @@
</div> </div>
</section> </section>
<footer class="footer"> <footer class="footer">Maintained by <a href="https://github.com/VoltAgent/voltagent" target="_blank" rel="noopener noreferrer" style="text-decoration:none;"><img src="https://github.com/VoltAgent.png?size=32" alt="VoltAgent" width="14" height="14" style="border-radius:3px;vertical-align:-2px;margin-right:3px;">VoltAgent</a> team</footer>
Generated from <a href="https://stripe.com/">stripe.com</a> DESIGN.md -- awesome-design-md
</footer>
</body> </body>
</html> </html>

8
design-md/stripe/preview.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design System Preview: Stripe (Light)</title> <title>Design System Inspired by Stripe</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400;500;700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400;500;700&display=swap" rel="stylesheet">
@ -223,7 +223,7 @@
<body> <body>
<nav class="nav"> <nav class="nav">
<a class="nav-brand" href="#">awesome-design-md</a> <span class="nav-brand">awesome-design-md</span>
<ul class="nav-links"> <ul class="nav-links">
<li><a href="#colors">Colors</a></li> <li><a href="#colors">Colors</a></li>
<li><a href="#typography">Typography</a></li> <li><a href="#typography">Typography</a></li>
@ -413,9 +413,7 @@
</div> </div>
</section> </section>
<footer class="footer"> <footer class="footer">Maintained by <a href="https://github.com/VoltAgent/voltagent" target="_blank" rel="noopener noreferrer" style="text-decoration:none;"><img src="https://github.com/VoltAgent.png?size=32" alt="VoltAgent" width="14" height="14" style="border-radius:3px;vertical-align:-2px;margin-right:3px;">VoltAgent</a> team</footer>
Generated from <a href="https://stripe.com/">stripe.com</a> DESIGN.md -- awesome-design-md
</footer>
</body> </body>
</html> </html>

4
design-md/supabase/preview-dark.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design System Preview: Supabase (Dark)</title> <title>Design System Inspired by Supabase</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400;500&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400;500&display=swap" rel="stylesheet">
@ -470,7 +470,7 @@
<!-- NAV --> <!-- NAV -->
<nav class="nav"> <nav class="nav">
<div class="nav-brand">awesome-design-md</div> <span class="nav-brand">awesome-design-md</span>
<div class="nav-links"> <div class="nav-links">
<a href="#colors">Colors</a> <a href="#colors">Colors</a>
<a href="#typography">Typography</a> <a href="#typography">Typography</a>

4
design-md/supabase/preview.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design System Preview: Supabase (Light)</title> <title>Design System Inspired by Supabase</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400;500&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400;500&display=swap" rel="stylesheet">
@ -448,7 +448,7 @@
<!-- NAV --> <!-- NAV -->
<nav class="nav"> <nav class="nav">
<div class="nav-brand">awesome-design-md</div> <span class="nav-brand">awesome-design-md</span>
<div class="nav-links"> <div class="nav-links">
<a href="#colors">Colors</a> <a href="#colors">Colors</a>
<a href="#typography">Typography</a> <a href="#typography">Typography</a>

6
design-md/superhuman/preview-dark.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design System Inspired by Superhuman — Dark Mode</title> <title>Design System Inspired by Superhuman</title>
<style> <style>
:root { :root {
--mysteria-purple: #1b1938; --mysteria-purple: #1b1938;
@ -967,9 +967,7 @@
</div> </div>
</section> </section>
<footer> <footer class="footer">Maintained by <a href="https://github.com/VoltAgent/voltagent" target="_blank" rel="noopener noreferrer" style="text-decoration:none;"><img src="https://github.com/VoltAgent.png?size=32" alt="VoltAgent" width="14" height="14" style="border-radius:3px;vertical-align:-2px;margin-right:3px;">VoltAgent</a> team</footer>
Generated from DESIGN.md — Superhuman Design System Catalog (Dark Mode)
</footer>
</body> </body>
</html> </html>

4
design-md/superhuman/preview.html
View File

@ -945,9 +945,7 @@
</div> </div>
</section> </section>
<footer> <footer class="footer">Maintained by <a href="https://github.com/VoltAgent/voltagent" target="_blank" rel="noopener noreferrer" style="text-decoration:none;"><img src="https://github.com/VoltAgent.png?size=32" alt="VoltAgent" width="14" height="14" style="border-radius:3px;vertical-align:-2px;margin-right:3px;">VoltAgent</a> team</footer>
Generated from DESIGN.md — Superhuman Design System Catalog
</footer>
</body> </body>
</html> </html>

6
design-md/tesla/preview-dark.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design System Inspired by Tesla — Dark Mode</title> <title>Design System Inspired by Tesla</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap" rel="stylesheet">
@ -941,9 +941,7 @@
</section> </section>
<!-- FOOTER --> <!-- FOOTER -->
<footer> <footer class="footer">Maintained by <a href="https://github.com/VoltAgent/voltagent" target="_blank" rel="noopener noreferrer" style="text-decoration:none;"><img src="https://github.com/VoltAgent.png?size=32" alt="VoltAgent" width="14" height="14" style="border-radius:3px;vertical-align:-2px;margin-right:3px;">VoltAgent</a> team</footer>
<p>Design System Inspired by Tesla — Generated from DESIGN.md by awesome-design-md</p>
</footer>
</body> </body>
</html> </html>

4
design-md/tesla/preview.html
View File

@ -919,9 +919,7 @@
</section> </section>
<!-- FOOTER --> <!-- FOOTER -->
<footer> <footer class="footer">Maintained by <a href="https://github.com/VoltAgent/voltagent" target="_blank" rel="noopener noreferrer" style="text-decoration:none;"><img src="https://github.com/VoltAgent.png?size=32" alt="VoltAgent" width="14" height="14" style="border-radius:3px;vertical-align:-2px;margin-right:3px;">VoltAgent</a> team</footer>
<p style="color: var(--silver-fog); font-size: 12px;">Design System Inspired by Tesla — Generated from DESIGN.md by awesome-design-md</p>
</footer>
</body> </body>
</html> </html>

6
design-md/together.ai/preview-dark.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design System Preview: Together AI (Dark)</title> <title>Design System Inspired by Together AI</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">
@ -503,7 +503,7 @@
<!-- NAV --> <!-- NAV -->
<nav class="nav"> <nav class="nav">
<div class="nav-brand"><div class="logo-dot"></div> Together AI</div> <span class="nav-brand">awesome-design-md</span>
<div class="nav-links"> <div class="nav-links">
<a href="#colors">Colors</a> <a href="#colors">Colors</a>
<a href="#typography">Typography</a> <a href="#typography">Typography</a>
@ -518,7 +518,7 @@
<!-- HERO --> <!-- HERO -->
<section class="hero"> <section class="hero">
<div class="hero-gradient-orb"></div> <div class="hero-gradient-orb"></div>
<h1>Design System Preview:<br>Together AI</h1> <h1>Design System<br>Inspired by Together AI</h1>
<p>Auto-generated design token catalog from DESIGN.md</p> <p>Auto-generated design token catalog from DESIGN.md</p>
<div class="hero-buttons"> <div class="hero-buttons">
<button class="btn-glass">Explore Tokens</button> <button class="btn-glass">Explore Tokens</button>

6
design-md/together.ai/preview.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design System Preview: Together AI (Light)</title> <title>Design System Inspired by Together AI</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">
@ -506,7 +506,7 @@
<!-- NAV --> <!-- NAV -->
<nav class="nav"> <nav class="nav">
<div class="nav-brand"><div class="logo-dot"></div> Together AI</div> <span class="nav-brand">awesome-design-md</span>
<div class="nav-links"> <div class="nav-links">
<a href="#colors">Colors</a> <a href="#colors">Colors</a>
<a href="#typography">Typography</a> <a href="#typography">Typography</a>
@ -521,7 +521,7 @@
<!-- HERO --> <!-- HERO -->
<section class="hero"> <section class="hero">
<div class="hero-gradient-orb"></div> <div class="hero-gradient-orb"></div>
<h1>Design System Preview:<br>Together AI</h1> <h1>Design System<br>Inspired by Together AI</h1>
<p>Auto-generated design token catalog from DESIGN.md</p> <p>Auto-generated design token catalog from DESIGN.md</p>
<div class="hero-buttons"> <div class="hero-buttons">
<button class="btn-dark-solid">Explore Tokens</button> <button class="btn-dark-solid">Explore Tokens</button>

Some files were not shown because too many files have changed in this diff Show More