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,171 @@
|
||||
{
|
||||
"$description": "Keysat design tokens — W3C DTCG-shaped, distilled from design/_imports/2026-06-16-claude-design-system/colors_and_type.css (as-built values). Group-level $type is set where it maps cleanly to a DTCG primitive; a few groups (fontSize, letterSpacing, shadow) carry as-built CSS expressions (clamp(), em, multi-layer shadows) as strings and are intentionally left untyped pending a Style Dictionary build. See design/DESIGN.md for intent and rules.",
|
||||
|
||||
"color": {
|
||||
"$type": "color",
|
||||
"navy": {
|
||||
"950": { "$value": "#0E1F33" },
|
||||
"900": { "$value": "#142A47" },
|
||||
"800": { "$value": "#1E3A5F", "$description": "core brand navy — wordmark, primary buttons, dominant ink" },
|
||||
"700": { "$value": "#2A4A75" },
|
||||
"600": { "$value": "#3A5C8A" },
|
||||
"500": { "$value": "#5074A1" },
|
||||
"400": { "$value": "#7892B8" },
|
||||
"300": { "$value": "#A6B7CF" },
|
||||
"200": { "$value": "#CBD5E2" },
|
||||
"100": { "$value": "#E4EAF1" },
|
||||
"50": { "$value": "#F2F5F9" }
|
||||
},
|
||||
"cream": {
|
||||
"50": { "$value": "#FBF9F2", "$description": "elevated paper / card surface" },
|
||||
"100": { "$value": "#F5F1E8", "$description": "core cream — default page background" },
|
||||
"200": { "$value": "#EDE7D7" },
|
||||
"300": { "$value": "#E1D8C0" },
|
||||
"400": { "$value": "#C9BC9A" }
|
||||
},
|
||||
"gold": {
|
||||
"700": { "$value": "#8A6F3D", "$description": "eyebrow labels / dark gold accent" },
|
||||
"600": { "$value": "#A88652" },
|
||||
"500": { "$value": "#BFA068", "$description": "core gold accent — sparing use only, never a primary button fill" },
|
||||
"400": { "$value": "#D4B985" },
|
||||
"300": { "$value": "#E5CFA5" },
|
||||
"200": { "$value": "#F0E2C5" }
|
||||
},
|
||||
"ink": {
|
||||
"900": { "$value": "#0E1F33", "$description": "primary text" },
|
||||
"700": { "$value": "#2C3E54", "$description": "secondary text" },
|
||||
"500": { "$value": "#5A6B7F", "$description": "tertiary / meta" },
|
||||
"400": { "$value": "#7E8C9D", "$description": "disabled / hint" },
|
||||
"300": { "$value": "#A4AEBB" }
|
||||
},
|
||||
"semantic": {
|
||||
"success": { "$value": "#2D7A5F" },
|
||||
"success-bg": { "$value": "#E3F0EA" },
|
||||
"warning": { "$value": "#B8861F" },
|
||||
"warning-bg": { "$value": "#F7EFD7" },
|
||||
"danger": { "$value": "#B23A3A" },
|
||||
"danger-bg": { "$value": "#F4E0E0" },
|
||||
"info": { "$value": "{color.navy.700}" },
|
||||
"info-bg": { "$value": "{color.navy.100}" }
|
||||
},
|
||||
"surface": {
|
||||
"page": { "$value": "{color.cream.100}", "$description": "default page bg (apply with paper-texture grain)" },
|
||||
"paper": { "$value": "{color.cream.50}" },
|
||||
"elevated":{ "$value": "#FFFFFF", "$description": "forms, tables, code blocks — reserved white" },
|
||||
"inverse": { "$value": "{color.navy.900}" },
|
||||
"tint": { "$value": "{color.cream.200}" }
|
||||
},
|
||||
"fg": {
|
||||
"primary": { "$value": "{color.ink.900}" },
|
||||
"secondary": { "$value": "{color.ink.700}" },
|
||||
"tertiary": { "$value": "{color.ink.500}" },
|
||||
"hint": { "$value": "{color.ink.400}" },
|
||||
"on-navy": { "$value": "{color.cream.50}" },
|
||||
"on-gold": { "$value": "{color.navy.900}" }
|
||||
},
|
||||
"accent": {
|
||||
"default": { "$value": "{color.navy.800}" },
|
||||
"hover": { "$value": "{color.navy.900}" },
|
||||
"press": { "$value": "{color.navy.950}" },
|
||||
"soft": { "$value": "{color.navy.100}" },
|
||||
"gold": { "$value": "{color.gold.500}" }
|
||||
},
|
||||
"border": {
|
||||
"1": { "$value": "rgba(14, 31, 51, 0.12)", "$description": "hairline on cream" },
|
||||
"2": { "$value": "rgba(14, 31, 51, 0.20)", "$description": "card border" },
|
||||
"3": { "$value": "rgba(14, 31, 51, 0.35)", "$description": "focus / strong" },
|
||||
"on-navy": { "$value": "rgba(245, 241, 232, 0.18)" }
|
||||
}
|
||||
},
|
||||
|
||||
"font": {
|
||||
"$type": "fontFamily",
|
||||
"display": { "$value": ["Manrope", "Helvetica Neue", "Arial", "sans-serif"], "$description": "canonical display face (README's 'Archivo' was a stale placeholder)" },
|
||||
"body": { "$value": ["Inter", "Helvetica Neue", "Arial", "sans-serif"] },
|
||||
"mono": { "$value": ["JetBrains Mono", "ui-monospace", "SF Mono", "Menlo", "monospace"] }
|
||||
},
|
||||
|
||||
"fontSize": {
|
||||
"$description": "as-built type scale; display sizes use CSS clamp() and are kept as strings",
|
||||
"display-xl": { "$value": "clamp(56px, 6vw, 88px)" },
|
||||
"display": { "$value": "clamp(40px, 4.5vw, 64px)" },
|
||||
"h1": { "$value": "44px" },
|
||||
"h2": { "$value": "32px" },
|
||||
"h3": { "$value": "24px" },
|
||||
"h4": { "$value": "20px" },
|
||||
"h5": { "$value": "17px" },
|
||||
"body-lg": { "$value": "18px" },
|
||||
"body": { "$value": "15px" },
|
||||
"body-sm": { "$value": "13.5px" },
|
||||
"meta": { "$value": "12px" },
|
||||
"mono": { "$value": "13px" }
|
||||
},
|
||||
|
||||
"lineHeight": {
|
||||
"$type": "number",
|
||||
"display": { "$value": 1.02 },
|
||||
"heading": { "$value": 1.15 },
|
||||
"body": { "$value": 1.55 },
|
||||
"tight": { "$value": 1.25 }
|
||||
},
|
||||
|
||||
"letterSpacing": {
|
||||
"$description": "em values kept as strings",
|
||||
"tight": { "$value": "-0.02em" },
|
||||
"normal": { "$value": "0" },
|
||||
"wide": { "$value": "0.04em" },
|
||||
"eyebrow": { "$value": "0.18em" }
|
||||
},
|
||||
|
||||
"space": {
|
||||
"$type": "dimension",
|
||||
"1": { "$value": "4px" },
|
||||
"2": { "$value": "8px" },
|
||||
"3": { "$value": "12px" },
|
||||
"4": { "$value": "16px" },
|
||||
"5": { "$value": "20px" },
|
||||
"6": { "$value": "24px" },
|
||||
"7": { "$value": "32px" },
|
||||
"8": { "$value": "40px" },
|
||||
"9": { "$value": "56px" },
|
||||
"10": { "$value": "72px" },
|
||||
"11": { "$value": "96px" },
|
||||
"12": { "$value": "128px" }
|
||||
},
|
||||
|
||||
"radius": {
|
||||
"$type": "dimension",
|
||||
"xs": { "$value": "3px" },
|
||||
"sm": { "$value": "5px" },
|
||||
"md": { "$value": "8px", "$description": "buttons" },
|
||||
"lg": { "$value": "12px", "$description": "cards" },
|
||||
"xl": { "$value": "18px", "$description": "max surface rounding — never exceed" },
|
||||
"2xl": { "$value": "24px", "$description": "reserved; avoid in product UI" },
|
||||
"pill": { "$value": "999px", "$description": "tags/badges only" }
|
||||
},
|
||||
|
||||
"shadow": {
|
||||
"$description": "paper-shadow system — multi-layer CSS strings, not glassy",
|
||||
"xs": { "$value": "0 1px 1px rgba(14,31,51,0.04)" },
|
||||
"sm": { "$value": "0 1px 2px rgba(14,31,51,0.06), 0 1px 1px rgba(14,31,51,0.03)" },
|
||||
"md": { "$value": "0 2px 4px rgba(14,31,51,0.06), 0 4px 12px rgba(14,31,51,0.06)" },
|
||||
"lg": { "$value": "0 4px 8px rgba(14,31,51,0.07), 0 12px 32px rgba(14,31,51,0.10)" },
|
||||
"xl": { "$value": "0 8px 16px rgba(14,31,51,0.10), 0 24px 64px rgba(14,31,51,0.14)" },
|
||||
"inset": { "$value": "inset 0 1px 0 rgba(255,255,255,0.6), inset 0 -1px 0 rgba(14,31,51,0.05)" },
|
||||
"ring-focus": { "$value": "0 0 0 3px rgba(30,58,95,0.25)" }
|
||||
},
|
||||
|
||||
"duration": {
|
||||
"$type": "duration",
|
||||
"fast": { "$value": "120ms", "$description": "hover transitions" },
|
||||
"base": { "$value": "200ms", "$description": "default" },
|
||||
"slow": { "$value": "360ms" }
|
||||
},
|
||||
|
||||
"easing": {
|
||||
"$type": "cubicBezier",
|
||||
"standard": { "$value": [0.2, 0.7, 0.2, 1] },
|
||||
"out": { "$value": [0.16, 1, 0.3, 1] },
|
||||
"in": { "$value": [0.7, 0, 0.84, 0] }
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user