/* ============================================================================
IK12 — Design tokens (CSS variables)
============================================================================
Extracted from DESIGN-IK12-051226.md (Part 10: Implementation).
This file is the canonical token layer for any IK12 surface — product UI,
marketing, document templates. Drop into the global stylesheet.
Structure:
:root Default = Architectural Slate (dark mode)
[data-theme="light"] Light mode override (Cloud foundation)
.scene-immersion Brand-forward dark scene override
@media (forced-colors) Windows High Contrast & a11y schemes
How to switch modes:
→ Cloud (light)
→ Architectural Slate (dark, default)
How to scope the Immersion scene:
Fonts: Halant (serif, judgment), Geist (sans, execution), Geist Mono (proof).
The font imports below assume the page is online. For offline / self-hosted
builds, swap to self-hosted @font-face declarations.
============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Halant:wght@300;400;500;600;700&family=Geist:wght@100..900&family=Geist+Mono:wght@100..900&display=swap');
/* ============================================================================
Base — html / body defaults
============================================================================ */
html, body {
font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
font-weight: 400;
font-size: 15px;
line-height: 1.6;
color: var(--color-text-ink);
background: var(--color-page);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
/* Font-family utilities — apply by class, NOT as a global default */
.halant { font-family: 'Halant', 'Iowan Old Style', Georgia, serif; }
.geist { font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
.mono { font-family: 'Geist Mono', 'SF Mono', Consolas, ui-monospace, monospace; }
/* ============================================================================
:root — Architectural Slate (default dark mode)
============================================================================ */
:root {
/* Foundation */
--color-page: #0D1117;
--color-surface: #141A21;
--color-elevated: #1C232C;
--color-raised: #242C37;
--color-border: #283038;
--color-border-strong: #646E7D;
--color-text-muted: #8A93A0;
--color-text-ink: #E5E9F0;
--color-decorative: #5D6675;
/* Brand · Deep Teal */
--color-teal-50: #E6F1F3;
--color-teal-100: #C2DCE2;
--color-teal-200: #95C1CB;
--color-teal-300: #5FA3B1; /* dark-mode anchor */
--color-teal-400: #2C8294;
--color-teal-500: #0D6473; /* light-mode anchor / brand */
--color-teal-600: #0A4F5C;
--color-teal-700: #073B47;
--color-teal-800: #052831;
--color-teal-900: #021419;
--color-teal-anchor: var(--color-teal-300);
/* Secondary brand · Espresso */
--color-espresso-50: #F5EFE6;
--color-espresso-100: #E8D8C2;
--color-espresso-300: #8A6B45;
--color-espresso-500: #4A3424;
--color-espresso-700: #2A1C10;
/* Carryover · Indigo */
--color-indigo-50: #E6E6F2;
--color-indigo-100: #C9CAE0;
--color-indigo-200: #A8ABCC;
--color-indigo-300: #8F8FCB; /* dark anchor */
--color-indigo-400: #6F70AE;
--color-indigo-500: #5054A0;
--color-indigo-600: #324790; /* light anchor */
--color-indigo-700: #283A78;
--color-indigo-800: #1C2B5C;
/* Carryover · Lavender */
--color-lavender-50: #F4F2F9;
--color-lavender-100: #E8E6F3;
--color-lavender-200: #D8D4E8;
--color-lavender-300: #C7C3DD;
--color-lavender-400: #A8A2CC;
--color-lavender-500: #8B83B8;
/* Surface tints — default state */
--color-tint-teal: #0A2E36;
--color-tint-cyan: #0B323D;
--color-tint-lavender: #1A1E3C;
--color-tint-sky: #122440;
--color-tint-sage: #142E1F;
--color-tint-amber: #2A2415;
--color-tint-coral: #2C1D18;
--color-tint-plum: #251625;
--color-tint-espresso: #2A1F14;
/* Surface tints — hover state */
--color-tint-teal-hover: #0F3D47;
--color-tint-cyan-hover: #11434F;
--color-tint-lavender-hover: #25294C;
--color-tint-sky-hover: #1B3055;
--color-tint-sage-hover: #1D3D29;
--color-tint-amber-hover: #3A311C;
--color-tint-coral-hover: #3C2820;
--color-tint-plum-hover: #321E30;
--color-tint-espresso-hover: #3A2A1C;
/* Tint text pairings — same-family principle */
--color-tint-teal-text: #95C1CB;
--color-tint-cyan-text: #AED6DD;
--color-tint-lavender-text: #C7C3DD;
--color-tint-sky-text: #95B3D7;
--color-tint-sage-text: #94CDA2;
--color-tint-amber-text: #D6B57A;
--color-tint-coral-text: #E5A192;
--color-tint-plum-text: #D29BBD;
--color-tint-espresso-text: #D9C29D;
/* Categorical hues — 8 distinct families for charts / tags / folders */
--color-cat-teal: #5FA3B1;
--color-cat-cyan: #4FB5C7;
--color-cat-indigo: #8F8FCB;
--color-cat-plum: #C18BAC;
--color-cat-coral: #E0937A;
--color-cat-amber: #DEB66E;
--color-cat-sage: #93BDA1;
--color-cat-slate: #94A3AE;
/* Status accent dots */
--color-status-dot-success: #6CA078;
--color-status-dot-warning: #C9A258;
--color-status-dot-error: #D88A6E;
--color-status-dot-info: #8F8FCB;
/* Overlay & elevation */
--scrim: rgba(0, 0, 0, 0.62);
--scrim-light: rgba(0, 0, 0, 0.4);
--scrim-strong: rgba(0, 0, 0, 0.8);
--shadow-1: 0 1px 1px rgba(0, 0, 0, 0.4);
--shadow-2: 0 2px 4px rgba(0, 0, 0, 0.4), 0 1px 1px rgba(0, 0, 0, 0.5);
--shadow-3: 0 8px 16px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.5);
--shadow-4: 0 16px 40px -8px rgba(0, 0, 0, 0.6), 0 4px 8px rgba(0, 0, 0, 0.4);
--shadow-modal: 0 30px 80px -20px rgba(0, 0, 0, 0.8),
0 0 0 0.5px rgba(95, 163, 177, 0.2);
--glow-teal-soft: 0 0 60px -10px rgba(95, 163, 177, 0.3);
--glow-teal-strong: 0 0 100px -10px rgba(44, 130, 148, 0.4);
--focus-ring: 0 0 0 3px var(--color-tint-teal);
--focus-ring-strong: 0 0 0 3px var(--color-teal-300);
/* Brand gradient (logomark) — scene-invariant */
--grad-logomark-top: #52D2BC;
--grad-logomark-bottom: #00BFF2;
/* Typography stacks */
--font-serif: 'Halant', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
--font-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-mono: 'Geist Mono', 'SF Mono', SFMono-Regular, ui-monospace, Menlo, Consolas, monospace;
/* Radii */
--radius-sm: 6px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 16px;
/* Spacing — 4px grid */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
/* Container max-widths */
--container-narrow: 640px;
--container-default: 960px;
--container-wide: 1280px;
/* Z-index scale — used for stacking overlays */
--z-popover: 30;
--z-fab: 40;
--z-toast: 50;
--z-tooltip: 60;
--z-modal: 100;
}
/* ============================================================================
.scene-immersion — Teal Immersion (dark mode brand-forward scene override)
Use for marketing hero, customer story, login, auth, brand-forward modals.
============================================================================ */
.scene-immersion {
--color-page: #041419;
--color-surface: #082028;
--color-elevated: #0D2E38;
--color-raised: #133B47;
--color-border: #173F4D;
--color-border-strong: #4C7383;
--color-text-ink: #E5EFF1;
--color-text-muted: #819499;
--color-tint-teal: #0C3F4E;
--color-tint-cyan: #0E4A5C;
--color-tint-lavender: #1F2243;
--color-tint-sky: #142B47;
--color-tint-sage: #163427;
--color-tint-amber: #2E2A18;
--color-tint-coral: #2E211C;
--color-tint-plum: #261E2E;
--color-tint-espresso: #2D2218;
--color-tint-teal-hover: #14525F;
--color-tint-cyan-hover: #155E72;
--color-tint-lavender-hover: #2A2E55;
--color-tint-sky-hover: #1D375A;
--color-tint-sage-hover: #20422F;
--color-tint-amber-hover: #3E351F;
--color-tint-coral-hover: #3E2C25;
--color-tint-plum-hover: #322640;
--color-tint-espresso-hover: #3D2F20;
--color-tint-amber-text: #D9B775;
--color-tint-coral-text: #E3A595;
--color-tint-plum-text: #C99BB6;
background: var(--color-page);
color: var(--color-text-ink);
}
/* ============================================================================
[data-theme="light"] — Cloud foundation (light mode override)
============================================================================ */
[data-theme="light"] {
--color-page: #FEFEFD;
--color-surface: #F9F8F4;
--color-elevated: #FFFFFF;
--color-border: #EBE8DE;
--color-border-strong: #E1DDCD;
--color-text-muted: #6C6862;
--color-text-ink: #1A1815;
--color-teal-anchor: var(--color-teal-500);
--color-tint-teal: #E6F1F3;
--color-tint-cyan: #DCF0F4;
--color-tint-lavender: #E8E6F3;
--color-tint-sky: #DDE7F4;
--color-tint-sage: #E2EDE0;
--color-tint-amber: #FAEAD0;
--color-tint-coral: #FBE3DC;
--color-tint-plum: #F2E0EA;
--color-tint-espresso: #F5EFE6;
--color-tint-teal-text: #0D6473;
--color-tint-cyan-text: #0D6473;
--color-tint-lavender-text: #324790;
--color-tint-sky-text: #1F4584;
--color-tint-sage-text: #355F35;
--color-tint-amber-text: #7A5810;
--color-tint-coral-text: #8C3621;
--color-tint-plum-text: #6B3D5A;
--color-tint-espresso-text: #4A3424;
/* Categorical — light values */
--color-cat-teal: #0D6473;
--color-cat-cyan: #178C9C;
--color-cat-indigo: #324790;
--color-cat-plum: #8E5277;
--color-cat-coral: #C2664A;
--color-cat-amber: #B8862E;
--color-cat-sage: #5F8B6F;
--color-cat-slate: #5C6D7A;
/* Light mode runs subtle shadows — overrides the dark scale */
--shadow-1: 0 1px 1px rgba(26, 24, 21, 0.04);
--shadow-2: 0 2px 4px rgba(26, 24, 21, 0.06), 0 1px 1px rgba(26, 24, 21, 0.04);
--shadow-3: 0 8px 16px rgba(26, 24, 21, 0.08), 0 2px 4px rgba(26, 24, 21, 0.04);
--shadow-4: 0 16px 40px -8px rgba(26, 24, 21, 0.12), 0 4px 8px rgba(26, 24, 21, 0.06);
}
/* ============================================================================
Forced colors — Windows High Contrast & user-defined accessibility schemes
============================================================================ */
@media (forced-colors: active) {
.status-pill,
.status-callout {
background: Canvas;
color: CanvasText;
border: 1px solid CanvasText;
}
.status-callout {
border-left-width: 3px;
}
.button-cta {
background: ButtonFace;
color: ButtonText;
border-color: ButtonBorder;
}
*:focus-visible {
outline: 2px solid CanvasText;
outline-offset: 2px;
box-shadow: none;
}
.surface-tint,
.scene-immersion {
background: Canvas;
border: 1px solid CanvasText;
}
}
/* ============================================================================
Type scale — canonical classes from DESIGN-IK12 Part 2
Use these instead of ad-hoc font declarations so designs stay interoperable
across surfaces.
============================================================================ */
/* Display — hero moments and section openers */
.display-1 {
font-family: var(--font-serif);
font-weight: 500;
font-size: 64px;
letter-spacing: -0.028em;
line-height: 1;
}
.display-2 {
font-family: var(--font-sans);
font-weight: 500;
font-size: 52px;
letter-spacing: -0.035em;
line-height: 1;
}
/* Headlines */
.h1 {
font-family: var(--font-serif);
font-weight: 500;
font-size: 40px;
letter-spacing: -0.022em;
line-height: 1.06;
}
.h2 {
font-family: var(--font-serif);
font-weight: 500;
font-size: 28px;
letter-spacing: -0.018em;
}
.h3 {
font-family: var(--font-sans);
font-weight: 500;
font-size: 18px;
letter-spacing: -0.005em;
}
/* Body */
.lede {
font-family: var(--font-serif);
font-weight: 400;
font-size: 20px;
line-height: 1.42;
}
.body {
font-family: var(--font-sans);
font-weight: 400;
font-size: 15px;
line-height: 1.6;
}
.caption {
font-family: var(--font-sans);
font-weight: 400;
font-size: 12px;
}
/* Eyebrows / small caps — Geist 500 uppercase, NOT Mono */
.meta {
font-family: var(--font-sans);
font-weight: 500;
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
}
/* Technical — Geist Mono for code, paths, tabular numbers */
.data {
font-family: var(--font-mono);
font-size: 14px;
}
/* ============================================================================
.icon — inline SVG icon utility
Use with ik12-icons.svg sprite:
Inherits font-size (via 1em sizing) and color (via currentColor).
============================================================================ */
.icon {
display: inline-block;
width: 1em;
height: 1em;
vertical-align: -0.125em;
fill: currentColor;
flex-shrink: 0;
}
/* ============================================================================
The five disciplines (encoded here for AI agents reading this file as context)
1. Halant ≥ 16px. Below that it gets brittle; switch to Geist.
2. One voice per moment. Never Halant + Geist at same size/weight on same line.
3. Pick a scene and commit. Don't mix Slate and Immersion inside one screen.
4. Status is icon + label. Color reinforces; it never carries meaning alone.
5. Three or four tints per screen. Tints zone content or carry semantic
meaning — never decoration.
============================================================================ */