/* ========================================================================== HappyDraft Design System — Tokens Sketch to Scale. Print to Fit. The single source of truth for colour, type, space, radius, elevation and motion on happydraft.app. Nothing below this file should hard-code a hex value, a font stack, or a pixel gap — reach for a token instead. Two layers, deliberately: 1. PRIMITIVES (--hd-c-*, --hd-s-*, ...) the raw brand values. Rarely used directly. Renaming one of these is a brand decision. 2. SEMANTIC (--hd-text, --hd-link, ...) what a thing is FOR. Components use these only, so a theme (dark band, print) can reassign meaning without touching a component rule. Source of truth for the raw values: brand-assets/README.md. ========================================================================== */ :root { /* ------------------------------------------------------------------ 1. COLOUR — primitives Rule from the brand guide: blue does the work, warm does the welcome. Every value below carries its measured WCAG 2.1 contrast ratio against Paper (#F7F9FA). Three of the brand colours are NOT safe for body text and the ratios say so — the safe siblings (-text / -strong) exist for exactly that reason. Do not "fix" a failing pair by eyeballing it. ------------------------------------------------------------------ */ --hd-c-ink: #12283C; /* 14.26 on paper — AAA. Primary text, the drawn line. */ --hd-c-ink-soft: #24405A; /* 10.17 on paper — AAA. Secondary headings. */ --hd-c-blueprint: #0A6EBD; /* 5.00 on paper — AA. The workhorse: action, links, precision. */ --hd-c-blueprint-700: #08599A; /* 7.23 on white — AAA. Hover, and links on tinted surfaces. */ --hd-c-blueprint-800: #06457A; /* 9.81 on white — AAA. Pressed / active. */ --hd-c-pencil: #E8A33D; /* 2.04 on paper — DECORATIVE ONLY. Never text on light. This is the smile. Fills, rules, icons, dark-band text. */ --hd-c-pencil-deep: #C67F17; /* 3.08 on paper — AA LARGE ONLY (>=24px, or >=18.7px bold). */ --hd-c-pencil-text: #996920; /* 4.52 on paper — AA. Warm text at body size. Use this one whenever warm words are smaller than a heading. */ --hd-c-paper: #F7F9FA; /* The surface. */ --hd-c-white: #FFFFFF; /* Raised cards, inputs — lifts off paper without a shadow. */ --hd-c-sky: #D6ECFB; /* Soft tint, selected states, callout backgrounds. */ --hd-c-sky-deep: #B9DEF7; /* Hover on a tinted surface. Ink on this is 10.65 — AAA. */ --hd-c-grid-major: #8FB2C9; /* 2.12 on paper — NON-TEXT ONLY. Strong dividers, the 5th grid line. Also: muted text on ink (6.73 — AA). */ --hd-c-grid-minor: #C3D6E2; /* Hairlines, borders, the graph-paper texture. */ --hd-c-dim: #6B8296; /* 3.78 on paper — AA LARGE ONLY. Big meta text, placeholder-ish. */ --hd-c-dim-strong: #5F7589; /* 4.53 on paper — AA. Captions and meta at body size. If the text is under 24px and grey, it uses THIS. */ /* Status. Not in the original brand guide — derived here, tuned toward the blue-grey base so they read as part of the system rather than bootstrap. Each -fg value is AA on paper; each -bg is a tint to sit it on. */ --hd-c-ok: #1B6E4B; /* 5.89 on paper, 5.29 on its tint — AA */ --hd-c-ok-bg: #DFF1E8; --hd-c-warn: #8A6100; /* 5.25 on paper, 4.86 on its tint — AA (warm family, past pencil-text) */ --hd-c-warn-bg: #FBEFD8; --hd-c-danger: #A32017; /* 7.16 on paper, 6.32 on its tint — AA */ --hd-c-danger-bg: #FBE6E4; /* ------------------------------------------------------------------ 2. COLOUR — semantic Components reference ONLY these. A theme reassigns them (see .hd-invert at the bottom of this file) and every component follows. ------------------------------------------------------------------ */ --hd-surface: var(--hd-c-paper); --hd-surface-raised: var(--hd-c-white); --hd-surface-tint: var(--hd-c-sky); --hd-surface-tint-hi: var(--hd-c-sky-deep); --hd-surface-inverse: var(--hd-c-ink); --hd-text: var(--hd-c-ink); --hd-text-soft: var(--hd-c-ink-soft); --hd-text-muted: var(--hd-c-dim-strong); /* body-size safe by default */ --hd-text-meta: var(--hd-c-dim); /* only at >=24px or bold >=18.7px */ --hd-text-warm: var(--hd-c-pencil-text); --hd-text-warm-lg: var(--hd-c-pencil-deep); /* headings only */ --hd-text-on-accent: var(--hd-c-white); /* 5.28 on blueprint — AA */ --hd-link: var(--hd-c-blueprint); --hd-link-hover: var(--hd-c-blueprint-700); --hd-link-active: var(--hd-c-blueprint-800); --hd-link-on-tint: var(--hd-c-blueprint-700); /* plain blueprint is 4.34 on sky — fails. */ --hd-accent: var(--hd-c-blueprint); --hd-accent-hover: var(--hd-c-blueprint-700); --hd-accent-active: var(--hd-c-blueprint-800); --hd-warm: var(--hd-c-pencil); /* the smile. Decoration, not words. */ --hd-border: var(--hd-c-grid-minor); --hd-border-strong: var(--hd-c-grid-major); --hd-border-loud: var(--hd-c-ink); --hd-focus: var(--hd-c-blueprint); --hd-focus-halo: rgba(10, 110, 189, 0.28); /* ------------------------------------------------------------------ 3. TYPE IBM Plex Sans is the human voice — everything a person reads as prose. IBM Plex Mono is the instrument voice — the tagline, dimensions, key caps, file names, code. The split is meaning, not decoration: mono says "this is a measurement or a literal". Both are SIL OFL. Self-host or load from Google Fonts; the fallback stacks below are metric-adjacent so an unstyled flash stays calm. ------------------------------------------------------------------ */ --hd-font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --hd-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; /* Body is 17px, not 16 — this is a tool for reading dimensions and docs. */ --hd-text-xs: 0.75rem; /* 12 — legal fine print, table meta */ --hd-text-sm: 0.875rem; /* 14 — captions, badges, nav */ --hd-text-base: 1.0625rem; /* 17 — body */ --hd-text-lg: 1.1875rem; /* 19 — lead paragraph */ --hd-text-xl: 1.375rem; /* 22 — h4 / large lead */ --hd-text-2xl: 1.75rem; /* 28 — h3 */ --hd-text-3xl: 2.25rem; /* 36 — h2 */ --hd-text-4xl: clamp(2.5rem, 1.75rem + 2.6vw, 3.5rem); /* h1 */ --hd-text-display: clamp(2.75rem, 1.6rem + 4.2vw, 4.5rem); /* hero only */ --hd-weight-regular: 400; --hd-weight-medium: 500; --hd-weight-semibold: 600; --hd-weight-bold: 700; --hd-leading-tight: 1.12; /* display + h1 */ --hd-leading-snug: 1.25; /* h2–h4 */ --hd-leading-normal: 1.6; /* body */ --hd-leading-relaxed: 1.72; /* long-form docs prose */ --hd-tracking-tight: -0.02em; /* large headings only */ --hd-tracking-normal: 0; --hd-tracking-wide: 0.06em; /* eyebrows, small caps labels */ --hd-tracking-mono: 0.01em; --hd-measure: 68ch; /* max line length for body prose */ --hd-measure-narrow: 54ch; /* ------------------------------------------------------------------ 4. SPACE 4px base unit. The graph-paper square is 24px = 6 units, and the major rule falls every 5 squares (120px). Clear space around the logo mark is exactly one grid square, per the brand rules — hence --hd-grid-square is a token and not a magic number. ------------------------------------------------------------------ */ --hd-s-0: 0; --hd-s-1: 0.25rem; /* 4 */ --hd-s-2: 0.5rem; /* 8 */ --hd-s-3: 0.75rem; /* 12 */ --hd-s-4: 1rem; /* 16 */ --hd-s-5: 1.5rem; /* 24 — one grid square */ --hd-s-6: 2rem; /* 32 */ --hd-s-7: 3rem; /* 48 */ --hd-s-8: 4rem; /* 64 */ --hd-s-9: 6rem; /* 96 */ --hd-s-10: 8rem; /* 128 */ --hd-grid-square: 24px; --hd-grid-major-every: 5; /* a heavier line every 5 squares = 120px */ --hd-container: 1120px; /* marketing pages */ --hd-container-narrow: 760px; /* docs + legal prose */ --hd-container-wide: 1320px; /* full-bleed screenshot sections */ --hd-gutter: var(--hd-s-5); --hd-section-y: clamp(3rem, 1.5rem + 6vw, 6rem); /* vertical rhythm between bands */ /* ------------------------------------------------------------------ 5. RADIUS The logo tile is a rounded square at roughly 22% — --hd-radius-tile keeps anything logo-adjacent matching it. ------------------------------------------------------------------ */ --hd-radius-sm: 4px; --hd-radius-md: 8px; --hd-radius-lg: 12px; --hd-radius-xl: 18px; --hd-radius-tile: 22%; --hd-radius-pill: 999px; /* ------------------------------------------------------------------ 6. ELEVATION Shadows are ink-tinted, never neutral black — on paper a grey shadow reads as dirt. Kept shallow: this is a drawing surface, not a stack of floating panels. ------------------------------------------------------------------ */ --hd-shadow-xs: 0 1px 2px rgba(18, 40, 60, 0.06); --hd-shadow-sm: 0 1px 3px rgba(18, 40, 60, 0.08), 0 1px 2px rgba(18, 40, 60, 0.04); --hd-shadow-md: 0 4px 12px rgba(18, 40, 60, 0.09), 0 1px 3px rgba(18, 40, 60, 0.05); --hd-shadow-lg: 0 12px 32px rgba(18, 40, 60, 0.12), 0 2px 8px rgba(18, 40, 60, 0.06); --hd-shadow-focus: 0 0 0 3px var(--hd-focus-halo); /* ------------------------------------------------------------------ 7. MOTION Short and mechanical. A drafting tool should feel like a instrument responding, not a page animating. All of it collapses to 0 under prefers-reduced-motion (see base.css). ------------------------------------------------------------------ */ --hd-dur-fast: 120ms; --hd-dur-base: 200ms; --hd-dur-slow: 320ms; --hd-ease: cubic-bezier(0.2, 0.7, 0.3, 1); --hd-ease-out: cubic-bezier(0, 0, 0.2, 1); /* ------------------------------------------------------------------ 8. MISC ------------------------------------------------------------------ */ --hd-hairline: 1px; --hd-rule: 2px; /* the drawn line weight — dividers, underlines */ --hd-z-header: 100; --hd-z-overlay: 200; } /* ========================================================================== THEME: inverse band (.hd-invert) For the footer, the CTA band, and any section set on ink. This reassigns the semantic layer only — components are unaware. CRITICAL: --hd-link is NOT blueprint here. Blueprint on ink measures 2.85, which fails badly. Sky (12.37) and pencil (6.98) both pass, and pencil is finally usable as text on this background. ========================================================================== */ .hd-invert { --hd-surface: var(--hd-c-ink); --hd-surface-raised: #1B364E; --hd-surface-tint: #1B364E; --hd-surface-tint-hi: #24405A; --hd-text: var(--hd-c-paper); /* 14.26 on ink */ --hd-text-soft: var(--hd-c-sky); /* 12.37 */ --hd-text-muted: var(--hd-c-grid-major); /* 6.73 */ --hd-text-meta: var(--hd-c-grid-major); --hd-text-warm: var(--hd-c-pencil); /* 6.98 — warm text works here */ --hd-text-warm-lg: var(--hd-c-pencil); --hd-link: var(--hd-c-sky); --hd-link-hover: var(--hd-c-white); --hd-link-active: var(--hd-c-sky-deep); --hd-link-on-tint: var(--hd-c-sky); --hd-accent: var(--hd-c-pencil); --hd-accent-hover: #F2B65C; --hd-accent-active: var(--hd-c-pencil-deep); --hd-text-on-accent: var(--hd-c-ink); /* ink on pencil — 6.98, AA. Never white on pencil: 2.16. */ --hd-border: #2C4A66; --hd-border-strong: #3E5F7C; --hd-border-loud: var(--hd-c-sky); --hd-focus: var(--hd-c-sky); --hd-focus-halo: rgba(214, 236, 251, 0.35); color: var(--hd-text); background-color: var(--hd-surface); } /* ========================================================================== PRINT Someone will print the help page. Ink on white, no tints, no shadows. ========================================================================== */ @media print { :root { --hd-surface: #FFFFFF; --hd-surface-raised: #FFFFFF; --hd-surface-tint: #FFFFFF; --hd-text: #000000; --hd-text-muted: #333333; --hd-link: #000000; --hd-border: #999999; --hd-shadow-xs: none; --hd-shadow-sm: none; --hd-shadow-md: none; --hd-shadow-lg: none; } }