Keysat
843ff0e5d7
Glue files not covered by subproject repos: top-level docs, logo, keysat-design-system, and crosscheck tests. Subproject folders are gitignored (each has its own Gitea remote).
36 lines
2.5 KiB
HTML
36 lines
2.5 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Keysat — Cream & Gold</title>
|
|
<link rel="stylesheet" href="../colors_and_type.css">
|
|
<style>
|
|
body { margin: 0; padding: 20px; font-family: var(--font-body); background: var(--bg-page); }
|
|
.row { display: flex; gap: 0; border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-sm); margin-bottom: 14px; border: 1px solid var(--border-1); }
|
|
.sw { flex: 1; padding: 14px 12px; min-height: 70px; display: flex; flex-direction: column; justify-content: space-between; }
|
|
.sw .name { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.85; }
|
|
.sw .hex { font-family: var(--font-mono); font-size: 11px; opacity: 0.85; }
|
|
.label { font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-700); margin: 0 4px 6px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="label">Cream — paper surfaces</div>
|
|
<div class="row">
|
|
<div class="sw" style="background:#FBF9F2;color:#0E1F33"><span class="name">50</span><span class="hex">#FBF9F2</span></div>
|
|
<div class="sw" style="background:#F5F1E8;color:#0E1F33"><span class="name">100 ★</span><span class="hex">#F5F1E8</span></div>
|
|
<div class="sw" style="background:#EDE7D7;color:#0E1F33"><span class="name">200</span><span class="hex">#EDE7D7</span></div>
|
|
<div class="sw" style="background:#E1D8C0;color:#0E1F33"><span class="name">300</span><span class="hex">#E1D8C0</span></div>
|
|
<div class="sw" style="background:#C9BC9A;color:#0E1F33"><span class="name">400</span><span class="hex">#C9BC9A</span></div>
|
|
</div>
|
|
<div class="label">Gold — accent (use sparingly)</div>
|
|
<div class="row">
|
|
<div class="sw" style="background:#8A6F3D;color:#FBF9F2"><span class="name">700</span><span class="hex">#8A6F3D</span></div>
|
|
<div class="sw" style="background:#A88652;color:#FBF9F2"><span class="name">600</span><span class="hex">#A88652</span></div>
|
|
<div class="sw" style="background:#BFA068;color:#0E1F33"><span class="name">500 ★</span><span class="hex">#BFA068</span></div>
|
|
<div class="sw" style="background:#D4B985;color:#0E1F33"><span class="name">400</span><span class="hex">#D4B985</span></div>
|
|
<div class="sw" style="background:#E5CFA5;color:#0E1F33"><span class="name">300</span><span class="hex">#E5CFA5</span></div>
|
|
<div class="sw" style="background:#F0E2C5;color:#0E1F33"><span class="name">200</span><span class="hex">#F0E2C5</span></div>
|
|
</div>
|
|
</body>
|
|
</html>
|