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/cards.html
+45
View File
@@ -0,0 +1,45 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Keysat — Cards</title>
<link rel="stylesheet" href="../colors_and_type.css">
<style>
body { margin: 0; padding: 22px; font-family: var(--font-body); background: var(--bg-page); color: var(--ink-900); }
.grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.card { background: #FBF9F2; border: 1px solid rgba(14,31,51,0.12); border-radius: 12px; padding: 16px; box-shadow: 0 1px 2px rgba(14,31,51,0.06); }
.card.featured { background: #FBF9F2; box-shadow: 0 0 0 1px #BFA068 inset, 0 2px 4px rgba(14,31,51,0.06), 0 4px 12px rgba(14,31,51,0.06); }
.card.dark { background: #0E1F33; color: #F5F1E8; border-color: rgba(245,241,232,0.18); }
.eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #8A6F3D; margin-bottom: 6px; }
.card.dark .eyebrow { color: #BFA068; }
.title { font-family: var(--font-display); font-size: 17px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 6px; }
.body { font-size: 12.5px; color: var(--ink-500); line-height: 1.5; }
.card.dark .body { color: rgba(245,241,232,0.7); }
.row { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
.price { font-family: var(--font-display); font-weight: 800; font-size: 18px; }
.meta-mono { font-family: var(--font-mono); font-size: 11px; color: var(--ink-400); }
</style>
</head>
<body>
<div class="grid">
<div class="card">
<div class="eyebrow">Standard</div>
<div class="title">Sundial 2.0</div>
<div class="body">3 active licenses, 1 trial. Default policy is 1-year, single-seat.</div>
<div class="row"><span class="price">50,000 sats</span><span class="meta-mono">12 sold</span></div>
</div>
<div class="card featured">
<div class="eyebrow">Featured · Gold stroke</div>
<div class="title">Sundial Pro</div>
<div class="body">Multi-seat, perpetual. Includes priority email support from the creator.</div>
<div class="row"><span class="price">200,000 sats</span><span class="meta-mono">3 sold</span></div>
</div>
<div class="card dark">
<div class="eyebrow">Dark surface</div>
<div class="title">Sovereign by default</div>
<div class="body">Backed up automatically by StartOS as part of your normal backup routine.</div>
<div class="row"><span class="price" style="color:#BFA068">₿ 0.00214</span><span class="meta-mono">≈ $128.40</span></div>
</div>
</div>
</body>
</html>