← back to Homesonspec
design-system/tokens.html
76 lines
<!-- @dsCard group="Foundations" -->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>HomesOnSpec — Foundations</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Inter:wght@400;500;600&display=swap');
:root{
--brand-50:#f0f9f8;--brand-100:#d9efec;--brand-200:#b4deda;--brand-300:#83c5c0;--brand-400:#4fa5a1;
--brand-500:#2f8783;--brand-600:#226b69;--brand-700:#1e5654;--brand-800:#1b4645;--brand-900:#123231;--brand-950:#081e1e;
--accent-100:#fef0d0;--accent-300:#f8c464;--accent-400:#f4a934;--accent-500:#ed8f16;--accent-700:#ae5310;--accent-800:#8d4114;
--ready:#16a34a;--uc:#f59e0b;--plan:#3b82f6;
--sans:'Inter',system-ui,sans-serif;--display:'Fraunces',Georgia,serif;
}
body{font-family:var(--sans);margin:0;background:#f7faf9;color:#0f2b2a;padding:32px;line-height:1.4}
h2{font-family:var(--display);font-weight:600;letter-spacing:-.01em;margin:0 0 4px}
.eyebrow{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.18em;color:var(--brand-600)}
section{margin:28px 0}
.ramp{display:flex;border-radius:12px;overflow:hidden;box-shadow:0 1px 2px rgba(16,50,49,.06)}
.ramp>div{flex:1;height:56px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:4px;font-size:10px;color:#fff8}
.type samp{display:block;color:#123231}
.d1{font-family:var(--display);font-weight:600;font-size:44px;letter-spacing:-.02em;line-height:1.05}
.d2{font-family:var(--display);font-weight:600;font-size:28px}
.b1{font-size:16px}.small{font-size:13px;color:#5b6b6a}
.status{display:flex;gap:18px;margin-top:8px}
.status span{display:inline-flex;align-items:center;gap:7px;font-size:13px}
.dot{width:12px;height:12px;border-radius:50%}
</style>
</head>
<body>
<p class="eyebrow">HomesOnSpec design system</p>
<h2>Foundations</h2>
<p class="small">Tokens mirror <code>apps/web/src/app/globals.css</code> — this library and the live app never drift.</p>
<section>
<p class="eyebrow">Brand — teal / pine</p>
<div class="ramp">
<div style="background:var(--brand-50)">50</div><div style="background:var(--brand-100)">100</div>
<div style="background:var(--brand-200)">200</div><div style="background:var(--brand-300)">300</div>
<div style="background:var(--brand-400)">400</div><div style="background:var(--brand-500)">500</div>
<div style="background:var(--brand-600)">600</div><div style="background:var(--brand-700)">700</div>
<div style="background:var(--brand-800)">800</div><div style="background:var(--brand-900)">900</div>
<div style="background:var(--brand-950)">950</div>
</div>
</section>
<section>
<p class="eyebrow">Accent — honey / amber</p>
<div class="ramp">
<div style="background:var(--accent-100);color:#8884">100</div><div style="background:var(--accent-300);color:#8884">300</div>
<div style="background:var(--accent-400)">400</div><div style="background:var(--accent-500)">500</div>
<div style="background:var(--accent-700)">700</div><div style="background:var(--accent-800)">800</div>
</div>
</section>
<section>
<p class="eyebrow">Construction status</p>
<div class="status">
<span><i class="dot" style="background:var(--ready)"></i>Move-in ready</span>
<span><i class="dot" style="background:var(--uc)"></i>Under construction</span>
<span><i class="dot" style="background:var(--plan)"></i>Planned</span>
</div>
</section>
<section class="type">
<p class="eyebrow">Type — Fraunces (display) · Inter (body)</p>
<samp class="d1">Every new home.</samp>
<samp class="d2">Every builder. One search.</samp>
<samp class="b1">Move-in-ready and under-construction homes, verified from the source.</samp>
<samp class="small">13,414 verified homes · 30 builders · updated continuously</samp>
</section>
</body>
</html>