/* * INSCOPE 360 — brand surface tokens * --------------------------------------------------------------------------- * SOURCE OF TRUTH: INSCOPE Brand Guidelines V2 (frostcreative, 1670). * p.19 Primary Colours · p.20 Secondary Colours · p.22–25 Typography * p.32 The Viewport · p.35 Data Visualisation * * ⚠ NOT V4. `JO_INSCOPE_Brand_Guidelines_V4_source.*` in the Marketing folder * is a working revision, not the agreed brand: it replaces the palette with a * green-accented OKLCH system and swaps IBM Plex for the Source superfamily. * This file was briefly built on it (2026-08-26) and corrected the same day. * If you are reaching for a green (#3ABA6A) or Source Serif, you are on V4. * * --------------------------------------------------------------------------- * THE COLOUR DECISION (2026-08-26) * * V2 p.19: "Black, White and Silver form the foundation of the INSCOPE * identity." Those three carry these surfaces. The secondary palette (Teal, * Muted Sage, Bright Orange, Pale Aqua, Light Grey) is explicitly "used * sparingly to highlight information, add emphasis and support data * visualisation" — so it appears here ONLY as semantic state and chart series, * never as page chrome. * * The dark ladder between Black and Silver is biased to hue ~213°, taken from * the product's own --brand #3F5269, because the sign-in hands straight off to * the app and a hue turn at that seam reads as two different products. * Silver #BCC6CC is hue 202° — it already belongs to that family, which is why * it can serve as body text on the black surfaces AND sit comfortably beside * --ground #DCE6F2 once you are inside. * * Bright Orange is deliberately NOT the accent. It is reserved for warning * state, which is the "sparingly / add emphasis" use V2 describes. * * --------------------------------------------------------------------------- * SCOPE — unauthenticated black surfaces only: the sign-in flow and the state * pages (404 / 403 / 500 / maintenance). The signed-in product keeps the * canonical AIM token set (wwwroot/css/tokens/aim-canonical.css). * * Deliberately NOT theme-aware. Black is a foundation colour, not a mode. */ :root { /* ================= V2 PRIMARY — the foundation (p.19) ================= */ --ins-ground: #000000; /* Black · Pantone Black 3 EC */ --ins-ink: #FFFFFF; /* White */ --ins-silver: #BCC6CC; /* Silver · PANTONE 428 C · hue 202° */ /* ================= V2 SECONDARY — sparing use only (p.20) ============= Kept as named tokens so the palette is legible in code, but consumed below only through the semantic + chart tokens. */ --ins-teal: #284B4F; /* Pantone 547 C */ --ins-sage: #AAC4C3; /* Pantone 5513 C */ --ins-orange: #FF5F19; /* Pantone 165 C */ --ins-aqua: #D2E6E5; /* Pantone 621 C */ --ins-light-grey: #F3F5F6; /* Pantone Cool Gray 1 C */ /* ================= DARK LADDER ======================================== Black → Silver, biased to the product's steel hue (213°, from AIM --brand #3F5269) so the sign-in and the app are one family. */ --ins-surface-1: #0A1017; --ins-surface-2: #141D28; --ins-hairline: #26333F; --ins-hairline-hi: #47637F; /* control borders — 3.3:1 on Black, which clears the 3:1 non-text minimum. A lift of AIM --brand-on #31465E: that measured 2.2:1 and read as no border at all. */ /* ================= INK ================================================ */ --ins-ink-body: #BCC6CC; /* Silver — 13.9:1 on Black · AAA */ --ins-ink-muted: #9AA4AB; /* Silver at 82% — 8.3:1 on Black · AA */ /* ================= LIGHT SURFACE ====================================== Added 2026-08-27. The sign-in form pane went white, which is what V2 p.36 — the guidelines' OWN login mock-up — actually shows: black brand pane on one side, white form pane on the other. The stage stays black, so the page is the same two-world composition, mirrored. It also shortens the handoff into the app: White -> --ground #DCE6F2 is a small step in the same hue family, where black -> #DCE6F2 was the jump that started this whole colour conversation. Every value below is measured against White, because a token that only works on Black is how the dark side ended up with a 2.2:1 border. */ --ins-light-ground: #FFFFFF; /* V2 White — primary */ --ins-light-sunken: #F3F5F6; /* V2 Light Grey, Pantone Cool Gray 1 C */ --ins-light-ink: #000000; /* V2 Black — 21:1 */ --ins-light-ink-body: #284B4F; /* V2 Teal, Pantone 547 C — 8.8:1 */ --ins-light-ink-muted: #5C7076;/* 5.2:1 */ /* 3.5:1 — clears the 3:1 non-text minimum. V2 Silver #BCC6CC measures 1.7:1 here and cannot carry a control boundary, however much it wants to. */ --ins-light-line: #7E8F98; --ins-light-line-soft: #D8DFE3; /* dividers and rules, decorative only */ /* Link hover on white DARKENS. --ins-action-hi lifts, which is correct on Black and wrong here. 6.5:1 on White. */ --ins-action-on-light-hover: #35608F; /* ================= ACTION ============================================= The product's own interactive blue, so the button you press to sign in is the button you press once you are inside. White on it is 4.57:1. Hover LIFTS on a dark ground — the app's --action-hover darkens, which is correct on light and wrong here. */ --ins-action: #4378B5; /* = AIM --action */ --ins-action-hi: #5A8FCB; --ins-on-action: #FFFFFF; /* NOT automatically white elsewhere — measured */ /* ================= SEMANTIC STATE ===================================== Dark-ground values. Bright Orange earns its place here and nowhere else on these surfaces. */ --ins-info: #5A9BD8; /* 7.1:1 on Black */ --ins-warn: #FF5F19; /* 6.9:1 — V2 Bright Orange, sparing */ --ins-bad: #E5544B; /* 5.5:1 */ --ins-ok: #AAC4C3; /* 11.6:1 — V2 Muted Sage */ /* ================= CHART SERIES (p.35) ================================ Value-stepped as well as hue-stepped, so the series survives greyscale and dichromacy. Used by the sign-in estate graph. */ --ins-series-1: #BCC6CC; /* Silver — brightest, top of hierarchy */ --ins-series-2: #5A9BD8; /* Steel */ --ins-series-3: #AAC4C3; /* Muted Sage */ --ins-series-4: #4A6070; /* Deep steel — darkest */ /* ================= TYPE (p.22–25) ===================================== Headlines IBM Plex Serif · text IBM Plex Sans Condensed. V2 p.25 names Georgia and Arial Narrow as the sanctioned fallbacks, so those lead the fallback stacks rather than a generic system font. */ --ins-font-display: 'IBM Plex Serif', Georgia, 'Times New Roman', serif; --ins-font-ui: 'IBM Plex Sans Condensed', 'Arial Narrow', Arial, -apple-system, 'Segoe UI', sans-serif; --ins-font-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, 'SF Mono', Menlo, monospace; /* ================= TEXT HALO ========================================== A wide, low-alpha bloom so type on the black surfaces sits IN the light rather than on top of it. Two stops: the far one carries the glow, the near one gives the glyph edge enough density not to look soft. Deliberately not applied to inputs or to the filled action button — glowing type inside a control reads as a rendering fault, and on a solid fill it just muddies the edge. */ --ins-text-halo: 0 0 26px rgba(168, 198, 226, 0.32), 0 0 7px rgba(168, 198, 226, 0.18); } /* --------------------------------------------------------------------------- Shared primitives for the black surfaces. Prefix is `ins-`. Do not mix these with `aim-*` product classes on the same element — the two systems have different grounds and will fight. --------------------------------------------------------------------------- */ .ins-surface { background: var(--ins-ground); color: var(--ins-ink-body); font-family: var(--ins-font-ui); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Display type. V2 p.24: headlines are IBM Plex Serif Regular, line height +4 of point size. No text-transform. */ .ins-display { text-shadow: var(--ins-text-halo); font-family: var(--ins-font-display); font-weight: 400; line-height: 1.1; letter-spacing: -0.01em; color: var(--ins-ink); text-wrap: balance; margin: 0; } /* Eyebrow / pre-intro subhead. V2 p.24 specifies IBM Plex Sans Condensed SemiBold in BLOCK CAPITALS for these — the one place uppercase is correct on these surfaces, because it is a label rather than a heading. */ .ins-eyebrow { text-shadow: var(--ins-text-halo); font-family: var(--ins-font-ui); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ins-ink-muted); margin: 0; } /* Tabular figures wherever numbers align. */ .ins-data { font-family: var(--ins-font-mono); font-variant-numeric: tabular-nums; } /* --- Form controls --------------------------------------------------------- */ .ins-field { display: flex; flex-direction: column; gap: 6px; } .ins-label { text-shadow: var(--ins-text-halo); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ins-ink-body); } .ins-input { width: 100%; min-height: 44px; padding: 0 14px; border: 1px solid var(--ins-hairline-hi); border-radius: 4px; background: var(--ins-surface-1); color: var(--ins-ink); font-family: var(--ins-font-ui); font-size: 0.9375rem; transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; } .ins-input::placeholder { color: var(--ins-ink-muted); opacity: 1; } .ins-input:hover { border-color: #5A7897; background: var(--ins-surface-2); } .ins-input:focus { outline: none; border-color: var(--ins-action); box-shadow: 0 0 0 3px rgba(67, 120, 181, 0.28); } /* --- Buttons --------------------------------------------------------------- */ .ins-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 0 20px; border: 1px solid transparent; border-radius: 4px; font-family: var(--ins-font-ui); font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.02em; text-decoration: none; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .ins-btn--go { background: var(--ins-action); color: var(--ins-on-action); } .ins-btn--go:hover { background: var(--ins-action-hi); color: var(--ins-on-action); } /* Was a transparent rectangle with a near-invisible outline. A control the user is meant to press needs a floor. */ .ins-btn--ghost { text-shadow: var(--ins-text-halo); background: var(--ins-surface-2); border-color: var(--ins-hairline-hi); color: var(--ins-ink); font-weight: 500; } .ins-btn--ghost:hover { border-color: #5A7897; background: #1E2A38; color: var(--ins-ink); } .ins-btn:focus-visible { outline: 2px solid var(--ins-action-hi); outline-offset: 2px; } .ins-btn:disabled { opacity: 0.5; cursor: not-allowed; } .ins-link { color: var(--ins-info); text-decoration: none; } .ins-link:hover { color: var(--ins-ink); text-decoration: underline; } .ins-link:focus-visible { outline: 2px solid var(--ins-action-hi); outline-offset: 2px; border-radius: 2px; } /* --- Divider --------------------------------------------------------------- */ .ins-or { display: flex; align-items: center; gap: 12px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ins-ink-muted); } .ins-or::before, .ins-or::after { content: ""; flex: 1; height: 1px; background: var(--ins-hairline); } /* --- Alerts ---------------------------------------------------------------- */ .ins-alert { border: 1px solid rgba(229, 84, 75, 0.45); border-left-width: 3px; border-radius: 0 4px 4px 0; background: rgba(229, 84, 75, 0.10); color: var(--ins-ink-body); padding: 12px 14px; font-size: 0.875rem; line-height: 1.5; } .ins-alert p { margin: 0; } .ins-alert p + p { margin-top: 6px; } /* --- Motion ---------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .ins-surface *, .ins-surface *::before, .ins-surface *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } }