/* ============================================================================ K6 UNIFIED DESIGN LANGUAGE — "Eén taal, twee dialecten" — tokens + components ---------------------------------------------------------------------------- Canon since 2026-07-14 (Philippe): the live k6trading.com editorial language for everything K6 — Inter, ink on warm paper (#f2f0ea), one orange (#E86209) as the ONLY action colour, square vlakken, 1px lines, no shadows, no pills. The app speaks the instrument-dialect: density + semantics-as-chip (never a button), full orange = irreversible, a warm dark palette (not a token-flip). Spec: docs/superpowers/specs/2026-07-14-k6-unified-design-language-design.md Specimen: docs/design/k6_unified_specimen_draft.html (approved light+dark) OPT-IN ONLY. Everything here is scoped under html[data-design="unified"], and this file is NOT auto-injected (unlike tokens.css). A surface migrates by doing BOTH: (1) set data-design="unified" on , (2) link this stylesheet after tokens.css. Surfaces that do neither stay pixel-identical to before. Var names deliberately mirror tokens.css / tokens2.css (--bg, --panel, --fg, --accent, --radius-*, --shadow-*…) so the shared chrome (base.css .k6-shell/ .k6-topbar, page-head, pills) re-skins to the unified language automatically; the unified values win via the attribute scope. The reauthored surface BODIES compose the explicit .k6u-* components below — that structural layer is where the felt-delta lives (this is herauthoring, not a token-swap reskin). ========================================================================== */ /* ---- Tokens: LIGHT (warm paper) ------------------------------------------ */ html[data-design="unified"] { /* The unified spec tokens (canonical names; used by .k6u-* components). */ --u-ink: #111111; --u-ink-2: #3d3c39; --u-muted: #66645f; --u-line: #d9d7d1; --u-paper: #f2f0ea; --u-panel: #ffffff; --u-accent: #E86209; --u-pos: #14663f; --u-pos-bg: #e5f0e8; --u-neg: #b3261e; --u-neg-bg: #f7e6e4; --u-att: #775c12; --u-att-bg: #f3ecd6; /* darkened from #8a6d1a: 4.15→5.35:1 on the tint (AA small-text) — same AA pass already applied to --u-pos */ --u-f: 'Inter', -apple-system, 'Segoe UI', sans-serif; --u-m: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace; /* Shared-chrome remap (v1/v2 var names → unified values). */ --bg: #f2f0ea; --ground: #f2f0ea; --panel: #ffffff; --panel-2: #efece5; --fg: #111111; --ink: #111111; --fg-2: #3d3c39; --ink-2: #3d3c39; --fg-3: #66645f; --ink-3: #66645f; --fg-4: #6a6760; /* AA-safe muted (~4.8:1 on paper); #86837c failed at 3.3 */ --border: #d9d7d1; --border-2: #c9c6bf; --border-strong: #c9c6bf; --border-soft: #d9d7d1; --surface: #ffffff; --text-1: #111111; --text-2: #3d3c39; --text-3: #66645f; /* accent — the ONE action colour. The vivid brand orange #E86209 lives in --u-accent (fills, kicker dashes, tab baselines, the money signature — large/non-text, AA-defensible). The shared-chrome --accent is a darker orange so small orange TEXT/links (.va-* "More", toggles, recon chips) clear AA 4.5:1 on both white panels and warm paper (a11y-grill fold). */ --accent: #a5490a; --accent-hover: #8a3d08; --accent-ink: #ffffff; --accent-fg: #ffffff; --accent-soft: #f6e6d8; /* semantic — state only, never decoration (rendered as chips). Positive green darkened so P&L profit numbers + chip text clear AA on paper. */ --pos: #14663f; --pos-soft: #e5f0e8; --neg: #b3261e; --neg-soft: #f7e6e4; --warn: #775c12; --warn-soft: #f3ecd6; /* AA: matches --u-att darkening */ /* geometry — square: 0 radius, 1px lines, no shadow */ --radius-lg: 0; --radius-md: 0; --radius-sm: 0; --radius-card: 0; --radius-inner: 0; --radius-field: 0; --radius-pill: 0; --shadow-sm: none; --shadow-md: none; --shadow-card: none; --shadow-btn: none; --shadow-modal: 0 8px 40px rgba(17, 17, 17, 0.18); --shadow-focus: 0 0 0 3px rgba(232, 98, 9, 0.30); /* type — Inter everywhere, JetBrains Mono for data/microlabels */ --font-display: 'Inter', -apple-system, 'Segoe UI', sans-serif; --font-sans: 'Inter', -apple-system, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace; --mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace; /* the per-category launcher spines collapse to the one line colour — the unified language carries category identity through the kicker, not colour */ --home-accent-ops: #d9d7d1; --home-accent-research: #d9d7d1; --home-accent-finance: #d9d7d1; --home-accent-system: #d9d7d1; /* spacing scale (base-4) */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; background: var(--u-paper); color: var(--u-ink-2); } /* ---- Tokens: DARK (warm anthracite — a deliberate palette, not a flip) ---- The theme bootstrapper stamps data-theme="dark" on as well as , and tokens.css's [data-theme="dark"] block redefines vars ON body, beating any value inherited from . Matching the stamped descendant too keeps the unified values winning at every element that carries the attribute. */ html[data-design="unified"][data-theme="dark"], html[data-design="unified"] [data-theme="dark"] { --u-ink: #f0eee9; --u-ink-2: #c9c7c1; --u-muted: #98958e; --u-line: #3a3835; --u-paper: #1c1b19; --u-panel: #252422; --u-accent: #F07A2A; --u-pos: #5fc98a; --u-pos-bg: #213528; --u-neg: #f28b82; --u-neg-bg: #3a2523; --u-att: #d9b45c; --u-att-bg: #35301f; --bg: #1c1b19; --ground: #1c1b19; --panel: #252422; --panel-2: #2e2c29; --fg: #f0eee9; --ink: #f0eee9; --fg-2: #c9c7c1; --ink-2: #c9c7c1; --fg-3: #98958e; --ink-3: #98958e; --fg-4: #98958e; --border: #3a3835; --border-2: #47443f; --border-strong: #47443f; --border-soft: #3a3835; --surface: #252422; --text-1: #f0eee9; --text-2: #c9c7c1; --text-3: #98958e; --accent: #F07A2A; --accent-hover: #f28c45; /* On-fill text flips with the theme: the dark accent is light, so white text is only 2.8:1 (axe serious on .k6-home-link + every primary button). Warm dark ink = 6.1:1. Same rule as tokens.css dark --accent-fg (2026-07-09). */ --accent-ink: #1c1b19; --accent-fg: #1c1b19; --accent-soft: #35281d; --pos: #5fc98a; --pos-soft: #213528; --neg: #f28b82; --neg-soft: #3a2523; --warn: #d9b45c; --warn-soft: #35301f; --shadow-modal: 0 8px 40px rgba(0, 0, 0, 0.55); --shadow-focus: 0 0 0 3px rgba(240, 122, 42, 0.35); } /* tokens.css recomputes --accent per tool via .k6-shell[data-tool] (the v1 per-tool identity system). The unified language rations colour to ONE orange, so the shell re-pins the accent under the unified scope — higher specificity than the [data-tool] recompute, both themes. */ html[data-design="unified"] .k6-shell { --accent: #a5490a; --accent-hover: #8a3d08; --accent-ink: #ffffff; --accent-fg: #ffffff; --accent-soft: #f6e6d8; } html[data-design="unified"][data-theme="dark"] .k6-shell, html[data-design="unified"] [data-theme="dark"] .k6-shell { --accent: #F07A2A; --accent-hover: #f28c45; --accent-ink: #1c1b19; --accent-fg: #1c1b19; --accent-soft: #35281d; } html[data-design="unified"] body { font-family: var(--u-f); background: var(--u-paper); color: var(--u-ink-2); } /* ============================================================================ COMPONENT LAYER — .k6u-* (compose these; never fork per surface) ========================================================================== */ /* — Herkenningstekens: the orange kicker dash + mono-uppercase microlabels — */ html[data-design="unified"] .k6u-kicker { font-family: var(--u-m); font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--u-ink); display: flex; align-items: center; gap: 10px; } html[data-design="unified"] .k6u-kicker::before { content: ""; width: 26px; height: 2px; background: var(--u-accent); flex: 0 0 auto; } html[data-design="unified"] .k6u-micro { font-family: var(--u-m); font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--u-muted); } /* — Page hero (dense editorial): kicker + tight display h1 + muted sub — */ html[data-design="unified"] .k6u-hero { margin: 4px 0 30px; } html[data-design="unified"] .k6u-hero h1, html[data-design="unified"] .k6u-h1 { font-family: var(--u-f); font-size: 34px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.06; color: var(--u-ink); margin: 14px 0 0; } html[data-design="unified"] .k6u-hero .k6u-sub { max-width: 60ch; color: var(--u-muted); font-size: 14px; line-height: 1.5; margin: 10px 0 0; } /* — Section header: hairline rule + kicker (reused for category/section heads) */ html[data-design="unified"] .k6u-sect { margin: 34px 0 16px; padding-top: 22px; border-top: 1px solid var(--u-line); display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } html[data-design="unified"] .k6u-sect:first-of-type { border-top: 0; padding-top: 0; } html[data-design="unified"] .k6u-sect-title { font-family: var(--u-f); font-size: 22px; font-weight: 600; letter-spacing: -0.02em; color: var(--u-ink); } /* — Panels: white vlak, 1px kader, no shadow, no radius — */ html[data-design="unified"] .k6u-panel { background: var(--u-panel); border: 1px solid var(--u-line); border-radius: 0; box-shadow: none; } /* — Buttons — */ html[data-design="unified"] .k6u-btn { font-family: var(--u-f); font-size: 13px; font-weight: 600; padding: 10px 20px; cursor: pointer; border-radius: 0; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; background: var(--u-ink); color: var(--u-paper); border: 1px solid var(--u-ink); border-top: 2px solid var(--u-accent); } html[data-design="unified"] .k6u-btn--secondary { background: transparent; color: var(--u-ink); border: 1px solid var(--u-line); border-top: 1px solid var(--u-line); } html[data-design="unified"] .k6u-btn--danger { background: var(--u-accent); color: #ffffff; border: 1px solid var(--u-accent); border-top: 2px solid var(--u-ink); } html[data-design="unified"] .k6u-btn--quiet { background: none; border: none; color: var(--u-ink); border-bottom: 1px solid var(--u-accent); padding: 6px 2px; } html[data-design="unified"] .k6u-btn:focus-visible { outline: 2px solid var(--u-accent); outline-offset: 2px; } /* — Status-chips: toestand, nooit actie (mono, tinted, non-interactive) — */ html[data-design="unified"] [class^="k6u-chip"], html[data-design="unified"] [class*=" k6u-chip"] { display: inline-block; font-family: var(--u-m); font-size: 10px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; padding: 3px 9px; border-radius: 0; cursor: default; border: 1px solid transparent; } html[data-design="unified"] .k6u-chip--live { color: var(--u-pos); background: var(--u-pos-bg); } html[data-design="unified"] .k6u-chip--att { color: var(--u-att); background: var(--u-att-bg); } html[data-design="unified"] .k6u-chip--err { color: var(--u-neg); background: var(--u-neg-bg); } /* — KPI-rail: cells split by hairlines on a single 1px-framed panel — */ html[data-design="unified"] .k6u-kpis { display: grid; border: 1px solid var(--u-line); background: var(--u-panel); } /* auto-fit variant (health-surfaces) — vervangt de inline * grid-template-columns style= (CSP style-src 'self', 4b 2026-07-19) */ html[data-design="unified"] .k6u-kpis--fit { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } /* Spacing-utilities (4b, 2026-07-19) — 1-op-1 vervanging van de laatste * inline style=-attributen op de W2-surfaces (CSP style-src 'self' laat * geen style-attributen toe). Elke utility spiegelt de exacte oude * declaratie zodat de felt-delta nul is. */ html[data-design="unified"] .k6u-mt10 { margin-top: 10px; } html[data-design="unified"] .k6u-mt12 { margin-top: 12px; } html[data-design="unified"] .k6u-mt18 { margin-top: 18px; } html[data-design="unified"] .k6u-mb14 { margin-bottom: 14px; } html[data-design="unified"] .k6u-stack10 { margin: 10px 0 0; } html[data-design="unified"] .k6u-pull8 { margin: -8px; } /* panel zonder binnenpadding (tabel vult het hele kader) — vervangt * style='padding:0' op .k6u-panel in lineage/forecast */ html[data-design="unified"] .k6u-panel--flush { padding: 0; } html[data-design="unified"] .k6u-kpi { padding: 20px 22px; min-width: 0; } html[data-design="unified"] .k6u-kpi + .k6u-kpi { border-left: 1px solid var(--u-line); } html[data-design="unified"] .k6u-kpi .k6u-kpi-label { font-family: var(--u-m); font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--u-muted); } html[data-design="unified"] .k6u-kpi .k6u-kpi-value { font-size: 27px; font-weight: 600; letter-spacing: -0.02em; margin-top: 6px; color: var(--u-ink); font-variant-numeric: tabular-nums; } html[data-design="unified"] .k6u-kpi .k6u-kpi-delta { font-family: var(--u-m); font-size: 11px; margin-top: 4px; color: var(--u-muted); } html[data-design="unified"] .k6u-up { color: var(--u-pos); } html[data-design="unified"] .k6u-down { color: var(--u-neg); } /* — Geld: the K6 signature (euro in accent, decimals muted, Inter tabular) — */ html[data-design="unified"] .k6u-money { font-weight: 600; letter-spacing: -0.03em; color: var(--u-ink); font-variant-numeric: tabular-nums; } html[data-design="unified"] .k6u-money .k6u-eur { color: var(--u-accent); } html[data-design="unified"] .k6u-money .k6u-dec { color: var(--u-muted); } html[data-design="unified"] .k6u-money-lg { font-size: 40px; font-weight: 600; letter-spacing: -0.03em; color: var(--u-ink); font-variant-numeric: tabular-nums; } html[data-design="unified"] .k6u-money-lg .k6u-eur { color: var(--u-accent); font-size: 24px; vertical-align: 14px; margin-right: 2px; } html[data-design="unified"] .k6u-money-lg .k6u-dec { color: var(--u-muted); } /* — Tabel: wit paneel, 1px kader, mono-cijfers rechts — */ html[data-design="unified"] .k6u-table { width: 100%; border-collapse: collapse; background: var(--u-panel); border: 1px solid var(--u-line); } html[data-design="unified"] .k6u-table th { font-family: var(--u-m); font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--u-muted); text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--u-line); } html[data-design="unified"] .k6u-table td { padding: 13px 16px; border-bottom: 1px solid var(--u-line); font-variant-numeric: tabular-nums; color: var(--u-ink-2); } html[data-design="unified"] .k6u-table tbody tr:last-child td { border-bottom: none; } html[data-design="unified"] .k6u-table td.k6u-num { text-align: right; font-family: var(--u-m); font-size: 13px; color: var(--u-ink); } /* — Tabs: 1px kader, active tab carries an orange inset baseline — */ html[data-design="unified"] .k6u-tabs { display: flex; border: 1px solid var(--u-line); width: max-content; max-width: 100%; background: var(--u-panel); overflow-x: auto; } html[data-design="unified"] .k6u-tabs .k6u-tab { font-family: var(--u-f); font-size: 13px; font-weight: 500; padding: 9px 18px; color: var(--u-muted); cursor: pointer; text-decoration: none; white-space: nowrap; border-right: 1px solid var(--u-line); } html[data-design="unified"] .k6u-tabs .k6u-tab:last-child { border-right: none; } html[data-design="unified"] .k6u-tabs .k6u-tab.is-on { color: var(--u-ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--u-accent); } /* motion discipline */ @media (prefers-reduced-motion: reduce) { html[data-design="unified"] * { transition: none !important; } }