← back to Homesonspec
design-system/components/buttons/index.html
41 lines
<!-- @dsCard group="Components" -->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Buttons</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');
:root{--brand-50:#f0f9f8;--brand-200:#b4deda;--brand-700:#1e5654;--brand-800:#1b4645;--brand-950:#081e1e;
--accent-400:#f4a934;--accent-500:#ed8f16;}
body{font-family:'Inter',system-ui,sans-serif;margin:0;background:#f7faf9;padding:32px;color:#0f2b2a}
.eyebrow{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.18em;color:#226b69;margin-bottom:14px}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.btn{display:inline-flex;align-items:center;gap:8px;border:0;border-radius:999px;padding:10px 20px;
font:600 14px/1 'Inter',sans-serif;cursor:pointer;transition:.15s}
.primary{background:var(--brand-700);color:#fff;box-shadow:0 1px 2px rgba(16,50,49,.12)}
.primary:hover{background:var(--brand-800)}
.accent{background:var(--accent-500);color:var(--brand-950)}
.accent:hover{background:var(--accent-400)}
.ghost{background:#fff;color:var(--brand-800);box-shadow:inset 0 0 0 1px var(--brand-200)}
.ghost:hover{background:var(--brand-50)}
.small{padding:7px 14px;font-size:13px}
</style>
</head>
<body>
<p class="eyebrow">Buttons</p>
<div class="row">
<button class="btn primary">Search</button>
<button class="btn accent">Contact a builder</button>
<button class="btn ghost">Save home</button>
</div>
<div class="row">
<button class="btn primary small">Primary · sm</button>
<button class="btn accent small">Accent · sm</button>
<button class="btn ghost small">Ghost · sm</button>
</div>
<p style="font-size:13px;color:#5b6b6a">Pill radius, brand teal primary / honey accent for the single highest-intent CTA per view.</p>
</body>
</html>