← back to Homesonspec
design-system/components/badges/index.html
31 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>Badges</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');
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:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.badge{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:3px 11px;font:500 12px/1.4 'Inter',sans-serif}
.verified{background:#f0f9f8;color:#1e5654;box-shadow:inset 0 0 0 1px #b4deda}
.ready{background:#fef0d0;color:#8d4114}
.neutral{background:#f2f4f4;color:#5b6b6a}
.dot{width:8px;height:8px;border-radius:50%}
</style>
</head>
<body>
<p class="eyebrow">Badges & verification labels</p>
<div class="row">
<span class="badge verified">✓ Verified from source</span>
<span class="badge ready"><i class="dot" style="background:#16a34a"></i>Move-in ready</span>
<span class="badge neutral"><i class="dot" style="background:#f59e0b"></i>Under construction</span>
<span class="badge neutral">🕓 Verified May 20, 3:17 AM</span>
</div>
<p style="font-size:13px;color:#5b6b6a">Verified badge = the field carries per-source evidence. Status badges reuse the construction-status token colors so the map legend and the cards agree.</p>
</body>
</html>