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).
279 lines
16 KiB
HTML
279 lines
16 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Keysat — Logo directions v2</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: 32px 36px; 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: 20px; }
|
|
.name span { font-weight: 400; color: #8A6F3D; margin-left: 8px; font-size: 11px; }
|
|
.row { display: flex; align-items: center; gap: 28px; padding: 20px; 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: 16px; }
|
|
.row .lock { display: flex; align-items: center; gap: 10px; padding-left: 22px; border-left: 1px solid rgba(14,31,51,0.12); }
|
|
.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: 14px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
|
|
.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 .dark { background: #0E1F33; padding: 7px 12px; border-radius: 6px; display: flex; align-items: center; gap: 8px; color: #FBF9F2; font-family: 'Manrope'; font-weight: 500; font-size: 11.5px; letter-spacing: 0.18em; text-transform: uppercase; }
|
|
.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; }
|
|
.pros { margin-top: 14px; 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. SCROLL with key -->
|
|
<template id="logo-1">
|
|
<svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<!-- Scroll body -->
|
|
<path d="M22 22 L78 22 L78 78 L22 78 Z" fill="#FBF9F2" stroke="#1E3A5F" stroke-width="3"/>
|
|
<!-- Top scroll roll -->
|
|
<ellipse cx="50" cy="22" rx="28" ry="5" fill="#1E3A5F"/>
|
|
<!-- Bottom scroll roll -->
|
|
<ellipse cx="50" cy="78" rx="28" ry="5" fill="#1E3A5F"/>
|
|
<!-- Text lines -->
|
|
<line x1="32" y1="36" x2="68" y2="36" stroke="#1E3A5F" stroke-width="1.5"/>
|
|
<line x1="32" y1="44" x2="62" y2="44" stroke="#1E3A5F" stroke-width="1.5"/>
|
|
<!-- Key (centered, lower portion) -->
|
|
<circle cx="42" cy="60" r="6" fill="none" stroke="#BFA068" stroke-width="2.5"/>
|
|
<rect x="48" y="58.5" width="14" height="3" fill="#BFA068"/>
|
|
<rect x="58" y="61.5" width="2" height="4" fill="#BFA068"/>
|
|
<rect x="62" y="61.5" width="2" height="3" fill="#BFA068"/>
|
|
</svg>
|
|
</template>
|
|
|
|
<!-- 2. CERTIFICATE / DEED -->
|
|
<template id="logo-2">
|
|
<svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<!-- Certificate paper -->
|
|
<rect x="18" y="20" width="58" height="64" fill="#FBF9F2" stroke="#1E3A5F" stroke-width="2.5"/>
|
|
<!-- Inner gold border -->
|
|
<rect x="22" y="24" width="50" height="56" fill="none" stroke="#BFA068" stroke-width="0.75"/>
|
|
<!-- Header lines -->
|
|
<line x1="30" y1="34" x2="64" y2="34" stroke="#1E3A5F" stroke-width="2"/>
|
|
<line x1="34" y1="42" x2="60" y2="42" stroke="#1E3A5F" stroke-width="1"/>
|
|
<!-- Wax seal in lower-right, overlapping certificate edge -->
|
|
<circle cx="74" cy="68" r="14" fill="#1E3A5F"/>
|
|
<circle cx="74" cy="68" r="11" fill="none" stroke="#BFA068" stroke-width="0.75"/>
|
|
<!-- Tiny key in seal -->
|
|
<circle cx="71" cy="68" r="3" fill="none" stroke="#BFA068" stroke-width="1.5"/>
|
|
<rect x="74" y="67.25" width="6" height="1.5" fill="#BFA068"/>
|
|
<rect x="78" y="68.75" width="1" height="2" fill="#BFA068"/>
|
|
<!-- Ribbons under seal -->
|
|
<path d="M68 80 L66 90 L72 86 Z" fill="#BFA068"/>
|
|
<path d="M80 80 L82 90 L76 86 Z" fill="#BFA068"/>
|
|
</svg>
|
|
</template>
|
|
|
|
<!-- 3. WINDOW with key -->
|
|
<template id="logo-3">
|
|
<svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<!-- Application window frame -->
|
|
<rect x="14" y="20" width="72" height="60" rx="4" fill="#1E3A5F"/>
|
|
<!-- Title bar dots -->
|
|
<circle cx="20" cy="26" r="1.5" fill="#BFA068"/>
|
|
<circle cx="25" cy="26" r="1.5" fill="rgba(245,241,232,0.5)"/>
|
|
<circle cx="30" cy="26" r="1.5" fill="rgba(245,241,232,0.5)"/>
|
|
<!-- Window content area -->
|
|
<rect x="18" y="32" width="64" height="44" rx="2" fill="#FBF9F2"/>
|
|
<!-- Centered key -->
|
|
<circle cx="42" cy="54" r="8" fill="none" stroke="#1E3A5F" stroke-width="3"/>
|
|
<circle cx="42" cy="54" r="2.5" fill="#FBF9F2"/>
|
|
<rect x="50" y="52" width="20" height="4" fill="#1E3A5F"/>
|
|
<rect x="62" y="56" width="3" height="6" fill="#1E3A5F"/>
|
|
<rect x="67" y="56" width="3" height="4" fill="#1E3A5F"/>
|
|
<!-- Gold accent line under window -->
|
|
<rect x="18" y="78" width="64" height="2" fill="#BFA068"/>
|
|
</svg>
|
|
</template>
|
|
|
|
<!-- 4. RECEIPT / TICKET STUB -->
|
|
<template id="logo-4">
|
|
<svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<!-- Receipt body with zigzag bottom -->
|
|
<path d="M22 14 L78 14 L78 78 L74 82 L70 78 L66 82 L62 78 L58 82 L54 78 L50 82 L46 78 L42 82 L38 78 L34 82 L30 78 L26 82 L22 78 Z" fill="#FBF9F2" stroke="#1E3A5F" stroke-width="2.5"/>
|
|
<!-- Header bar -->
|
|
<rect x="22" y="14" width="56" height="10" fill="#1E3A5F"/>
|
|
<!-- Lines -->
|
|
<line x1="30" y1="34" x2="70" y2="34" stroke="#1E3A5F" stroke-width="1.25"/>
|
|
<line x1="30" y1="40" x2="60" y2="40" stroke="#1E3A5F" stroke-width="1.25"/>
|
|
<line x1="30" y1="46" x2="65" y2="46" stroke="#1E3A5F" stroke-width="1.25"/>
|
|
<!-- Perforation -->
|
|
<line x1="22" y1="56" x2="78" y2="56" stroke="#8A6F3D" stroke-width="0.75" stroke-dasharray="2 2"/>
|
|
<!-- Key in stub -->
|
|
<circle cx="38" cy="68" r="5" fill="none" stroke="#BFA068" stroke-width="2"/>
|
|
<rect x="43" y="67" width="14" height="2.5" fill="#BFA068"/>
|
|
<rect x="53" y="69.5" width="1.5" height="3.5" fill="#BFA068"/>
|
|
<rect x="57" y="69.5" width="1.5" height="2.5" fill="#BFA068"/>
|
|
</svg>
|
|
</template>
|
|
|
|
<!-- 5. STAMP / NOTARY MARK -->
|
|
<template id="logo-5">
|
|
<svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<!-- Outer stamp ring (slightly imperfect to feel inked) -->
|
|
<circle cx="50" cy="50" r="36" fill="none" stroke="#1E3A5F" stroke-width="3"/>
|
|
<circle cx="50" cy="50" r="28" fill="none" stroke="#1E3A5F" stroke-width="1"/>
|
|
<!-- Curved text along top (Keysat dots) -->
|
|
<g fill="#1E3A5F">
|
|
<circle cx="28" cy="32" r="1"/>
|
|
<circle cx="50" cy="22" r="1"/>
|
|
<circle cx="72" cy="32" r="1"/>
|
|
<circle cx="28" cy="68" r="1"/>
|
|
<circle cx="50" cy="78" r="1"/>
|
|
<circle cx="72" cy="68" r="1"/>
|
|
</g>
|
|
<!-- LICENSED text top -->
|
|
<text x="50" y="42" text-anchor="middle" font-family="Manrope" font-weight="600" font-size="6.5" fill="#1E3A5F" letter-spacing="1.5">LICENSED</text>
|
|
<!-- Center key (horizontal) -->
|
|
<g>
|
|
<circle cx="38" cy="55" r="4.5" fill="none" stroke="#BFA068" stroke-width="2"/>
|
|
<rect x="42" y="54" width="20" height="2.5" fill="#BFA068"/>
|
|
<rect x="56" y="56.5" width="1.5" height="3.5" fill="#BFA068"/>
|
|
<rect x="60" y="56.5" width="1.5" height="2.5" fill="#BFA068"/>
|
|
</g>
|
|
<!-- Year / mark below -->
|
|
<text x="50" y="72" text-anchor="middle" font-family="JetBrains Mono" font-weight="600" font-size="5" fill="#1E3A5F" letter-spacing="1">ED25519</text>
|
|
</svg>
|
|
</template>
|
|
|
|
<!-- 6. KEY THROUGH BRACKETS -->
|
|
<template id="logo-6">
|
|
<svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<!-- Left angle bracket -->
|
|
<path d="M30 24 L18 50 L30 76" stroke="#1E3A5F" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
|
|
<!-- Right angle bracket -->
|
|
<path d="M70 24 L82 50 L70 76" stroke="#1E3A5F" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
|
|
<!-- Key, centered -->
|
|
<circle cx="42" cy="50" r="8" fill="none" stroke="#BFA068" stroke-width="3"/>
|
|
<circle cx="42" cy="50" r="2.5" fill="#FBF9F2"/>
|
|
<rect x="50" y="48" width="14" height="4" fill="#BFA068"/>
|
|
<rect x="58" y="52" width="2.5" height="6" fill="#BFA068"/>
|
|
<rect x="62" y="52" width="2.5" height="4" fill="#BFA068"/>
|
|
</svg>
|
|
</template>
|
|
|
|
<!-- 7. ENVELOPE / SEALED LETTER -->
|
|
<template id="logo-7">
|
|
<svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<!-- Envelope body -->
|
|
<rect x="14" y="28" width="72" height="50" fill="#FBF9F2" stroke="#1E3A5F" stroke-width="2.5"/>
|
|
<!-- Envelope flap -->
|
|
<path d="M14 28 L50 56 L86 28 Z" fill="#1E3A5F"/>
|
|
<!-- Inner gold line -->
|
|
<rect x="17" y="31" width="66" height="44" fill="none" stroke="#BFA068" stroke-width="0.5"/>
|
|
<!-- Wax seal on flap -->
|
|
<circle cx="50" cy="58" r="9" fill="#BFA068"/>
|
|
<!-- Key inside seal -->
|
|
<circle cx="46.5" cy="58" r="2.5" fill="none" stroke="#1E3A5F" stroke-width="1.5"/>
|
|
<rect x="49" y="57.25" width="6" height="1.5" fill="#1E3A5F"/>
|
|
<rect x="53" y="58.75" width="1" height="2" fill="#1E3A5F"/>
|
|
</svg>
|
|
</template>
|
|
|
|
<!-- 8. KEYHOLE in document -->
|
|
<template id="logo-8">
|
|
<svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<!-- Document with corner fold -->
|
|
<path d="M22 14 L66 14 L80 28 L80 86 L22 86 Z" fill="#FBF9F2" stroke="#1E3A5F" stroke-width="2.5"/>
|
|
<!-- Folded corner -->
|
|
<path d="M66 14 L66 28 L80 28 Z" fill="#1E3A5F"/>
|
|
<!-- Header line -->
|
|
<line x1="30" y1="42" x2="72" y2="42" stroke="#1E3A5F" stroke-width="2"/>
|
|
<line x1="30" y1="48" x2="64" y2="48" stroke="#1E3A5F" stroke-width="1"/>
|
|
<!-- Large keyhole, centered lower -->
|
|
<circle cx="51" cy="64" r="7" fill="#1E3A5F"/>
|
|
<path d="M48 70 L51 78 L54 70 Z" fill="#1E3A5F"/>
|
|
<!-- Gold inner of keyhole -->
|
|
<circle cx="51" cy="64" r="3" 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]);
|
|
const Mark = ({size, dark}) => (
|
|
<span style={{display:'inline-block',width:size,height:size,filter:dark?'invert(1) hue-rotate(180deg) brightness(1.4)':'none'}}
|
|
dangerouslySetInnerHTML={{__html: html}}/>
|
|
);
|
|
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">
|
|
<Mark size={84}/><Mark size={40}/><Mark size={20}/>
|
|
</div>
|
|
<div className="lock">
|
|
<Mark size={36}/>
|
|
<span className="wm">KEYSAT</span>
|
|
</div>
|
|
</div>
|
|
<div className="scenarios">
|
|
<div className="browser-tab"><Mark size={14}/>keysat.com — Bitcoin licensing</div>
|
|
<div className="dark"><Mark size={18} dark={true}/>KEYSAT</div>
|
|
<div className="chip"><Mark size={14}/>Settings</div>
|
|
</div>
|
|
<div className="pros">{scenarios}</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const App = () => (
|
|
<DesignCanvas title="Keysat — Logo directions, take 2" subtitle="Reframed around what Keysat does: issuing signed certificates for software paid in Bitcoin. Documents, seals, receipts, signed mail.">
|
|
<DCSection id="docs" title="Document & certificate metaphors">
|
|
<DCArtboard id="scroll" label="1 · Scroll with key" width={920} height={380}>
|
|
<LogoRow tplId="logo-1" title="The Scroll" sub="Unfurled scroll with a small key beneath the lines"
|
|
scenarios={<><strong>Vibe:</strong> ancient deed, signed grant. Maps directly to 'license issued by you.' The key is a quiet detail, not the main feature. Risk: scrolls can feel a bit fantasy-novel.</>}/>
|
|
</DCArtboard>
|
|
<DCArtboard id="cert" label="2 · Certificate with wax seal" width={920} height={380}>
|
|
<LogoRow tplId="logo-2" title="The Certificate" sub="Document with a wax seal in the corner containing a key"
|
|
scenarios={<><strong>Vibe:</strong> diploma, deed, notarized agreement. Most literal match to 'certificate of license' (the existing visual motif on hero & detail pages). Pairs perfectly with cream-paper-gold.</>}/>
|
|
</DCArtboard>
|
|
<DCArtboard id="receipt" label="4 · Receipt / ticket stub" width={920} height={380}>
|
|
<LogoRow tplId="logo-4" title="The Receipt" sub="Ticket-stub receipt with perforation, header bar, and key"
|
|
scenarios={<><strong>Vibe:</strong> proof of purchase, ticket, paid receipt. Connects to 'paid in Bitcoin → license issued.' The zigzag edge gives it character and prints well. Distinctive.</>}/>
|
|
</DCArtboard>
|
|
<DCArtboard id="envelope" label="7 · Sealed envelope" width={920} height={380}>
|
|
<LogoRow tplId="logo-7" title="The Sealed Letter" sub="Envelope with wax seal on the flap, key inside the seal"
|
|
scenarios={<><strong>Vibe:</strong> formal correspondence, sealed delivery. The license arrives. Friendly, less austere than scroll/certificate. Risk: 'envelope = email' read.</>}/>
|
|
</DCArtboard>
|
|
<DCArtboard id="folded" label="8 · Document with keyhole" width={920} height={380}>
|
|
<LogoRow tplId="logo-8" title="The Keyhole Document" sub="Letter with folded corner, large keyhole shape on the page"
|
|
scenarios={<><strong>Vibe:</strong> the document IS the lock. Quiet, modern, less ornate. Reads cleanly at small sizes (the keyhole holds up). Conceptually elegant: you license = you have the key to read.</>}/>
|
|
</DCArtboard>
|
|
</DCSection>
|
|
<DCSection id="marks" title="Mark / stamp metaphors">
|
|
<DCArtboard id="window" label="3 · App window with key" width={920} height={380}>
|
|
<LogoRow tplId="logo-3" title="The Window" sub="Application window framing a key"
|
|
scenarios={<><strong>Vibe:</strong> 'software you license.' Most explicit product reference of all eight. Title-bar dots add a subtle Mac/desktop reading. Risk: looks more like a 'software' icon than a 'licensing' icon.</>}/>
|
|
</DCArtboard>
|
|
<DCArtboard id="stamp" label="5 · Notary stamp" width={920} height={380}>
|
|
<LogoRow tplId="logo-5" title="The Stamp" sub="Round notary mark, 'LICENSED', key, and 'ED25519'"
|
|
scenarios={<><strong>Vibe:</strong> official stamp, certified, notary. Type baked into the mark. Distinctive and confident. Risk: relies on legible micro-text — only works above ~32px. Needs a simplified small-size variant.</>}/>
|
|
</DCArtboard>
|
|
<DCArtboard id="brackets" label="6 · Code brackets + key" width={920} height={380}>
|
|
<LogoRow tplId="logo-6" title="The Bracketed Key" sub="Angle brackets < > framing a key"
|
|
scenarios={<><strong>Vibe:</strong> 'license, in code.' Direct nod to developer audience. Modern, technical, unfussy. Pairs nicely with the dev-focused dashboard and SDK docs. Risk: less warm than the document directions.</>}/>
|
|
</DCArtboard>
|
|
</DCSection>
|
|
</DesignCanvas>
|
|
);
|
|
ReactDOM.createRoot(document.getElementById('root')).render(<App/>);
|
|
</script>
|
|
</body>
|
|
</html>
|