/* ==========================================================================
BGMC DESIGN TOKENS
Business Growth Management Consulting LLC
v2.0 · August 2026
The machine-readable form of "BGMC Brand and Digital Design System v2.0".
That document is the reference. This file is what the website is built
against. Every value here is taken from it. Nothing here is invented, and
nothing here changes without the document changing first.
Where the two disagree, the document is right and this file is stale.
USAGE
---------------------------------------------------------------------------
Layer 1 PRIMITIVES the hex ladder. Never referenced by a component.
Layer 2 SEMANTIC a role mapped to a primitive. Components use these.
Layer 3 SCALES type, space, line, radius, motion.
Layer 4 BASE the minimum stylesheet, interactive states included.
THE RULE ABOVE THE OTHERS
Every colour pairing is verified against WCAG 2.2 before use. The pairings
that fail are named in the comments below and are not available as text
tokens. Ratios quoted here are those measured in section 4 of the document.
========================================================================== */
/* ==========================================================================
LAYER 1 · PRIMITIVES
========================================================================== */
:root {
/* --- Navy family ------------------------------------------------------ */
--bgmc-navy-deepest: #011E2F; /* cover grounds, footer bars */
--bgmc-navy-deep: #022A42; /* h1 on white. 14.87 : 1 */
--bgmc-navy: #03456B; /* primary brand. 10.16 : 1 */
--bgmc-navy-medium: #1B5D85; /* h3, links on white. 7.12 : 1 */
--bgmc-navy-light: #4A85A8; /* LARGE TEXT ONLY. 4.03 : 1 */
--bgmc-navy-pale: #A9C4D6; /* row banding, secondary button active */
--bgmc-navy-mist: #E4ECF2; /* section bands, secondary button hover */
/* --- Green family ----------------------------------------------------- */
--bgmc-green-deep: #1F6B2B; /* the ONLY green for small text. 6.57:1 */
--bgmc-green-dark: #2F8A3E; /* LARGE TEXT ONLY. 4.35 : 1, fails AA */
--bgmc-green: #47C059; /* NON-TEXT on white. 2.35 : 1 */
--bgmc-green-light: #7DD690; /* links and focus rings on dark */
--bgmc-green-pale: #B8E8C2;
--bgmc-green-mist: #E6F7EA;
/* --- Neutral ladder --------------------------------------------------- */
--bgmc-charcoal-deepest: #0F1419;
--bgmc-charcoal: #2B2B2B; /* body. 14.16 : 1. never pure black */
--bgmc-slate: #4A5568; /* captions. 7.53 : 1 */
--bgmc-grey-muted: #5F6B7A; /* footnotes, metadata. 5.43 : 1 */
--bgmc-grey-control: #7F8FA3; /* control edges on light */
--bgmc-grey-medium: #718096; /* LARGE TEXT ONLY. 4.02 : 1 */
--bgmc-grey-soft: #A0AEC0; /* disabled states only */
--bgmc-grey-light: #CBD5E0; /* decorative rules only */
--bgmc-grey-pale: #E2E8F0; /* gridlines, placeholder panels */
--bgmc-off-white: #F7FAFC;
--bgmc-white: #FFFFFF;
/* --- Dark canvas ------------------------------------------------------ */
--bgmc-dark-bg: #0A1828; /* the dark canvas, decks and web bands */
--bgmc-dark-surface: #13253E;
--bgmc-dark-raised: #1D3454;
--bgmc-dark-body: #E2E8F0; /* 14.51 : 1 */
--bgmc-dark-tertiary: #7FAECB; /* 7.51 : 1. replaces navy-light as text */
--bgmc-dark-divider: #2D4468; /* decorative only. 1.82 : 1 */
--bgmc-dark-control: #6386B5; /* control edges on dark. 4.12 : 1 */
--bgmc-dark-warning: #E57373;
/* --- Accents · one per asset ------------------------------------------ */
--bgmc-gold: #C9A227; /* NON-TEXT on white. 2.42 : 1 */
--bgmc-gold-light: #E8B84A; /* the gold for dark surfaces */
--bgmc-gold-deep: #8A6E19; /* the only gold as text on white. 4.86 : 1 */
--bgmc-burgundy: #8B2F3F; /* 8.15 : 1 */
--bgmc-rose: #B8495A; /* fills only */
--bgmc-teal: #2A9D8F; /* NON-TEXT. 3.32 : 1 */
--bgmc-teal-deep: #22847A; /* teal as text or label. 4.52 : 1 */
--bgmc-slate-blue: #264653;
--bgmc-warm-beige: #E8DFD0;
}
/* ==========================================================================
LAYER 2 · SEMANTIC ROLES · LIGHT
The website default.
========================================================================== */
:root {
--color-canvas: var(--bgmc-white);
--color-surface: var(--bgmc-off-white);
--color-surface-tinted: var(--bgmc-navy-mist);
--color-brand: var(--bgmc-navy);
--color-brand-secondary: var(--bgmc-green); /* never text on white */
--color-heading: var(--bgmc-navy-deep);
--color-heading-2: var(--bgmc-navy);
--color-heading-3: var(--bgmc-navy-medium);
--color-ink: var(--bgmc-charcoal);
--color-ink-secondary: var(--bgmc-slate);
--color-ink-muted: var(--bgmc-grey-muted);
--color-link: var(--bgmc-navy-medium);
--color-link-hover: var(--bgmc-navy);
--color-link-active: var(--bgmc-navy-deepest);
--color-link-underline-hover: var(--bgmc-green);
--color-divider: var(--bgmc-grey-light); /* decorative */
--color-control-border: var(--bgmc-grey-control); /* focusable edges */
--color-rule-accent: var(--bgmc-green);
--color-focus-ring: var(--bgmc-navy);
--color-selection-bg: var(--bgmc-navy-mist);
--color-scrim: rgba(1, 30, 47, 0.70);
--color-accent: var(--bgmc-gold);
--color-accent-ink: var(--bgmc-gold-deep);
--color-positive: var(--bgmc-green-deep);
--color-negative: var(--bgmc-burgundy);
/* Green as readable type. Small text takes Deep, never Dark. */
--color-green-text: var(--bgmc-green-deep);
--color-green-text-large: var(--bgmc-green-dark);
}
/* ==========================================================================
LAYER 2b · SEMANTIC ROLES · DARK
For the full-bleed bands that punctuate the site, and for the footer.
Scope it with .on-dark rather than switching the whole document:
========================================================================== */
.on-dark {
--color-canvas: var(--bgmc-dark-bg);
--color-surface: var(--bgmc-dark-surface);
--color-surface-tinted: var(--bgmc-dark-raised);
--color-heading: var(--bgmc-white);
--color-heading-2: var(--bgmc-white);
--color-heading-3: var(--bgmc-white);
--color-ink: var(--bgmc-dark-body);
--color-ink-secondary: var(--bgmc-grey-soft);
--color-ink-muted: var(--bgmc-grey-soft);
--color-link: var(--bgmc-green-light);
--color-link-hover: var(--bgmc-green-pale);
--color-link-active: var(--bgmc-white);
--color-link-underline-hover: var(--bgmc-green-light);
--color-divider: var(--bgmc-dark-divider);
--color-control-border: var(--bgmc-dark-control);
--color-focus-ring: var(--bgmc-green-light);
--color-selection-bg: var(--bgmc-dark-raised);
--color-accent: var(--bgmc-gold-light);
--color-accent-ink: var(--bgmc-gold-light);
--color-negative: var(--bgmc-dark-warning);
--color-green-text: var(--bgmc-green); /* 7.62 : 1 on the canvas */
--color-green-text-large: var(--bgmc-green);
background: var(--color-canvas);
color: var(--color-ink);
}
/* ==========================================================================
LAYER 2c · CHART SERIES
Colour never carries meaning alone. Variance always takes a sign, an
arrow, or a label alongside the colour.
========================================================================== */
:root {
--chart-series-1: var(--bgmc-navy);
--chart-series-2: var(--bgmc-green);
--chart-series-3: var(--bgmc-teal);
--chart-series-4: var(--bgmc-slate-blue);
--chart-series-5: var(--bgmc-navy-light);
--chart-series-6: var(--bgmc-gold);
--chart-favourable: var(--bgmc-green-deep);
--chart-unfavourable: var(--bgmc-burgundy);
--chart-gridline: var(--bgmc-grey-pale);
--chart-zero-line: var(--bgmc-grey-light);
--chart-axis-label: var(--bgmc-slate);
--chart-data-label: var(--bgmc-charcoal);
}
/* ==========================================================================
LAYER 3a · TYPOGRAPHY
Web and digital: IBM Plex Sans for headings and body.
IBM Plex Serif for large display numerals.
IBM Plex Sans Arabic for the Arabic edition.
Word and deck: Calibri, with Georgia for display numerals. Unchanged.
Plex is self-hosted under the SIL Open Font Licence. The Arabic companion
was drawn by the same team on the same skeleton, which is why the Arabic
edition sets without a second typeface decision.
========================================================================== */
:root {
--font-sans: "IBM Plex Sans", "Calibri", "Segoe UI", system-ui, -apple-system, sans-serif;
--font-serif: "IBM Plex Serif", Georgia, "Times New Roman", serif;
--font-arabic: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, sans-serif;
--weight-regular: 400;
--weight-bold: 700;
/* --- Scale · mobile value rising to the desktop value ------------------ */
--text-display: clamp(2.50rem, 1.10rem + 4.70vw, 4.75rem); /* 40 → 76 */
--text-h1: clamp(1.875rem, 1.20rem + 2.10vw, 2.50rem); /* 30 → 40 */
--text-h2: clamp(1.50rem, 1.25rem + 0.80vw, 1.75rem); /* 24 → 28 */
--text-h3: clamp(1.1875rem, 1.10rem + 0.25vw, 1.3125rem); /* 19→21 */
--text-lead: clamp(1.125rem, 1.05rem + 0.25vw, 1.25rem); /* 18 → 20 */
--text-body: 1.0625rem; /* 17px, desktop and mobile alike */
--text-caption: 0.875rem; /* 14px */
--text-numeral: clamp(3rem, 1.50rem + 4.70vw, 4.50rem); /* 48 → 72 */
/* --- Line height ------------------------------------------------------ */
--leading-body: 1.6;
--leading-heading: 1.25;
--leading-caption: 1.4;
--leading-solid: 1;
--tracking-display: -0.025em;
--tracking-heading: -0.01em;
--tracking-eyebrow: 0.14em;
--tracking-wide: 0.06em;
/* --- Measure · prose never runs wider than sixty-eight characters ----- */
--measure: 68ch;
--measure-narrow: 52ch;
}
/* ==========================================================================
LAYER 3b · SPACE, LAYOUT, LINE, MOTION
The spacing scale stops at 128. Nothing between the steps.
========================================================================== */
:root {
--space-1: 0.25rem; /* 4px */
--space-2: 0.5rem; /* 8px */
--space-3: 0.75rem; /* 12px */
--space-4: 1rem; /* 16px */
--space-5: 1.5rem; /* 24px */
--space-6: 2rem; /* 32px */
--space-7: 3rem; /* 48px */
--space-8: 4rem; /* 64px */
--space-9: 6rem; /* 96px */
--space-10: 8rem; /* 128px */
--section-y: clamp(4rem, 2.0rem + 8vw, 9rem); /* ceiling 144px, per system §layout */
--section-y-tight: clamp(3rem, 1.5rem + 5vw, 5rem);
--container: 1200px;
--container-text: 760px;
--container-narrow: 620px;
--gutter: clamp(1.25rem, 0.5rem + 4vw, 4rem);
--grid-gap: clamp(1.5rem, 1rem + 2vw, 3rem);
--radius-control: 4px; /* buttons and inputs */
--radius-panel: 8px; /* cards and panels */
--radius-pill: 999px;
--stroke-divider: 1px;
--stroke-control: 1.5px;
--stroke-rule: 2px; /* the green rule under a heading */
--focus-width: 2px;
--focus-offset: 2px;
--shadow-lift: 0 4px 16px rgba(1, 30, 47, 0.10); /* the only shadow */
--shadow-none: none;
--ease: cubic-bezier(0.2, 0.6, 0.2, 1);
--duration-fast: 140ms;
--duration: 240ms;
--z-header: 100;
--z-overlay: 200;
}
/* ==========================================================================
LAYER 4 · BASE
========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
margin: 0;
background: var(--color-canvas);
color: var(--color-ink);
font-family: var(--font-sans);
font-size: var(--text-body);
font-weight: var(--weight-regular);
line-height: var(--leading-body);
-webkit-font-smoothing: antialiased;
}
::selection { background: var(--color-selection-bg); }
h1, h2, h3, h4 {
margin: 0 0 var(--space-4);
font-weight: var(--weight-bold);
line-height: var(--leading-heading);
letter-spacing: var(--tracking-heading);
text-wrap: balance;
}
h1 { font-size: var(--text-h1); color: var(--color-heading); }
h2 { font-size: var(--text-h2); color: var(--color-heading-2); }
h3 { font-size: var(--text-h3); color: var(--color-heading-3); }
h4 { font-size: var(--text-body); color: var(--color-heading-3); }
p { margin: 0 0 var(--space-5); max-width: var(--measure); }
small, .caption {
font-size: var(--text-caption);
line-height: var(--leading-caption);
color: var(--color-ink-muted);
}
/* Links are always underlined. The underline thickens to green on hover. */
a {
color: var(--color-link);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.18em;
transition: color var(--duration-fast) var(--ease),
text-decoration-color var(--duration-fast) var(--ease);
}
a:hover {
color: var(--color-link-hover);
text-decoration-thickness: 2px;
text-decoration-color: var(--color-link-underline-hover);
}
a:active { color: var(--color-link-active); }
/* Focus is never removed. */
:focus-visible {
outline: var(--focus-width) solid var(--color-focus-ring);
outline-offset: var(--focus-offset);
}
img, svg { max-width: 100%; height: auto; }
hr {
border: 0;
height: var(--stroke-divider);
background: var(--color-divider);
margin: var(--space-7) 0;
}
/* --- Structure ---------------------------------------------------------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--text { max-width: var(--container-text); }
.section { padding-block: var(--section-y); }
.section--tight { padding-block: var(--section-y-tight); }
.section--tinted { background: var(--color-surface-tinted); }
/* --- Primitives --------------------------------------------------------- */
.display {
font-size: var(--text-display);
font-weight: var(--weight-bold);
line-height: var(--leading-heading);
letter-spacing: var(--tracking-display);
color: var(--color-heading);
text-wrap: balance;
}
.eyebrow {
font-size: var(--text-caption);
font-weight: var(--weight-bold);
letter-spacing: var(--tracking-eyebrow);
text-transform: uppercase;
color: var(--color-ink-secondary);
margin-bottom: var(--space-3);
}
.rule {
width: 56px;
height: var(--stroke-rule);
background: var(--color-rule-accent);
border: 0;
margin: 0 0 var(--space-5);
}
.lead {
font-size: var(--text-lead);
line-height: var(--leading-body);
color: var(--color-ink-secondary);
}
/* Credential figure. Serif numeral, sans label. */
.figure__number {
display: block;
font-family: var(--font-serif);
font-size: var(--text-numeral);
font-weight: var(--weight-bold);
line-height: var(--leading-solid);
letter-spacing: var(--tracking-display);
color: var(--color-green-text);
}
.figure__label {
margin-top: var(--space-3);
font-size: var(--text-caption);
line-height: var(--leading-caption);
color: var(--color-ink-muted);
max-width: 24ch;
}
/* --- Buttons ------------------------------------------------------------
There is no white-on-green button. Green carries white text at no size.
The primary button is navy. Green stays a rule, a bar, or a figure. */
.btn {
display: inline-block;
padding: var(--space-3) var(--space-6);
border-radius: var(--radius-control);
border: var(--stroke-control) solid transparent;
font-size: var(--text-caption);
font-weight: var(--weight-bold);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
transition: background var(--duration-fast) var(--ease),
border-color var(--duration-fast) var(--ease);
}
.btn--primary { background: var(--bgmc-navy); color: var(--bgmc-white); }
.btn--primary:hover { background: var(--bgmc-navy-deep); color: var(--bgmc-white); text-decoration: none; }
.btn--primary:active { background: var(--bgmc-navy-deepest); }
.btn--secondary { background: transparent; border-color: var(--bgmc-navy); color: var(--bgmc-navy); }
.btn--secondary:hover { background: var(--bgmc-navy-mist); color: var(--bgmc-navy); text-decoration: none; }
.btn--secondary:active { background: var(--bgmc-navy-pale); }
.btn[disabled], .btn--disabled {
background: var(--bgmc-off-white);
border-color: transparent;
color: var(--bgmc-grey-soft);
pointer-events: none;
}
/* --- Inputs -------------------------------------------------------------- */
.input {
width: 100%;
padding: var(--space-3) var(--space-4);
background: var(--bgmc-white);
border: var(--stroke-control) solid var(--color-control-border);
border-radius: var(--radius-control);
font-family: var(--font-sans);
font-size: var(--text-body);
color: var(--color-ink);
}
.input:hover { border-color: var(--bgmc-navy-medium); }
.input:focus { border-color: var(--bgmc-navy); }
/* --- Card · filled at rest, lifting to white on hover -------------------- */
.card {
background: var(--color-surface);
border: var(--stroke-divider) solid transparent;
border-radius: var(--radius-panel);
padding: var(--space-6);
transition: background var(--duration) var(--ease),
border-color var(--duration) var(--ease);
}
.card:hover {
background: var(--bgmc-white);
border-color: var(--color-divider);
}
/* --- Accessibility ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
/* --- Print --------------------------------------------------------------- */
@media print {
.on-dark { background: #fff; color: var(--bgmc-charcoal); }
a { text-decoration: underline; }
}
/* ==========================================================================
WHAT THE TOKENS CANNOT ENFORCE
1. Green #47C059 is never text on white at any size. Small green text is
Green Deep #1F6B2B. Green Dark #2F8A3E measures 4.35 and is permitted
for large text only. This corrects the v1 palette, which was wrong.
2. There is no white-on-green surface. Not a button, not a band, not a
badge. Where a field is green, its text is Navy Deep #022A42.
3. Grey Light #CBD5E0 is decorative. The edge of anything focusable takes
Grey Control #7F8FA3 on light, or #6386B5 on dark.
4. Colour never carries meaning alone. Variance takes a sign, an arrow,
or a label beside it. Roughly one man in twelve reads red and green
differently.
5. Sixty, thirty, ten. Neutral, navy, green. Accents under five percent,
one accent per asset. When a page feels too navy, add white space.
6. One radius per role, one shadow or none, one icon set per asset.
7. No stock photography of people. The system carries the work instead:
type at scale, navy fields, and the credential figures set large.
========================================================================== */