IGrow Wealth Investments — Design System

v3.1 · Design tokens, components, and documentation for every stack used across IGrow and its six sub-brands.

Local development

npm install        # install build dependencies
npm run build      # compile markdown → HTML into site/
npm run serve      # serve site/ at http://localhost:3000

The site/ folder is a build artefact — it is not tracked in git. CI builds and deploys it automatically on every push to main.

Deployment

Pushes to main trigger the GitHub Actions workflow in .github/workflows/deploy.yml, which:

Installs dependencies and runs npm run build
Rsyncs the site/ folder to the server over SSH

Work freely on any branch — only main deploys. The workflow can also be triggered manually from the GitHub Actions tab.

Required GitHub secrets: SSH_PRIVATE_KEY, SSH_HOST, SSH_PORT, SSH_USER, DEPLOY_PATH

Quick start — pick your stack

Stack	Entry point
HTML / CSS	Link `system/components.css`, use `.ig-*` class names
WordPress	Copy `system/wordpress/enqueue-snippet.php` into `functions.php`
React	`import { Button, Hero, PropertyCard } from "system/react/components.jsx"`
Tailwind	Copy `system/tailwind/tailwind.config.js` into your project

Full setup instructions for each stack are in the live docs → Get Started.

Repo structure

igrow-web-design-system/
├── build.js                ← Build script (markdown → HTML)
├── build-template.html     ← HTML shell used for every doc page
├── index.html              ← Docs portal entry point (source)
├── CHANGELOG.md            ← Version history
├── colors_and_type.css     ← Legacy token source (imported by tokens.css)
├── fonts/                  ← Self-hosted Montserrat 300–700
├── assets/                 ← Logos, banners, brand motif
└── system/
    ├── tokens.css          ← Full token set (extends colors_and_type.css)
    ├── components.css      ← All component CSS — the file you enqueue
    ├── reset.css           ← Optional light reset
    ├── preview/
    │   ├── index.html      ← Live component demo
    │   └── foundations.html← Visual token reference (colour, type, spacing…)
    ├── docs/               ← components.md · tokens.md · accessibility.md
    ├── icons/              ← Lucide sprite + README + name mapping
    ├── react/              ← JSX component library
    ├── wordpress/          ← PHP partials, block patterns, theme.json
    ├── tailwind/           ← tailwind.config.js + class recipes
    └── sub-brands/         ← brand.json per sub-brand

Brand essentials

Typeface — Montserrat 300/400/500/600/700, self-hosted.
Primary colour — Raspberry Wine #B6364B (Pantone 703 C). For CTAs only — not errors.
Voice — Authoritative, warm, SA English. Rand format R 7 000. No exclamation marks.
Icons — Lucide, 1.75px stroke, 24×24, currentColor. Sprite at system/icons/sprite.svg.

See the Token Reference for the full palette and the Component Reference for per-component guidance.

Sub-brands covered

IGrow Rentals (complete) · IGrow Properties · IGrow Home Loans · IGrow Accounting · IGrow Private Wealth · IGrow Store (ORP)

Sub-brand assets and contact details are in system/sub-brands/<slug>/brand.json. Only Rentals is fully populated — others are stubs awaiting brand guidelines.