← Design System Index | Component Demo | Foundations

Design Tokens — full reference

Every value below maps back to the official IGrow Group Brand Guidelines v1 (Oct 2025). The five brand-authorised colours are listed first; everything else is either a semantic alias or a documented derivation.

Tokens can be consumed three ways:

Stack	How you consume
HTML / CSS	`var(--color-accent-primary)`
Tailwind	`bg-igrow-red`, `shadow-igrow-card`
WordPress	`var(--wp--preset--color--igrow-red)` (via theme.json)

Defined in colors_and_type.css + system/tokens.css.

Colors

Brand palette (the five authorised colours)

Token	Value	Brand name (Pantone)	Use
`--color-raspberry`	`#B6364B`	Raspberry Wine (703 C)	Primary CTAs, links, focus ring, logo
`--color-bright-grey`	`#ECEDF0`	Bright Grey (9380 C)	Muted section backgrounds
`--color-dusty-grey`	`#D1D0D4`	Dusty Grey (5315 C)	Dividers, borders, accent panels
`--color-black`	`#000000`	Pantone Neutral Black C	Inverse surfaces, headings, secondary outline buttons
`--color-white`	`#FFFFFF`	Pantone Bright White	Surface backgrounds

Semantic aliases (point at the palette)

Token	Maps to	Use
`--color-accent-primary`	`--color-raspberry`	Primary CTAs, link colour, focus ring base
`--color-accent-primary-hover`	`#A11D23` (derived)	Hover state on primary buttons
`--color-brand-dark`	`--color-black`	Inverse surface, footer base, nav text
`--color-grey-light`	`--color-dusty-grey`	Alias retained for backwards compat
`--color-bg-muted`	`--color-bright-grey`	Alternating section background
`--color-border-default`	`--color-dusty-grey`	Input borders, dividers
`--color-bg-inverse`	`--color-brand-dark`	Inverse surface

Derived (NOT in the brand guide — documented derivations)

Token	Value	Notes
`--color-grey-dark`	`#3F3F3F`	Body-copy soft-black. Pure Black is harsh at body sizes; this derivation reads as Black but reduces eye strain.
`--color-fg-muted`	`#6B6B6B`	De-emphasised body text
`--color-fg-subtle`	`#8E9193`	Placeholder text, ellipsis separators
`--color-border-strong`	`#B8BCBE`	Darker tonal variant of Dusty Grey for emphasised borders
`--color-bg-subtle`	`#FAFAFA`	Lighter than Bright Grey — used for hover backgrounds

50% Tints — infographics and charts only

Per brand guide p.16: use tints when additional chart colours are needed beyond the primary palette. Do not use for UI chrome, text, or backgrounds.

Token	Value	Source colour
`--color-raspberry-tint-50`	`#DA9BA5`	Raspberry Wine at 50%
`--color-dusty-grey-tint-50`	`#E8E8EA`	Dusty Grey at 50%
`--color-bright-grey-tint-50`	`#F6F6F8`	Bright Grey at 50%
`--color-black-tint-50`	`#808080`	Black at 50%

Removed in v3.0 (DO NOT USE)

--color-accent-secondary (was #244C5A teal) — removed. Teal is not in the brand palette. Use Black for secondary outlines (the .ig-btn--secondary button now references --color-black directly).
--color-accent-secondary-hover (was #1A3D4F) — removed.
Navy #0f1628 — removed anywhere it was used. Brand inverse is Black.

Semantic (app/portal use)

Token	Value	Use
`--color-success-500`	`#2E7D32`	Success messages, paid status
`--color-warning-500`	`#B26A00`	Warning messages, due-soon status
`--color-danger-500`	`#C0392B`	Error messages, overdue status
`--color-info-500`	`#1D5A8A`	Info messages, neutral status

Note: brand red #B6364B is for CTAs, not errors. Danger #C0392B is for error states. Don't conflate the two.

The default .ig-footer (no modifier) renders the main IGrow Wealth Investments dark grey/black gradient. Sub-brand sites add a modifier class.

Token	Use
`--gradient-footer-igrow`	Main IGrow site (grey/black). Used by bare `.ig-footer`.
`--gradient-footer-raspberry`	Raspberry base used by sub-brand modifiers below.
`--gradient-footer-rentals`	`.ig-footer--rentals`
`--gradient-footer-properties`	`.ig-footer--properties`
`--gradient-footer-home-loans`	`.ig-footer--home-loans`
`--gradient-footer-accounting`	`.ig-footer--accounting`
`--gradient-footer-store`	`.ig-footer--store`

<!-- Main IGrow site -->
<footer class="ig-footer"> … </footer>

<!-- Sub-brand (Rentals) -->
<footer class="ig-footer ig-footer--rentals"> … </footer>

Typography

Single typeface: Montserrat at weights 300/400/500/600/700. 8 static font-size tokens (12 → 72 px) and 6 fluid scales using clamp().

See tokens.css for the full list.

Token	Px	Use
`--fs-12`	12	Captions, eyebrows
`--fs-14`	14	Body small, helpers, table cells
`--fs-16`	16	Body
`--fs-18`	18	Lead paragraph
`--fs-20`	20	H4 / subhead
`--fs-24`	24	H3
`--fs-32`	32	H2
`--fs-40`	40	H1
`--fs-56`	56	Hero
`--fs-72`	72	Display

Fluid scales (clamp()):

--fs-fluid-display — 40 → 72
--fs-fluid-hero — 32 → 56
--fs-fluid-h1 — 28 → 40
--fs-fluid-h2 — 24 → 32
--fs-fluid-h3 — 20 → 28
--fs-fluid-lead — 17 → 20

Spacing

4 px base scale. Tokens --space-1 through --space-10 (4 → 128).

Radii

--radius-sm 4px internal pills/badges
--radius-md 8px small components
--radius-lg 15px cards, inputs, panels, modals
--radius-pill 999px CTAs and tags

Shadows

--shadow-sm subtle (badge / pressed state)
--shadow-card card at rest
--shadow-hover card on hover (paired with translateY(-2px))
--shadow-modal modal dialog elevation

Motion

Easing: --easing-standard = cubic-bezier(0.2, 0.8, 0.2, 1)
Durations: --duration-fast 150ms · --duration-base 200ms · --duration-slow 250ms
Honours prefers-reduced-motion.

Breakpoints (Tailwind-aligned)

--bp-sm 640px
--bp-md 768px
--bp-lg 1024px
--bp-xl 1280px
--bp-2xl 1536px

CSS custom properties don't work inside @media (min-width: ...) queries — the values above are also exported via tailwind.config.js for class-based responsive use.

Z-index scale

Token	Value	Use
`--z-dropdown`	1000	Select menus, autocomplete
`--z-sticky-nav`	1100	Top nav
`--z-overlay`	1200	Modal backdrop
`--z-modal`	1300	Modal dialog
`--z-popover`	1400	Tooltips with side panels
`--z-toast`	1500	Toast notifications
`--z-tooltip`	1600	Brief hover tooltips

Aspect ratios

--aspect-card 3:2 (property thumbnail)
--aspect-hero 16:9
--aspect-banner 21:9
--aspect-og 1200:630 (Open Graph share images)

Borders

--border-width-hairline 1px
--border-width-default 1.5px (inputs, bordered cards)
--border-width-thick 2px
--border-width-focus 3px (focus rings)