Get started
Pick your stack. Each path is independent — you don't need React to use the CSS, and you don't need the CSS file to use the Tailwind config.
🌐
HTML / CSS
1. Link the stylesheet
Open component demo →
<link rel="stylesheet" href="system/components.css">
2. Use class names
<a class="ig-btn ig-btn--primary">Request a viewing</a>
3. Browse the demo
Open system/preview/index.html to copy markup.
⚙️
WordPress
1. Copy the enqueue snippet
Paste
WordPress guide →
system/wordpress/enqueue-snippet.php into your functions.php.
2. Use PHP partials
Call get_template_part('…/partials/property-card') from templates.
3. Register block patterns
Require system/wordpress/block-patterns/index.php.
⚛️
React
1. Import the stylesheet
View component source →
import "…/system/components.css";
2. Import components
import { Button, Hero, PropertyCard } from "…/system/react/components.jsx"
3. All props are optional
Every component has sensible defaults — start minimal, add variants as needed.
🌀
Tailwind
1. Extend your config
View class recipes →
module.exports = require("…/system/tailwind/tailwind.config.js")
2. Use IGrow utilities
<a class="btn-igrow-primary">
3. Check the recipes
system/tailwind/class-recipes.md has copy-paste patterns.
Browse
Live preview files — open these to inspect tokens and components visually.
Component Demo
Every .ig-* component rendered live with copy-pasteable markup. Buttons, forms, cards, nav, hero, footer, modal, accordion, tabs, and more.
system/preview/index.html →
Foundations
Visual token reference — brand colour swatches, typography scale and roles, spacing, elevation, and border radii.
system/preview/foundations.html →
Reference
Detailed documentation for every part of the system.
Component Reference
Class contracts, variants, anatomy, do/don't, and accessibility notes for all 20 components.
system/docs/components.md
Token Reference
Every CSS custom property — brand palette, semantic aliases, derived values, tints, and gradients.
system/docs/tokens.md
Accessibility
WCAG 2.1 AA checklist — what the system provides free and what you must do in your implementation.
system/docs/accessibility.md
Responsive Guidelines
Mobile-first breakpoints, gutters, fluid type, layout patterns, and component behaviour from 384px to 1920px.
system/docs/responsive.md
Motion
Motion principles, token reference, entrance animation classes, stagger patterns, and Framer Motion integration for React surfaces.
system/docs/motion.md
Icons
Lucide sprite usage, React helper, WordPress PHP helper, and the full name-to-ID mapping.
system/icons/README.md
Tailwind Recipes
Copy-paste class patterns for buttons, hero, property grid, alerts, footer variants, and more.
system/tailwind/class-recipes.md
WordPress Integration
Three-layer setup: enqueue, PHP partials, Gutenberg block patterns. Includes theme.json guidance.
system/wordpress/README.md
Changelog
Version history — what changed in each release and why, with migration notes for breaking changes.
CHANGELOG.md
Sub-brands
Each sub-brand has a brand.json manifest in system/sub-brands/. When building for a specific sub-brand, read its manifest to get the correct logo, footer class, contact details, and hero overlay.
| Sub-brand | Domain | Footer class | Status |
|---|---|---|---|
| IGrow Rentals | rentals.igrow.co.za | ig-footer--rentals |
Complete |
| IGrow Properties | properties.igrow.co.za | ig-footer--properties |
Stub |
| IGrow Home Loans | homeloans.igrow.co.za | ig-footer--home-loans |
Stub |
| IGrow Accounting | accounting.igrow.co.za | ig-footer--accounting |
Stub |
| IGrow Private Wealth | — | ig-footer--private-wealth |
Stub |
| IGrow Store (ORP) | — | ig-footer--store |
Stub |
Stub sub-brands use the IGrow dark gradient footer and placeholder contact details. Update brand.json when guidelines arrive — see system/sub-brands/private-wealth/README.md for what's needed.