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).
28 lines
1.3 KiB
HTML
28 lines
1.3 KiB
HTML
<!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>
|