grant/keysat-root
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add design/ contract; archive prior design system as provenance

Browse Source 
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).
This commit is contained in:
Keysat
2026-06-16 11:29:28 -05:00
parent ce5edaed29
commit 532229d488
51 changed files with 700 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
design/_imports/2026-06-16-claude-design-system/preview/radii.html
+26
View File
@@ -0,0 +1,26 @@
<!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>