Initial backup of root workspace files
Glue files not covered by subproject repos: top-level docs, logo, keysat-design-system, and crosscheck tests. Subproject folders are gitignored (each has its own Gitea remote).
This commit is contained in:
Keysat
@@ -0,0 +1,42 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Keysat — Badges & Tags</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); }
|
||||
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
|
||||
.label { font-family: var(--font-mono); font-size: 11px; color: var(--ink-500); min-width: 78px; }
|
||||
.badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; line-height: 1.4; border: 1px solid transparent; }
|
||||
.b-success { background: #E3F0EA; color: #205c47; border-color: rgba(45,122,95,0.25); }
|
||||
.b-warning { background: #F7EFD7; color: #7a5814; border-color: rgba(184,134,31,0.3); }
|
||||
.b-danger { background: #F4E0E0; color: #8a2828; border-color: rgba(178,58,58,0.25); }
|
||||
.b-info { background: #E4EAF1; color: #1E3A5F; border-color: rgba(30,58,95,0.20); }
|
||||
.b-neutral { background: #EDE7D7; color: #2C3E54; border-color: rgba(14,31,51,0.10); }
|
||||
.b-gold { background: transparent; color: #8A6F3D; border-color: #BFA068; }
|
||||
.dot { width: 6px; height: 6px; border-radius: 50%; }
|
||||
.pillet { font-size: 11.5px; padding: 4px 10px; border-radius: 999px; background: #FBF9F2; border: 1px solid rgba(14,31,51,0.12); color: var(--ink-700); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="row"><span class="label">status</span>
|
||||
<span class="badge b-success"><span class="dot" style="background:#2D7A5F"></span>Active</span>
|
||||
<span class="badge b-warning"><span class="dot" style="background:#B8861F"></span>Trial</span>
|
||||
<span class="badge b-danger"><span class="dot" style="background:#B23A3A"></span>Expired</span>
|
||||
<span class="badge b-info"><span class="dot" style="background:#2A4A75"></span>Pending</span>
|
||||
<span class="badge b-neutral">Draft</span>
|
||||
</div>
|
||||
<div class="row"><span class="label">accent</span>
|
||||
<span class="badge b-gold">★ Verified creator</span>
|
||||
<span class="badge b-gold">Lifetime</span>
|
||||
</div>
|
||||
<div class="row"><span class="label">pillets</span>
|
||||
<span class="pillet">Rust</span>
|
||||
<span class="pillet">TypeScript</span>
|
||||
<span class="pillet">Python</span>
|
||||
<span class="pillet">Go (planned)</span>
|
||||
<span class="pillet">Swift (planned)</span>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,27 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Keysat — Logo Mark</title>
|
||||
<link rel="stylesheet" href="../colors_and_type.css">
|
||||
<style>
|
||||
body { margin: 0; padding: 0; font-family: var(--font-body); background: var(--bg-page); color: var(--ink-900); display: grid; grid-template-columns: 1fr 1fr; height: 220px; }
|
||||
.paper-texture { background-image: radial-gradient(rgba(14,31,51,0.04) 1px, transparent 1.4px), radial-gradient(rgba(138,111,61,0.035) 1px, transparent 1.2px); background-size: 3px 3px, 7px 7px; background-color: #F5F1E8; }
|
||||
.cell { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
|
||||
.cell.dark { background: #0E1F33; color: #F5F1E8; }
|
||||
img.logo { width: 110px; height: 110px; }
|
||||
.label { font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; opacity: 0.7; font-weight: 600; }
|
||||
.wordmark { font-family: var(--font-display); font-weight: 900; font-size: 40px; letter-spacing: -0.02em; line-height: 1; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="cell paper-texture">
|
||||
<img src="../assets/keysat-logo-thumbnail.png" alt="Keysat logo" class="logo">
|
||||
<div class="label">Logo · cream</div>
|
||||
</div>
|
||||
<div class="cell dark">
|
||||
<div class="wordmark" style="color: #F5F1E8">KEYSAT</div>
|
||||
<div class="label">Wordmark · navy surface</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,46 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Keysat — Buttons</title>
|
||||
<link rel="stylesheet" href="../colors_and_type.css">
|
||||
<style>
|
||||
body { margin: 0; padding: 24px; font-family: var(--font-body); background: var(--bg-page); }
|
||||
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
|
||||
.label { font-family: var(--font-mono); font-size: 11px; color: var(--ink-500); min-width: 84px; }
|
||||
.btn { font-family: var(--font-body); font-weight: 600; font-size: 14px; padding: 10px 18px; border-radius: 8px; border: 1px solid transparent; cursor: pointer; transition: all 120ms; line-height: 1; }
|
||||
.btn.primary { background: #1E3A5F; color: #FBF9F2; border-color: #1E3A5F; }
|
||||
.btn.primary.hover { background: #142A47; border-color: #142A47; }
|
||||
.btn.primary.press { background: #0E1F33; border-color: #0E1F33; transform: translateY(1px); }
|
||||
.btn.secondary { background: #FBF9F2; color: #1E3A5F; border-color: rgba(14,31,51,0.20); }
|
||||
.btn.secondary.hover { background: #EDE7D7; }
|
||||
.btn.ghost { background: transparent; color: #1E3A5F; border-color: transparent; }
|
||||
.btn.ghost.hover { background: rgba(14,31,51,0.05); }
|
||||
.btn.gold { background: transparent; color: #8A6F3D; border-color: #BFA068; }
|
||||
.btn.danger { background: transparent; color: #B23A3A; border-color: rgba(178,58,58,0.4); }
|
||||
.btn.sm { font-size: 12.5px; padding: 7px 12px; border-radius: 6px; }
|
||||
.btn.lg { font-size: 16px; padding: 14px 24px; }
|
||||
.btn.icon { display: inline-flex; align-items: center; gap: 8px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="row"><span class="label">primary</span>
|
||||
<button class="btn primary">Connect BTCPay</button>
|
||||
<button class="btn primary hover">Hover</button>
|
||||
<button class="btn primary press">Press</button>
|
||||
<button class="btn primary" disabled style="opacity:0.4;cursor:not-allowed">Disabled</button>
|
||||
</div>
|
||||
<div class="row"><span class="label">secondary</span>
|
||||
<button class="btn secondary">View docs</button>
|
||||
<button class="btn secondary hover">Hover</button>
|
||||
<button class="btn ghost">Cancel</button>
|
||||
<button class="btn ghost hover">Hover</button>
|
||||
</div>
|
||||
<div class="row"><span class="label">utility</span>
|
||||
<button class="btn gold">Verified creator</button>
|
||||
<button class="btn danger">Revoke license</button>
|
||||
<button class="btn primary sm">Sign in</button>
|
||||
<button class="btn primary lg">Install Keysat</button>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -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>
|
||||
@@ -0,0 +1,35 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Keysat — Cream & Gold</title>
|
||||
<link rel="stylesheet" href="../colors_and_type.css">
|
||||
<style>
|
||||
body { margin: 0; padding: 20px; font-family: var(--font-body); background: var(--bg-page); }
|
||||
.row { display: flex; gap: 0; border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-sm); margin-bottom: 14px; border: 1px solid var(--border-1); }
|
||||
.sw { flex: 1; padding: 14px 12px; min-height: 70px; display: flex; flex-direction: column; justify-content: space-between; }
|
||||
.sw .name { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.85; }
|
||||
.sw .hex { font-family: var(--font-mono); font-size: 11px; opacity: 0.85; }
|
||||
.label { font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-700); margin: 0 4px 6px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="label">Cream — paper surfaces</div>
|
||||
<div class="row">
|
||||
<div class="sw" style="background:#FBF9F2;color:#0E1F33"><span class="name">50</span><span class="hex">#FBF9F2</span></div>
|
||||
<div class="sw" style="background:#F5F1E8;color:#0E1F33"><span class="name">100 ★</span><span class="hex">#F5F1E8</span></div>
|
||||
<div class="sw" style="background:#EDE7D7;color:#0E1F33"><span class="name">200</span><span class="hex">#EDE7D7</span></div>
|
||||
<div class="sw" style="background:#E1D8C0;color:#0E1F33"><span class="name">300</span><span class="hex">#E1D8C0</span></div>
|
||||
<div class="sw" style="background:#C9BC9A;color:#0E1F33"><span class="name">400</span><span class="hex">#C9BC9A</span></div>
|
||||
</div>
|
||||
<div class="label">Gold — accent (use sparingly)</div>
|
||||
<div class="row">
|
||||
<div class="sw" style="background:#8A6F3D;color:#FBF9F2"><span class="name">700</span><span class="hex">#8A6F3D</span></div>
|
||||
<div class="sw" style="background:#A88652;color:#FBF9F2"><span class="name">600</span><span class="hex">#A88652</span></div>
|
||||
<div class="sw" style="background:#BFA068;color:#0E1F33"><span class="name">500 ★</span><span class="hex">#BFA068</span></div>
|
||||
<div class="sw" style="background:#D4B985;color:#0E1F33"><span class="name">400</span><span class="hex">#D4B985</span></div>
|
||||
<div class="sw" style="background:#E5CFA5;color:#0E1F33"><span class="name">300</span><span class="hex">#E5CFA5</span></div>
|
||||
<div class="sw" style="background:#F0E2C5;color:#0E1F33"><span class="name">200</span><span class="hex">#F0E2C5</span></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,28 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Keysat — Color Palette (Brand)</title>
|
||||
<link rel="stylesheet" href="../colors_and_type.css">
|
||||
<style>
|
||||
body { margin: 0; padding: 20px; font-family: var(--font-body); background: var(--bg-page); }
|
||||
.row { display: flex; gap: 0; border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-sm); margin-bottom: 14px; }
|
||||
.sw { flex: 1; padding: 14px 12px; min-height: 78px; display: flex; flex-direction: column; justify-content: space-between; }
|
||||
.sw .name { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.85; }
|
||||
.sw .hex { font-family: var(--font-mono); font-size: 11px; opacity: 0.85; }
|
||||
.label { font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-700); margin: 0 4px 6px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="label">Navy — primary brand</div>
|
||||
<div class="row">
|
||||
<div class="sw" style="background:#0E1F33;color:#F5F1E8"><span class="name">950</span><span class="hex">#0E1F33</span></div>
|
||||
<div class="sw" style="background:#142A47;color:#F5F1E8"><span class="name">900</span><span class="hex">#142A47</span></div>
|
||||
<div class="sw" style="background:#1E3A5F;color:#F5F1E8"><span class="name">800 ★</span><span class="hex">#1E3A5F</span></div>
|
||||
<div class="sw" style="background:#2A4A75;color:#F5F1E8"><span class="name">700</span><span class="hex">#2A4A75</span></div>
|
||||
<div class="sw" style="background:#5074A1;color:#F5F1E8"><span class="name">500</span><span class="hex">#5074A1</span></div>
|
||||
<div class="sw" style="background:#A6B7CF;color:#0E1F33"><span class="name">300</span><span class="hex">#A6B7CF</span></div>
|
||||
<div class="sw" style="background:#E4EAF1;color:#0E1F33"><span class="name">100</span><span class="hex">#E4EAF1</span></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,37 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Keysat — Semantic Colors</title>
|
||||
<link rel="stylesheet" href="../colors_and_type.css">
|
||||
<style>
|
||||
body { margin: 0; padding: 20px; font-family: var(--font-body); background: var(--bg-page); }
|
||||
.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
|
||||
.item { border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--border-1); background: white; }
|
||||
.swatch { padding: 14px; min-height: 56px; display: flex; align-items: center; gap: 10px; }
|
||||
.dot { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.1); }
|
||||
.name { font-size: 12px; font-weight: 700; color: var(--ink-900); }
|
||||
.meta { padding: 8px 14px 12px; font-family: var(--font-mono); font-size: 11px; color: var(--ink-500); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="grid">
|
||||
<div class="item">
|
||||
<div class="swatch" style="background:#E3F0EA"><span class="dot" style="background:#2D7A5F"></span><span class="name">Success</span></div>
|
||||
<div class="meta">#2D7A5F</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="swatch" style="background:#F7EFD7"><span class="dot" style="background:#B8861F"></span><span class="name">Warning</span></div>
|
||||
<div class="meta">#B8861F</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="swatch" style="background:#F4E0E0"><span class="dot" style="background:#B23A3A"></span><span class="name">Danger</span></div>
|
||||
<div class="meta">#B23A3A</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="swatch" style="background:#E4EAF1"><span class="dot" style="background:#2A4A75"></span><span class="name">Info</span></div>
|
||||
<div class="meta">#2A4A75</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -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>
|
||||
@@ -0,0 +1,35 @@
|
||||
<!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>
|
||||
@@ -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>
|
||||
@@ -0,0 +1,25 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Keysat — Shadows</title>
|
||||
<link rel="stylesheet" href="../colors_and_type.css">
|
||||
<style>
|
||||
body { margin: 0; padding: 28px 24px; font-family: var(--font-body); background: var(--bg-page); }
|
||||
.grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
|
||||
.item { display: flex; flex-direction: column; align-items: center; gap: 8px; }
|
||||
.box { width: 100px; height: 64px; background: #FBF9F2; border-radius: 8px; border: 1px solid rgba(14,31,51,0.08); }
|
||||
.name { font-family: var(--font-mono); font-size: 11px; color: var(--ink-700); }
|
||||
.desc { font-size: 10px; color: var(--ink-400); text-align:center; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="grid">
|
||||
<div class="item"><div class="box" style="box-shadow:0 1px 1px rgba(14,31,51,0.04)"></div><span class="name">shadow-xs</span><span class="desc">resting</span></div>
|
||||
<div class="item"><div class="box" style="box-shadow:0 1px 2px rgba(14,31,51,0.06), 0 1px 1px rgba(14,31,51,0.03)"></div><span class="name">shadow-sm</span><span class="desc">cards</span></div>
|
||||
<div class="item"><div class="box" style="box-shadow:0 2px 4px rgba(14,31,51,0.06), 0 4px 12px rgba(14,31,51,0.06)"></div><span class="name">shadow-md</span><span class="desc">elevated</span></div>
|
||||
<div class="item"><div class="box" style="box-shadow:0 4px 8px rgba(14,31,51,0.07), 0 12px 32px rgba(14,31,51,0.10)"></div><span class="name">shadow-lg</span><span class="desc">popovers</span></div>
|
||||
<div class="item"><div class="box" style="box-shadow:0 8px 16px rgba(14,31,51,0.10), 0 24px 64px rgba(14,31,51,0.14)"></div><span class="name">shadow-xl</span><span class="desc">modals</span></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,28 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Keysat — Spacing</title>
|
||||
<link rel="stylesheet" href="../colors_and_type.css">
|
||||
<style>
|
||||
body { margin: 0; padding: 22px; font-family: var(--font-body); background: var(--bg-page); }
|
||||
.row { display: flex; align-items: center; gap: 14px; padding: 6px 0; }
|
||||
.name { font-family: var(--font-mono); font-size: 12px; color: var(--ink-700); width: 64px; }
|
||||
.px { font-family: var(--font-mono); font-size: 11px; color: var(--ink-400); width: 38px; }
|
||||
.bar { background: #1E3A5F; height: 14px; border-radius: 2px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="row"><span class="name">--sp-1</span><span class="px">4px</span><div class="bar" style="width:4px"></div></div>
|
||||
<div class="row"><span class="name">--sp-2</span><span class="px">8px</span><div class="bar" style="width:8px"></div></div>
|
||||
<div class="row"><span class="name">--sp-3</span><span class="px">12</span><div class="bar" style="width:12px"></div></div>
|
||||
<div class="row"><span class="name">--sp-4</span><span class="px">16</span><div class="bar" style="width:16px"></div></div>
|
||||
<div class="row"><span class="name">--sp-5</span><span class="px">20</span><div class="bar" style="width:20px"></div></div>
|
||||
<div class="row"><span class="name">--sp-6</span><span class="px">24</span><div class="bar" style="width:24px"></div></div>
|
||||
<div class="row"><span class="name">--sp-7</span><span class="px">32</span><div class="bar" style="width:32px"></div></div>
|
||||
<div class="row"><span class="name">--sp-8</span><span class="px">40</span><div class="bar" style="width:40px"></div></div>
|
||||
<div class="row"><span class="name">--sp-9</span><span class="px">56</span><div class="bar" style="width:56px"></div></div>
|
||||
<div class="row"><span class="name">--sp-10</span><span class="px">72</span><div class="bar" style="width:72px"></div></div>
|
||||
<div class="row"><span class="name">--sp-11</span><span class="px">96</span><div class="bar" style="width:96px"></div></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,26 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Keysat — Body & Mono Type</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); }
|
||||
.meta { font-family: var(--font-mono); font-size: 11px; color: var(--ink-500); margin-top: 4px; }
|
||||
.stack > div { margin-bottom: 14px; }
|
||||
.lead { font-size: 18px; line-height: 1.5; color: var(--ink-700); }
|
||||
.body { font-size: 15px; line-height: 1.55; color: var(--ink-700); }
|
||||
.small { font-size: 13.5px; line-height: 1.5; color: var(--ink-500); }
|
||||
.mono { font-family: var(--font-mono); font-size: 13px; color: var(--ink-900); }
|
||||
.key { background: white; border: 1px solid var(--border-1); padding: 8px 12px; border-radius: 6px; display: inline-block; font-family: var(--font-mono); font-size: 13px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="stack">
|
||||
<div><div class="lead">Buyers pay in Bitcoin via your own BTCPay. Your software verifies signed keys offline.</div><div class="meta">Inter · 400 · lead · 18/27</div></div>
|
||||
<div><div class="body">A complete sell-your-software stack, sovereign end-to-end. No SaaS, no middleman.</div><div class="meta">Inter · 400 · body · 15/23</div></div>
|
||||
<div><div class="small">Backed up automatically by StartOS as part of your normal backup routine.</div><div class="meta">Inter · 400 · small · 13.5/20</div></div>
|
||||
<div><span class="key">KS-9F2A-7C41-XK22-6D8E</span><div class="meta">JetBrains Mono · 500 · license key · 13</div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,34 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Keysat — Display Type</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); }
|
||||
.meta { font-family: var(--font-mono); font-size: 11px; color: var(--ink-500); margin-top: 4px; }
|
||||
.stack > div { margin-bottom: 14px; }
|
||||
.display { font-family: var(--font-display); font-weight: 800; line-height: 1.02; letter-spacing: -0.025em; }
|
||||
.h1 { font-family: var(--font-display); font-size: 44px; font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; }
|
||||
.h2 { font-family: var(--font-display); font-size: 32px; font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; }
|
||||
.eyebrow { font-family: var(--font-body); font-size: 11.5px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-700); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="stack">
|
||||
<div>
|
||||
<div class="eyebrow">Display</div>
|
||||
<div class="display" style="font-size: 56px;">Sovereign by default.</div>
|
||||
<div class="meta">Archivo · 800 · 56/58 · -2.5%</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="h1">Self-hosted licensing for indie creators</div>
|
||||
<div class="meta">Archivo · 800 · h1 · 44/48</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="h2">You own the signing key</div>
|
||||
<div class="meta">Archivo · 700 · h2 · 32/37</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user