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).
This commit is contained in:
Keysat
@@ -0,0 +1,285 @@
|
||||
/* ============================================================
|
||||
Keysat — palette.css (CANONICAL design tokens as CSS custom properties)
|
||||
"Software Licensing for Bitcoin Creators"
|
||||
Navy + cream, paper texture, classical type.
|
||||
|
||||
Single canonical stylesheet, derived from design/tokens.tokens.json.
|
||||
Surfaces (landing, docs, admin SPA) should @import or inline THIS file
|
||||
rather than keep private copies — see the "shared token source" item in
|
||||
ROADMAP.md. Keep this and the tokens JSON in sync; never fork a one-off copy.
|
||||
============================================================ */
|
||||
|
||||
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');
|
||||
|
||||
:root {
|
||||
/* ---------- Brand Colors ---------- */
|
||||
/* Primary navy — pulled from the wordmark */
|
||||
--navy-950: #0E1F33;
|
||||
--navy-900: #142A47;
|
||||
--navy-800: #1E3A5F; /* core brand navy */
|
||||
--navy-700: #2A4A75;
|
||||
--navy-600: #3A5C8A;
|
||||
--navy-500: #5074A1;
|
||||
--navy-400: #7892B8;
|
||||
--navy-300: #A6B7CF;
|
||||
--navy-200: #CBD5E2;
|
||||
--navy-100: #E4EAF1;
|
||||
--navy-50: #F2F5F9;
|
||||
|
||||
/* Cream / paper — the background tone of the logo card */
|
||||
--cream-50: #FBF9F2;
|
||||
--cream-100: #F5F1E8; /* core cream */
|
||||
--cream-200: #EDE7D7;
|
||||
--cream-300: #E1D8C0;
|
||||
--cream-400: #C9BC9A;
|
||||
|
||||
/* Gold / tan — the inner key border */
|
||||
--gold-700: #8A6F3D;
|
||||
--gold-600: #A88652;
|
||||
--gold-500: #BFA068; /* core gold accent */
|
||||
--gold-400: #D4B985;
|
||||
--gold-300: #E5CFA5;
|
||||
--gold-200: #F0E2C5;
|
||||
|
||||
/* Ink — dark text */
|
||||
--ink-900: #0E1F33;
|
||||
--ink-700: #2C3E54;
|
||||
--ink-500: #5A6B7F;
|
||||
--ink-400: #7E8C9D;
|
||||
--ink-300: #A4AEBB;
|
||||
|
||||
/* Semantic */
|
||||
--success: #2D7A5F;
|
||||
--success-bg: #E3F0EA;
|
||||
--warning: #B8861F;
|
||||
--warning-bg: #F7EFD7;
|
||||
--danger: #B23A3A;
|
||||
--danger-bg: #F4E0E0;
|
||||
--info: var(--navy-700);
|
||||
--info-bg: var(--navy-100);
|
||||
|
||||
/* ---------- Semantic surface tokens ---------- */
|
||||
--bg-page: var(--cream-100); /* default page bg */
|
||||
--bg-paper: var(--cream-50); /* lighter paper */
|
||||
--bg-elev: #FFFFFF; /* elevated surface (cards on cream) */
|
||||
--bg-inverse: var(--navy-900); /* dark surface */
|
||||
--bg-tint: var(--cream-200); /* tinted band/section */
|
||||
|
||||
--fg-1: var(--ink-900); /* primary text */
|
||||
--fg-2: var(--ink-700); /* secondary text */
|
||||
--fg-3: var(--ink-500); /* tertiary / meta */
|
||||
--fg-4: var(--ink-400); /* disabled / hint */
|
||||
--fg-on-navy: var(--cream-50);
|
||||
--fg-on-gold: var(--navy-900);
|
||||
|
||||
--border-1: rgba(14, 31, 51, 0.12); /* hairline on cream */
|
||||
--border-2: rgba(14, 31, 51, 0.20); /* card border */
|
||||
--border-3: rgba(14, 31, 51, 0.35); /* focus / strong */
|
||||
--border-on-navy: rgba(245, 241, 232, 0.18);
|
||||
|
||||
--accent: var(--navy-800);
|
||||
--accent-hover: var(--navy-900);
|
||||
--accent-press: var(--navy-950);
|
||||
--accent-soft: var(--navy-100);
|
||||
|
||||
--gold: var(--gold-500);
|
||||
--gold-hover: var(--gold-600);
|
||||
|
||||
/* ---------- Type families ---------- */
|
||||
--font-display: 'Manrope', 'Helvetica Neue', Arial, sans-serif;
|
||||
--font-body: 'Inter', 'Helvetica Neue', Arial, sans-serif;
|
||||
--font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
|
||||
|
||||
/* ---------- Type scale ---------- */
|
||||
--fs-display-xl: clamp(56px, 6vw, 88px);
|
||||
--fs-display: clamp(40px, 4.5vw, 64px);
|
||||
--fs-h1: 44px;
|
||||
--fs-h2: 32px;
|
||||
--fs-h3: 24px;
|
||||
--fs-h4: 20px;
|
||||
--fs-h5: 17px;
|
||||
--fs-body-lg: 18px;
|
||||
--fs-body: 15px;
|
||||
--fs-body-sm: 13.5px;
|
||||
--fs-meta: 12px;
|
||||
--fs-mono: 13px;
|
||||
|
||||
/* ---------- Line heights ---------- */
|
||||
--lh-display: 1.02;
|
||||
--lh-heading: 1.15;
|
||||
--lh-body: 1.55;
|
||||
--lh-tight: 1.25;
|
||||
|
||||
/* ---------- Letter spacing ---------- */
|
||||
--tracking-tight: -0.02em;
|
||||
--tracking-normal: 0;
|
||||
--tracking-wide: 0.04em;
|
||||
--tracking-eyebrow: 0.18em;
|
||||
|
||||
/* ---------- Spacing (4px base) ---------- */
|
||||
--sp-1: 4px;
|
||||
--sp-2: 8px;
|
||||
--sp-3: 12px;
|
||||
--sp-4: 16px;
|
||||
--sp-5: 20px;
|
||||
--sp-6: 24px;
|
||||
--sp-7: 32px;
|
||||
--sp-8: 40px;
|
||||
--sp-9: 56px;
|
||||
--sp-10: 72px;
|
||||
--sp-11: 96px;
|
||||
--sp-12: 128px;
|
||||
|
||||
/* ---------- Radii ---------- */
|
||||
--r-xs: 3px;
|
||||
--r-sm: 5px;
|
||||
--r-md: 8px;
|
||||
--r-lg: 12px;
|
||||
--r-xl: 18px;
|
||||
--r-2xl: 24px;
|
||||
--r-pill: 999px;
|
||||
|
||||
/* ---------- Shadows ---------- */
|
||||
/* Quiet, layered shadows — paper, not glassy */
|
||||
--shadow-xs: 0 1px 1px rgba(14,31,51,0.04);
|
||||
--shadow-sm: 0 1px 2px rgba(14,31,51,0.06), 0 1px 1px rgba(14,31,51,0.03);
|
||||
--shadow-md: 0 2px 4px rgba(14,31,51,0.06), 0 4px 12px rgba(14,31,51,0.06);
|
||||
--shadow-lg: 0 4px 8px rgba(14,31,51,0.07), 0 12px 32px rgba(14,31,51,0.10);
|
||||
--shadow-xl: 0 8px 16px rgba(14,31,51,0.10), 0 24px 64px rgba(14,31,51,0.14);
|
||||
--shadow-inset: inset 0 1px 0 rgba(255,255,255,0.6), inset 0 -1px 0 rgba(14,31,51,0.05);
|
||||
--ring-focus: 0 0 0 3px rgba(30,58,95,0.25);
|
||||
|
||||
/* ---------- Motion ---------- */
|
||||
--ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1);
|
||||
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
|
||||
--ease-in: cubic-bezier(0.7, 0, 0.84, 0);
|
||||
--dur-fast: 120ms;
|
||||
--dur-base: 200ms;
|
||||
--dur-slow: 360ms;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Paper texture — subtle grain on cream surfaces
|
||||
============================================================ */
|
||||
.paper-texture {
|
||||
background-color: var(--bg-page);
|
||||
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;
|
||||
background-position: 0 0, 1px 1px;
|
||||
}
|
||||
.paper-texture-strong {
|
||||
background-color: var(--bg-page);
|
||||
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;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Element defaults — drop these into a body class .keysat
|
||||
============================================================ */
|
||||
.keysat {
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--fs-body);
|
||||
line-height: var(--lh-body);
|
||||
color: var(--fg-1);
|
||||
background: var(--bg-page);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
font-feature-settings: 'ss01', 'cv11';
|
||||
}
|
||||
|
||||
.keysat h1, .keysat .h1 {
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--fs-h1);
|
||||
font-weight: 500;
|
||||
line-height: var(--lh-heading);
|
||||
letter-spacing: var(--tracking-tight);
|
||||
color: var(--fg-1);
|
||||
margin: 0;
|
||||
}
|
||||
.keysat h2, .keysat .h2 {
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--fs-h2);
|
||||
font-weight: 500;
|
||||
line-height: var(--lh-heading);
|
||||
letter-spacing: var(--tracking-tight);
|
||||
color: var(--fg-1);
|
||||
margin: 0;
|
||||
}
|
||||
.keysat h3, .keysat .h3 {
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--fs-h3);
|
||||
font-weight: 600;
|
||||
line-height: var(--lh-tight);
|
||||
letter-spacing: var(--tracking-tight);
|
||||
margin: 0;
|
||||
}
|
||||
.keysat h4, .keysat .h4 {
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--fs-h4);
|
||||
font-weight: 600;
|
||||
line-height: var(--lh-tight);
|
||||
margin: 0;
|
||||
}
|
||||
.keysat h5, .keysat .h5 {
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--fs-h5);
|
||||
font-weight: 600;
|
||||
line-height: var(--lh-tight);
|
||||
margin: 0;
|
||||
}
|
||||
.keysat .display-xl {
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--fs-display-xl);
|
||||
font-weight: 500;
|
||||
line-height: var(--lh-display);
|
||||
letter-spacing: -0.022em;
|
||||
}
|
||||
.keysat .display {
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--fs-display);
|
||||
font-weight: 500;
|
||||
line-height: var(--lh-display);
|
||||
letter-spacing: -0.022em;
|
||||
}
|
||||
.keysat .wordmark {
|
||||
font-family: var(--font-display);
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.32em;
|
||||
text-transform: uppercase;
|
||||
color: var(--navy-800);
|
||||
}
|
||||
.keysat .eyebrow {
|
||||
font-family: var(--font-body);
|
||||
font-size: 11.5px;
|
||||
font-weight: 600;
|
||||
letter-spacing: var(--tracking-eyebrow);
|
||||
text-transform: uppercase;
|
||||
color: var(--gold-700);
|
||||
}
|
||||
.keysat p { margin: 0 0 1em 0; color: var(--fg-2); }
|
||||
.keysat .lead {
|
||||
font-size: var(--fs-body-lg);
|
||||
line-height: 1.5;
|
||||
color: var(--fg-2);
|
||||
}
|
||||
.keysat .meta {
|
||||
font-size: var(--fs-meta);
|
||||
color: var(--fg-3);
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
.keysat code, .keysat .mono {
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--fs-mono);
|
||||
font-feature-settings: 'ss02';
|
||||
}
|
||||
.keysat a {
|
||||
color: var(--accent);
|
||||
text-decoration: underline;
|
||||
text-decoration-thickness: 1px;
|
||||
text-underline-offset: 2px;
|
||||
}
|
||||
.keysat a:hover { color: var(--accent-hover); }
|
||||
Reference in New Issue
Block a user