/* ========================================================================== Connect 2026 - Design Tokens T-02 -------------------------------------------------------------------------- SINGLE SOURCE OF TRUTH for colour, type, spacing, radius, shadow, z-index. OWNER: Yash. Nobody else edits this file - everyone else consumes. If you need a value that isn't here, ASK. Do not hardcode it in a component. PROVENANCE: every value below was extracted from the vector data of "connect 2026 - redesign.pdf" (22 artboards), not eyedropped from a render. Artboards are 595.28pt wide and represent a 1440px desktop design, so the conversion factor throughout is 1pt = 2.4px. ========================================================================== */ :root { /* ---------------------------------------------------------------- BRAND */ /* Both confirmed identical to the CURRENT live site (subHead.jsp .bg-blue and .custom-connect-button) - the 2026 palette is brand-continuous. */ --cn-navy: #001c64; /* primary nav bar, headings, body ink */ --cn-cyan: #1cb7fc; /* accent: pills, buttons, active states */ --cn-cyan-alt: #49c5fd; /* lighter cyan, secondary pill fills */ --cn-blue-deep: #1a3e70; /* dark blue, minor use */ --cn-blue-cta: #2c5fdf; /* solid CTA "View all events". Sampled */ /* by pixel - the forthcoming-events card */ /* is a nested form XObject, so it is not */ /* in the PDF's vector or text layer. */ /* ------------------------------------------------------------- SURFACES */ --cn-bg: #ffffff; /* page background */ --cn-surface: #ffffff; /* cards */ --cn-band-grey: #f6f7f9; /* Home's Industry Experts band */ --cn-band-mid: #e6e6e6; /* p1: full-bleed "Latest Videos & Audio" */ /* band AND the Connect Plus panel - both */ /* sample 230/230/230. --cn-band-grey was */ /* labelled "Latest Videos" and is not: */ /* 246/247/249 is the experts band only. */ --cn-panel-grey: #575756; /* solid grey blocks, pull-out quote */ --cn-panel-blue: #bbe9fe; /* Most Read / Data pull-outs / Related */ /* research. == --cn-cyan at 30% on white*/ --cn-orange: #ee7633; /* Research "Latest Report" hero */ /* Forthcoming-events date chip. Sampled by pixel, like --cn-blue-cta and for the same reason: that card is a SCREENSHOT pasted into the artboard, with no text layer and no vector fills. The raw samples are #edf1ff and #6f88bb, which are the LIVE SITE's colours rather than the 2026 palette - kept because nothing in the palette was close, and because the card is recognisably the same component the client already knows. */ /* Set INLINE, per element, from the topic's colour in the content system - see topic.css. Declared here so it resolves rather than dangling; the value `initial` makes var() fall through to the slug palette whenever a topic has no colour set. */ --cn-topic-set: initial; /* Off-scale, and it has to be. p2/p6 row two is 1203.5 of chips plus 52.4 of gaps = exactly 1256, with ZERO slack. At the 12px scale step every chip runs ~4 wide, seven of them overflow by 28, and the fourteen wrap to three rows where the design draws two. */ --cn-chip-pad: 10px; --cn-date-chip: #edf1ff; /* pale blue date chip on the events card*/ /* DARKENED FROM THE SAMPLE. The pixel sample off the artboard's screenshot is #6f88bb, which measures 3.15:1 on the #edf1ff chip - a 12px uppercase label below the 4.5 AA floor. #4f6a9e is the same hue at 4.79:1. The chip FILL stays exactly as sampled; only the text moved, which is the rule the topic palette already follows. */ --cn-date-chip-ink: #4f6a9e; /* its month label - AA on the chip */ /* ------------------------------------------------------------------ INK */ --cn-ink: #001c64; /* headings + strong text */ --cn-ink-body: #1d1d1b; /* back link + UI text - NOT reader prose, which is --cn-ink-muted. See reader.css */ --cn-ink-muted: #575756; /* meta, captions, secondary */ --cn-ink-faint: #8a8a88; /* timestamps, disabled */ --cn-ink-invert: #ffffff; /* ---------------------------------------------------------- LINES/EDGES */ --cn-border: #d8dade; /* card + list-row rules */ --cn-border-mid: #a9acb4; /* column partitions in divided grids - #d8dade read as nothing between the Related Webinars rows */ --cn-border-strong: #001c64; /* section underline beneath sub-tabs */ /* --------------------------------------------------------- PLACEHOLDERS */ /* Artboard-only. These must NOT survive into production markup - they mark where real ad creative / imagery goes. Grep for these before ship. */ --cn-ph-ad: #d4df45; /* lime "Advert space" blocks */ --cn-ph-img: #000000; /* black "stock image" blocks */ /* ================================================================== TOPIC COLOURS ------------------------------------------------------------------ FINDING: the design uses 14 topic labels but only SIX distinct colours, grouped by risk domain. Confirmed from the vector fills of the "FILTER BY TOPIC" chip row on artboard p2 - not an approximation. See CONNECT2026.md "Open questions" - we need the designer to confirm the grouping is deliberate. Each topic gets its OWN custom property even where the value repeats. That way, if the client later wants 14 unique colours, it is a one-line change here and ZERO markup changes anywhere else. Two values per family: --cn-topic-* the design's colour. Chip FILLS + decorative only. --cn-topic-*-ink an AA-compliant darkened variant. TEXT only. WHY: 5 of the 6 design colours fail WCAG AA (4.5:1) against white, both as white-text-on-fill and as coloured-text-on-white. Measured: purple #b521ff 4.54:1 PASS (marginal) slate #6c8296 3.98:1 FAIL green #009900 3.78:1 FAIL orange #ee7633 2.89:1 FAIL gold #cca30e 2.38:1 FAIL cyan #1cb7fc 2.28:1 FAIL The -ink variants are hue-preserving and all measure 4.60:1. ================================================================== */ /* -- the six families ------------------------------------------------ */ --cn-fam-purple: #b521ff; --cn-fam-purple-ink: #b41eff; --cn-fam-gold: #cca30e; --cn-fam-gold-ink: #8f720a; --cn-fam-green: #009900; --cn-fam-green-ink: #008900; --cn-fam-slate: #6c8296; --cn-fam-slate-ink: #63788a; --cn-fam-cyan: #1cb7fc; --cn-fam-cyan-ink: #027db3; --cn-fam-orange: #ee7633; --cn-fam-orange-ink: #c55110; /* -- the 14 topics, keyed by slug ------------------------------------ */ --cn-topic-ai-technology: var(--cn-fam-purple); --cn-topic-ai-technology-ink: var(--cn-fam-purple-ink); --cn-topic-alm-treasury-liquidity: var(--cn-fam-gold); --cn-topic-alm-treasury-liquidity-ink: var(--cn-fam-gold-ink); --cn-topic-credit-risk: var(--cn-fam-gold); --cn-topic-credit-risk-ink: var(--cn-fam-gold-ink); --cn-topic-cyber: var(--cn-fam-purple); --cn-topic-cyber-ink: var(--cn-fam-purple-ink); --cn-topic-esg-climate: var(--cn-fam-green); --cn-topic-esg-climate-ink: var(--cn-fam-green-ink); --cn-topic-financial-crime: var(--cn-fam-slate); --cn-topic-financial-crime-ink: var(--cn-fam-slate-ink); --cn-topic-insurance: var(--cn-fam-slate); --cn-topic-insurance-ink: var(--cn-fam-slate-ink); /* A FIFTEENTH TOPIC, not on p6's chip row and not in the design's palette. Half of the News listing is filed under "Industry News" in the CRM, and an unknown slug takes the fallback grey - so six of twelve eyebrows, and the meta line and standfirst of each of those readers, rendered as if the topic had failed to load. Slate is the neutral of the six families and is shared with Financial Crime and Insurance already. THE CLIENT STILL OWNS THIS CHOICE; it is here so the page does not look broken while they make it. */ --cn-topic-industry-news: var(--cn-fam-slate); --cn-topic-industry-news-ink: var(--cn-fam-slate-ink); --cn-topic-market-risk: var(--cn-fam-gold); --cn-topic-market-risk-ink: var(--cn-fam-gold-ink); --cn-topic-model-risk: var(--cn-fam-purple); --cn-topic-model-risk-ink: var(--cn-fam-purple-ink); --cn-topic-operational-nonfinancial: var(--cn-fam-purple); --cn-topic-operational-nonfinancial-ink: var(--cn-fam-purple-ink); --cn-topic-regulation-compliance: var(--cn-fam-cyan); --cn-topic-regulation-compliance-ink: var(--cn-fam-cyan-ink); --cn-topic-resilience: var(--cn-fam-orange); --cn-topic-resilience-ink: var(--cn-fam-orange-ink); --cn-topic-stress-testing: var(--cn-fam-gold); --cn-topic-stress-testing-ink: var(--cn-fam-gold-ink); --cn-topic-vendor-thirdparty: var(--cn-fam-orange); --cn-topic-vendor-thirdparty-ink: var(--cn-fam-orange-ink); /* ============================================================== TYPE === */ /* Poppins confirmed from the PDF's embedded font table: Poppins-Medium (workhorse), -SemiBold, -MediumItalic, -Bold, -Regular. */ --cn-font: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; --cn-fw-regular: 400; --cn-fw-medium: 500; --cn-fw-semibold: 600; --cn-fw-bold: 700; /* FLUID SCALE. Every size scales continuously between 375px and 1440px viewport, then holds. No jumps at a breakpoint. Each clamp is anchored so the value at 1440px is EXACTLY the artboard measurement (PDF pt x 2.4). Verify with: getComputedStyle(el).fontSize at width 1440 Above 1440 the values hold at the artboard figures rather than growing. That is deliberate: the design specifies a 1256px content box, and on a very wide screen the correct behaviour is a centred, readable column - not 2000px line lengths. Revisit only if the client asks for a large-screen scale-up. The minimums are the readable floor on a 375px phone. Body never goes below 16px - see the T-40 checklist. THE SLOPE RUNS FROM 1024 TO 1440, NOT FROM 375. It used to run from 375, one straight line up to 1440 - and that spent almost all of its travel on the phone-to-tablet range, where every screen has its own layout anyway, and left the DESKTOP WINDOW range nearly flat. Measured: from 1440 down to 1024 the container shrinks 22% and the H1 shrank 8% (34.8 -> 32.1); at 1280, a 13-inch laptop with the browser not quite full-screen, it was 33.8 - a single pixel off the artboard size in a column 150px narrower. Titles wrapped to an extra line and read as too big, which is what the test team reported. Both ends are exactly where they were: 1440 is still the artboard figure and the phone floor is unchanged, so nothing measured against a board moves. What changed is that the whole descent now happens between 1024 and 1440, where a laptop user actually resizes. A 1280 window is now 32.2 rather than 33.8; 1024 reaches the floor instead of hovering 4px above it. THE THREE HEADING SIZES ARE A NOTCH UNDER THE BOARD, DELIBERATELY. h1 34.8 -> 32, h2 32 -> 29.5, h3 28 -> 26 at 1440, with the floors brought down to match (28 -> 26, 24 -> 22, 22 -> 20). The board figures were exact, and on a 13-inch screen at its native 1440 they still read as large - the artboard was drawn on a bigger display than most of the audience uses. Asked for by the test team after the ramp above went in: "still looking big according to size of screen, make a little bit smaller". About 8% off the heading sizes, nothing off the body. This is the ONE place the type scale departs from the artboard on purpose. Put the old numbers back here if the client wants the board size, and every heading on every page follows. Re-derive: slope = (max - min) / 4.16 vw, intercept = min - slope * 10.24. Spacing tokens (--cn-space-*) still use the old 375-anchored slope - a separate decision, since the boards fix those in px. */ --cn-text-rank: clamp(40px, calc(3.0769px + 3.6058vw), 55px); /* Most Read numeral 22.8pt */ /* 34.8, not 36: 14.5pt x 2.4 = 34.8 exactly, and the artboards draw it there - the listing H1 on p2/p4/p6 and the hero card title all measure 34.8. 36 was a rounding of the same 14.5pt and read 3.4% large, which is visible on a page whose whole top is type. */ --cn-text-h1: clamp(26px, calc(11.2308px + 1.4423vw), 32px); /* hero / page title 14.5pt */ --cn-text-h2: clamp(22px, calc(3.5385px + 1.8029vw), 29.5px); /* in-page heading 13.0pt */ --cn-text-h3: clamp(20px, calc(5.2308px + 1.4423vw), 26px); /* event brand block 11.5pt */ --cn-text-section: clamp(20px, calc(10.1538px + 0.9615vw), 24px); /* SECTION HEADING 10.0pt */ --cn-text-card: clamp(18px, calc(13.0769px + 0.4808vw), 20px); /* card title 8.2pt */ --cn-text-author: clamp(17px, calc(12.0769px + 0.4808vw), 19px); /* author / role / org 8.0pt */ --cn-text-body: clamp(16px, calc(11.0769px + 0.4808vw), 18px); /* body + headline row 7.5pt */ --cn-text-meta: clamp(15px, calc(10.0769px + 0.4808vw), 17px); /* top-bar contact 6.9pt */ --cn-text-nav: clamp(15px, calc(12.5385px + 0.2404vw), 16px); /* primary nav item 6.5pt */ --cn-text-chip: clamp(14px, calc(11.5385px + 0.2404vw), 15px); /* topic chip label 6.3pt */ --cn-text-label: clamp(13px, calc(10.5385px + 0.2404vw), 14px); /* FILTER BY TOPIC 6.0pt */ --cn-text-tiny: 12px; /* small button 4.9pt */ --cn-lh-tight: 1.15; /* headings */ --cn-lh-snug: 1.3; /* card titles, headline rows */ --cn-lh-rank: 1.1; /* Most Read titles 21.6px / 19.7px */ /* MEASURED, do not "improve" this to 1.5/1.6. Body copy on p3, p5, p7, p16 and p18 all step 10.05pt between lines on 7.5pt type - 24.1px on 18px, a ratio of 1.34. An earlier 1.6 made every reader run ~20% longer than the artboard and pushed the rail out of alignment with the content. */ --cn-lh-body: 1.35; /* long-form copy 10.05pt / 7.5pt */ --cn-tracking-label: 0.08em; /* uppercase eyebrows / labels */ /* =========================================================== SPACING === */ /* 4px base. Section gaps measured off the artboards land on 20/24/60. */ /* Small steps stay fixed - a 4px gap should be 4px on any screen. */ --cn-space-1: 4px; --cn-space-2: 8px; --cn-space-3: 12px; --cn-space-4: 16px; --cn-space-5: 20px; /* 3-up card gap (8.1pt) */ /* Two grids on p1 do NOT use the 20px card gap, because their tiles are a fixed shape and the gap absorbs what is left of the column. report covers 228 wide, A-ratio (228/322.5 = 0.707 = 1/sq2) 3 x 228 + 2 x 45.5 = 775 <- fills the content column media cards 292 wide, 4 across the full 1256 container 4 x 292 + 3 x 29.7 = 1256 Measured on p1 at x=567.2/840.7/1114.2 and x=85.7/407.7/729.8/1050.4. */ /* A-series, 1/sqrt(2). Every report and magazine cover in the design. */ --cn-ratio-a: 0.7071; --cn-gap-covers: 45px; /* research cover row (19.0pt) */ --cn-gap-media: 30px; /* 4-up media card row (12.4pt) */ --cn-space-6: 24px; /* Off-scale, and deliberately so. Reader prose steps 19.3pt between paragraphs less one 10.05pt line = 22px, measured on p3/p5/p7/p9/p12. --cn-space-6 was standing in for it and ran every reader 2px long per paragraph. Do not round this back onto the 4px scale. */ --cn-space-para: 22px; /* Large steps scale with the viewport, same anchoring as the type scale: exact artboard value at 1440, readable floor at 375. Section rhythm that stays at 80px on a phone wastes half the screen. */ --cn-space-8: clamp(24px, calc(21.18px + 0.7512vw), 32px); --cn-space-10: clamp(28px, calc(23.77px + 1.1268vw), 40px); --cn-space-12: clamp(32px, calc(26.37px + 1.5023vw), 48px); --cn-space-15: clamp(40px, calc(32.96px + 1.8779vw), 60px); /* gutter (25.1pt) */ --cn-space-20: clamp(48px, calc(36.73px + 3.0047vw), 80px); /* major sections */ /* ============================================================ LAYOUT === */ /* All measured from artboard p2/p3 and converted at 2.4x. */ --cn-container: 1256px; /* content box (523.4pt) */ --cn-page-pad: 86px; /* side margin at 1440 (36.0pt) */ /* TWO COLUMN SPLITS - measured, and they differ by page type. listing / landing 743 content | 60 gutter | 452 rail (artboard p2) reader / home 775 content | 29 gutter | 452 rail (p1, p3, p5, p9) Both total 1256. The reader pair was 771|32 and that was WRONG. Re-measured from p1 and p3 vector geometry, not from the rules this time - the rules are drawn inside the column and under-report it. Three independent blocks on p1 measure 773.3, 774.5 and 774.9 wide, and the p1 rail sits at x=889.9. p3 confirms it twice over: its rail blocks start at 889.7 / 890.1 / 890.6, and its split hero image is 387.4 - exactly half of 775, which 771 cannot give. 86.4 + 775 + 29 = 889.9 <- p1/p3 rail left edge, measured 775 + 29 + 452 = 1256 <- container, measured 86.4 -> 1342.3 This is not cosmetic. The reader's action-pill row is 775px wide, so it fits on ONE line in a 775px column and wraps in a 743px one. Using the listing split on a reader is visibly wrong. */ --cn-col-main: 743px; /* listing content column (309.8pt) */ --cn-col-rail: 452px; /* right ad rail (188.6pt) */ /* --cn-col-main and --cn-col-main-read are also the columns' FLOORS, not just their artboard widths. Below 1429 the container cannot hold content + gutter + 452, and shell.css .cn-grid-rail resolves that by holding these two numbers and letting the RAIL absorb the loss. So every grid that fits at the artboard fits all the way down to the tablet stack, which is the whole point - see the note there. */ --cn-gutter: 60px; /* listing gutter (25.1pt) */ --cn-col-main-read: 775px; /* reader content column (323.0pt) */ --cn-gutter-read: 29px; /* reader gutter (12.1pt) */ --cn-nav-h: 64px; /* navy bar height (26.6pt) */ --cn-search-w: 250px; /* nav search input (104.3pt) */ --cn-search-h: 41px; /* (17.0pt) */ /* =========================================================== BUTTONS === */ /* Measured across artboards p1/p10/p13/p22: every standard pill is 34px tall, the small variant 22px, label 7.5pt Medium x2.4 = 18px. */ --cn-btn-h: 34px; --cn-btn-h-sm: 22px; --cn-pill-h: 36px; /* action pill, 2 taller than a button */ /* The TAB pill is not the action pill. p3's action pills measure 36.0, but p1's tab pills measure 34.1 on both strips - the Latest Insights one at y=1044.6 (82.8 x 34.1) and the Videos & Audio one at y=2915 (115.7 x 34.1). Same height as a button, not the action pill. Text sits 12.4 in from each edge, not 16. */ --cn-tab-h: 34px; /* in-page tab pill (14.2pt) */ --cn-pill-min: 92px; /* see action.css - Share and Save are drawn */ /* the SAME width on p3 (92/92) and p12 */ /* (89/89) despite different text, so there */ /* is a minimum, not a coincidence. */ --cn-btn-pad-x: var(--cn-space-6); --cn-btn-text: var(--cn-text-body); /* ACCESSIBILITY - primary button, unresolved. The design draws white text on --cn-cyan. That measures 2.28:1 against a WCAG AA requirement of 4.5:1, and it is the main CTA on nearly every screen. Note this already ships on the current live site (.custom-connect-button), so it is a pre-existing issue, not a new one. Options put to the designer: A white on #1cb7fc 2.28:1 FAIL <- as drawn, current default B navy on #1cb7fc 6.84:1 PASS <- recommended: fill is unchanged, only the text colour moves C white on #027db3 4.58:1 PASS changes the fill Defaulting to A so the build matches the artboards. Switching to B is one line here and zero markup changes. */ --cn-btn-primary-bg: var(--cn-cyan); --cn-btn-primary-ink: var(--cn-ink-invert); /* option B: var(--cn-navy) */ /* ============================================================ RADIUS === */ --cn-radius-sm: 4px; --cn-radius-md: 8px; --cn-radius-card: 12px; --cn-radius-pill: 999px; /* action pills + topic chips fully round */ /* =========================================================== SHADOWS === */ --cn-shadow-card: 0 2px 8px rgba(0, 28, 100, .08); --cn-shadow-raised: 0 6px 20px rgba(0, 28, 100, .12); /* =========================================================== Z-INDEX === */ --cn-z-base: 1; --cn-z-sticky: 100; /* sticky ad rail */ --cn-z-nav: 200; /* primary nav */ --cn-z-dropdown: 300; --cn-z-overlay: 400; /* search overlay */ --cn-z-modal: 500; /* gate modal */ /* ============================================================ MOTION === */ --cn-ease: cubic-bezier(.4, 0, .2, 1); --cn-dur-fast: 120ms; --cn-dur: 200ms; } /* Respect reduced-motion at the token level so components inherit it. */ @media (prefers-reduced-motion: reduce) { :root { --cn-dur-fast: 0ms; --cn-dur: 0ms; } } /* ================================================ ABOVE THE ARTBOARD ==== */ /* THE LAYOUT SCALES WITH THE SCREEN; THE TYPE DOES NOT. The artboards are 600pt wide - 600 x 2.4 = 1440px - and every clamp above was authored to top out exactly there. Above 1440 the design froze: the container stayed 1256px and only the side margin grew. On the artboard the content is 87.3% of the page and the margin 6.3%. In a 1700px window ours was 73.9% and 12.6% - twice the margin the design asks for. That is what makes a full-screen window look nothing like the PDF, and it is also why the hero headline reads as oversized. The headline is 36px in both; it only LOOKS enormous because it sits in a narrow strip in the middle of a wide screen. Widen the strip and it settles down without changing a single font size. So the horizontal structure - container, rail, both gutters - scales with the viewport to hold the artboard's proportions, and TYPE IS DELIBERATELY ABSENT from this block. Scaling type to match the PDF at 1920 would mean a 48px headline and 24px body, which is the "too big" complaint made worse. Leaving it fixed is what makes the page read denser and more editorial as the window grows, which is how the artboard reads. The rail scales too. It is fixed at 452px below 1440 because ad creative ships at fixed sizes, but the skyscraper is 350x1050 natural and is already displayed at 452, so it is upscaling either way - and holding it at 452 while the container grew would dump every extra pixel into the text column. Ceiling is 1920. Past it everything freezes, because a 2560 display is nearly always showing a window rather than a maximised page, and true proportional scaling there would ask for a 2235px container. */ @media (min-width: 1440px) { :root { /* 1256 -> 1678, holding the artboard's 87.3% of the viewport. */ --cn-container: clamp(1256px, calc(-10px + 87.9167vw), 1678px); /* 452 -> 602, so the content column does not absorb all the growth. */ --cn-col-rail: clamp(452px, calc(2px + 31.25vw), 602px); --cn-gutter: clamp(60px, 4.1667vw, 80px); --cn-gutter-read: clamp(29px, 2.0208vw, 39px); /* Vertical rhythm opens up a little, well short of proportional. */ --cn-space-8: clamp(32px, calc(20px + 0.8333vw), 36px); --cn-space-10: clamp(40px, calc(25px + 1.0417vw), 45px); --cn-space-12: clamp(48px, calc(30px + 1.25vw), 54px); --cn-space-15: clamp(60px, calc(39px + 1.4583vw), 67px); --cn-space-20: clamp(80px, calc(50px + 2.0833vw), 90px); } }