185 lines
17 KiB
HTML
185 lines
17 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Design System Preview: Intercom (Light)</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; } }
|
|
</style>
|
|
</head>
|
|
<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>
|
|
|
|
<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">Generated from <a href="https://www.intercom.com/">intercom.com</a> DESIGN.md — awesome-design-md</footer>
|
|
|
|
</body>
|
|
</html>
|