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).
36 lines
2.0 KiB
HTML
36 lines
2.0 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Keysat — License Key Display</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); }
|
|
.stack > * + * { margin-top: 12px; }
|
|
.label { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #8A6F3D; }
|
|
.key-card { background: white; border: 1px solid rgba(14,31,51,0.12); border-radius: 10px; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; box-shadow: 0 1px 2px rgba(14,31,51,0.05); }
|
|
.key { font-family: var(--font-mono); font-size: 16px; font-weight: 600; color: #0E1F33; letter-spacing: 0.02em; }
|
|
.copy { font-size: 11.5px; color: var(--ink-500); border: 1px solid rgba(14,31,51,0.15); padding: 5px 10px; border-radius: 6px; background: #FBF9F2; cursor: pointer; }
|
|
.key-card.featured { box-shadow: 0 0 0 1px #BFA068 inset, 0 2px 4px rgba(14,31,51,0.06); background: #FBF9F2; }
|
|
.pubkey { font-family: var(--font-mono); font-size: 12px; color: var(--ink-700); background: #FBF9F2; border: 1px dashed rgba(14,31,51,0.2); padding: 10px 12px; border-radius: 8px; line-height: 1.6; word-break: break-all; }
|
|
.small { font-size: 11px; color: var(--ink-500); margin-top: 4px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="stack">
|
|
<div>
|
|
<div class="label" style="margin-bottom:6px">License key</div>
|
|
<div class="key-card"><span class="key">KS-9F2A-7C41-XK22-6D8E</span><span class="copy">Copy</span></div>
|
|
</div>
|
|
<div>
|
|
<div class="label" style="margin-bottom:6px">Lifetime · gold stroke</div>
|
|
<div class="key-card featured"><span class="key">KS-LIFE-2026-AURM-PR01</span><span class="copy">Copy</span></div>
|
|
</div>
|
|
<div>
|
|
<div class="label" style="margin-bottom:6px">Issuer public key</div>
|
|
<div class="pubkey">mz7q8r4t1v…h3k2pXq9wL · Ed25519</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|