/* ============================================================================= IPC WEALTH DESIGN SYSTEM — TOKENS ----------------------------------------------------------------------------- Version : 0.1.0 Source : https://zeroheight.com/098b2100b (read 2026-08-21) Owner : Innovasium. Brand authority: ipcwealthbrand@ipcc.ca THREE LAYERS. The layer a token lives in tells you who may change it. LAYER 1 — BRAND Verbatim from Zeroheight. Immutable without written approval from IPC's brand team. Prefixed --ipc-. LAYER 2 — SEMANTIC Our mapping of brand values onto roles. Change these to re-skin; the brand values underneath don't move. LAYER 3 — SYSTEM Innovasium's own scaffolding (space, radii, motion, layout). Not brand-governed. Prefixed --sys-. If you are tempted to add a hex code anywhere outside LAYER 1, stop. Either it exists in the brand and belongs in Layer 1, or it doesn't and needs approval. See SOURCES.md for the audit trail. ============================================================================= */ :root { color-scheme: light; /* ========================================================================== LAYER 1 — BRAND ========================================================================== */ /* ---- Primary palette ----------------------------------------------------- "Our Primary palette is the core colour foundation for our brand. These colours make up 85% of our brand execution. It is structural, foundational and dominant." — Zeroheight -------------------------------------------------------------------------- */ --ipc-fresh-pine: #004132; /* PMS 3308 C. Text-safe on White. */ --ipc-fresh-pine-light: #4D806F; --ipc-fresh-pine-dark: #003327; --ipc-electric-green: #21D973; /* PMS 2420 C. TEXT ONLY on Charcoal, */ --ipc-electric-green-medium: #00C85A; /* Fresh Pine or Black backgrounds. */ --ipc-electric-green-dark: #007747; /* The light-surface text variant. */ --ipc-beige: #F7F5F0; /* Light-background alternative to White */ --ipc-beige-medium: #EDEAE1; --ipc-beige-dark: #E2DCCD; --ipc-charcoal: #131C1F; /* PMS 433 C. Text-safe on White. */ --ipc-white: #FFFFFF; /* ---- Secondary palette --------------------------------------------------- "~10% of our brand execution … contextual, thematic and flexible." HARD RULE: "Never use secondary colours as text colour." White text is permitted on the Dark variants only. -------------------------------------------------------------------------- */ --ipc-teal: #00AEBD; --ipc-teal-25: #BFEBEE; --ipc-teal-50: #81D7DF; --ipc-teal-75: #40C3CD; --ipc-teal-dark: #037C87; /* White text permitted on this */ --ipc-gold: #DBAD00; --ipc-gold-25: #F6EBBF; --ipc-gold-50: #EDD681; --ipc-gold-75: #E5C241; --ipc-gold-dark: #8A6D00; /* White text permitted on this */ /* ---- Tertiary palette ---------------------------------------------------- "used exclusively for additional colour options in categories for charts and graphs … approximately 5% of our brand execution." Do not use these as UI or layout colour. Charts and graphs only. -------------------------------------------------------------------------- */ --ipc-chart-blue: #6E87FA; --ipc-chart-blue-25: #DBE1FF; --ipc-chart-blue-50: #B7C3FD; --ipc-chart-blue-75: #92A6FB; --ipc-chart-blue-dark: #455499; --ipc-chart-steel: #6B7C93; --ipc-chart-steel-25: #DADEE5; --ipc-chart-steel-50: #B5BEC9; --ipc-chart-steel-75: #919DAF; --ipc-chart-steel-dark: #4A5666; --ipc-chart-mauve: #8D6AB0; --ipc-chart-mauve-25: #E2DBEB; --ipc-chart-mauve-50: #C6B4D8; --ipc-chart-mauve-75: #A98FC5; --ipc-chart-mauve-dark: #523D66; --ipc-chart-terracotta: #D46A55; --ipc-chart-terracotta-25: #F4DAD4; --ipc-chart-terracotta-50: #E9B4AA; --ipc-chart-terracotta-75: #DE8F7F; --ipc-chart-terracotta-dark: #994C3D; --ipc-chart-grey: #404446; --ipc-chart-grey-25: #D3D4D5; --ipc-chart-grey-50: #A7AAAB; --ipc-chart-grey-75: #7C8081; --ipc-chart-grey-dark: #292C2D; /* ---- Type --------------------------------------------------------------- Primary font: Nunito Sans, weights 300 / 400 / 600 / 700. System font: Segoe UI — the brand's own stated fallback, chosen to avoid compatibility problems in Microsoft Office. It therefore leads the fallback stack rather than a generic sans. -------------------------------------------------------------------------- */ --ipc-font-primary: "Nunito Sans", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif; --ipc-weight-light: 300; --ipc-weight-regular: 400; --ipc-weight-semibold: 600; --ipc-weight-bold: 700; /* Published type scale, verbatim, at the brand's stated pixel sizes. Expressed in rem (÷16) so it scales with user font-size preference. These are CEILINGS — see the -fluid variants below for responsive use. */ --ipc-display-xl: 4.5rem; /* 72px */ --ipc-display-lg: 3.75rem; /* 60px */ --ipc-display-md: 3rem; /* 48px */ --ipc-heading-xl: 2.25rem; /* 36px */ --ipc-heading-lg: 1.875rem; /* 30px */ --ipc-heading-md: 1.5rem; /* 24px */ --ipc-heading-sm: 1.25rem; /* 20px */ --ipc-body-xl: 1.125rem; /* 18px */ --ipc-body-lg: 1rem; /* 16px */ --ipc-body-md: 0.875rem; /* 14px */ --ipc-body-sm: 0.75rem; /* 12px */ /* Line heights. Display + Headings are a flat 130%. Body is published in absolute px per tier, which does NOT reduce to one ratio — reproduced faithfully here rather than smoothed. See TOKENS.md. */ --ipc-lh-display: 1.3; --ipc-lh-heading: 1.3; --ipc-lh-body-xl: 1.5556; /* 28px on 18px */ --ipc-lh-body-lg: 1.625; /* 26px on 16px */ --ipc-lh-body-md: 1.4286; /* 20px on 14px */ --ipc-lh-body-sm: 1.6667; /* 20px on 12px */ /* Letter spacing. Zeroheight publishes a per-tier px value; every one of the eleven tiers resolves to between -0.0167em and -0.0222em, i.e. they are all -2% with rounding. One inherited value reproduces the whole published scale to within 0.002em and survives any future size change. */ --ipc-tracking: -0.02em; /* ========================================================================== LAYER 2 — SEMANTIC Roles, not colours. This is what components should reference. ========================================================================== */ /* Surfaces */ --surface-page: var(--ipc-beige); --surface-raised: var(--ipc-white); --surface-sunken: var(--ipc-beige-medium); --surface-brand: var(--ipc-fresh-pine); --surface-brand-deep: var(--ipc-fresh-pine-dark); --surface-dark: var(--ipc-charcoal); /* Borders */ --border-hairline: var(--ipc-beige-dark); --border-on-dark: rgba(255, 255, 255, 0.22); /* Text — every value below is a brand-sanctioned text colour. The brand permits exactly five: Charcoal, Fresh Pine, Electric Green, Electric Green Dark, White. There is no sanctioned grey. */ --text-primary: var(--ipc-charcoal); /* AAA on White + Beige */ --text-brand: var(--ipc-fresh-pine); /* AAA on White + Beige */ --text-on-dark: var(--ipc-white); /* AAA on Pine + Charcoal */ --text-accent-light: var(--ipc-electric-green-dark); /* emphasis on light */ --text-accent-dark: var(--ipc-electric-green); /* emphasis on dark */ /* Actions — buttons. A button's fill is brand colour doing a job, so it belongs in LAYER 2 with every other role. It used to be wired straight to --ipc-electric-green in components.css, which meant a substituted palette re-skinned the whole page and left the call-to-action IPC green: the one element on the page a visitor is meant to click, still wearing somebody else's brand. --action-ink is the LABEL on the fill, and it is a token rather than a constant because whether a bright fill takes dark or light type depends on the fill. */ --action-fill: var(--ipc-electric-green); /* CTA on dark bands */ --action-fill-hover: var(--ipc-electric-green-medium); --action-ink: var(--ipc-charcoal); /* label on the fill */ --action-primary-hover: var(--ipc-electric-green-dark); /* solid CTA on light */ --action-muted: var(--ipc-beige-dark); /* disabled fill */ /* Interaction */ /* The focus ring is a PAIR, and this was a real failure before it was one. A single hue cannot clear WCAG 2.1 1.4.11's 3:1 against both a near-white page and a near-black brand field -- that is asking it to be light and dark at once. Teal measured 2.47:1 on Beige (fail) and 5.18:1 on Pine Dark (pass), so focus was under-contrast on every light surface in the build. Both values below are brand-sanctioned secondary colours, so no approval is needed: Teal Dark reads 4.55 on Beige / 4.96 on White / 4.12 on Sunken, and Teal reads 5.18 on Pine Dark. The flip is scoped just below. */ --focus-ring: var(--ipc-teal-dark); /* light grounds */ --focus-ring-on-dark: var(--ipc-teal); /* Pine and Charcoal */ --rule-accent: var(--ipc-gold); /* decorative rules + marks ONLY, */ /* never text — secondary rule */ /* ========================================================================== LAYER 3 — SYSTEM (Innovasium, not brand-governed) ========================================================================== */ /* Responsive type. Each tops out at its published brand size, so a desktop render matches Zeroheight exactly and small screens degrade gracefully. */ --sys-display-xl-fluid: clamp(2.75rem, 7vw, var(--ipc-display-xl)); --sys-display-lg-fluid: clamp(2.5rem, 6vw, var(--ipc-display-lg)); --sys-display-md-fluid: clamp(2rem, 4.5vw, var(--ipc-display-md)); --sys-heading-xl-fluid: clamp(1.75rem, 3vw, var(--ipc-heading-xl)); --sys-heading-lg-fluid: clamp(1.5rem, 2.4vw, var(--ipc-heading-lg)); /* Space — 4px base, doubling ramp */ --sys-space-1: 0.25rem; --sys-space-2: 0.5rem; --sys-space-3: 0.75rem; --sys-space-4: 1rem; --sys-space-6: 1.5rem; --sys-space-8: 2rem; --sys-space-12: 3rem; --sys-space-16: 4rem; --sys-space-24: 6rem; --sys-space-32: 8rem; /* Layout */ --sys-page-max: 1440px; --sys-measure: 68ch; /* readable line length for body copy */ --sys-gutter: clamp(1.25rem, 4vw, 4rem); --sys-section-py: clamp(4.5rem, 9vw, 8rem); /* Shape */ --sys-radius-sm: 2px; --sys-radius-md: 4px; --sys-radius-pill: 999px; /* Motion */ --sys-ease: cubic-bezier(.2, .65, .25, 1); --sys-dur-fast: 220ms; --sys-dur: 450ms; --sys-dur-slow: 900ms; /* Icon sizes — brand rule: never below 48px, never above 72px */ --sys-icon-min: 48px; --sys-icon-max: 72px; /* ========================================================================== PENDING BRAND APPROVAL — do not use in client-facing work yet -------------------------------------------------------------------------- The Zeroheight guidelines sanction no grey for secondary body text; the five permitted text colours are all high-contrast. The converge website phase introduced #5A646E locally to get a quieter secondary tone. It is carried here so the two projects don't diverge silently, but it is NOT a brand value and is flagged for written approval. Until then, secondary text should be Charcoal at a smaller size or lighter weight — hierarchy by scale, not by fade. ========================================================================== */ --x-pending-body-grey: #5A646E; }