chuan/design
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
design/designs/intercom/preview.html
T
chuan 7fd67d7860 feat: implement design synchronization application 
- Add main application logic in `app.rs` to handle design sync process.
- Create `catalog.rs` for parsing category mappings and listing design directories.
- Introduce configuration constants in `config.rs` for paths and settings.
- Implement logging functionality in `logger.rs` to track application events.
- Update `main.rs` to initialize and run the application with logging.
- Define data models in `models.rs` for design sources and sync summaries.
- Create `readme.rs` to manage README updates with design records.
- Implement synchronization logic in `sync.rs` to fetch and process design data.
- Add utility functions in `util.rs` for path normalization and whitespace handling.
2026-04-20 22:23:37 +08:00

230 lines
19 KiB
HTML
Raw Permalink Blame History

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design System Inspired by Intercom</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<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">
<style>
:root { --cream:#faf9f6; --black:#111111; --white:#ffffff; --orange:#ff5600; --oat:#dedbd6; --gray50:#7b7b78; --gray60:#626260; --gray80:#313130; --sand:#d3cec6; --font:'Inter',ui-sans-serif,system-ui,sans-serif; }
* { margin:0; padding:0; box-sizing:border-box; }
body { background:var(--cream); color:var(--black); font-family:var(--font); font-size:16px; line-height:1.50; -webkit-font-smoothing:antialiased; }
.nav { position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:12px 24px; background:var(--white); border-bottom:1px solid var(--oat); }
.nav-brand { font-size:14px; font-weight:400; color:var(--black); text-decoration:none; }
.nav-links { display:flex; gap:20px; list-style:none; }
.nav-links a { font-size:14px; color:var(--gray60); text-decoration:none; }
.nav-links a:hover { color:var(--black); }
.nav-cta { display:inline-block; background:var(--black); color:var(--white); padding:8px 14px; border-radius:4px; font-size:14px; text-decoration:none; transition:transform 0.2s; }
.nav-cta:hover { transform:scale(1.05); }
.hero { padding:80px 24px 64px; text-align:left; max-width:900px; margin:0 auto; }
.hero h1 { font-size:72px; font-weight:400; line-height:1.00; letter-spacing:-2.4px; margin-bottom:20px; }
.hero h1 span { color:var(--orange); }
.hero p { font-size:16px; color:var(--gray60); max-width:480px; margin-bottom:32px; }
.hero-buttons { display:flex; gap:12px; }
.btn-dark { display:inline-block; background:var(--black); color:var(--white); padding:12px 20px; border-radius:4px; font-family:var(--font); font-size:16px; text-decoration:none; border:none; cursor:pointer; transition:all 0.2s; }
.btn-dark:hover { background:var(--white); color:var(--black); transform:scale(1.1); }
.btn-dark:active { transform:scale(0.85); }
.btn-outline { display:inline-block; background:transparent; color:var(--black); padding:12px 20px; border-radius:4px; border:1px solid var(--black); font-family:var(--font); font-size:16px; text-decoration:none; cursor:pointer; transition:all 0.2s; }
.btn-outline:hover { transform:scale(1.1); }
.btn-cream { display:inline-block; background:var(--cream); color:var(--black); padding:12px 16px; border-radius:4px; border:1px solid var(--oat); font-family:var(--font); font-size:14px; text-decoration:none; }
.section { padding:48px 24px; max-width:1100px; margin:0 auto; }
.section-label { font-family:monospace; font-size:12px; text-transform:uppercase; letter-spacing:1.2px; color:var(--gray50); margin-bottom:8px; }
.section-title { font-size:40px; font-weight:400; line-height:1.00; letter-spacing:-1.2px; margin-bottom:24px; }
.section-divider { border:none; border-top:1px solid var(--oat); margin:0; }
.color-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px,1fr)); gap:10px; margin-bottom:20px; }
.color-swatch { border-radius:8px; overflow:hidden; border:1px solid var(--oat); background:var(--white); }
.color-swatch-block { height:60px; }
.color-swatch-info { padding:8px 10px; }
.color-swatch-name { font-size:12px; font-weight:400; margin-bottom:2px; }
.color-swatch-hex { font-size:10px; color:var(--gray50); font-family:monospace; }
.color-swatch-role { font-size:9px; color:var(--gray50); margin-top:2px; }
.color-group-label { font-size:12px; color:var(--gray60); margin:20px 0 8px; }
.type-sample { margin-bottom:20px; padding-bottom:16px; border-bottom:1px solid var(--oat); }
.type-sample:last-child { border-bottom:none; }
.type-meta { font-family:monospace; font-size:10px; color:var(--gray50); margin-top:4px; }
.button-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.button-item { text-align:center; }
.button-label { font-size:10px; color:var(--gray50); margin-top:6px; }
.card-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:12px; }
.card { background:var(--white); border:1px solid var(--oat); border-radius:8px; padding:20px; }
.card h3 { font-size:24px; font-weight:400; letter-spacing:-0.48px; line-height:1.00; margin-bottom:8px; }
.card p { font-size:14px; color:var(--gray60); line-height:1.43; }
.form-group { margin-bottom:16px; max-width:400px; }
.form-label { display:block; font-size:14px; margin-bottom:4px; }
.form-input { width:100%; background:var(--white); color:var(--black); border:1px solid var(--oat); padding:10px 14px; border-radius:4px; font-family:var(--font); font-size:16px; outline:none; }
.form-input:focus { border-color:var(--black); }
.form-input--focus { border-color:var(--black); }
.form-input--error { border-color:var(--orange); }
.form-textarea { width:100%; min-height:80px; background:var(--white); color:var(--black); border:1px solid var(--oat); padding:10px 14px; border-radius:4px; font-family:var(--font); font-size:16px; resize:vertical; outline:none; }
.form-state-label { font-size:9px; color:var(--gray50); margin-top:4px; }
.spacing-row { display:flex; align-items:flex-end; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.spacing-item { text-align:center; }
.spacing-block { background:var(--black); border-radius:2px; margin-bottom:4px; height:24px; opacity:0.15; }
.spacing-value { font-family:monospace; font-size:9px; color:var(--gray50); }
.radius-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.radius-item { text-align:center; }
.radius-box { width:52px; height:52px; background:var(--oat); margin-bottom:4px; }
.radius-label { font-family:monospace; font-size:9px; color:var(--gray50); }
.elevation-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:12px; }
.elevation-card { background:var(--white); border:1px solid var(--oat); border-radius:8px; padding:16px; text-align:center; }
.elevation-label { font-size:13px; margin-bottom:4px; }
.elevation-desc { font-family:monospace; font-size:9px; color:var(--gray50); }
.footer { padding:32px; text-align:center; background:var(--black); color:var(--gray50); font-size:12px; }
.footer a { color:var(--orange); text-decoration:underline; }
@media (max-width:768px) { .hero h1 { font-size:44px; letter-spacing:-1.32px; } .nav-links { display:none; } .section { padding:32px 16px; } .card-grid { grid-template-columns:1fr; } }
/* getdesign.md nav additions */
.nav-left { display: flex; align-items: center; gap: 20px; }
.nav-brand-link,
.nav-brand-link:link,
.nav-brand-link:visited,
.nav-brand-link:hover,
.nav-brand-link:active { text-decoration: none; color: inherit; }
.nav-github,
.nav-github:link,
.nav-github:visited,
.nav-github:hover,
.nav-github:active {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
font-weight: 600;
color: inherit;
text-decoration: none;
padding: 5px 10px;
border: 1px solid rgba(128, 128, 128, 0.3);
border-radius: 6px;
opacity: 0.75;
transition: opacity 200ms ease, border-color 200ms ease;
font-family: inherit;
line-height: 1;
white-space: nowrap;
}
.nav-github:hover { opacity: 1; border-color: rgba(128, 128, 128, 0.55); }
.nav-github svg { display: block; flex-shrink: 0; }
/* getdesign.md nav centering */
.nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.nav > .nav-left { justify-self: start; }
.nav > .nav-links { justify-self: center; }
.nav > :last-child { justify-self: end; }
</style>
</head>
<body>
<nav class="nav"><div class="nav-left">
<a href="https://getdesign.md/" target="_blank" rel="noopener noreferrer" class="nav-brand-link">
<span class="nav-brand">getdesign.md</span>
</a>
<a class="nav-github" href="https://github.com/VoltAgent/awesome-design-md" target="_blank" rel="noopener noreferrer" aria-label="awesome-design-md on GitHub">
<svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2 .37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"/></svg>
awesome-design-md
</a>
</div><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>
<hr class="section-divider">
<section class="section" id="colors"><div class="section-label">01 / Colors</div><h2 class="section-title">Color Palette</h2>
<div class="color-group-label">Primary</div>
<div class="color-grid">
<div class="color-swatch"><div class="color-swatch-block" style="background:#111111"></div><div class="color-swatch-info"><div class="color-swatch-name">Off Black</div><div class="color-swatch-hex">#111111</div><div class="color-swatch-role">Primary text, buttons</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#faf9f6"></div><div class="color-swatch-info"><div class="color-swatch-name">Warm Cream</div><div class="color-swatch-hex">#faf9f6</div><div class="color-swatch-role">Page background</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#ff5600"></div><div class="color-swatch-info"><div class="color-swatch-name">Fin Orange</div><div class="color-swatch-hex">#ff5600</div><div class="color-swatch-role">Brand accent</div></div></div>
</div>
<div class="color-group-label">Report Palette</div>
<div class="color-grid">
<div class="color-swatch"><div class="color-swatch-block" style="background:#65b5ff"></div><div class="color-swatch-info"><div class="color-swatch-name">Blue</div><div class="color-swatch-hex">#65b5ff</div><div class="color-swatch-role">Report blue</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#0bdf50"></div><div class="color-swatch-info"><div class="color-swatch-name">Green</div><div class="color-swatch-hex">#0bdf50</div><div class="color-swatch-role">Report green</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#c41c1c"></div><div class="color-swatch-info"><div class="color-swatch-name">Red</div><div class="color-swatch-hex">#c41c1c</div><div class="color-swatch-role">Report red</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#ff2067"></div><div class="color-swatch-info"><div class="color-swatch-name">Pink</div><div class="color-swatch-hex">#ff2067</div><div class="color-swatch-role">Report pink</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#b3e01c"></div><div class="color-swatch-info"><div class="color-swatch-name">Lime</div><div class="color-swatch-hex">#b3e01c</div><div class="color-swatch-role">Report lime</div></div></div>
</div>
<div class="color-group-label">Neutral</div>
<div class="color-grid">
<div class="color-swatch"><div class="color-swatch-block" style="background:#7b7b78"></div><div class="color-swatch-info"><div class="color-swatch-name">Gray 50</div><div class="color-swatch-hex">#7b7b78</div><div class="color-swatch-role">Muted text</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#626260"></div><div class="color-swatch-info"><div class="color-swatch-name">Gray 60</div><div class="color-swatch-hex">#626260</div><div class="color-swatch-role">Secondary text</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#dedbd6"></div><div class="color-swatch-info"><div class="color-swatch-name">Oat Border</div><div class="color-swatch-hex">#dedbd6</div><div class="color-swatch-role">Borders</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#d3cec6"></div><div class="color-swatch-info"><div class="color-swatch-name">Warm Sand</div><div class="color-swatch-hex">#d3cec6</div><div class="color-swatch-role">Light neutral</div></div></div>
</div></section>
<hr class="section-divider">
<section class="section" id="typography"><div class="section-label">02 / Typography</div><h2 class="section-title">Typography Scale</h2>
<div class="type-sample"><div style="font-size:72px; font-weight:400; line-height:1.00; letter-spacing:-2.4px;">Display Hero</div><div class="type-meta">Saans — 80px / 400 / 1.00 / -2.4px</div></div>
<div class="type-sample"><div style="font-size:54px; font-weight:400; line-height:1.00; letter-spacing:-1.6px;">Section Heading</div><div class="type-meta">Saans — 54px / 400 / 1.00 / -1.6px</div></div>
<div class="type-sample"><div style="font-size:40px; font-weight:400; line-height:1.00; letter-spacing:-1.2px;">Sub-heading</div><div class="type-meta">Saans — 40px / 400 / 1.00 / -1.2px</div></div>
<div class="type-sample"><div style="font-size:24px; font-weight:400; line-height:1.00; letter-spacing:-0.48px;">Feature Title</div><div class="type-meta">Saans — 24px / 400 / 1.00 / -0.48px</div></div>
<div class="type-sample"><div style="font-size:16px; font-weight:400; line-height:1.50; color:var(--gray60);">Body — The only AI-first customer service platform. Resolve issues instantly with Fin AI Agent.</div><div class="type-meta">Saans — 16px / 400 / 1.50</div></div>
<div class="type-sample"><div style="font-size:14px; font-weight:300; line-height:1.40; color:var(--gray50);">Body Light — Updated 3 minutes ago</div><div class="type-meta">Saans — 14px / 300 / 1.40</div></div>
<div class="type-sample"><div style="font-family:monospace; font-size:12px; text-transform:uppercase; letter-spacing:1.2px; color:var(--gray50);">MONO LABEL</div><div class="type-meta">SaansMono — 12px / 500 / uppercase / +1.2px</div></div>
</section>
<hr class="section-divider">
<section class="section" id="buttons"><div class="section-label">03 / Buttons</div><h2 class="section-title">Buttons</h2>
<div class="button-row">
<div class="button-item"><a class="btn-dark" href="#">Get a demo</a><div class="button-label">Primary Dark</div></div>
<div class="button-item"><a class="btn-outline" href="#">Start free trial</a><div class="button-label">Outlined</div></div>
<div class="button-item"><a class="btn-cream" href="#">Learn more</a><div class="button-label">Warm Cream</div></div>
</div>
<p style="font-size:12px; color:var(--gray50); margin-top:12px;">Hover to see scale(1.1). Click for scale(0.85). All buttons: 4px radius.</p>
</section>
<hr class="section-divider">
<section class="section" id="cards"><div class="section-label">04 / Cards</div><h2 class="section-title">Cards</h2>
<div class="card-grid">
<div class="card"><h3>Fin AI Agent</h3><p>Resolve 50% of support questions instantly with AI. No training needed.</p></div>
<div class="card"><h3>Help Center</h3><p>Help customers help themselves. Build a knowledge base with AI-powered search.</p></div>
<div class="card"><h3>Workflows</h3><p>Automate repetitive tasks. Route, assign, and resolve at scale.</p></div>
</div></section>
<hr class="section-divider">
<section class="section" id="forms"><div class="section-label">05 / Forms</div><h2 class="section-title">Forms</h2>
<div class="form-group"><label class="form-label">Email</label><input class="form-input" type="email" placeholder="you@company.com"><div class="form-state-label">Default (oat border)</div></div>
<div class="form-group"><label class="form-label">Company</label><input class="form-input form-input--focus" type="text" value="Acme Inc"><div class="form-state-label">Focus (black border)</div></div>
<div class="form-group"><label class="form-label">Website</label><input class="form-input form-input--error" type="text" value="invalid"><div class="form-state-label">Error (orange border)</div></div>
<div class="form-group"><label class="form-label">Message</label><textarea class="form-textarea" placeholder="How can we help?"></textarea></div>
</section>
<hr class="section-divider">
<section class="section"><div class="section-label">06 / Spacing</div><h2 class="section-title">Spacing</h2>
<div class="spacing-row"><div class="spacing-item"><div class="spacing-block" style="width:8px"></div><div class="spacing-value">8</div></div><div class="spacing-item"><div class="spacing-block" style="width:12px"></div><div class="spacing-value">12</div></div><div class="spacing-item"><div class="spacing-block" style="width:16px"></div><div class="spacing-value">16</div></div><div class="spacing-item"><div class="spacing-block" style="width:24px"></div><div class="spacing-value">24</div></div><div class="spacing-item"><div class="spacing-block" style="width:32px"></div><div class="spacing-value">32</div></div><div class="spacing-item"><div class="spacing-block" style="width:48px"></div><div class="spacing-value">48</div></div><div class="spacing-item"><div class="spacing-block" style="width:64px"></div><div class="spacing-value">64</div></div></div></section>
<hr class="section-divider">
<section class="section"><div class="section-label">07 / Radius</div><h2 class="section-title">Radius</h2>
<div class="radius-row"><div class="radius-item"><div class="radius-box" style="border-radius:4px"></div><div class="radius-label">4px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:6px"></div><div class="radius-label">6px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:8px"></div><div class="radius-label">8px</div></div></div>
<p style="font-size:11px; color:var(--gray50); margin-top:8px;">Sharp geometry: 4px for buttons, 6px for nav, 8px for cards.</p>
</section>
<hr class="section-divider">
<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>
<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>
</html>
Reference in New Issue View Git Blame Copy Permalink