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/forms.html
+31
View File
@@ -0,0 +1,31 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Keysat — Form Inputs</title>
<link rel="stylesheet" href="../colors_and_type.css">
<style>
body { margin: 0; padding: 22px 24px; font-family: var(--font-body); background: var(--bg-page); color: var(--ink-900); }
.field { margin-bottom: 14px; }
.label { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-700); margin-bottom: 6px; letter-spacing: 0.01em; }
.meta { font-size: 11.5px; color: var(--ink-500); margin-top: 5px; }
.input { width: 100%; padding: 10px 12px; font-family: var(--font-body); font-size: 14px; border: 1px solid rgba(14,31,51,0.20); border-radius: 8px; background: #FFFFFF; color: var(--ink-900); box-sizing: border-box; transition: border 120ms, box-shadow 120ms; }
.input:focus { outline: none; border-color: #1E3A5F; box-shadow: 0 0 0 3px rgba(30,58,95,0.20); }
.input.error { border-color: #B23A3A; box-shadow: 0 0 0 3px rgba(178,58,58,0.15); }
.input.mono { font-family: var(--font-mono); font-size: 13px; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.err { color: #B23A3A; font-size: 11.5px; margin-top: 4px; }
.check { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; }
.check input { accent-color: #1E3A5F; width: 16px; height: 16px; }
</style>
</head>
<body>
<div class="row">
<div class="field"><label class="label">Product name</label><input class="input" value="Sundial 2.0"><div class="meta">Shown on receipts and the public purchase page.</div></div>
<div class="field"><label class="label">Price</label><input class="input mono" value="50,000 sats"></div>
</div>
<div class="field"><label class="label">Public key (PEM)</label><input class="input mono" value="-----BEGIN PUBLIC KEY-----…"></div>
<div class="field"><label class="label">License email</label><input class="input error" value="not-an-email"><div class="err">Enter a valid email.</div></div>
<label class="check"><input type="checkbox" checked> Send activation email automatically</label>
</body>
</html>