Foundations — IGrow Design System

Colours

Five brand-authorised colours from the IGrow Group Brand Guidelines v1 (Oct 2025). Every other colour in the system is a semantic alias or a documented derivation — never a new raw hex.

Brand palette

Raspberry Wine #B6364B --color-raspberry Pantone 703 C

Bright Grey #ECEDF0 --color-bright-grey Pantone 9380 C

Dusty Grey #D1D0D4 --color-dusty-grey Pantone 5315 C

Black #000000 --color-black Pantone Neutral Black C

White #FFFFFF --color-white Pantone Bright White

50% Tints — infographics & charts only

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

#DA9BA5 --color-raspberry-tint-50

#E8E8EA --color-dusty-grey-tint-50

#F6F6F8 --color-bright-grey-tint-50

#808080 --color-black-tint-50

Footer gradients

IGrow (default) --gradient-footer-igrow

Raspberry (sub-brands) --gradient-footer-raspberry

Hero — Rentals --gradient-hero-rentals

Hero — Dark --gradient-hero-dark

Semantic app colours — portal & dashboard use

Brand red (#B6364B) is for CTAs. These semantic colours are for status, alerts, and validation states — never conflate the two.

Success

#2E7D32 · #1B5E20 · bg #ECF7EE

Warning

#B26A00 · #7A4700 · bg #FDF6E3

Danger

#C0392B · #8E2020 · bg #FDECEE

Info

#1D5A8A · #103B5F · bg #E8F1F8

Typography

Single typeface: Montserrat, self-hosted at five weights. No external font requests.

Weight specimen — Montserrat

300 · Light
--fw-light Property investment made simple

400 · Regular
--fw-regular Property investment made simple

500 · Medium
--fw-medium Property investment made simple

600 · SemiBold
--fw-semibold Property investment made simple

700 · Bold
--fw-bold Property investment made simple

Type scale — fixed

Token	Value	Sample
--fs-12	0.75rem · 12px	The quick brown fox jumps over the lazy dog
--fs-14	0.875rem · 14px	The quick brown fox jumps over the lazy dog
--fs-16	1rem · 16px	The quick brown fox jumps over the lazy dog
--fs-18	1.125rem · 18px	The quick brown fox
--fs-20	1.25rem · 20px	The quick brown fox
--fs-24	1.5rem · 24px	The quick brown fox
--fs-28	1.75rem · 28px	The quick brown
--fs-32	2rem · 32px	The quick brown
--fs-40	2.5rem · 40px	Confidence
--fs-56	3.5rem · 56px	Grow
--fs-72	4.5rem · 72px	IGrow

Fluid type scale — clamp()

Token	Range	Value
--fs-fluid-display	40 → 72px	clamp(2.5rem, 1.5rem + 4vw, 4.5rem)
--fs-fluid-hero	32 → 56px	clamp(2rem, 1.25rem + 3vw, 3.5rem)
--fs-fluid-h1	28 → 40px	clamp(1.75rem, 1rem + 2.5vw, 2.5rem)
--fs-fluid-h2	24 → 32px	clamp(1.5rem, 1rem + 1.8vw, 2rem)
--fs-fluid-h3	20 → 28px	clamp(1.25rem, 0.9rem + 1.2vw, 1.75rem)
--fs-fluid-lead	17 → 20px	clamp(1.0625rem, 0.95rem + 0.4vw, 1.25rem)

Typographic roles

Hero56px · Bold · lh 1.1

Grow with confidence

H140px · Bold · lh 1.1

Your property journey starts here

H232px · SemiBold · lh 1.2

Available properties to rent

H324px · SemiBold · lh 1.2

2 Bedroom Apartment in Muizenberg

H420px · SemiBold · lh 1.35

Ocean Terraces, Cape Town

Lead18px · Light · lh 1.6

We help renters find the right home, making every stage of the rental process simple.

Body16px · Regular · lh 1.6

Located in the heart of Muizenberg, this spacious apartment offers stunning mountain views and easy access to the beachfront.

Small14px · Regular · lh 1.35

Property Practitioners registered with the PPRA (FFC 202615016950000).

Eyebrow12px · SemiBold · tracking 0.12em

Featured listing

Spacing

4px base unit. Tokens --space-1 through --space-10. Always use spacing tokens — never arbitrary pixel values.

--space-1 · 4px

--space-2 · 8px

--space-3 · 12px

--space-4 · 16px

--space-5 · 24px

--space-6 · 32px

--space-7 · 48px

--space-8 · 64px

--space-9 · 96px

--space-10 · 128px

Elevation

Four shadow levels. Used to signal resting state, hover, and overlay depth. Hover over the cards to see the interactive shadow transition.

Shadow SM

--shadow-sm

Badge, pressed state

Shadow Card

--shadow-card

Card at rest

Shadow Hover

--shadow-hover

Card on hover (+translateY(-2px))

Shadow Modal

--shadow-modal

Modal dialog

Border radii

Four radius tokens. Cards and inputs use --radius-lg. CTAs use --radius-pill. Never mix these with arbitrary values.

None--radius-none · 0

SM--radius-sm · 4px
Pills, badges

MD--radius-md · 8px
Small components

LG--radius-lg · 15px
Cards, inputs, modals

Pill--radius-pill · 999px
CTAs, tags

Motion

Purposeful, subtle, performant. Animate transform and opacity only — GPU-composited and safe on low-end Android. All tokens reduce automatically with prefers-reduced-motion.

Token reference

Token	Value	Use
--easing-standard	cubic-bezier(0.2, 0.8, 0.2, 1)	Hover, colour/shadow shifts
--easing-enter	cubic-bezier(0.0, 0.0, 0.2, 1)	Elements arriving — decelerates to rest
--easing-exit	cubic-bezier(0.4, 0.0, 1, 1)	Elements leaving — accelerates out
--duration-instant	50ms	Checkbox, toggle, radio press
--duration-fast	150ms	Hover colour/border shift, focus ring
--duration-base	200ms	Card lift, button press, entrance animations
--duration-slow	250ms	Modal enter, drawer slide, accordion

Hover lift — easing comparison

Hover each card to see the character difference between the three curves. All move the same distance in the same time — only the easing changes.

Standard

--easing-standard

Fast out, smooth settle. General hover & component states.

Enter

--easing-enter

Decelerates to rest. Elements arriving on screen — cards, modals, panels.

Exit

--easing-exit

Accelerates out. Elements leaving screen — dismissed modals, removed toasts.

Entrance animation classes — click to replay

Four utility classes in components.css. All use --easing-enter and --duration-base. Pass --ig-delay as an inline property for stagger.

Fade in

.ig-animate-fade-in

Fade up

.ig-animate-fade-up

Scale in

.ig-animate-scale-in

Slide right

.ig-animate-slide-right

Stagger — click to play

Use --ig-delay as an inline CSS custom property. Increment by 60ms per item; cap at 4–8 items.

Property 1

Property 2

Property 3

Property 4

Hover demo — transition curves on cards

Standard hover lifttranslateY(-3px) · shadow-hover

Fast (150ms)--duration-fast

Slow (250ms)--duration-slow

Icons

The sprite at system/icons/sprite.svg contains icons from two libraries with distinct purposes. Always use the right library for the context. Full mapping in system/icons/lucide-list.md.

Lucide

UI Icons — stroke-based, 1.75px, currentColor Use for everything except brand/social marks

lucide.dev ↗

Property specs — as seen on listing pages

2 Bedrooms 1 Bathroom 1 Parking 68 m² Pets allowed Available 1 Jun 2026

Contact details — as seen on property sidebar and contact page

021 206 0850 rentals@igrow.co.za 99 Jip de Jager Rd, Welgemoed, Cape Town

Sizes — sm (16px) / default (24px) / lg (32px)

sm · 16px default · 24px lg · 32px

Colour inheritance — set color on the parent, not the SVG

default accent success warning danger

All bundled Lucide icons (31)

chevron-down chevron-up chevron-left chevron-right arrow-right menu x check info alert-circle alert-triangle search sliders filter phone mail message-circle map-pin calendar bed bath car ruler paw-print home building key zap star heart external-link

Simple Icons

Brand Marks — filled, fill="currentColor", CC0 Use only in social link rows — never as UI icons

simpleicons.org ↗

Brand marks are trademark-protected by their respective companies regardless of the CC0 licence. Use them only to link to the corresponding platform. Never alter their shape, apply brand gradients, or use them as decorative elements.

Bundled brand marks (4)

Facebook #facebook ■ #0866FF

Instagram #instagram ■ #E4405F

LinkedIn #linkedin ■ #0A66C2

WhatsApp #whatsapp ■ #25D366

In context — footer social row (white on dark bg)

Do / Don't

✓ Do

Use in footer social link rows only
Set color: white on the parent (dark bg)
Provide aria-label on the <a> tag
Keep marks white — currentColor inherits
Link to the actual platform profile

✗ Don't

Use brand marks as UI icons (use Lucide instead)
Apply brand colours to the marks (no coloured logos)
Alter the shape or add effects
Use them decoratively without a link
Mix Lucide social icons with Simple Icons marks