/* ============================================================================ Monday Intelligent Systems — Design Tokens (v2) An infobase, made on purpose. ---------------------------------------------------------------------------- Two surfaces share one token set: - PAPER primary public. Cream + 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 ---------- DISPLAY: Bricolage Grotesque — self-hosted variable file in fonts/. Three axes: opsz (12–96), wdth (75–100), wght (200–800). SANS: Geist — Google Fonts CDN. MONO: JetBrains Mono — Google Fonts CDN. */ @font-face { font-family: "Bricolage Grotesque"; src: url('fonts/BricolageGrotesque-VariableFont_opsz_wdth_wght.ttf') format('truetype-variations'), url('fonts/BricolageGrotesque-VariableFont_opsz_wdth_wght.ttf') format('truetype'); font-weight: 200 800; font-stretch: 75% 100%; font-style: normal; font-display: swap; } @import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=JetBrains+Mono:ital,wght@0,400;0,500;0,700;1,400&display=swap'); :root { /* ============== TYPE FAMILIES ============== Two job-specific families + one mono. - DISPLAY (Bricolage) carries voice at scale: posters, headings, hero moments, BuildPod thumbnails. Variable axes (opsz, wdth, wght). - SANS (Geist) carries dense work: body text, UI labels, long-form reading. Calmer, doesn't get in the way. - MONO (JetBrains) is the substrate voice — paths, events, status. */ --font-display: "Bricolage Grotesque", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* Optical-size shortcuts — apply via font-variation-settings */ --opsz-text: "opsz" 14; /* body */ --opsz-display: "opsz" 96; /* hero */ --opsz-mid: "opsz" 48; /* h1/h2 */ /* ============== 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. */ --lh-tight: 1.0; --lh-snug: 1.15; --lh-normal: 1.45; --lh-loose: 1.7; --tracking-tight: -0.025em; --tracking-normal: 0; --tracking-caps: 0.08em; /* SECTION LABELS, status line keys */ /* ============== 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 */ /* ============== 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 */ --clay-hover: #cf7345; --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); --status-live: var(--cyan); /* ============== DENSITY MODES ============== Default = comfortable (BuildPod show notes, marketing, settings). Compact = dashboards, event streams, data tables. Wrap a region in [data-density="compact"] to switch. */ --row-pad-y: 8px; --row-pad-x: 14px; --row-gap: 6px; --row-line: 1.5; --data-size: 14px; } [data-density="comfortable"] { --row-pad-y: 8px; --row-pad-x: 14px; --row-gap: 6px; --row-line: 1.5; --data-size: 14px; } [data-density="compact"] { --row-pad-y: 3px; --row-pad-x: 10px; --row-gap: 2px; --row-line: 1.3; --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); --link: var(--marker); --shadow-sm: none; --shadow-md: none; --shadow-lg: none; } /* ============================================================================ PAPER — primary public surface. The default. Cream + ink + yellow marker. BuildPod, coaching, decks, marketing. ============================================================================ */ :root, [data-surface="paper"] { --bg: #f1ebdb; /* warm cream */ --panel: #e6dec8; /* cards, asides */ --panel-alt: #ddd3b8; --border: #c9c1aa; --rule: #b8af94; --fg: #0c0c0d; /* ink */ --fg-soft: #2c2a25; --muted: #6e6753; --whisper: #9a917e; --selection: var(--marker); --accent: var(--marker); --accent-ink: var(--marker-ink); --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); --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. Bricolage variable axes do the work; we set opsz + weight + width. ============================================================================ */ /* DISPLAY — Bricolage at high opsz. Confident, slightly narrow, ink-heavy. */ .t-poster { font-family: var(--font-display); font-size: clamp(72px, 12vw, var(--t-mega)); line-height: 0.9; letter-spacing: -0.035em; font-weight: 800; font-variation-settings: "opsz" 96, "wdth" 85; } .t-display-xl { font-family: var(--font-display); font-size: clamp(56px, 8vw, var(--t-5xl)); line-height: 0.95; letter-spacing: -0.03em; font-weight: 700; font-variation-settings: "opsz" 96, "wdth" 90; } .t-display { font-family: var(--font-display); font-size: var(--t-4xl); line-height: 1.0; letter-spacing: -0.025em; font-weight: 700; font-variation-settings: "opsz" 80, "wdth" 90; } .t-display-sm { font-family: var(--font-display); font-size: var(--t-3xl); line-height: 1.05; letter-spacing: -0.02em; font-weight: 700; font-variation-settings: "opsz" 56, "wdth" 95; } /* HEADINGS — Bricolage at h1/h2 (where character shows); Geist at h3/h4 (where calm and readable wins). */ .t-h1 { font-family: var(--font-display); font-size: var(--t-2xl); line-height: 1.1; letter-spacing: -0.018em; font-weight: 700; font-variation-settings: "opsz" 40, "wdth" 100; } .t-h2 { font-family: var(--font-display); font-size: var(--t-xl); line-height: 1.2; letter-spacing: -0.012em; font-weight: 700; font-variation-settings: "opsz" 28, "wdth" 100; } .t-h3 { font-family: var(--font-sans); font-size: var(--t-lg); line-height: 1.25; letter-spacing: -0.008em; font-weight: 600; } .t-h4 { font-family: var(--font-sans); font-size: var(--t-md); line-height: 1.3; font-weight: 600; } /* BODY — Geist. Calm, doesn't get in the way. */ .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: 1.6; 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: 1.45; font-weight: 400; } .t-mono-sm { font-family: var(--font-mono); font-size: var(--t-xs); line-height: 1.45; font-weight: 400; } .t-code { font-family: var(--font-mono); font-size: var(--t-sm); line-height: 1.5; 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); } /* ============== MARKER — the brand's signature move ============== A yellow rectangle behind 1-2 words. Punk emphasis, Mike's actual idiom. Use inline: this matters For wrapped multi-line marker, use the box-decoration trick. Letter-spacing is reset to 0 so letters breathe inside the box, even when the parent is tracked tight (-0.04em on display sizes). */ .t-marker { background: var(--marker); color: var(--marker-ink); padding: 0.08em 0.32em; margin: 0 -0.04em; letter-spacing: 0; border-radius: 1px; box-decoration-break: clone; -webkit-box-decoration-break: clone; font-weight: inherit; } /* PULL QUOTE — Mike's voice. Bricolage display, big, with marker on the lift. */ .t-pullquote { font-family: var(--font-display); font-size: var(--t-2xl); line-height: 1.1; font-weight: 700; letter-spacing: -0.02em; font-variation-settings: "opsz" 40, "wdth" 95; 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); }