:root { /* ---------------------------------------------------------- Search Stack blue ramp. Two even scales sampled from the supplied palettes, numbered left to right as they appear there: --ss-bm-* runs black to mid, --ss-mw-* runs mid to white. They meet at #2a8dff, which is bm-7 and mw-1. Everything below is expressed in terms of these, so a change to the ramp moves the whole app rather than one panel. ---------------------------------------------------------- */ --ss-bm-1: #000000; --ss-bm-2: #07172a; --ss-bm-3: #0e2f55; --ss-bm-4: #154780; --ss-bm-5: #1c5eaa; --ss-bm-6: #2376d5; --ss-bm-7: #2a8dff; --ss-mw-1: #2a8dff; --ss-mw-2: #4da0ff; --ss-mw-3: #71b3ff; --ss-mw-4: #95c6ff; --ss-mw-5: #b8d9ff; --ss-mw-6: #dcecff; --ss-mw-7: #ffffff; /* mw-6 taken 40% of the way to white: the count half of a pale pill, one step back from the term half beside it, and the hover/selected tint everywhere else. */ --ss-mw-6-light: #eaf4ff; /* mw-6 taken 70% of the way to white: the workspace and the worked example sit on this, a tint rather than a colour. */ --ss-mw-6-tint: #f4f9ff; /* ---------------------------------------------------------- DERIVED, NOT SAMPLED. The three values below are not swatches in either supplied palette. They are bm-3 mixed toward the surface at 26%, 32% and 55%. They exist because the two ramps have no mid-tone: every step is either a dark navy (bm-2..bm-5) or a bright-to-pale blue (bm-7, mw-1..mw-6), with nothing between #1c5eaa and #95c6ff. Secondary text has nowhere to land. bm-4 is darker than the body text it is meant to sit behind, and it is one step from bm-5, which carries active state - a resting label in bm-4 and an active one in bm-5 are the same colour to the eye. The pale end is the other way round: mw-4 on white is about 1.9:1, too faint to read as text at all. So: one blend for secondary text and default icons, one step softer for the descriptions that sit under a label, and a lighter one again for controls that cannot be used. The first two clear AA on white, on the workspace tint and on the hover tint; the disabled step deliberately does not, because it marks something that cannot be used. Change the ramp and these have to be re-mixed from the new bm-3 - they do not follow it on their own. ---------------------------------------------------------- */ --ss-bm-3-muted: #4a6481; --ss-bm-3-soft: #58708b; --ss-bm-3-disabled: #93a1b3; /* Brand - Search Stack palette */ --vandy-navy-900: var(--ss-bm-2); --vandy-navy-800: var(--ss-bm-3); --vandy-blue-500: var(--ss-bm-6); --vandy-blue-700: var(--ss-bm-5); /* Kept as a name for the keyboard-focus ring, which is the one thing that has to be told apart from the D5 selected state at a glance. It is the ramp's brightest step, not the old cyan. */ --vandy-cyan-300: var(--ss-bm-7); /* The accent that carries active state - tab text and the outline on an over-used term. */ --brand-teal-600: var(--ss-bm-5); --brand-blue-600: var(--ss-bm-5); /* The brightest step, kept for the things that should read as live: a tab's underline and a progress fill. */ --brand-blue-bright: var(--ss-bm-7); /* Relevant Terms coverage states. Not a traffic light and not a ramp: a term is either sitting in its target range or it isn't, so there are exactly two pill colours. In-range terms are filled in, everything off target (under, over or not used at all) stays a neutral grey, and the navy down-arrow is the only thing that singles out overuse. The -soft pair is the count half of each pill; in-range pills use one solid colour across both halves. */ --nlp-term-in-range: var(--ss-bm-6); --nlp-term-in-range-soft: var(--ss-bm-6); --nlp-term-in-range-text: var(--ss-mw-7); --nlp-term-off-target: var(--ss-mw-6); --nlp-term-off-target-soft: var(--ss-mw-6-light); /* Below range (including unused terms): one solid fill across both halves of the pill. */ --nlp-term-below: var(--ss-mw-5); /* Above range: white fill, marked by its outline and arrow. */ --nlp-term-above: var(--ss-mw-7); /* The flash on a matched word, in the worked example and when a pill is clicked: a soft plate of the in-range blue (bm-6 at 18%) with the word itself in that blue, so it reads as the pill's colour landing on the text. */ --nlp-term-hit-plate: rgba(35, 118, 213, 0.18); --nlp-term-hit-plate-clear: rgba(35, 118, 213, 0); --nlp-term-hit-ink: var(--nlp-term-in-range); /* Poppins Bold "H", outline only, cropped to its ink - used as a mask by the heading flag so the letter can be centred exactly. */ --heading-flag-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 608 702' preserveAspectRatio='none'%3E%3Cpath d='M608 0V702H437V413H171V702H0V0H171V275H437V0Z'/%3E%3C/svg%3E"); --nlp-term-accent: var(--ss-bm-5); /* The label on a pale pill and the count beside it - dark enough on those two tints to read as text rather than as a tint of the fill. */ --nlp-term-off-target-text: var(--ss-bm-3); --nlp-term-off-target-count-text: var(--ss-bm-4); /* The editor underlines. Same two-state read as the pills - the accent when a term sits in range, a lighter step of the same ramp when it doesn't - but the pale end has to stay visible as a 2px line on white, so it takes mw-4 rather than the pill's own mw-6, which would vanish. */ --nlp-underline-in-range: var(--ss-bm-5); --nlp-underline-off-target: var(--ss-mw-4); /* The light that rides the score bar's leading edge as it grows. White over the bright step, so the sheen is the accent lit up rather than a second colour crossing it. */ --score-rise-sheen-0: rgba(255, 255, 255, 0); --score-rise-sheen-1: rgba(255, 255, 255, 0.34); --score-rise-sheen-2: rgba(255, 255, 255, 0.78); /* The sparks thrown off the leading edge as the bar advances - the brightest ramp step for the hot core, a step back for the cooler ones; the trail fades to nothing. */ --score-spark-core: rgba(148, 198, 255, 0.95); --score-spark-cool: rgba(42, 141, 255, 0.85); --score-spark-trail: rgba(42, 141, 255, 0); /* The panel the worked example types itself into - the same tint the workspace uses, so the example reads as a piece of the app rather than a card of its own. */ --nlp-demo-surface: var(--ss-mw-6-tint); /* Text. One ladder, used the same way on every surface: bm-2 for headings and score numbers, bm-3 for body copy, then two blended steps for secondary text and for the descriptions that sit under a label, and a lighter one again for controls that cannot be used. */ --text-strong: var(--ss-bm-2); --text-default: var(--ss-bm-3); --text-muted: var(--ss-bm-3-muted); --text-soft: var(--ss-bm-3-soft); --text-disabled: var(--ss-bm-3-disabled); --text-inverse: var(--ss-mw-7); /* Links and the text of a control that is on. Reserved for things that are actually clickable or actually active. */ --text-link: var(--ss-bm-5); --text-link-hover: var(--ss-bm-4); /* Progress fills and decorative accents - the ramp's brightest step, never used for text on a light surface. */ --accent-bright: var(--ss-bm-7); /* The ring a focused input wears, replacing the cyan glow the create page used to draw. bm-7 at an alpha, so it reads as the same blue the border switches to rather than a second colour. */ --focus-ring: rgba(42, 141, 255, 0.24); /* Surfaces */ --surface-page: var(--ss-mw-6-tint); --surface-card: var(--ss-mw-7); /* A soft panel sits on the same faint tint as the workspace; --surface-soft is the heavier tint reserved for hover and selected backgrounds. */ --surface-muted: var(--ss-mw-6-tint); --surface-soft: var(--ss-mw-6-light); /* Borders */ --border-default: var(--ss-mw-6); --border-soft: var(--ss-mw-6); --border-subtle: var(--ss-mw-6-light); /* Header and navigation. The bar is bm-2; labels and icons ride on it in mw-6, the current page in white, and the selected item takes a bm-3 plate with a bright accent down its edge. */ --nav-surface: var(--ss-bm-2); --nav-raised: var(--ss-bm-3); --nav-label: var(--ss-mw-6); --nav-label-current: var(--ss-mw-7); --nav-label-quiet: #7f9dc4; --nav-border: rgba(220, 236, 255, 0.16); --nav-accent: var(--ss-bm-7); /* Semantic */ --success-600: #347554; --success-100: #e8f5ed; --warning-700: #8b6720; --warning-100: #fff3dc; --danger-600: #b42318; --danger-100: #fbe8e6; /* Typography */ --font-sans: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-size-2xs: 10px; --font-size-xs: 12px; --font-size-sm: 14px; --font-size-md: 15px; --font-size-lg: 16px; --font-size-xl: 18px; --font-size-2xl: 24px; --font-size-page-title: 32px; --font-weight-medium: 600; --font-weight-bold: 700; --font-weight-heavy: 800; --font-weight-black: 900; /* Spacing */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px; --space-9: 36px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-18: 72px; /* Every text button: as tall as a field, 16px either side of its words and as wide as they are, medium weight. Disabled is the page's pale blue with muted words, whatever its colour when ready. */ /* Small grey words under or beside something: helper text, a card's details, "Next: Website". One size, one grey. */ --hint-size: var(--font-size-xs); --hint-color: var(--text-muted); --control-height: 48px; --button-pad-x: 16px; --button-weight: 500; --button-disabled-bg: var(--ss-mw-6-light); --button-disabled-text: var(--text-soft); /* One blue for every solid button on the app - the New report actions, the selected filter, and anything else that reads as the primary thing to press. */ --button-primary: #2577d5; /* The frame between an app shell's scrolling region and the window: one thickness, used on every side of both shells. */ --app-frame: 10px; --button-primary-hover: #1c5eaa; /* Shape */ --radius-xs: 5px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 10px; --radius-pill: 999px; /* Term pills. Measured off the Search Stack mark: each layer's corner is a 9.4px arc on a 123px-tall rhombus, which cuts the tip back by about 8% of the shape's depth. Carried to a 90 degree corner on a 28px pill that works out at ~5.3px, so the pills take the 6px step on the scale - squared off the way the logo is, rather than the capsule they were. */ --radius-term-pill: var(--radius-sm); /* Shadows - tinted with bm-2 rather than a neutral grey, so what falls under a card is the same navy the header is painted in. */ --shadow-card: 0 3px 12px rgba(7, 23, 42, 0.05); --shadow-menu: 0 18px 42px rgba(7, 23, 42, 0.16), 0 3px 10px rgba(7, 23, 42, 0.07); --shadow-popover: 0 16px 36px rgba(7, 23, 42, 0.14), 0 2px 8px rgba(7, 23, 42, 0.07); /* Layout */ --content-max-width: 1200px; --page-gutter: 24px; --page-gutter-mobile: 14px; --topbar-height: 72px; /* Motion */ --transition-fast: 120ms ease; --transition-normal: 180ms ease; }