/* consensor.io — canonical dark tokens · Blue Labs design system Extracted 2026-10-09 from the three canonical pages: first-steps ~/Downloads/…first-steps_1.html sha256 1aeac19e51ffa56b… (the canonical source) install ~/Desktop/consensorAI/consensor-install_1.html sha256 2adf8ce3ee433440… coder ~/Desktop/consensorAI/consensor_3.html sha256 601d640014e4c8d3… hourglass ~/Desktop/HOURGLASS-LANES-2026-09-28/hourglass_1.html sha256 cd31999a91a3bc0b… (same 55 tokens as coder) home ~/Downloads/consensor-one-page_2.html sha256 3f3d425236de60f7… ("consensor welcomes you."; 39 of 43 tokens identical) longbow ~/Desktop/Operation Longbow/01 System/tracker-worker/public/app.css sha256 2f75b351d5b56785… Section A is verbatim: every custom property the pages declare, original names kept. Section B is DERIVED: scales named from literal values the pages use but never tokenised. Section C is VERBATIM from the Longbow tracker: semantic status, heat ramp, tooltip, sheet, and the light theme. Where the pages disagree, the first-steps value wins (it is the canonical source). */ /* ── Fonts: Inter, SIL OFL 1.1 (fonts/full/OFL.txt). Full Latin + Latin-ext woff2, as served by the Longbow tracker. fonts/Inter-*.woff are the 215-glyph subsets embedded in the first-steps page; same faces, Latin only. ── */ @font-face{font-family:"In";src:url(fonts/full/inter-400-latin.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2190-2199,U+2212,U+2215,U+2713,U+FEFF,U+FFFD} @font-face{font-family:"In";src:url(fonts/full/inter-400-ext.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0100-0130,U+0132-0151,U+0154-02AF,U+02B0-02BA,U+02BD-02C5,U+02C7-02D9,U+02DB,U+02DD-02FF,U+0300-0303,U+0305-0307,U+0309-0328,U+032A-036F,U+0370-03FF,U+0400-052F,U+1E00-1EFF,U+20A0-20AB,U+20AD-20CF,U+2100-2121,U+2123-214F,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:"In";src:url(fonts/full/inter-500-latin.woff2) format("woff2");font-weight:500 700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2190-2199,U+2212,U+2215,U+2713,U+FEFF,U+FFFD} @font-face{font-family:"In";src:url(fonts/full/inter-500-ext.woff2) format("woff2");font-weight:500 700;font-style:normal;font-display:swap;unicode-range:U+0100-0130,U+0132-0151,U+0154-02AF,U+02B0-02BA,U+02BD-02C5,U+02C7-02D9,U+02DB,U+02DD-02FF,U+0300-0303,U+0305-0307,U+0309-0328,U+032A-036F,U+0370-03FF,U+0400-052F,U+1E00-1EFF,U+20A0-20AB,U+20AD-20CF,U+2100-2121,U+2123-214F,U+2C60-2C7F,U+A720-A7FF} /* Headings: BlueLabs Regular, the owner's own face (owner, 9 Oct 2026: BlueLabs "for headings"; the body sans is still to be chosen). 64 glyphs (A-Z a-z 0-9), one weight (400), no punctuation: the stacks below put Inter 400 next, so . , ' : / @ - fall back per glyph at a matching weight. Owner, 12 Oct 2026: "all headings to be the blue lab.otf font" (applied in standard.css). */ @font-face{font-family:"BlueLabs";src:url(fonts/BlueLabs-Regular.otf) format("opentype");font-weight:400;font-style:normal;font-display:block} @font-face{font-family:"InD";src:url(fonts/full/inter-display-600-latin.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2190-2199,U+2212,U+2215,U+2713,U+FEFF,U+FFFD} /* ── Body sans candidates (owner, 12 Oct 2026: "i live these Inter, Geist, DM Sans or SF Pro"). All four stay available; Inter stays the default. Switch with . Files: ../06-fonts/fonts/ (OFL; SF Pro is the system face, HABITAT only). ── */ @font-face{font-family:"Geist";src:url(../06-fonts/fonts/Geist.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap} @font-face{font-family:"DM Sans";src:url(../06-fonts/fonts/DMSans-a.woff2) format("woff2");font-weight:100 1000;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2190-2199,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:"DM Sans";src:url(../06-fonts/fonts/DMSans-b.woff2) format("woff2");font-weight:100 1000;font-style:normal;font-display:swap;unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} :root{ color-scheme:dark; --font-body:"In",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif; /* default body sans: Inter */ /* ═════════ A · VERBATIM ═════════ */ /* Ground & ink */ --bg:#121212; /* page ground */ --fg:#fff; /* headings, primary text */ --fg2:#939393; /* secondary text, sub copy, table heads */ --text:#cfcfcf; /* body copy in sections */ --line:#252525; /* hairline. coder page drifts to #242424 */ --label:#ececec; /* coder: control labels */ --on-fg:#fbfbfb; /* text on raised controls */ --muted:#969696; /* home: card body copy (first-steps uses the same value as a literal) */ --hair:#1c1c1c; /* home: table/row dividers (first-steps literal) */ --navh:68px; /* home: nav height */ /* Surfaces */ --card:#1a1a1a; --card-line:#1f1f1f; --card-top:#232323; /* step cards: 1px border, lighter top edge */ --panel:#1b1b1b; --panel-line:#232323; --panel-top:#282828; /* coder panels: same recipe, one step up */ --pane:#171717; /* inset panes, code blocks, peeks */ --input:#292929; /* text inputs. longbow uses #1d1d1d + --input-line ring */ /* Pills & buttons */ --pill:#202020; /* active nav link */ --btn:#202020; --btn-line:#292929; /* secondary pill button + inset ring */ --gpill:#232323; --gpill-fg:#9c9c9c; /* grey pill (nav extra) */ --navy:#17233b; --navy-fg:#89b3f9; /* primary nav action ("Open Gmail", "Open Coder") */ --cta:#306ff3; --cta-line:#578bf5; /* coder: filled blue call to action */ --pbtn:#1a1a1a; /* coder: preset button */ --save:#2d2d2d; --save-line:#353535; /* coder: save preset */ /* Badges */ --nb-bg:#232e46; --nb-line:#2e384c; --nb-top:#353f52; --nb-fg:#89b3f9; /* navy badge ("Pro", "Sign in with this one") */ --hb-bg:#202c33; --hb-line:#2a353a; --hb-top:#323d42; --hb-fg:#91d2fb; /* HOURGLASS badge (cyan) */ /* Accent */ --blue:#306ff3; /* step numbers, focus outline, selected address ring. Same value as --cta */ --ring:#1e2b45; /* 4px halo around step numbers */ /* Tabs */ --tab-on:#333; --tab-fg:#979797; /* coder drifts to #373737 */ /* Avatar */ --av:#2a2a2a; --av-ring:#383838; /* Coder controls */ --chip:#242424; --chip-fg:#b1b1b1; --chip-on:#2d2d2d; --chip-on-line:#333; --track:#242424; --fill:#353535; --fill-edge:#3d3d3d; --val:#ddd; /* slider bars */ --tool-fg:#b8b8b8; --gc:#1e1e1e; --gc-line:#292929; /* gate card (HOURGLASS animation) */ --skel:#424242; /* skeleton lines */ --bubble:#2b2b2b; /* chat bubble. first-steps uses literal #292929 */ --status:#9a9a9a; --menu:#202020; --menu-line:#292929; --menu-top:#2f2f2f; --menu-div:#262626; --x:#969595; /* close glyph */ --a:215deg; /* coder: conic-gradient angle, animated via @property */ /* Mono stack */ --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace; /* ═════════ C · VERBATIM from the Longbow tracker (dark) ═════════ */ --line2:#1e1e1e; --raise:#202020; --btn-hover:#262626; --input-line:#2c2c2c; --blue-fill:#2b65e4; --blue-line:#578bf5; --link:#89b3f9; --good:#0ca30c; --good-bg:rgba(12,163,12,.12); --warn:#fab219; --warn-bg:rgba(250,178,25,.12); --crit:#ef5350; --crit-bg:rgba(239,83,80,.12); /* heat ramp, dark → light blue. Longbow names these --h1…--h6 and calls its track --track (#1b2436); renamed here so they never collide with headings or the coder slider track */ --heat-1:#0d366b; --heat-2:#184f95; --heat-3:#256abf; --heat-4:#3987e5; --heat-5:#6da7ec; --heat-6:#9ec5f4; --heat-hi:#0b0b0b; --heat-lo:#fff; --heat-empty:#2a2a2a; --heat-track:#1b2436; --tip:#262626; --tip-line:#333; --shade:0 10px 30px rgba(0,0,0,.35); --sheet:rgba(10,10,10,.6); --serif:"New York","Iowan Old Style","Palatino Linotype",Georgia,serif; --sans:var(--font-body); /* was the Inter stack literal; now follows --font-body */ --display:"BlueLabs","In",-apple-system,BlinkMacSystemFont,system-ui,sans-serif; /* was InD; BlueLabs for headings (owner, 9 Oct). Fallback Inter 400, not InD 600 (12 Oct) */ /* ═════════ B · DERIVED (named here; the pages use these as literals) ═════════ */ /* Families */ --font-ui:var(--font-body); /* was the Inter stack literal; now follows --font-body */ --font-display:"BlueLabs","In",-apple-system,BlinkMacSystemFont,system-ui,sans-serif; /* owner, 9 Oct: BlueLabs for headings. Fallback Inter 400 (12 Oct) */ /* Type scale: size / line-height (weight). 4px grid (owner, 12 Oct 2026: "the type is 4px"): every size and line-height is a multiple of 4. Was 44/1.1, 30/36, 15/22, 14/22, 13/1.5, 12/18, 12.5, 13/21, 11 before 12 Oct; tools/gridgen.py applies the same rules to components.css. */ --type-display:400 44px/48px var(--font-display); --track-display:-.01em; /* BlueLabs has one weight: 400, never faux-bold */ /* h1. mobile clamp(32px,8.4vw,44px) */ --type-h2:400 32px/36px var(--font-display); --track-h2:-.01em; /* section titles. mobile 28/32 */ --type-lead:400 16px/24px var(--font-ui); /* hero sub. mobile 16/24 */ --type-card-title:500 16px/24px var(--font-ui); --type-body:400 16px/24px var(--font-ui); /* section copy, table rows */ --type-ui:400 12px/20px var(--font-ui); /* base body size, nav, buttons */ --type-small:400 12px/20px var(--font-ui); --type-code:400 12px/1 var(--mono); /* address chips, inline code */ --type-code-block:400 12px/20px var(--mono); --type-badge:500 12px/1 var(--font-ui); /* Weights used: 400, 500 (UI emphasis), 600 (display only) */ /* Spacing: 4px steps (owner, 12 Oct 2026: "Use four pixel steps" / "the type is 4px / that is the design styling too"). --sp-N is N x 4px. Margins, padding and gaps use these; values under 4px are hairlines only. */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-7:28px; --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-14:56px; --sp-16:64px; --sp-22:88px; --sp-24:96px; /* Radius: 4px steps (was 22 / 14 / 6 before 12 Oct) */ --r-card:24px; /* step cards */ --r-panel:16px; /* disclosures, coder panels, tiles */ --r-pane:12px; /* code blocks, notes, screenshots, menus */ --r-field:8px; /* inputs, small tool buttons */ --r-chip:8px; /* address chips, inline code */ --r-pill:999px; /* every button, tab, badge, nav link */ /* Control heights: 4px steps (was 31 / 26 / 29 / 18 before 12 Oct) */ --h-nav:68px; --h-control:36px; /* nav buttons, avatar, inputs */ --h-control-sm:32px;/* copy, chips, coder controls */ --h-control-xs:24px;/* ghost, pill, tool */ --h-tab:28px; --h-badge:16px; /* Layout: 4px steps (was 1191 / 18 / 31 / 90 before 12 Oct) */ --w-nav:1192px; /* nav inner width */ --w-content:1008px; /* cards + sections */ --gutter:16px; --gap-cards:16px; --pad-card:32px; --sec-gap:88px; /* between sections. mobile 64px */ /* Elevation: rings, not shadows. Every raised control uses an inset 1px ring. */ --ring-1:inset 0 0 0 1px var(--btn-line); --ring-num:inset 0 0 0 1px rgba(255,255,255,.14),0 0 0 4px var(--ring); --ring-select:0 0 0 2px var(--blue),0 0 18px rgba(48,111,243,.55); /* screenshot highlight */ --shadow-shot:0 0 0 1px #2a2a2a,0 10px 30px rgba(0,0,0,.35); --shadow-menu:0 6px 18px rgba(0,0,0,.22); /* Motion: colour/background transitions only */ --dur-hover:.15s; /* links, buttons, tiles */ --dur-toast:.2s; /* toast opacity + 12px rise */ /* Breakpoints (max-width): 1060 nav collapses, 899 single column, 560 phone. Longbow adds 1099, 599, 359 (and min 1280 / 1700 for wide dashboards). */ } /* ═════════ Light theme — complete, 12 Oct 2026 ═════════ Owner ruling, 12 Oct 2026, verbatim: "no i want you to now make a ligfht version pelase" and, on the 13 missing groups, "spoend the time make it happpen". Every token in A, B and C above has a light value here. Values marked [LB] are verbatim from the Longbow tracker's own light theme (the only light set a canonical page defined). Everything else is [D] derived on 12 Oct 2026 by the same recipe the dark pages use, mirrored: ground #f7f7f7 up to #fff, ink #0b0b0b, one blue, rings not shadows, the raised edge of a surface is one step darker (dark pages make it one step lighter). Contrast checked with ../tools/contrast.py. Enable with . Dark stays the default (consensor.io is dark). */ :root[data-theme="light"]{ color-scheme:light; /* Ground & ink */ --bg:#f7f7f7; /* [LB] page ground */ --fg:#0b0b0b; /* [LB] headings, primary text */ --fg2:#666; /* [LB] secondary text */ --text:#333; /* [LB] body copy */ --line:#e3e3e3; /* [LB] hairline */ --label:#1f1f1f; /* [D] control labels (dark #ececec) */ --on-fg:#111; /* [D] text on raised controls (dark #fbfbfb) */ --muted:#666; /* [D] card body copy (dark #969696); same step as --fg2 */ --hair:#e9e9e9; /* [D] table/row dividers (dark #1c1c1c) */ --navh:68px; /* Surfaces */ --card:#fff; --card-line:#e8e8e8; --card-top:#ededed; /* [LB] cards: 1px border, top edge one step darker */ --panel:#fff; --panel-line:#e4e4e4; --panel-top:#e9e9e9; /* [D] panels: same recipe, one step up (dark #1b1b1b/#232323/#282828) */ --pane:#f3f3f3; /* [LB] inset panes, code blocks */ --input:#fff; /* [LB] inputs */ /* Pills & buttons */ --pill:#ebebeb; /* [LB] active nav link */ --btn:#f0f0f0; --btn-line:#e1e1e1; /* [LB] secondary pill + ring */ --gpill:#ececec; --gpill-fg:#5f5f5f; /* [D] grey pill (dark #232323/#9c9c9c) */ --navy:#e6eeff; --navy-fg:#1d4fc4; /* [LB] primary nav action */ --cta:#306ff3; --cta-line:#4f84f4; /* [D] filled blue CTA: same blue, edge from Longbow --blue-line */ --pbtn:#fff; /* [D] preset button (dark #1a1a1a = card) */ --save:#e4e4e4; --save-line:#d6d6d6; /* [D] save preset (dark #2d2d2d/#353535) */ /* Badges */ --nb-bg:#e8efff; --nb-line:#d3e0ff; --nb-top:#c9d8fd; --nb-fg:#1d4fc4; /* [LB] navy badge */ --hb-bg:#e4f3fb; --hb-line:#c9e6f6; --hb-top:#bfe0f3; --hb-fg:#0b6a9f; /* [D] HOURGLASS badge, cyan (dark #202c33/#91d2fb) */ /* Accent */ --blue:#306ff3; /* [LB] unchanged: one blue in both themes */ --ring:#dce6fd; /* [LB] 4px halo around step numbers */ /* Tabs */ --tab-on:#fff; --tab-fg:#6b6b6b; /* [D] active tab is the white chip in the grey rail (dark #333/#979797) */ /* Avatar */ --av:#e6e6e6; --av-ring:#d6d6d6; /* [D] (dark #2a2a2a/#383838) */ /* Coder controls */ --chip:#ebebeb; --chip-fg:#5a5a5a; --chip-on:#fff; --chip-on-line:#d9d9d9; /* [D] (dark #242424/#b1b1b1/#2d2d2d/#333) */ --track:#e9e9e9; --fill:#cfcfcf; --fill-edge:#bdbdbd; --val:#2b2b2b; /* [D] slider bars (dark #242424/#353535/#3d3d3d/#ddd) */ --tool-fg:#555; /* [D] (dark #b8b8b8) */ --gc:#fff; --gc-line:#e1e1e1; /* [D] gate card (dark #1e1e1e/#292929) */ --skel:#dcdcdc; /* [D] skeleton lines (dark #424242) */ --bubble:#e9e9e9; /* [D] chat bubble (dark #2b2b2b) */ --status:#6b6b6b; /* [D] (dark #9a9a9a) */ --menu:#fff; --menu-line:#e1e1e1; --menu-top:#e8e8e8; --menu-div:#ececec; /* [D] menus (dark #202020/#292929/#2f2f2f/#262626) */ --x:#6f6f6f; /* [D] close glyph (dark #969595) */ /* C · Longbow */ --line2:#ececec; --raise:#f1f1f1; --btn-hover:#e8e8e8; --input-line:#d9d9d9; /* [LB] */ --blue-fill:#2b65e4; --blue-line:#4f84f4; --link:#1f5bd8; /* [LB] */ --good:#097409; --good-bg:rgba(10,125,10,.09); /* [D] Longbow #0a7d0a is 4.39:1 on its own tint; one step darker passes AA */ --warn:#8a5c00; --warn-bg:rgba(250,178,25,.18); /* [D] Longbow #9a6700 is 4.12:1 on its own tint; one step darker passes AA */ --crit:#c62828; --crit-bg:rgba(198,40,40,.08); /* [LB] */ --heat-1:#cde2fb; --heat-2:#9ec5f4; --heat-3:#6da7ec; --heat-4:#3987e5; --heat-5:#256abf; --heat-6:#184f95; /* [LB] ramp reversed: light → dark blue */ --heat-hi:#fff; --heat-lo:#0b0b0b; --heat-empty:#e3e3e3; --heat-track:#e3ebfd; /* [LB] */ --tip:#fff; --tip-line:#e1e1e1; /* [LB] */ --shade:0 10px 30px rgba(0,0,0,.10); /* [LB] */ --sheet:rgba(20,20,20,.35); /* [LB] */ /* B · Elevation in light: rings stay rings; the inset highlight becomes an inset shade */ --ring-1:inset 0 0 0 1px var(--btn-line); --ring-num:inset 0 0 0 1px rgba(0,0,0,.08),0 0 0 4px var(--ring); /* [D] (dark rgba(255,255,255,.14)) */ --ring-select:0 0 0 2px var(--blue),0 0 18px rgba(48,111,243,.35); /* [D] glow at .35 (dark .55) */ --shadow-shot:0 0 0 1px #dedede,0 10px 30px rgba(0,0,0,.10); /* [D] (dark #2a2a2a / .35) */ --shadow-menu:0 6px 18px rgba(0,0,0,.10); /* [D] (dark .22) */ } /* Body sans switch (see @font-face above). Inter is the default so no [data-body="inter"] rule is needed. */ :root[data-body="geist"]{--font-body:"Geist","In",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif} :root[data-body="dmsans"]{--font-body:"DM Sans","In",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif} :root[data-body="sfpro"]{--font-body:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",system-ui,sans-serif} /* HABITAT (Mac app) only; not licensed as a web font */