/* ========================================================================== BASIC CHAOS design tokens One system, three modes. LOUD — brand voice. Hubs, landing pages, brand moments. Sky on ink, ink on sky. Giant type. Maximal, present, total. DAY — working voice, lights on. Tools and apps in daylight. Warm paper, brand ink text. Type-first, square, calm. NIGHT — working voice, lights out. Dashboards, tools after dark. Layered charcoals, paper text, pastels as data. Every tool gets exactly ONE loud moment: the header band / app mark. Nothing glows. Shape is an axis, not a law: square by default, with bc-shape-soft and bc-shape-round as stances (see shapes-demo.html). Usage: / / optionally + bc-shape-soft or bc-shape-round (.bc-quiet is a legacy alias for .bc-night) ========================================================================== */ :root { /* ---- brand constants (never themed) ---------------------------------- */ --bc-sky: #87cefa; /* the brand blue */ --bc-sky-deep: #2f7fbe; /* same hue, dark enough to read on chalk */ --bc-ink: #333333; /* the brand dark */ --bc-paper: #efece5; /* warm off-white — night's text, a warmth reserve */ /* ---- charcoals (night surfaces, layered, never black) ----------------- */ --bc-char-deep: #1d1f21; --bc-char: #26282b; --bc-char-lift: #2f3235; --bc-char-line: #3c4043; /* ---- chalks (day surfaces — gesso washes, cool, never white) ----------- */ --bc-chalk-deep: #dde1e1; --bc-chalk: #eceeed; --bc-chalk-lift: #f5f6f5; --bc-chalk-line: #c7cdcd; /* ---- slate (day's quiet voice) ------------------------------------------ */ --bc-slate: #6e7a80; --bc-slate-deep: #47535a; /* ---- warmth (moments, never the field) ---------------------------------- */ --bc-warm: #f07d5d; /* one warm tone for marks and moments; loop orange */ /* ---- data / role palette — the pastels in the night ------------------- */ --bc-data-sound: #5ec8f8; --bc-data-light: #f0a35e; --bc-data-emitter: #5ee08a; --bc-data-free: #8b95ff; --bc-data-motion: #b98bff; --bc-data-weather: #6ee0c2; --bc-data-fatigue: #f0625e; --bc-data-loop: #e0772b; --bc-data-reservoir: #5fa8e0; /* ---- semantic (tools need these) --------------------------------------- */ --bc-danger-night: #f0625e; /* fatigue red doubles as danger */ --bc-danger-day: #b8382f; /* ---- type ------------------------------------------------------------- */ /* One family. Weight and case do the work, not font changes. */ --bc-font: -apple-system, "Helvetica Neue", Arial, system-ui, sans-serif; --bc-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace; --bc-text-display-xl: clamp(56px, 12vw, 180px); /* loud only, one per page */ --bc-text-display: clamp(32px, 6vw, 72px); /* loud section shouts */ --bc-text-head: clamp(20px, 3vw, 28px); /* working shout */ --bc-text-title: 24px; --bc-text-body: 15px; --bc-text-small: 13px; --bc-text-label: 11px; --bc-text-micro: 10px; --bc-weight-display: 800; --bc-weight-bold: 700; --bc-weight-medium: 600; --bc-weight-body: 400; --bc-tracking-display: -0.02em; --bc-tracking-label: 0.06em; --bc-leading-display: 0.95; --bc-leading-body: 1.6; /* ---- space (4px base) -------------------------------------------------- */ --bc-space-1: 4px; --bc-space-2: 8px; --bc-space-3: 12px; --bc-space-4: 16px; --bc-space-5: 24px; --bc-space-6: 32px; --bc-space-7: 48px; --bc-space-8: 80px; /* ---- rule weights (rare, data-only) ------------------------------------ */ --bc-rule-heavy: 3px; --bc-rule-hair: 1px; /* ---- shape -------------------------------------------------------------- House shape (decided 4 Jul 2026): round controls, soft everything else. Controls (buttons, toggles, segments) are pills; small elements and fields round gently at 6px; the big planes keep their hard edges. The stance classes below still exist for comparison (shapes-demo.html). ------------------------------------------------------------------------ */ --r-el: 6px; /* marks, app marks, bars */ --r-field: 6px; /* inputs, rows, working links */ --r-btn: 999px; /* buttons, toggles, segments */ --r-plane: 0; /* planes, panels, plates, images */ /* ---- motion ------------------------------------------------------------ */ --bc-ease: cubic-bezier(0.2, 0, 0, 1); --bc-speed: 0.15s; } /* ========================================================================== LOUD — the brand voice (unchanged, it's right) ========================================================================== */ .bc-loud { --bg: var(--bc-sky); --surface: var(--bc-ink); --on-surface: var(--bc-sky); --deep: var(--bc-ink); --text: var(--bc-ink); --muted: rgba(51, 51, 51, 0.62); --line: var(--bc-ink); --rule: var(--bc-ink); --plate: var(--bc-ink); --wash: rgba(51, 51, 51, 0.12); --wash-danger: rgba(184, 56, 47, 0.14); --press: rgba(51, 51, 51, 0.24); --accent: var(--bc-ink); --danger: var(--bc-danger-day); background: var(--bg); color: var(--text); font-family: var(--bc-font); font-size: var(--bc-text-body); line-height: var(--bc-leading-body); } /* ========================================================================== DAY — lights on. Slate and chalk. Gesso washes make the workspace; the ink writes on top of it, present, holding its order. Warmth is a moment (--bc-warm, data oranges), never the field. ========================================================================== */ .bc-day { --bg: var(--bc-chalk); --surface: var(--bc-chalk-lift); --deep: var(--bc-chalk-deep); --on-surface: var(--bc-ink); --text: var(--bc-ink); --muted: var(--bc-slate); --line: var(--bc-chalk-line); --rule: var(--bc-ink); /* rules are rare now; when used, ink */ --plate: var(--bc-slate); /* day mounts on slate — white shots pop */ --wash: #dff2fc; /* sky wash — focus and selection plane */ --wash-danger: #f6e2e0; /* danger wash — the error plane */ --press: #c3e4f7; /* the wash gone deep — pressed plane */ --accent: var(--bc-sky-deep); --danger: var(--bc-danger-day); background: var(--bg); color: var(--text); font-family: var(--bc-font); font-size: var(--bc-text-body); line-height: var(--bc-leading-body); } /* ========================================================================== NIGHT — lights out. Charcoals, paper text, pastels in the night. (.bc-quiet kept as legacy alias) ========================================================================== */ .bc-night, .bc-quiet { --bg: var(--bc-char); --surface: var(--bc-char-lift); --deep: var(--bc-char-deep); --on-surface: var(--bc-paper); --text: var(--bc-paper); --muted: #a0a49e; --line: var(--bc-char-line); --rule: #70746e; /* rules are rare now; when used, gentle */ --plate: var(--bc-char-deep); --wash: #33424d; /* sky-tinted charcoal — focus plane */ --wash-danger: #483236; /* red-tinted charcoal — the error plane */ --press: #3e5262; /* the wash gone deep — pressed plane */ --accent: var(--bc-sky); --danger: var(--bc-danger-night); background: var(--bg); color: var(--text); font-family: var(--bc-font); font-size: var(--bc-text-body); line-height: var(--bc-leading-body); } /* ========================================================================== SHAPE — stances kept for comparison. No class = the house shape above. ========================================================================== */ .bc-shape-square { --r-el: 0; --r-field: 0; --r-btn: 0; --r-plane: 0; } /* Soft: elements round gently; the big fields keep their hard edges. */ .bc-shape-soft { --r-el: 6px; --r-field: 6px; --r-btn: 6px; --r-plane: 0; } /* Round: the full modern look. Round planes, round fields, pill buttons. */ .bc-shape-round { --r-el: 14px; --r-field: 12px; --r-btn: 999px; --r-plane: 24px; } /* House: explicit alias for the default (round controls, soft the rest). */ .bc-shape-house { --r-el: 6px; --r-field: 6px; --r-btn: 999px; --r-plane: 0; } /* ========================================================================== Shared primitives — same markup works in every mode ========================================================================== */ .bc-display-xl, .bc-display { font-weight: var(--bc-weight-display); text-transform: uppercase; letter-spacing: var(--bc-tracking-display); line-height: var(--bc-leading-display); margin: 0; } .bc-display-xl { font-size: var(--bc-text-display-xl); } .bc-display { font-size: var(--bc-text-display); } /* The working shout: same voice as loud, turned down, not off. */ .bc-head { font-size: var(--bc-text-head); font-weight: var(--bc-weight-display); text-transform: uppercase; letter-spacing: var(--bc-tracking-display); line-height: var(--bc-leading-display); margin: 0; } .bc-title { font-size: var(--bc-text-title); font-weight: var(--bc-weight-bold); margin: 0; } .bc-label { font-size: var(--bc-text-label); font-weight: var(--bc-weight-bold); text-transform: uppercase; letter-spacing: var(--bc-tracking-label); color: var(--muted); } .bc-muted { color: var(--muted); } .bc-mono { font-family: var(--bc-font-mono); } /* -------------------------------------------------------------------------- Header band — the ONE loud moment every tool gets. Not a floating slab: the whole header IS the moment. A full-width ink band; the app name sits in it as sky, controls sit in it as chalk. Works over day and night. -------------------------------------------------------------------------- */ .bc-header { display: flex; align-items: center; justify-content: space-between; gap: var(--bc-space-4); background: var(--bc-ink); color: var(--bc-chalk-lift); padding: var(--bc-space-3) var(--bc-space-5); } .bc-header .bc-appmark { background: none; padding: 0; } .bc-header .bc-mode-toggle { color: rgba(245, 246, 245, 0.6); } .bc-header .bc-mode-toggle:hover { color: var(--bc-sky); } /* App mark — the shouted name. Inside a bc-header it rides the band; standalone it carries its own ink slab. */ .bc-appmark { display: inline-block; border-radius: var(--r-el); background: var(--bc-ink); color: var(--bc-sky); font-weight: var(--bc-weight-display); font-size: 18px; text-transform: uppercase; letter-spacing: var(--bc-tracking-display); line-height: 1; padding: var(--bc-space-2) var(--bc-space-3); text-decoration: none; } /* -------------------------------------------------------------------------- Structure: planes, not lines. Space and blocks of color separate things; a line only appears when data truly demands a hairline. -------------------------------------------------------------------------- */ .bc-section { margin-top: var(--bc-space-7); } .bc-section > .bc-head { margin-bottom: var(--bc-space-4); } /* Plane: a block of color with content inside. The workhorse. */ .bc-plane { background: var(--surface); color: var(--on-surface); padding: var(--bc-space-5); border-radius: var(--r-plane); } .bc-plane--deep { background: var(--deep); color: var(--text); } .bc-plane--wash { background: var(--wash); color: var(--text); } .bc-plane--ink { background: var(--bc-ink); color: var(--bc-chalk-lift); } .bc-plane--sky { background: var(--bc-sky); color: var(--bc-ink); } /* Panel: legacy name, now a plain plane. */ .bc-panel { background: var(--surface); color: var(--on-surface); padding: var(--bc-space-4); border-radius: var(--r-plane); } /* Block link */ .bc-block-link { display: block; border-radius: var(--r-plane); background: var(--surface); color: var(--on-surface); text-decoration: none; text-transform: uppercase; font-weight: var(--bc-weight-display); font-size: clamp(20px, 4vw, 40px); letter-spacing: var(--bc-tracking-display); padding: var(--bc-space-4) var(--bc-space-5); transition: transform var(--bc-speed) var(--bc-ease); } .bc-block-link:hover { transform: translateX(var(--bc-space-2)); } /* Working block link: a surface plane, normal size. Hover is total — the plane turns sky. */ .bc-night .bc-block-link, .bc-quiet .bc-block-link, .bc-day .bc-block-link { background: var(--surface); color: var(--text); border-radius: var(--r-field); font-size: 18px; padding: var(--bc-space-3) var(--bc-space-4); margin-top: var(--bc-space-2); } .bc-night .bc-block-link:hover, .bc-quiet .bc-block-link:hover, .bc-day .bc-block-link:hover { background: var(--bc-sky); color: var(--bc-ink); transform: none; } /* -------------------------------------------------------------------------- Buttons — square, shouted, flat -------------------------------------------------------------------------- */ .bc-btn { display: inline-block; background: var(--surface); color: var(--on-surface); border: none; border-radius: var(--r-btn); font-family: var(--bc-font); font-size: var(--bc-text-small); font-weight: var(--bc-weight-bold); text-transform: uppercase; letter-spacing: var(--bc-tracking-label); padding: var(--bc-space-3) var(--bc-space-5); cursor: pointer; transition: opacity var(--bc-speed) var(--bc-ease), background var(--bc-speed) var(--bc-ease), color var(--bc-speed) var(--bc-ease); } .bc-btn:hover { opacity: 0.85; } /* Pressed: the field drops one shade — total, instant down, eased release. No scale, no shadow, no glow. */ .bc-btn:active { opacity: 1; transition-duration: 0ms; } .bc-day .bc-btn:active { background: var(--bc-slate-deep); } .bc-night .bc-btn:active, .bc-quiet .bc-btn:active, .bc-loud .bc-btn:active { background: var(--bc-sky-deep); color: var(--bc-chalk-lift); } .bc-night .bc-btn, .bc-quiet .bc-btn { background: var(--bc-sky); color: var(--bc-ink); } .bc-day .bc-btn { background: var(--bc-ink); color: var(--bc-chalk-lift); } /* Quiet button: no outline — outlines make squares harsh. A solid deep field instead: present, flat, clearly secondary. */ .bc-btn--ghost, .bc-night .bc-btn--ghost, .bc-quiet .bc-btn--ghost, .bc-day .bc-btn--ghost { background: var(--deep); color: var(--text); box-shadow: none; } .bc-loud .bc-btn--ghost { background: rgba(51, 51, 51, 0.14); color: var(--bc-ink); } .bc-btn--ghost:active, .bc-night .bc-btn--ghost:active, .bc-quiet .bc-btn--ghost:active, .bc-day .bc-btn--ghost:active, .bc-loud .bc-btn--ghost:active { background: var(--press); color: var(--text); } /* Danger: a full color field, not a red outline. Total, like every state. */ .bc-btn--danger, .bc-night .bc-btn--danger, .bc-quiet .bc-btn--danger, .bc-day .bc-btn--danger { background: var(--danger); color: var(--bc-chalk-lift); box-shadow: none; } .bc-night .bc-btn--danger, .bc-quiet .bc-btn--danger { color: var(--bc-char-deep); } .bc-btn--danger:active, .bc-night .bc-btn--danger:active, .bc-quiet .bc-btn--danger:active, .bc-day .bc-btn--danger:active, .bc-loud .bc-btn--danger:active { background: color-mix(in srgb, var(--danger) 78%, black); } /* Focus: a square accent outline. Never remove it, never round it. */ .bc-btn:focus-visible, .bc-input:focus-visible, .bc-select:focus-visible, .bc-textarea:focus-visible, .bc-block-link:focus-visible, .bc-drop:focus-visible { outline: var(--bc-rule-heavy) solid var(--accent); outline-offset: 1px; } /* -------------------------------------------------------------------------- Forms — shade-shift fields with a heavy bottom rule. Focus turns it accent. No boxes-in-boxes, no rounded inputs, no floating labels. -------------------------------------------------------------------------- */ .bc-field { display: block; margin: var(--bc-space-4) 0; } .bc-field > .bc-label { display: block; margin-bottom: var(--bc-space-1); } .bc-input, .bc-select, .bc-textarea { display: block; width: 100%; box-sizing: border-box; border-radius: var(--r-field); background: var(--deep); color: var(--text); border: none; font-family: var(--bc-font); font-size: var(--bc-text-body); padding: var(--bc-space-3); transition: background var(--bc-speed) var(--bc-ease); } /* Focus is a plane change, not a line: the field washes sky. */ .bc-input:focus, .bc-select:focus, .bc-textarea:focus { outline: none; background: var(--wash); } .bc-select { cursor: pointer; } .bc-textarea { resize: vertical; min-height: 96px; line-height: var(--bc-leading-body); } .bc-input::placeholder, .bc-textarea::placeholder { color: var(--muted); } .bc-error { color: var(--danger); font-size: var(--bc-text-small); } /* Error is a wash too: the field washes danger and one small line under it says what's wrong. No borders, no icons, no native browser bubbles — put novalidate on the form and set the message from script. Pair with aria-invalid on the input and aria-describedby on the message. */ .bc-field--error > .bc-label { color: var(--danger); } .bc-field--error .bc-input, .bc-field--error .bc-select, .bc-field--error .bc-textarea, .bc-field--error .bc-input:focus, .bc-field--error .bc-select:focus, .bc-field--error .bc-textarea:focus { background: var(--wash-danger); } .bc-field-error { display: block; color: var(--danger); font-size: var(--bc-text-small); margin-top: var(--bc-space-1); } .bc-field-error[hidden] { display: none; } /* -------------------------------------------------------------------------- Drop zone — a full color field, no border, no dashes. Hover deepens it, drag-over inverts it completely. State changes are total, not subtle. -------------------------------------------------------------------------- */ .bc-drop { border: none; border-radius: var(--r-plane); background: var(--deep); color: var(--text); padding: var(--bc-space-7) var(--bc-space-5); text-align: center; cursor: pointer; font-weight: var(--bc-weight-bold); transition: background var(--bc-speed) var(--bc-ease), color var(--bc-speed) var(--bc-ease); } .bc-drop:hover { background: var(--line); } .bc-drop.is-dragging { background: var(--text); color: var(--bg); } /* -------------------------------------------------------------------------- Marks — color as a field, not a dot. Tiny color chips are AI-tool furniture; here the color block IS the cell, with the text or number living inside it. Maximize the field. -------------------------------------------------------------------------- */ .bc-mark { display: inline-block; border-radius: var(--r-el); background: var(--surface); color: var(--bc-char-deep); /* dark text on every pastel */ font-weight: var(--bc-weight-bold); font-size: var(--bc-text-small); line-height: 1.2; padding: var(--bc-space-2) var(--bc-space-3); } /* Fill variant: the mark owns its whole container (table cell, grid slot). */ .bc-mark--fill { display: block; width: 100%; box-sizing: border-box; padding: var(--bc-space-3); } /* Role fields */ .bc-mark--sound { background: var(--bc-data-sound); } .bc-mark--light { background: var(--bc-data-light); } .bc-mark--emitter { background: var(--bc-data-emitter); } .bc-mark--free { background: var(--bc-data-free); } .bc-mark--motion { background: var(--bc-data-motion); } .bc-mark--weather { background: var(--bc-data-weather); } .bc-mark--fatigue { background: var(--bc-data-fatigue); } .bc-mark--loop { background: var(--bc-data-loop); } .bc-mark--reservoir { background: var(--bc-data-reservoir); } .bc-mark--warm { background: var(--bc-warm); } .bc-mark--sky { background: var(--bc-sky); } /* State fields */ .bc-mark--live { background: var(--bc-data-emitter); } .bc-mark--stale { background: var(--bc-data-fatigue); } /* Table integration: give the td class bc-cell-mark and put a bc-mark--fill inside — the color field fills the cell edge to edge. */ .bc-table td.bc-cell-mark { padding: 0; } /* Legacy dot — superseded by bc-mark; kept for the Creature legend. */ .bc-dot { display: inline-block; width: 10px; height: 10px; background: var(--muted); } .bc-dot--live { background: var(--bc-data-emitter); } .bc-dot--stale { background: var(--bc-data-fatigue); } /* Table: no lines. The header is a plane; rows alternate planes; hover and selection are the sky wash. */ .bc-table { width: 100%; border-collapse: collapse; font-size: var(--bc-text-small); } .bc-table th { font-size: var(--bc-text-micro); font-weight: var(--bc-weight-bold); text-transform: uppercase; letter-spacing: var(--bc-tracking-label); color: var(--text); text-align: left; background: var(--deep); } .bc-table th, .bc-table td { padding: var(--bc-space-3) var(--bc-space-3); white-space: nowrap; } .bc-table tbody tr:nth-child(even) { background: var(--surface); } .bc-table tbody tr:hover { background: var(--wash); } .bc-bar-track { background: var(--line); border-radius: var(--r-el); height: 8px; overflow: hidden; margin-top: var(--bc-space-1); } .bc-bar-fill { height: 100%; border-radius: var(--r-el); background: var(--accent); transition: width 0.4s var(--bc-ease); } /* -------------------------------------------------------------------------- Mode toggle — a plain text control. "night" when in day, "day" when in night. Words, not sun/moon icons. -------------------------------------------------------------------------- */ .bc-mode-toggle { background: none; border: none; color: var(--muted); font-family: var(--bc-font); font-size: var(--bc-text-label); font-weight: var(--bc-weight-bold); text-transform: uppercase; letter-spacing: var(--bc-tracking-label); cursor: pointer; padding: var(--bc-space-2); } .bc-mode-toggle:hover { color: var(--accent); } /* ========================================================================== Images — plain by default, plate for screenshots, duotone for loud ========================================================================== */ .bc-img { display: block; width: 100%; height: auto; border-radius: var(--r-plane); } .bc-figure { margin: 0; } .bc-figure > figcaption { font-size: var(--bc-text-label); font-weight: var(--bc-weight-bold); text-transform: uppercase; letter-spacing: var(--bc-tracking-label); color: var(--muted); padding-top: var(--bc-space-2); } /* Plate: mounts an image that fights the background. One rule everywhere: the plate is always darker than what it carries. Slate by day (white screenshots pin to gray board), deep charcoal by night, ink when loud. If an image already reads against the background — a photo on chalk, a dark dashboard shot on chalk, a bright shot on charcoal — skip the plate. */ .bc-plate { background: var(--plate, var(--bc-char-deep)); padding: var(--bc-space-4); border-radius: var(--r-plane); } /* Ink duotone: brand treatment for photos in loud contexts only. */ .bc-duotone { background: var(--bc-sky); line-height: 0; border-radius: var(--r-plane); overflow: hidden; } .bc-duotone > img { filter: grayscale(1) contrast(1.05); mix-blend-mode: multiply; width: 100%; height: auto; } /* Night photo: for photos that fight the charcoal. */ .bc-night-img > img, .bc-night .bc-night-img > img { filter: grayscale(0.35) brightness(0.88); width: 100%; height: auto; } .bc-img--cover { object-fit: cover; height: 100%; }