Keysat
532229d488
Establish keysat's durable, vendor-neutral design contract (the standards /design backfill, document-as-is): - design/DESIGN.md — nine-section brand brief distilled from the prior Claude Design system (navy-on-cream-paper identity, sovereignty-first voice, component + motion rules, do's/don'ts). Manrope is canonical display (the README's "Archivo" was a stale placeholder). - design/tokens.tokens.json — W3C DTCG tokens from colors_and_type.css. - design/brand/ — canonical palette.css + logo/mark assets. - design/_imports/2026-06-16-claude-design-system/ — the original system, relocated as dated provenance (nothing imported it). - AGENTS.md — add the Design line (read the contract before UI work); repoint the layout entry. - ROADMAP.md — design-checker cleanup backlog (gold-as-fill + pill-radius blockers, the inline-token-copy consolidation, token gaps).
27 lines
1.5 KiB
HTML
27 lines
1.5 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Keysat — Radii</title>
|
|
<link rel="stylesheet" href="../colors_and_type.css">
|
|
<style>
|
|
body { margin: 0; padding: 22px; font-family: var(--font-body); background: var(--bg-page); }
|
|
.grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
|
|
.item { display: flex; flex-direction: column; align-items: center; gap: 8px; }
|
|
.box { width: 76px; height: 76px; background: #1E3A5F; box-shadow: var(--shadow-sm); }
|
|
.name { font-family: var(--font-mono); font-size: 11px; color: var(--ink-700); }
|
|
.px { font-family: var(--font-mono); font-size: 10px; color: var(--ink-400); }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="grid">
|
|
<div class="item"><div class="box" style="border-radius:3px"></div><span class="name">xs</span><span class="px">3px</span></div>
|
|
<div class="item"><div class="box" style="border-radius:5px"></div><span class="name">sm</span><span class="px">5px</span></div>
|
|
<div class="item"><div class="box" style="border-radius:8px"></div><span class="name">md ★</span><span class="px">8px (buttons)</span></div>
|
|
<div class="item"><div class="box" style="border-radius:12px"></div><span class="name">lg ★</span><span class="px">12px (cards)</span></div>
|
|
<div class="item"><div class="box" style="border-radius:18px"></div><span class="name">xl</span><span class="px">18px</span></div>
|
|
<div class="item"><div class="box" style="border-radius:999px"></div><span class="name">pill</span><span class="px">tags only</span></div>
|
|
</div>
|
|
</body>
|
|
</html>
|