/* ============================================================================
Monday Intelligent Systems — Design Tokens (v3 · type LOCKED 2026-06-21)
An infobase, made on purpose.
----------------------------------------------------------------------------
Two surfaces share one token set:
- PAPER primary public. White + ink + yellow marker. BuildPod, coaching,
decks, marketing, web. Loud on what matters.
- CONSOLE primary product. Near-black + cyan terminal accent. mAI agent
UIs, status lines, dashboards.
Pick a surface by adding [data-surface="paper"] or [data-surface="console"]
to a root element. Defaults to PAPER — the public is the front door.
============================================================================ */
/* ---------- Fonts (LOCKED 2026-06-21 · self-hosted 2026-06-22) ----------
A literate mind, speaking plainly, on real machinery.
DISPLAY: Hedvig Letters Serif — titles. Single weight (Regular). The mind.
Emphasis is size + the marker, never faux bold.
SANS: Libre Franklin — body / UI / long-form. Variable 100–900 + italics.
A ~115-year-old newspaper gothic, plain-spoken and human. The mouth.
MONO: JetBrains Mono — paths, events, status lines, kickers. The machine.
ALL self-hosted — variable TTFs in fonts/, NO Google Fonts / network
dependency. Keep the fonts/ folder beside this stylesheet when you install it
(the url()s are relative). Hedvig ships ONE weight (400); font-synthesis-weight
is killed in :root below so the browser never faux-bolds it. */
@font-face {
font-family: "Hedvig Letters Serif";
src:
url("fonts/HedvigLettersSerif-VariableFont_opsz.ttf") format("truetype-variations"),
url("fonts/HedvigLettersSerif-VariableFont_opsz.ttf") format("truetype");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Libre Franklin";
src:
url("fonts/LibreFranklin-VariableFont_wght.ttf") format("truetype-variations"),
url("fonts/LibreFranklin-VariableFont_wght.ttf") format("truetype");
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Libre Franklin";
src:
url("fonts/LibreFranklin-Italic-VariableFont_wght.ttf") format("truetype-variations"),
url("fonts/LibreFranklin-Italic-VariableFont_wght.ttf") format("truetype");
font-weight: 100 900;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "JetBrains Mono";
src:
url("fonts/JetBrainsMono-VariableFont_wght.ttf") format("truetype-variations"),
url("fonts/JetBrainsMono-VariableFont_wght.ttf") format("truetype");
font-weight: 100 800;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "JetBrains Mono";
src:
url("fonts/JetBrainsMono-Italic-VariableFont_wght.ttf") format("truetype-variations"),
url("fonts/JetBrainsMono-Italic-VariableFont_wght.ttf") format("truetype");
font-weight: 100 800;
font-style: italic;
font-display: swap;
}
:root {
/* ============== TYPE FAMILIES ==============
Two job-specific families + one mono.
- DISPLAY (Hedvig Letters Serif) carries voice at scale: titles, posters,
hero moments, BuildPod thumbnails. ONE weight — emphasis is size + marker.
- SANS (Libre Franklin) carries dense work: body text, UI labels, buttons,
long-form reading. Variable, so it has real bold + italic.
- MONO (JetBrains) is the substrate voice — paths, events, status. */
--font-display: "Hedvig Letters Serif", Georgia, "Times New Roman", serif;
--font-sans: "Libre Franklin", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
/* Hedvig ships a single 400 weight — stop the browser faux-bolding any 500–800
display request (Mike: "No Hedvig bolded"). font-synthesis is inherited, so
this reaches runtime-injected text too. Emphasis is size + the marker. */
font-synthesis-weight: none;
/* ============== TYPE SCALE ============== */
--t-xxs: 11px;
--t-xs: 12px;
--t-sm: 13px;
--t-base: 16px;
--t-md: 18px;
--t-lg: 22px;
--t-xl: 28px;
--t-2xl: 40px;
--t-3xl: 56px;
--t-4xl: 80px;
--t-5xl: 120px;
--t-mega: 180px; /* poster moments. Yes, that big. */
/* LEADING ladder — every .t-* class references a step, never a literal.
tight=poster-solid · hero=posters+hero display · display=display+headings ·
normal=body/UI/mono · relaxed=prose · loose=large body.
hero/display/relaxed added 2026-06-22 to cover the display + prose tiers. */
--lh-tight: 1.0; /* @kind font */
--lh-hero: 1.2; /* @kind font */
--lh-display: 1.28; /* @kind font */
--lh-normal: 1.45; /* @kind font */
--lh-relaxed: 1.6; /* @kind font */
--lh-loose: 1.7; /* @kind font */
--tracking-caps: 0.08em; /* section labels, status-line keys */
--tracking-caps-wide: 0.12em; /* wider micro-labels: kit kickers, dividers, table heads */
--tracking-caps-poster: 0.16em; /* poster/stage micro-labels at 1920-scale */
/* ============== SPACING (4px base) ============== */
--s-1: 4px;
--s-2: 8px;
--s-3: 12px;
--s-4: 16px;
--s-5: 20px;
--s-6: 24px;
--s-8: 32px;
--s-10: 40px;
--s-12: 48px;
--s-16: 64px;
--s-20: 80px;
--s-24: 96px;
/* ============== RADII ============== */
/* Files are rectangles. Marker highlights are rectangles. Almost everything
is a rectangle. Anything > 6px feels wrong. */
--r-sm: 2px;
--r-md: 4px;
--r-lg: 6px;
--r-pill: 999px;
--b-hair: 1px;
--b-rule: 2px;
--b-stroke: 3px; /* the "drawn-around-it" thick stroke from the BuildPod thumb */
/* ============== MOTION & STATE ==============
The brand earns trust by feeling deterministic. Reference these — never
hardcode timings — so the whole system shares one feel. --accent-hover and
the focus-ring colour are surface-aware (set in each surface block below). */
--dur-hover: 120ms; /* @kind other */
--dur-panel: 200ms; /* @kind other */
--ease: cubic-bezier(0.2, 0, 0, 1); /* @kind other */
--press-y: 0.5px; /* button press nudge: transform: translateY(var(--press-y)) */
--focus-ring-width: 2px;
--focus-ring-offset: 2px;
/* ============== BRAND COLORS — single source of truth ==============
Hex below is intentionally written out; no oklch / hsla — easier to copy. */
--marker: #ffd23f; /* THE yellow. Highlighter behind words. */
--marker-dark: #e6b91f;
--marker-ink: #0c0c0d; /* text on marker */
--clay: #b8643a; /* warm secondary, human side */
--cyan: #3fb6c8; /* terminal accent — Console surface */
--cyan-hover: #58cad9;
--cyan-ink: #06181b;
--sage: #3fa66b; /* event logged, ok */
--amber: #e89c2a; /* warn — distinct from marker (emphasis) and alert (wrong) */
--alert: #e94b35; /* something is wrong */
--plum: #8a4f8f; /* gated / diagrams */
--slate: #7a8aa4; /* planned / scheduled / not-yet */
/* ============== STAGE SURFACE ==============
The chroma-key green for Mike's FigJam-as-presenter setup. Used ONLY
in the Stage surface — never as a generic UI colour. */
--stage-green: #1fb454;
--stage-veil: rgba(0, 0, 0, 0.45); /* the "go behind" grey overlay */
/* ============== SEMANTIC STATUS ALIASES ==============
For dashboards, status boards, operator UIs. Use these names — not raw
palette tokens — so a global rebalance changes one variable, not 50.
ok things are good, logged, verified
warn attention but not blocking — amber, distinct from yellow marker
alert blocking, wrong, immediate
planned not yet started, scheduled, future
gated blocked on something else, waiting
info neutral information, "look at this"
live active, streaming, in-progress */
--status-ok: var(--sage);
--status-warn: var(--amber);
--status-alert: var(--alert);
--status-planned: var(--slate);
--status-gated: var(--plum);
--status-info: var(--cyan); /* info + live deliberately share cyan — */
--status-live: var(--cyan); /* tell live apart by motion (typing cursor / pulse dot), not hue. */
/* Density tokens are defined once in the grouped selector below (after :root
closes) so the default and an explicit [data-density="comfortable"] stay in
sync — see DENSITY MODES. */
}
/* ============== DENSITY MODES ==============
Default = comfortable (BuildPod show notes, marketing, settings).
Compact = dashboards, event streams, data tables. Wrap a region in
[data-density="compact"] to switch; [data-density="comfortable"] resets back. */
:root,
[data-density="comfortable"] {
--row-pad-y: 8px;
--row-pad-x: 14px;
--row-gap: 6px;
--row-line: 1.5; /* @kind font */
--data-size: 14px;
}
[data-density="compact"] {
--row-pad-y: 3px;
--row-pad-x: 10px;
--row-gap: 2px;
--row-line: 1.3; /* @kind font */
--data-size: 12px;
}
/* ============================================================================
STAGE — transparent-PNG surface for FigJam-as-presenter setup.
The slide is text + elements only — Mike's FigJam canvas provides the
chroma green, his eCamm setup provides the behind-Mike veil. We design
for what gets composited: white type on transparent, with the marker as
the brand thread. Mike screenshots the slide → drops the transparent
PNG onto his FigJam board.
============================================================================ */
[data-surface="stage"] {
--bg: transparent;
--panel: transparent;
--panel-alt: transparent;
--border: rgba(255,255,255,0.4);
--rule: rgba(255,255,255,0.3);
--fg: #ffffff;
--fg-soft: #f1ebdb;
--muted: rgba(255,255,255,0.7);
--whisper: rgba(255,255,255,0.45);
--selection: rgba(255,255,255,0.2);
--accent: var(--marker);
--accent-ink: var(--marker-ink);
--accent-hover: var(--marker-dark);
--link: var(--marker);
--shadow-sm: none;
--shadow-md: none;
--shadow-lg: none;
/* Legibility drop-shadows — the ONE place stage shadow values live. Stage
type composites over arbitrary FigJam backgrounds, so every text element
carries one of these. Tiered by type scale; never hardcode the rgba. */
--stage-shadow-lg: 0 4px 24px rgba(0,0,0,0.4); /* titles, big display */
--stage-shadow-md: 0 3px 18px rgba(0,0,0,0.4); /* h2, mono, list commands */
--stage-shadow-sm: 0 2px 12px rgba(0,0,0,0.4); /* body, notes */
--stage-shadow-xs: 0 2px 8px rgba(0,0,0,0.4); /* micro-labels, citations */
}
/* ============================================================================
PAPER — primary public surface. The default.
White + ink + yellow marker. BuildPod, coaching, decks, marketing.
(Was cream until 2026-06-21; went white — cleaner, less generic-AI house style.
Console is untouched.)
============================================================================ */
:root,
[data-surface="paper"] {
--bg: #ffffff; /* white */
--panel: #f4f4f2; /* cards, asides */
--panel-alt: #ebebe8;
--border: #e6e6e3;
--rule: #e0e0dc;
--fg: #0c0c0d; /* ink */
--fg-soft: #2c2a25;
--muted: #6e6a60;
--whisper: #9a958a;
--selection: var(--marker);
--accent: var(--marker);
--accent-ink: var(--marker-ink);
--accent-hover: var(--marker-dark);
--link: var(--clay);
/* No shadows on Paper. Use rules, blocks, and ink weight. */
--shadow-sm: none;
--shadow-md: none;
--shadow-lg: none;
}
/* ============================================================================
CONSOLE — primary product surface.
Near-black + cyan terminal accent. Used for mAI agent UIs, dashboards.
============================================================================ */
[data-surface="console"] {
--bg: #0c0c0d; /* near-black */
--panel: #18181b;
--panel-alt: #22222a;
--border: #2e2e36;
--rule: #3a3a45;
--fg: #f1ebdb; /* warm cream text on near-black */
--fg-soft: #c7c1ad;
--muted: #8a8472;
--whisper: #5b5648;
--selection: rgba(63, 182, 200, 0.18); /* cyan wash */
--accent: var(--cyan);
--accent-ink: var(--cyan-ink);
--accent-hover: var(--cyan-hover);
--link: var(--cyan);
/* Console has subtle shadows for layering only. Never decorative. */
--shadow-sm: 0 1px 0 0 rgba(0,0,0,0.45);
--shadow-md: 0 4px 16px rgba(0,0,0,0.4);
--shadow-lg: 0 12px 40px rgba(0,0,0,0.55);
}
/* ============================================================================
SEMANTIC TYPE — use these classes in product code.
Display = Hedvig Letters Serif, ONE weight (Regular). Emphasis is size +
the marker, never faux bold. Titles get generous leading (≥1.2) so a marked
word on a wrapped line gets air. Body = Libre Franklin (real bold + italic).
============================================================================ */
/* DISPLAY — Hedvig serif, set once. Confident, literate, quiet. */
.t-poster {
font-family: var(--font-display);
font-size: clamp(72px, 12vw, var(--t-mega));
line-height: var(--lh-hero);
letter-spacing: -0.01em;
font-weight: 400;
}
.t-display-xl { font-family: var(--font-display); font-size: clamp(56px, 8vw, var(--t-5xl)); line-height: var(--lh-hero); letter-spacing: -0.008em; font-weight: 400; }
.t-display { font-family: var(--font-display); font-size: var(--t-4xl); line-height: var(--lh-display); letter-spacing: -0.006em; font-weight: 400; }
.t-display-sm { font-family: var(--font-display); font-size: var(--t-3xl); line-height: var(--lh-display); letter-spacing: -0.005em; font-weight: 400; }
/* HEADINGS — Hedvig serif at h1/h2 (where character shows); Libre Franklin at
h3/h4 (where calm and readable wins, and real semibold is available). */
.t-h1 { font-family: var(--font-display); font-size: var(--t-2xl); line-height: var(--lh-display); letter-spacing: -0.004em; font-weight: 400; }
.t-h2 { font-family: var(--font-display); font-size: var(--t-xl); line-height: var(--lh-display); letter-spacing: -0.002em; font-weight: 400; }
.t-h3 { font-family: var(--font-sans); font-size: var(--t-lg); line-height: var(--lh-display); letter-spacing: -0.008em; font-weight: 600; }
.t-h4 { font-family: var(--font-sans); font-size: var(--t-md); line-height: var(--lh-display); font-weight: 600; }
/* BODY — Libre Franklin. Plain-spoken, human, with real bold + italic. */
.t-body { font-family: var(--font-sans); font-size: var(--t-base); line-height: var(--lh-normal); font-weight: 400; }
.t-body-lg { font-family: var(--font-sans); font-size: var(--t-md); line-height: var(--lh-loose); font-weight: 400; }
.t-body-sm { font-family: var(--font-sans); font-size: var(--t-sm); line-height: var(--lh-normal); font-weight: 400; }
/* PROSE — long-form reading width */
.t-prose { font-family: var(--font-sans); font-size: var(--t-md); line-height: var(--lh-relaxed); font-weight: 400; max-width: 62ch; }
/* MONO — substrate voice. File paths, events, status lines, code. */
.t-mono { font-family: var(--font-mono); font-size: var(--t-sm); line-height: var(--lh-normal); font-weight: 400; }
.t-mono-sm { font-family: var(--font-mono); font-size: var(--t-xs); line-height: var(--lh-normal); font-weight: 400; }
.t-code { font-family: var(--font-mono); font-size: var(--t-sm); line-height: var(--lh-normal); font-weight: 400; }
/* KICKER — UPPERCASE mono label, used as section markers + status keys.
"EVENTS LOGGED →" / "CONTEXT:" / "AIM · IN-PROGRESS" */
.t-kicker {
font-family: var(--font-mono);
font-size: var(--t-xxs);
letter-spacing: var(--tracking-caps);
text-transform: uppercase;
font-weight: 500;
color: var(--muted);
}
/* MICRO-LABEL — the mono uppercase label used all over (kickers, data keys,
table heads, dividers, badges). ONE pattern; vary colour/size at the call site
instead of re-writing font + transform + tracking each time. .t-kicker is the
muted xxs flavour; .t-microlabel is the raw pattern at the wider tracking. */
.t-microlabel {
font-family: var(--font-mono);
font-size: var(--t-xxs);
letter-spacing: var(--tracking-caps-wide);
text-transform: uppercase;
font-weight: 500;
}
/* ============== MARKER — the brand's signature move ==============
A solid yellow band behind the 1 load-bearing word. Mike's actual idiom.
Use inline: this matters (or ).
ONE definition, here only. The alias selectors below cover every name the
system uses — , .t-marker (product code), .marker (preview cards),
.s-marker (stage slides) — so nothing is mirrored across files and nothing
can drift. Do NOT re-declare the geometry anywhere else. If a context needs a
different colour (Console = cyan), override ONLY background-image + color; on
Stage, override ONLY text-shadow. Never the geometry.
Geometry:
- Vertical: a FIXED-HEIGHT band (background-size 100% 1em, NOT the line box)
so it hugs the word and clears the lines above/below at any leading;
descenders deliberately run below it, like a real highlighter.
- Horizontal: a little padding for breathing space, and NO negative margin.
Negative margin pulls neighbours in and jams tight-tracked text
("Now this" -> "Nowthis"). Plain padding never jams; a marked word is a
hair wider, which simply reads as highlighter padding.
- Compounds where the highlight is PART of one word (mAI, BuildPod) must stay
joined, so they use (zero horizontal padding). */
mark,
.t-marker,
.marker,
.marker-cyan,
.s-marker {
background-color: transparent; /* clear the UA yellow so only the band shows */
background-image: linear-gradient(var(--marker), var(--marker));
background-repeat: no-repeat;
background-size: 100% 1.0em;
background-position: 0 54%;
color: var(--marker-ink);
letter-spacing: 0; /* reset inherited tracking so marked words never jam */
padding: 0 0.1em;
border-radius: 2px;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
font-weight: inherit;
}
/* Compounds: highlight is part of a single word — stay flush/joined. */
mark.flush, .t-marker.flush, .marker.flush, .marker-cyan.flush, .s-marker.flush { padding-left: 0; padding-right: 0; }
/* Console variant: flip ONLY colour — geometry comes from the rule above, never restated. */
.marker-cyan { background-image: linear-gradient(var(--cyan), var(--cyan)); color: var(--cyan-ink); }
/* PULL QUOTE — Mike's voice. Hedvig serif, big, with the marker on the lift. */
.t-pullquote {
font-family: var(--font-display);
font-size: var(--t-2xl);
line-height: var(--lh-display);
font-weight: 400;
letter-spacing: -0.004em;
color: var(--fg);
max-width: 24ch;
}
/* INLINE TOKENS */
.t-link {
color: var(--link);
text-decoration: none;
border-bottom: 1px solid color-mix(in oklab, var(--link) 40%, transparent);
}
.t-link:hover { border-bottom-color: var(--link); }
.t-em { font-style: italic; }
.t-strong { font-weight: 700; }
.t-num { font-variant-numeric: tabular-nums; }
/* ============================================================================
THE STATUS LINE — Mike's actual mAI status bar, as a real brand artifact.
Used in product chrome, BuildPod thumbnails, deck headers. Built from this
pattern; never reinvented inline.
============================================================================ */
.status-line {
display: inline-flex;
align-items: baseline;
gap: var(--s-3);
font-family: var(--font-mono);
font-size: var(--t-sm);
letter-spacing: 0;
white-space: nowrap;
}
.status-line .key { color: var(--marker); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 500; }
.status-line .val { color: var(--fg); }
.status-line .sep { color: var(--whisper); }
.status-line .ok { color: var(--sage); }
.status-line .live { color: var(--cyan); }
/* ============================================================================
KEYBOARD FOCUS — one surface-aware ring for the whole system. :where() keeps
specificity at 0 so any component can override. Uses the surface accent
(marker on Paper, cyan on Console).
============================================================================ */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
outline: var(--focus-ring-width) solid var(--accent);
outline-offset: var(--focus-ring-offset);
}