/* ========================================================================== kelvinbytes — Design Tokens -------------------------------------------------------------------------- The single source of truth for the brand's visual language. Concept: a service manual, not a landing page. The reference points are printed technical documentation — Haynes manuals, IBM's own product literature, the spec sheets stapled inside a server chassis — rendered for a screen. Warm paper, dark ink, hairline rules, one filament-hot accent that only appears when something is a link or a warning. Deliberately absent, because they are the house style of every generated page on the internet: blue-violet accents, gradient fills, glass blur, drop shadows under cards, and pill-rounded corners. ========================================================================== */ :root { /* --------------------------------------------------------------------- 1. PRIMITIVES — raw values. Never reference these directly in components; use the semantic tokens in section 2. --------------------------------------------------------------------- */ /* Neutral ramp — warm, hue ~38°. Paper yellows and ink browns. A cool grey ramp is what a screen does by default; this is what paper does. */ --kb-ink-1000: #0b0a08; --kb-ink-950: #100e0b; --kb-ink-900: #17140f; --kb-ink-875: #1c1813; --kb-ink-850: #211c16; --kb-ink-800: #2a241c; --kb-ink-750: #332c23; --kb-ink-700: #3e362b; --kb-ink-600: #4e4538; --kb-ink-500: #574e40; --kb-ink-400: #6f6553; --kb-ink-300: #7e7462; --kb-ink-250: #9a8f7c; --kb-ink-200: #b6ab96; --kb-ink-150: #cec2ac; --kb-ink-100: #e4dccb; --kb-ink-75: #ebe4d6; --kb-ink-50: #f4eee3; --kb-ink-25: #faf6ee; --kb-ink-0: #fffcf7; /* Filament — the accent. The hot end of the colour-temperature scale, ~2700K. Links, rules that matter, the one thing on a page that is allowed to be a colour. */ --kb-flame-50: #fdf1e7; --kb-flame-100: #f9dfc9; --kb-flame-200: #f2c29b; --kb-flame-300: #e9a06b; --kb-flame-400: #dd7c3a; --kb-flame-500: #cb5f1b; --kb-flame-600: #ae4a11; --kb-flame-700: #8b390c; --kb-flame-800: #632809; --kb-flame-900: #3b1805; /* Signal Amber — the channel intro's amber, carried onto the site. Brighter and more golden than the brass caution ramp, so it gets three steps of its own rather than borrowing them. Used ONLY by the logo and its cursor: it is the brand's colour, not the interface's accent, and Flame stays the accent so the two never compete. */ --kb-signal-300: #ffc464; --kb-signal-500: #f5a524; /* the intro's value, for dark grounds */ --kb-signal-700: #9a6408; /* ~4.6:1 on paper, for light grounds */ /* Daylight — the cool end, ~6500K. The other arm of the K. Used for information and cross-references, never for emphasis. */ --kb-blue-50: #edf2f6; --kb-blue-100: #d7e3ec; --kb-blue-200: #b2cbdc; --kb-blue-300: #86aac4; --kb-blue-400: #5c89a8; --kb-blue-500: #3e6e8e; --kb-blue-600: #2f5872; --kb-blue-700: #26455a; --kb-blue-800: #1d3444; --kb-blue-900: #16262f; /* Brass — cautions. Ochre rather than safety-vest yellow, so it sits on paper instead of shouting over it. */ --kb-amber-50: #fbf3de; --kb-amber-100: #f5e4b8; --kb-amber-200: #ebce84; --kb-amber-300: #dfb44e; --kb-amber-400: #ce9c22; --kb-amber-500: #b08415; --kb-amber-600: #8e6a10; --kb-amber-700: #6e520c; --kb-amber-800: #4a3708; --kb-amber-900: #2c2105; /* Verdigris — "this fixed it". */ --kb-green-50: #e9f3ea; --kb-green-100: #cbe3ce; --kb-green-300: #7dbb86; --kb-green-500: #3e8c4c; --kb-green-600: #2f7039; --kb-green-700: #25592d; --kb-green-900: #122a16; /* Oxblood — data loss, destructive commands, failures. */ --kb-red-50: #fbeae8; --kb-red-100: #f4cfcb; --kb-red-300: #e2938c; --kb-red-500: #b3271e; --kb-red-600: #971f18; --kb-red-700: #75201a; --kb-red-900: #3a0f0c; /* --- Typography primitives --- Three faces, each with a job nobody else can do. Newsreader carries the headlines: a text serif with a real optical-size axis, drawn for reading rather than for a hero section. It is the single loudest signal that a person chose the type on this site. IBM Plex Sans is the body and interface face — it was drawn for engineering documentation and it pairs by construction with Plex Mono, which does the code, the data and the labels. The app self-hosts all three through next/font, which exposes each one as --font-kb-*. That name is read through a var() fallback rather than bare, so the static reference pages under /design — which never set it, and load the faces from a stylesheet of their own — fall through to the literal family instead of losing the whole declaration. */ --kb-font-display: var(--font-kb-display, "Newsreader"), "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; --kb-font-sans: var(--font-kb-sans, "IBM Plex Sans"), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --kb-font-mono: var(--font-kb-mono, "IBM Plex Mono"), ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; /* The wordmark's face. JetBrains Mono, fixed-pitch, so the brackets sit exactly one character from the name at every size. Separate from --kb-font-mono: Plex Mono still takes the code, the data and the labels. */ --kb-font-brand: var(--font-kb-brand, "JetBrains Mono"), ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --kb-weight-regular: 400; --kb-weight-medium: 500; --kb-weight-semibold: 600; --kb-weight-bold: 700; /* Fluid type scale. Only the masthead and article titles flex with the viewport; everything below is fixed so body copy never wobbles. */ --kb-text-display: clamp(2.75rem, 1.7rem + 4.6vw, 4.75rem); --kb-text-h1: clamp(2.125rem, 1.5rem + 2.6vw, 3.25rem); --kb-text-h2: clamp(1.5rem, 1.28rem + 1.05vw, 2.0625rem); --kb-text-h3: clamp(1.1875rem, 1.09rem + 0.45vw, 1.4375rem); --kb-text-h4: 1.0625rem; --kb-text-lead: clamp(1.0625rem, 1.01rem + 0.26vw, 1.1875rem); --kb-text-prose: 1.0625rem; /* 17px — long-form reading size */ --kb-text-body: 0.9375rem; /* 15px — UI / list copy */ --kb-text-sm: 0.875rem; /* 14px */ --kb-text-xs: 0.8125rem; /* 13px */ --kb-text-2xs: 0.75rem; /* 12px — labels, meta, index numbers */ --kb-leading-tight: 1.06; --kb-leading-snug: 1.2; --kb-leading-normal: 1.5; --kb-leading-prose: 1.7; /* A serif does not want the aggressive negative tracking a grotesk does; the mono labels get a wide, unmistakably typeset letterspacing. */ --kb-tracking-display: -0.02em; --kb-tracking-tight: -0.01em; --kb-tracking-normal: 0em; --kb-tracking-wide: 0.02em; --kb-tracking-label: 0.12em; /* --- Space scale — 4px base --- */ --kb-space-1: 0.25rem; --kb-space-2: 0.5rem; --kb-space-3: 0.75rem; --kb-space-4: 1rem; --kb-space-5: 1.25rem; --kb-space-6: 1.5rem; --kb-space-8: 2rem; --kb-space-10: 2.5rem; --kb-space-12: 3rem; --kb-space-16: 4rem; --kb-space-20: 5rem; --kb-space-24: 6rem; --kb-space-32: 8rem; /* --- Radii — essentially none. Paper does not have rounded corners, and a 16px radius on every box is the single most legible sign that nobody made a decision. --- */ --kb-radius-xs: 0px; --kb-radius-sm: 1px; --kb-radius-md: 2px; --kb-radius-lg: 2px; --kb-radius-xl: 3px; --kb-radius-2xl: 4px; --kb-radius-full: 999px; /* reserved for genuine circles only */ /* --- Layout --- */ --kb-width-prose: 66ch; --kb-width-content: 1120px; --kb-width-wide: 1360px; --kb-gutter: clamp(1.25rem, 0.8rem + 1.9vw, 3rem); --kb-header-height: 64px; --kb-rule: 1px; /* --- Motion — short, linear-ish, and only ever on colour. Nothing on this site moves, lifts, floats or bounces. --- */ --kb-ease: cubic-bezier(0.2, 0, 0, 1); --kb-ease-out: cubic-bezier(0.2, 0, 0, 1); --kb-duration-fast: 90ms; --kb-duration: 140ms; --kb-duration-slow: 240ms; --kb-z-header: 100; --kb-z-overlay: 200; } /* ========================================================================== 2. SEMANTIC TOKENS — LIGHT (default) Components reference only these. Swapping a theme swaps this block. ========================================================================== */ :root, [data-theme="light"] { color-scheme: light; /* Surfaces. There is no white on this site — the lightest ground is a warm paper, because a page of technical prose on #ffffff is a screen and a page on #faf6ee is a document. */ --kb-surface-sunken: var(--kb-ink-50); --kb-surface-base: var(--kb-ink-25); --kb-surface-raised: var(--kb-ink-0); --kb-surface-overlay: var(--kb-ink-0); --kb-surface-inset: var(--kb-ink-50); --kb-surface-inverse: var(--kb-ink-900); --kb-surface-code: #17130e; /* Text */ --kb-text-primary: var(--kb-ink-900); --kb-text-secondary: var(--kb-ink-500); --kb-text-muted: var(--kb-ink-400); --kb-text-faint: var(--kb-ink-300); --kb-text-inverse: var(--kb-ink-25); --kb-text-on-accent: var(--kb-ink-0); /* Borders. These are rules, in the printing sense — they carry the structure of the page, so they are a touch darker than a decorative hairline would be. */ --kb-border-subtle: var(--kb-ink-100); --kb-border: var(--kb-ink-150); --kb-border-strong: var(--kb-ink-300); --kb-border-inverse: var(--kb-ink-700); /* Accent — Filament */ --kb-accent: var(--kb-flame-600); --kb-accent-hover: var(--kb-flame-700); --kb-accent-active: var(--kb-flame-800); --kb-accent-text: var(--kb-flame-700); --kb-accent-soft: var(--kb-flame-50); --kb-accent-soft-border: var(--kb-flame-100); /* Brand — the logo's own parts. Deliberately not the accent: Flame is the interface's colour, Signal Amber is the brand's. */ --kb-bracket: var(--kb-signal-700); --kb-wordmark: var(--kb-ink-900); --kb-cursor: var(--kb-signal-700); /* Warm — Brass. Cautions. */ --kb-warm: var(--kb-amber-500); --kb-warm-text: var(--kb-amber-700); --kb-warm-soft: var(--kb-amber-50); --kb-warm-soft-border: var(--kb-amber-100); /* Cool — Daylight. Cross-references and notes. */ --kb-cool: var(--kb-blue-500); --kb-cool-text: var(--kb-blue-700); --kb-cool-soft: var(--kb-blue-50); --kb-cool-soft-border: var(--kb-blue-100); /* Status */ --kb-success: var(--kb-green-600); --kb-success-text: var(--kb-green-700); --kb-success-soft: var(--kb-green-50); --kb-success-soft-border: var(--kb-green-100); --kb-danger: var(--kb-red-500); --kb-danger-text: var(--kb-red-700); --kb-danger-soft: var(--kb-red-50); --kb-danger-soft-border: var(--kb-red-100); /* Elevation. Retained only for things that genuinely float above the page — menus, modals. No card on this site casts a shadow. */ --kb-shadow-sm: 0 1px 0 rgba(23, 20, 15, 0.05); --kb-shadow-md: 0 1px 2px rgba(23, 20, 15, 0.08), 0 4px 10px -6px rgba(23, 20, 15, 0.14); --kb-shadow-lg: 0 2px 4px rgba(23, 20, 15, 0.07), 0 14px 30px -14px rgba(23, 20, 15, 0.24); --kb-shadow-accent: none; /* Decorative */ --kb-grid-line: rgba(23, 20, 15, 0.06); --kb-scrim: rgba(23, 20, 15, 0.42); } /* ========================================================================== 3. SEMANTIC TOKENS — DARK Not an inversion, and not the blue-black every dark mode defaults to. This is a warm charcoal — the colour of a workshop at night rather than the colour of a terminal emulator — because most of this audience reads at 11pm with a broken machine in front of them. ========================================================================== */ [data-theme="dark"] { color-scheme: dark; --kb-surface-sunken: var(--kb-ink-1000); --kb-surface-base: var(--kb-ink-950); --kb-surface-raised: var(--kb-ink-875); --kb-surface-overlay: var(--kb-ink-850); --kb-surface-inset: var(--kb-ink-900); --kb-surface-inverse: var(--kb-ink-25); --kb-surface-code: #080705; --kb-text-primary: var(--kb-ink-50); --kb-text-secondary: var(--kb-ink-200); --kb-text-muted: var(--kb-ink-250); --kb-text-faint: var(--kb-ink-300); --kb-text-inverse: var(--kb-ink-900); --kb-text-on-accent: var(--kb-ink-1000); --kb-border-subtle: var(--kb-ink-800); --kb-border: var(--kb-ink-750); --kb-border-strong: var(--kb-ink-600); --kb-border-inverse: var(--kb-ink-150); /* The filament runs hotter on a dark ground: 600 on near-black is a scorch mark, 400 is a lit element. */ --kb-accent: var(--kb-flame-400); --kb-accent-hover: var(--kb-flame-300); --kb-accent-active: var(--kb-flame-200); --kb-accent-text: var(--kb-flame-300); --kb-accent-soft: rgba(221, 124, 58, 0.12); --kb-accent-soft-border: rgba(221, 124, 58, 0.3); --kb-bracket: var(--kb-signal-500); --kb-wordmark: var(--kb-ink-25); --kb-cursor: var(--kb-signal-500); --kb-warm: var(--kb-amber-400); --kb-warm-text: var(--kb-amber-300); --kb-warm-soft: rgba(223, 180, 78, 0.1); --kb-warm-soft-border: rgba(223, 180, 78, 0.26); --kb-cool: var(--kb-blue-400); --kb-cool-text: var(--kb-blue-300); --kb-cool-soft: rgba(134, 170, 196, 0.11); --kb-cool-soft-border: rgba(134, 170, 196, 0.26); --kb-success: var(--kb-green-500); --kb-success-text: var(--kb-green-300); --kb-success-soft: rgba(125, 187, 134, 0.12); --kb-success-soft-border: rgba(125, 187, 134, 0.28); --kb-danger: var(--kb-red-500); --kb-danger-text: var(--kb-red-300); --kb-danger-soft: rgba(226, 147, 140, 0.12); --kb-danger-soft-border: rgba(226, 147, 140, 0.28); --kb-shadow-sm: 0 1px 0 rgba(0, 0, 0, 0.5); --kb-shadow-md: 0 1px 2px rgba(0, 0, 0, 0.5), 0 6px 16px -8px rgba(0, 0, 0, 0.7); --kb-shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.5), 0 18px 40px -16px rgba(0, 0, 0, 0.8); --kb-shadow-accent: none; --kb-grid-line: rgba(244, 238, 227, 0.05); --kb-scrim: rgba(11, 10, 8, 0.72); }