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).
257 lines
14 KiB
HTML
257 lines
14 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Keysat — Logo directions</title>
|
|
<link rel="stylesheet" href="../colors_and_type.css">
|
|
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
<style>
|
|
body { margin: 0; font-family: 'Manrope', sans-serif; background: var(--cream-100); }
|
|
.ab { background: #FBF9F2; padding: 36px 40px; box-sizing: border-box; min-height: 100%; position: relative; background-image: radial-gradient(rgba(14,31,51,0.022) 1px, transparent 1px), radial-gradient(rgba(138,111,61,0.020) 1px, transparent 1px); background-size: 3px 3px, 7px 7px; }
|
|
.label-tag { position: absolute; top: 14px; right: 18px; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; color: #8A6F3D; letter-spacing: 0.18em; text-transform: uppercase; }
|
|
.name { font-family: 'Manrope', sans-serif; font-weight: 600; font-size: 13px; letter-spacing: -0.01em; color: #0E1F33; margin-bottom: 24px; }
|
|
.name span { font-weight: 400; color: #8A6F3D; margin-left: 8px; font-size: 11px; letter-spacing: 0.04em; }
|
|
.grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
|
|
.row { display: flex; align-items: center; gap: 32px; padding: 22px; background: rgba(245,241,232,0.55); border: 1px solid rgba(14,31,51,0.08); border-radius: 8px; }
|
|
.row .marks { display: flex; align-items: center; gap: 18px; }
|
|
.row .marks svg.lg { width: 84px; height: 84px; }
|
|
.row .marks svg.md { width: 40px; height: 40px; }
|
|
.row .marks svg.sm { width: 20px; height: 20px; }
|
|
.row .lock { display: flex; align-items: center; gap: 12px; padding-left: 24px; border-left: 1px solid rgba(14,31,51,0.12); }
|
|
.row .lock svg { width: 36px; height: 36px; }
|
|
.row .lock .wm { font-family: 'Manrope', sans-serif; font-weight: 500; font-size: 22px; letter-spacing: 0.32em; color: #1E3A5F; text-transform: uppercase; }
|
|
.scenarios { margin-top: 16px; display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
|
|
.scenarios .chip { display: flex; align-items: center; gap: 8px; padding: 6px 12px; background: #FBF9F2; border: 1px solid rgba(14,31,51,0.12); border-radius: 999px; font-size: 11.5px; color: #2C3E54; }
|
|
.scenarios .chip svg { width: 14px; height: 14px; }
|
|
.scenarios .browser-tab { display: flex; align-items: center; gap: 6px; padding: 6px 12px; background: rgba(14,31,51,0.06); border-radius: 6px 6px 0 0; font-size: 11px; color: #2C3E54; }
|
|
.scenarios .browser-tab svg { width: 14px; height: 14px; }
|
|
.scenarios .dark { background: #0E1F33; padding: 8px 14px; border-radius: 6px; display: flex; align-items: center; gap: 8px; color: #FBF9F2; font-family: 'Manrope'; font-weight: 500; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; }
|
|
.pros { margin-top: 16px; font-size: 12px; color: #5A6B7F; line-height: 1.6; padding-top: 12px; border-top: 1px dashed rgba(14,31,51,0.15); }
|
|
.pros strong { color: #0E1F33; font-weight: 600; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
|
|
<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
|
|
<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
|
|
<script type="text/babel" src="design-canvas.jsx"></script>
|
|
|
|
<div id="root"></div>
|
|
|
|
<!-- ============== 1. BASTION / CITADEL ============== -->
|
|
<template id="logo-1">
|
|
<svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<!-- Battlements / crenellations top -->
|
|
<path d="M16 32 L16 24 L24 24 L24 30 L32 30 L32 22 L40 22 L40 30 L48 30 L48 24 L52 24 L52 30 L60 30 L60 22 L68 22 L68 30 L76 30 L76 24 L84 24 L84 32 Z" fill="#1E3A5F"/>
|
|
<!-- Main keep body -->
|
|
<rect x="16" y="32" width="68" height="50" fill="#1E3A5F"/>
|
|
<!-- Gate arch -->
|
|
<path d="M42 82 L42 64 Q42 56 50 56 Q58 56 58 64 L58 82 Z" fill="#FBF9F2"/>
|
|
<!-- Two arrow slits -->
|
|
<rect x="26" y="44" width="3" height="12" fill="#FBF9F2"/>
|
|
<rect x="71" y="44" width="3" height="12" fill="#FBF9F2"/>
|
|
<!-- Gold cross-key behind, peeking from gate top -->
|
|
<circle cx="50" cy="48" r="5" fill="none" stroke="#BFA068" stroke-width="2"/>
|
|
<rect x="48.5" y="50" width="3" height="9" fill="#BFA068"/>
|
|
</svg>
|
|
</template>
|
|
|
|
<!-- ============== 2. WAX SEAL / SIGNET ============== -->
|
|
<template id="logo-2">
|
|
<svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<!-- Outer ribbon edge (wax seal scallop) -->
|
|
<g fill="#1E3A5F">
|
|
<circle cx="50" cy="50" r="38"/>
|
|
</g>
|
|
<!-- Scalloped notches around -->
|
|
<g fill="#FBF9F2">
|
|
<circle cx="50" cy="10" r="2"/>
|
|
<circle cx="78" cy="22" r="2"/>
|
|
<circle cx="90" cy="50" r="2"/>
|
|
<circle cx="78" cy="78" r="2"/>
|
|
<circle cx="50" cy="90" r="2"/>
|
|
<circle cx="22" cy="78" r="2"/>
|
|
<circle cx="10" cy="50" r="2"/>
|
|
<circle cx="22" cy="22" r="2"/>
|
|
</g>
|
|
<!-- Inner gold ring -->
|
|
<circle cx="50" cy="50" r="32" fill="none" stroke="#BFA068" stroke-width="1"/>
|
|
<!-- K monogram, slab -->
|
|
<g fill="#FBF9F2">
|
|
<rect x="36" y="32" width="6" height="36"/>
|
|
<path d="M42 50 L60 32 L66 32 L48 50 L66 68 L60 68 L42 50 Z"/>
|
|
</g>
|
|
<!-- Tiny bullet stars/dots above and below -->
|
|
<circle cx="50" cy="22" r="1.5" fill="#BFA068"/>
|
|
<circle cx="50" cy="78" r="1.5" fill="#BFA068"/>
|
|
</svg>
|
|
</template>
|
|
|
|
<!-- ============== 3. VAULT DOOR ============== -->
|
|
<template id="logo-3">
|
|
<svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<!-- Outer vault frame square -->
|
|
<rect x="10" y="10" width="80" height="80" rx="4" fill="#1E3A5F"/>
|
|
<!-- Inner door circle -->
|
|
<circle cx="50" cy="50" r="30" fill="#FBF9F2"/>
|
|
<circle cx="50" cy="50" r="30" fill="none" stroke="#BFA068" stroke-width="1"/>
|
|
<!-- Bolts at 4 corners -->
|
|
<circle cx="20" cy="20" r="2.5" fill="#BFA068"/>
|
|
<circle cx="80" cy="20" r="2.5" fill="#BFA068"/>
|
|
<circle cx="20" cy="80" r="2.5" fill="#BFA068"/>
|
|
<circle cx="80" cy="80" r="2.5" fill="#BFA068"/>
|
|
<!-- Spokes (8 of them) -->
|
|
<g stroke="#1E3A5F" stroke-width="3" stroke-linecap="round">
|
|
<line x1="50" y1="26" x2="50" y2="36"/>
|
|
<line x1="50" y1="64" x2="50" y2="74"/>
|
|
<line x1="26" y1="50" x2="36" y2="50"/>
|
|
<line x1="64" y1="50" x2="74" y2="50"/>
|
|
<line x1="33" y1="33" x2="40" y2="40"/>
|
|
<line x1="60" y1="60" x2="67" y2="67"/>
|
|
<line x1="67" y1="33" x2="60" y2="40"/>
|
|
<line x1="33" y1="67" x2="40" y2="60"/>
|
|
</g>
|
|
<!-- Center hub -->
|
|
<circle cx="50" cy="50" r="5" fill="#1E3A5F"/>
|
|
<circle cx="50" cy="50" r="2" fill="#BFA068"/>
|
|
</svg>
|
|
</template>
|
|
|
|
<!-- ============== 4. SHIELD WITH KEY TEETH ============== -->
|
|
<template id="logo-4">
|
|
<svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<!-- Heater shield outline -->
|
|
<path d="M20 18 L80 18 L80 50 Q80 76 50 86 Q20 76 20 50 Z" fill="#1E3A5F"/>
|
|
<!-- Key teeth notched out of bottom edge -->
|
|
<path d="M38 80 L38 84 L42 84 L42 80 L46 80 L46 84 L50 84 L50 78 Q50 84 46 86 Q42 87 38 86 Z" fill="#FBF9F2"/>
|
|
<!-- Shield bezel inset -->
|
|
<path d="M26 24 L74 24 L74 50 Q74 72 50 81 Q26 72 26 50 Z" fill="none" stroke="#BFA068" stroke-width="1"/>
|
|
<!-- Centered K -->
|
|
<g fill="#FBF9F2">
|
|
<rect x="40" y="34" width="5" height="34"/>
|
|
<path d="M45 51 L60 34 L66 34 L51 51 L66 68 L60 68 L45 51 Z"/>
|
|
</g>
|
|
<!-- Gold horizontal bar (chief) at top of shield -->
|
|
<rect x="26" y="28" width="48" height="2" fill="#BFA068"/>
|
|
</svg>
|
|
</template>
|
|
|
|
<!-- ============== 5. KEEP / TOWER SILHOUETTE ============== -->
|
|
<template id="logo-5">
|
|
<svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<!-- Base platform -->
|
|
<rect x="14" y="84" width="72" height="6" fill="#1E3A5F"/>
|
|
<!-- Two flanking turrets -->
|
|
<rect x="18" y="38" width="14" height="46" fill="#1E3A5F"/>
|
|
<rect x="68" y="38" width="14" height="46" fill="#1E3A5F"/>
|
|
<!-- Crenellations on turrets -->
|
|
<path d="M18 38 L18 32 L22 32 L22 36 L26 36 L26 30 L30 30 L30 36 L32 36 L32 38 Z" fill="#1E3A5F"/>
|
|
<path d="M68 38 L68 36 L70 36 L70 30 L74 30 L74 36 L78 36 L78 32 L82 32 L82 38 Z" fill="#1E3A5F"/>
|
|
<!-- Central main keep (taller) -->
|
|
<rect x="34" y="22" width="32" height="62" fill="#1E3A5F"/>
|
|
<!-- Crenellations on main keep -->
|
|
<path d="M34 22 L34 16 L40 16 L40 20 L46 20 L46 14 L54 14 L54 20 L60 20 L60 16 L66 16 L66 22 Z" fill="#1E3A5F"/>
|
|
<!-- Gate -->
|
|
<path d="M44 84 L44 70 Q44 64 50 64 Q56 64 56 70 L56 84 Z" fill="#FBF9F2"/>
|
|
<!-- Arrow slits center keep -->
|
|
<rect x="40" y="32" width="2" height="8" fill="#FBF9F2"/>
|
|
<rect x="58" y="32" width="2" height="8" fill="#FBF9F2"/>
|
|
<rect x="49" y="46" width="2" height="8" fill="#FBF9F2"/>
|
|
<!-- Gold flag on top of central keep -->
|
|
<rect x="49.5" y="6" width="1" height="10" fill="#BFA068"/>
|
|
<path d="M50.5 7 L58 9 L50.5 11 Z" fill="#BFA068"/>
|
|
</svg>
|
|
</template>
|
|
|
|
<!-- ============== 6. K-MONOGRAM AS BASTION ============== -->
|
|
<template id="logo-6">
|
|
<svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<!-- K vertical stem with crenellated top -->
|
|
<path d="M22 86 L22 28 L26 28 L26 22 L30 22 L30 28 L34 28 L34 22 L38 22 L38 86 Z" fill="#1E3A5F"/>
|
|
<!-- K upper diagonal with crenellated top -->
|
|
<path d="M38 56 L60 28 L64 22 L70 22 L70 28 L74 28 L74 22 L78 22 L78 30 L52 56 Z" fill="#1E3A5F"/>
|
|
<!-- K lower diagonal -->
|
|
<path d="M38 56 L52 56 L78 86 L66 86 Z" fill="#1E3A5F"/>
|
|
<!-- Gold horizontal foundation line -->
|
|
<rect x="20" y="84" width="60" height="2" fill="#BFA068"/>
|
|
<!-- Small dot/crest -->
|
|
<circle cx="30" cy="14" r="2" fill="#BFA068"/>
|
|
</svg>
|
|
</template>
|
|
|
|
<script type="text/babel" data-presets="env,react">
|
|
const LogoRow = ({tplId, title, sub, scenarios}) => {
|
|
const [html, setHtml] = React.useState('');
|
|
React.useEffect(() => {
|
|
const t = document.getElementById(tplId);
|
|
if (t) setHtml(t.innerHTML);
|
|
}, [tplId]);
|
|
return (
|
|
<div className="ab">
|
|
<div className="label-tag">{tplId.toUpperCase()}</div>
|
|
<div className="name">{title}<span>{sub}</span></div>
|
|
<div className="row">
|
|
<div className="marks">
|
|
<span className="lg" dangerouslySetInnerHTML={{__html: html}} style={{display:'inline-block',width:84,height:84}}/>
|
|
<span className="md" dangerouslySetInnerHTML={{__html: html}} style={{display:'inline-block',width:40,height:40}}/>
|
|
<span className="sm" dangerouslySetInnerHTML={{__html: html}} style={{display:'inline-block',width:20,height:20}}/>
|
|
</div>
|
|
<div className="lock">
|
|
<span dangerouslySetInnerHTML={{__html: html}} style={{display:'inline-block',width:36,height:36}}/>
|
|
<span className="wm">KEYSAT</span>
|
|
</div>
|
|
</div>
|
|
<div className="scenarios">
|
|
<div className="browser-tab">
|
|
<span dangerouslySetInnerHTML={{__html: html}} style={{display:'inline-block',width:14,height:14}}/>
|
|
keysat.com — Bitcoin licensing
|
|
</div>
|
|
<div className="dark">
|
|
<span dangerouslySetInnerHTML={{__html: html}} style={{display:'inline-block',width:18,height:18,filter:'invert(1) hue-rotate(180deg) brightness(1.5)'}}/>
|
|
KEYSAT
|
|
</div>
|
|
<div className="chip">
|
|
<span dangerouslySetInnerHTML={{__html: html}} style={{display:'inline-block',width:14,height:14}}/>
|
|
Settings
|
|
</div>
|
|
</div>
|
|
<div className="pros">{scenarios}</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const App = () => (
|
|
<DesignCanvas title="Keysat — Logo directions" subtitle="Six fortress / protection metaphors. Each shows the mark at three sizes, in a horizontal lockup, on a tab favicon, on a dark UI badge, and as a settings chip — so you can judge it small.">
|
|
<DCSection id="logos" title="Logo metaphors — fortress, vault, signet, keep">
|
|
<DCArtboard id="bastion" label="1 · Bastion / citadel" width={920} height={400}>
|
|
<LogoRow tplId="logo-1" title="Bastion" sub="Crenellated keep with gate + small gold key behind"
|
|
scenarios={<><strong>Vibe:</strong> sovereign land, fortified perimeter, castle doctrine. Reads instantly as 'protection.' Key is integrated. Risk: a touch literal / medieval.</>}/>
|
|
</DCArtboard>
|
|
<DCArtboard id="seal" label="2 · Wax seal / signet" width={920} height={400}>
|
|
<LogoRow tplId="logo-2" title="Signet seal" sub="Round wax seal with K monogram"
|
|
scenarios={<><strong>Vibe:</strong> notary, royal decree, signed document. Strong narrative tie to the Ed25519 / 'signed certificate' product. Reads as authenticity rather than fortress — softer 'protection.'</>}/>
|
|
</DCArtboard>
|
|
<DCArtboard id="vault" label="3 · Vault door" width={920} height={400}>
|
|
<LogoRow tplId="logo-3" title="Vault door" sub="Bank-vault door with bolts and spokes"
|
|
scenarios={<><strong>Vibe:</strong> hard security, hardened storage, Swiss bank. Most explicitly says 'fortress' of the six. Risk: very fintech / neobank cliché — many crypto products use this.</>}/>
|
|
</DCArtboard>
|
|
<DCArtboard id="shield" label="4 · Shield + key teeth" width={920} height={400}>
|
|
<LogoRow tplId="logo-4" title="Shield" sub="Heraldic shield with key-teeth notched bottom + K monogram"
|
|
scenarios={<><strong>Vibe:</strong> coat-of-arms, chivalric protection, K monogram inside. The teeth-as-notches detail is subtle and specific to Keysat. Strong fortress read.</>}/>
|
|
</DCArtboard>
|
|
<DCArtboard id="keep" label="5 · Keep / tower silhouette" width={920} height={400}>
|
|
<LogoRow tplId="logo-5" title="The Keep" sub="Three-tower medieval keep with central flag"
|
|
scenarios={<><strong>Vibe:</strong> Tower of London, stronghold, quiet authority. Most literal 'fortress.' Cleaner than direction 1 because of vertical emphasis. Pairs beautifully with 'archival deed' visual story.</>}/>
|
|
</DCArtboard>
|
|
<DCArtboard id="kmono" label="6 · K-monogram as bastion" width={920} height={400}>
|
|
<LogoRow tplId="logo-6" title="K-bastion" sub="Letterform K with crenellated tops"
|
|
scenarios={<><strong>Vibe:</strong> wordmark and mark merged. Most distinctive — only Keysat could use this. Reads as 'K' and 'fortress wall' simultaneously. Risk: looks more like clever lettering than a literal protective symbol.</>}/>
|
|
</DCArtboard>
|
|
</DCSection>
|
|
</DesignCanvas>
|
|
);
|
|
ReactDOM.createRoot(document.getElementById('root')).render(<App/>);
|
|
</script>
|
|
</body>
|
|
</html>
|