/* ========================================================================= Infinite Equity web brand: design tokens ie-web-brand v1.0.0 ------------------------------------------------------------------------- The single source of truth for colour, type, spacing, radius and shadow. Every other file in the kit (ie-components.css, the Bootstrap bridge, the Tailwind theme) reads these variables. Change a value here, nowhere else. Contrast-checked by scripts/check_contrast.py. ========================================================================= */ :root { /* ---- Brand palette (official, do not edit) -------------------------- */ --ie-navy: #1C2D5A; /* Dark Blue: primary, headings, nav */ --ie-blue: #6A80B1; /* Light Blue: secondary, accents */ --ie-green: #C4DFCE; /* Green: success, highlights */ --ie-pale-green: #DDECE4; /* Pale Green: card fills, page tints */ --ie-coral: #F5907C; /* Coral: CTAs, alerts, warnings */ --ie-yellow: #F3D8B1; /* Yellow: badges, tags */ --ie-light-yellow: #F7E8D4; /* Light Yellow: section bg, stripes */ /* Old names, kept so existing apps still work. Use the yellow names in new code. */ --ie-orange: var(--ie-yellow); --ie-light-orange: var(--ie-light-yellow); /* ---- Derived shades (contrast-safe partners for the palette) -------- */ /* Light Blue is 3.9:1 on white: fine for borders and large text, too light for body-size text. Use --ie-link / --ie-blue-strong for text. */ /* Interaction colours are calculated from the brand palette, so they follow it automatically if a brand colour changes. Each keeps its parent's hue and saturation and shifts only the lightness: hsl(from h s calc(l - 10)) = 10 points darker After changing a brand colour, re-check contrast: --ie-blue-strong needs 4.5:1 against white (it carries link text). */ --ie-blue-strong: hsl(from var(--ie-blue) h s calc(l - 10)); /* links, focus ring; white text on it */ --ie-navy-deep: #1E2546; /* background of the navy brand pattern (assets/patterns) */ --ie-navy-hover: hsl(from var(--ie-navy) h s calc(l + 9)); /* lighter: navy is too dark to darken */ --ie-coral-hover: hsl(from var(--ie-coral) h s calc(l - 6)); /* darker */ --ie-navy-tint: color-mix(in srgb, var(--ie-blue) 15%, white); /* selected rows, active nav item bg */ --ie-blue-tint: color-mix(in srgb, var(--ie-blue) 11%, white); /* info alert and badge fill */ --ie-coral-tint: color-mix(in srgb, var(--ie-coral) 17%, white); /* danger alert and badge fill */ /* ---- Semantic colours ---------------------------------------------- */ --ie-page: #F5F7FA; /* app background */ --ie-surface: #FFFFFF; /* cards, panels, inputs */ --ie-surface-alt: var(--ie-page); /* table stripes: neutral, so they never read as a warning */ --ie-text: #000000; /* body copy, labels, field text */ --ie-text-alt: #2B3442; /* softer alternative to black text */ --ie-text-muted: #586274; --ie-heading: var(--ie-navy); --ie-link: var(--ie-blue-strong); --ie-link-hover: var(--ie-navy); --ie-on-navy: #FFFFFF; --ie-border: #DDE2EA; /* dividers, card outlines */ --ie-border-strong: #8792A6; /* form controls (3:1 non-text contrast) */ --ie-text-placeholder: #8A93A3; --ie-skeleton-shine: #EEF1F5; --ie-focus: var(--ie-blue-strong); --ie-focus-shadow: 0 0 0 3px color-mix(in srgb, var(--ie-blue-strong) 25%, transparent); --ie-backdrop: rgba(28, 45, 90, 0.45); /* sync: --ie-navy */ --ie-on-navy-line: rgba(255, 255, 255, 0.35); /* dividers on the navy top bar */ --ie-on-navy-hover: rgba(255, 255, 255, 0.12); /* hover/active fill on the top bar */ /* ---- Status colours ------------------------------------------------- Each status takes its HUE from a brand colour (Green, Yellow, Coral) but sets its own saturation and lightness: hsl(from h 33% 28%) The brand status colours are pale, so the darkness is fixed here rather than shifted. That keeps the text readable even if a brand colour gets lighter or darker; only a big hue change needs re-checking. Text colours need 4.5:1 on white and on their own pale fill. */ --ie-success-bg: var(--ie-pale-green); --ie-success-border: var(--ie-green); --ie-success-text: hsl(from var(--ie-green) h 33% 28%); /* 7.4:1 on white, 6.1:1 on fill */ --ie-success-strong: hsl(from var(--ie-green) h 55% 33%); /* brighter accent; 4.8:1, white text on it */ --ie-warning-bg: var(--ie-light-yellow); --ie-warning-border: var(--ie-yellow); --ie-warning-text: hsl(from var(--ie-yellow) h 78% 24%); /* 8.3:1 on white, 6.9:1 on fill */ --ie-warning-strong: hsl(from var(--ie-yellow) h 52% 56%); /* 2.6:1: accents only, not text */ --ie-danger-bg: var(--ie-coral-tint); --ie-danger-border: var(--ie-coral); --ie-danger-text: hsl(from var(--ie-coral) h 55% 42%); /* deep coral; 6.0:1 on white, 5.3:1 on fill */ --ie-danger-strong: hsl(from var(--ie-coral) h 55% 48%); /* coral accent; 4.9:1, white text on it */ --ie-info-bg: var(--ie-blue-tint); --ie-info-border: var(--ie-blue); --ie-info-text: var(--ie-navy); /* ---- Data-viz series ----------------------------------------------- Series 1-5 are the brand palette itself. Green, Coral and Yellow are pale (below the 3:1 graphics minimum on white), so bars, dots and lines in those colours get a thin outline in their deeper shade: fill: var(--ie-chart-3); stroke: var(--ie-chart-3-outline); stroke-width: var(--ie-chart-outline-width); Series 7-9 (the deeper shades) are only for charts that need more than six. */ --ie-chart-1: var(--ie-navy); /* 13.4:1 */ --ie-chart-2: var(--ie-blue); /* 3.9:1 */ --ie-chart-3: var(--ie-green); /* pale: use with its outline */ --ie-chart-4: var(--ie-coral); /* pale: use with its outline */ --ie-chart-5: var(--ie-yellow); /* pale: use with its outline */ --ie-chart-6: #737373; /* 4.7:1, neutral grey for "Other", totals, benchmarks */ --ie-chart-7: hsl(from var(--ie-green) h 33% 36%); /* 5.1:1, Deep Green */ --ie-chart-8: hsl(from var(--ie-coral) h 58% 48%); /* 4.9:1, Deep Coral */ --ie-chart-9: hsl(from var(--ie-yellow) h 55% 40%); /* 4.4:1, Deep Gold */ --ie-chart-3-outline: var(--ie-chart-7); --ie-chart-4-outline: var(--ie-chart-8); --ie-chart-5-outline: var(--ie-chart-9); --ie-chart-outline-width: 1px; /* bars and dots: 1px outline. Lines: draw the outline colour 1px wider underneath */ /* ---- Typography ----------------------------------------------------- */ --ie-font-sans: 'Source Sans 3', 'Source Sans Pro', 'Segoe UI', Arial, sans-serif; --ie-font-display: 'Source Serif 4', 'Source Serif Pro', Georgia, serif; /* H1s (bold) and display headlines. Source Serif 4 is the current release of Source Serif Pro. */ --ie-font-mono: 'Cascadia Mono', Consolas, 'Courier New', monospace; --ie-text-xs: 0.75rem; /* 12px: footnotes, table meta */ --ie-text-sm: 0.875rem; /* 14px: tables, help text, buttons */ --ie-text-base: 1rem; /* 16px: body */ --ie-text-lg: 1.125rem; /* 18px: card titles */ --ie-text-xl: 1.375rem; /* 22px: section headings */ --ie-text-2xl: 1.75rem; /* 28px: page titles, KPI values */ --ie-text-3xl: 2.25rem; /* 36px: sign-in / marketing headline */ --ie-weight-regular: 400; --ie-weight-semibold: 600; --ie-weight-bold: 700; --ie-leading-tight: 1.25; --ie-leading-normal: 1.5; /* ---- Spacing (4px base) -------------------------------------------- */ --ie-space-1: 0.25rem; --ie-space-2: 0.5rem; --ie-space-3: 0.75rem; --ie-space-4: 1rem; --ie-space-5: 1.5rem; --ie-space-6: 2rem; --ie-space-7: 3rem; /* ---- Shape & depth -------------------------------------------------- */ --ie-radius-sm: 4px; --ie-radius: 8px; --ie-radius-lg: 12px; --ie-radius-pill: 999px; --ie-shadow-sm: 0 1px 2px rgba(28, 45, 90, 0.06); /* sync: --ie-navy */ --ie-shadow: 0 1px 3px rgba(28, 45, 90, 0.08), 0 4px 12px rgba(28, 45, 90, 0.06); /* sync: --ie-navy */ --ie-shadow-lg: 0 12px 32px rgba(28, 45, 90, 0.18); /* sync: --ie-navy */ /* ---- Layout --------------------------------------------------------- */ --ie-topbar-height: 56px; --ie-sidebar-width: 240px; --ie-content-max: 1280px; --ie-transition: 150ms ease; } /* ---- Fallback for browsers without relative colours --------------------- (roughly anything older than 2024). They get fixed values that match the formulas for the current palette. Update these if a brand colour changes. */ @supports not (color: hsl(from red h s calc(l - 10))) { :root { --ie-blue-strong: #506698; /* sync: --ie-blue */ --ie-navy-hover: #273F7D; /* sync: --ie-navy */ --ie-coral-hover: #F37860; /* sync: --ie-coral */ --ie-success-text: #305F41; /* sync: --ie-green */ --ie-success-strong: #268248; /* sync: --ie-green */ --ie-warning-text: #6D460D; /* sync: --ie-yellow */ --ie-warning-strong: #C99954; /* sync: --ie-yellow */ --ie-danger-text: #A64430; /* sync: --ie-coral */ --ie-danger-strong: #BE4D37; /* sync: --ie-coral */ --ie-chart-7: #3E7A54; /* sync: --ie-green */ --ie-chart-8: #C14B33; /* sync: --ie-coral */ --ie-chart-9: #9E702E; /* sync: --ie-yellow */ } }