Add design/ contract; archive prior design system as provenance

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).
2026-06-16 11:29:28 -05:00
parent ce5edaed29
commit 532229d488
51 changed files with 700 additions and 1 deletions
@@ -0,0 +1,36 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>Keysat — Sign in</title>
+<link rel="stylesheet" href="../../colors_and_type.css">
+<style>
+  body { margin: 0; min-height: 100vh; font-family: var(--font-body); color: var(--ink-900); background: var(--cream-100); background-image: radial-gradient(rgba(14,31,51,0.025) 1px, transparent 1px), radial-gradient(rgba(138,111,61,0.022) 1px, transparent 1px); background-size: 3px 3px, 7px 7px; display: flex; align-items: center; justify-content: center; padding: 40px 20px; }
+  .card { width: 420px; max-width: 100%; background: var(--cream-50); border: 1px solid var(--border-1); border-radius: 14px; box-shadow: 0 0 0 1px var(--gold-500) inset, var(--shadow-md); padding: 36px 36px 32px; position: relative; }
+  .card::before { content: ''; position: absolute; left: 14px; right: 14px; top: 14px; height: 1px; background: var(--gold-500); opacity: 0.4; }
+  .brand { display: flex; align-items: center; gap: 10px; justify-content: center; margin-bottom: 6px; }
+  .brand img { width: 56px; height: 56px; }
+  h1 { font-family: var(--font-display); font-weight: 500; font-size: 26px; letter-spacing: -0.02em; color: var(--navy-950); margin: 14px 0 4px; text-align: center; }
+  .sub { text-align: center; font-size: 13.5px; color: var(--ink-500); margin-bottom: 24px; }
+  .lbl { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-700); margin-bottom: 6px; }
+  .input { width: 100%; padding: 11px 13px; font-family: var(--font-mono); font-size: 13px; border: 1px solid var(--border-2); border-radius: 8px; background: white; box-sizing: border-box; }
+  .input:focus { outline: none; border-color: var(--navy-700); box-shadow: 0 0 0 3px rgba(30,58,95,0.18); }
+  .btn { width: 100%; padding: 12px; background: var(--navy-800); color: var(--cream-50); border: 0; border-radius: 8px; font-family: var(--font-body); font-weight: 600; font-size: 14px; cursor: pointer; margin-top: 14px; transition: background 120ms; }
+  .btn:hover { background: var(--navy-900); }
+  .hint { font-size: 12px; color: var(--ink-500); margin-top: 8px; line-height: 1.5; }
+  .footnote { text-align: center; font-size: 12px; color: var(--ink-500); margin-top: 22px; }
+</style>
+</head>
+<body>
+  <div class="card">
+    <div class="brand"><img src="../../assets/keysat-mark.svg" alt=""></div>
+    <h1>Keysat admin</h1>
+    <div class="sub">Paste the admin API key from your StartOS service page.</div>
+    <label class="lbl">Admin API key</label>
+    <input class="input" placeholder="ks_admin_…">
+    <div class="hint">Find this in StartOS → Keysat → Properties → adminApiKey.</div>
+    <button class="btn">Sign in</button>
+    <div class="footnote">Connected to <code style="font-family: var(--font-mono); font-size: 11.5px">aurora.keysat.local</code></div>
+  </div>
+</body>
+</html>