IGrow × Tailwind — Class Recipes

Copy-paste class strings for common IGrow surfaces. Every recipe uses tokens defined in tailwind.config.js, so the brand stays consistent even when devs hand-roll markup.

Rule of thumb: if you find yourself writing bg-[#B6364B], stop. The token is bg-igrow-red. Hard-coded hex values are a regression.

Buttons

<!-- Primary CTA — use sparingly, one per surface -->
<a class="btn-igrow-primary">Request a viewing</a>

<!-- Hand-rolled (when you need a non-default size or alignment) -->
<a class="inline-flex items-center gap-2 px-6 py-3 rounded-igrow-pill
         bg-igrow-red text-igrow-white font-semibold tracking-wide text-sm
         transition duration-base ease-igrow
         hover:bg-igrow-red-hover hover:-translate-y-px hover:shadow-igrow-card
         focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-igrow-red/45">
  Get a valuation
</a>

<!-- Secondary -->
<a class="btn-igrow-secondary">List with IGrow</a>

<!-- Ghost -->
<a class="inline-flex items-center gap-2 px-6 py-3 rounded-igrow-pill
         text-igrow-dark hover:bg-igrow-bg-muted hover:text-igrow-red
         font-semibold text-sm transition">
  Cancel
</a>

Section bands

<!-- Default white section -->
<section class="py-igrow-8">
  <div class="max-w-igrow-md mx-auto px-igrow-4 md:px-igrow-5">
    <span class="eyebrow-igrow">IGrow Rentals</span>
    <h2 class="text-fluid-h1 font-bold tracking-tight mt-3 mb-3">
      Rentals should be easy
    </h2>
    <p class="text-lg leading-relaxed max-w-prose">…</p>
  </div>
</section>

<!-- Inverse (Black) band — for CTAs and bookends -->
<section class="bg-igrow-dark text-igrow-white py-igrow-8 text-center">
  <div class="max-w-igrow-sm mx-auto px-igrow-4">
    <h2 class="text-fluid-h1 font-bold">Ready to grow your portfolio?</h2>
    <p class="text-fluid-lead mt-3 mb-5 opacity-90">…</p>
    <div class="inline-flex flex-wrap gap-3 justify-center">
      <a class="btn-igrow-primary">Get a valuation</a>
    </div>
  </div>
</section>

Hero (photo + overlay)

<section
  class="relative isolate min-h-[clamp(20rem,45vh,32rem)] flex items-center
         bg-cover bg-center text-igrow-white"
  style="background-image: url(/path/to/banner.jpg)">
  <!-- brand-gradient overlay -->
  <div class="absolute inset-0 bg-hero-rentals -z-10"></div>

  <div class="max-w-igrow-md mx-auto px-igrow-4 w-full">
    <span class="eyebrow-igrow text-igrow-white/85">IGrow Rentals</span>
    <h1 class="text-fluid-hero font-bold tracking-tight leading-[1.05] max-w-[22ch] mt-3 mb-3">
      Explore amazing properties to rent
    </h1>
    <p class="text-fluid-lead font-light leading-relaxed max-w-[44ch]">
      Browse available properties by location, budget, and features.
    </p>
    <div class="mt-5 flex flex-wrap gap-3">
      <a class="btn-igrow-primary">Browse properties</a>
      <a class="inline-flex items-center px-6 py-3 rounded-igrow-pill border-igrow border-white/60
                text-igrow-white font-semibold text-sm
                hover:bg-igrow-white hover:text-igrow-dark transition">
        Talk to a consultant
      </a>
    </div>
  </div>
</section>

Property card

<article class="bg-igrow-white rounded-igrow-lg shadow-igrow-card overflow-hidden
                flex flex-col h-full transition
                hover:-translate-y-0.5 hover:shadow-igrow-hover">
  <div class="relative aspect-card bg-igrow-bg-muted">
    <span class="absolute top-3 left-3 inline-flex items-center px-2.5 py-1
                 rounded-igrow-pill bg-igrow-white text-igrow-dark
                 text-xs font-semibold tracking-wide shadow-igrow-sm">
      Apartment
    </span>
    <img src="…" alt="" class="w-full h-full object-cover">
  </div>
  <div class="p-igrow-5 flex flex-col gap-3 flex-1">
    <h3 class="text-xl font-semibold leading-snug text-igrow-dark">
      1 Bedroom Apartment To Rent in Witfield
    </h3>
    <p class="text-xl font-bold text-igrow-red">R 7 000</p>
    <p class="text-sm text-igrow-grey-dark/70">1 Unit 309, Cnr Sett Street</p>
    <p class="text-sm leading-relaxed">Experience the perfect blend…</p>
    <ul class="border-t border-igrow-grey-light pt-3 flex gap-4 text-sm mt-auto">
      <li>1 Bed</li><li>1 Bath</li><li>44 m²</li>
    </ul>
  </div>
</article>

Form fields

<label class="block">
  <span class="text-sm font-semibold text-igrow-dark">Email</span>
  <span class="text-igrow-red font-bold">*</span>
  <input type="email" required
    class="mt-2 w-full px-4 py-3 rounded-igrow-lg
           border-igrow border-igrow-grey-light bg-igrow-white text-base
           transition duration-base ease-igrow
           hover:border-igrow-grey-dark
           focus-visible:outline-none focus-visible:border-igrow-red
           focus-visible:ring-[3px] focus-visible:ring-igrow-red/45">
  <span class="block mt-2 text-xs text-igrow-grey-dark/70">
    We'll only use this to confirm your viewing.
  </span>
</label>

Alerts

<!-- Info -->
<div class="flex gap-3 p-3 rounded-igrow-md border-l-4 border-info-500
            bg-info-50 text-info-700 text-sm leading-relaxed">
  <svg class="w-5 h-5 flex-none mt-0.5" …></svg>
  <div>
    <p class="font-semibold mb-1">Application received</p>
    <p>We'll be in touch within one business day.</p>
  </div>
</div>

<!-- Success / Warning / Danger: swap `info` → `success` / `warning` / `danger` -->

Tables (data rows)

<div class="rounded-igrow-lg border border-igrow-grey-light overflow-x-auto">
  <table class="w-full text-sm">
    <thead class="bg-igrow-bg-muted">
      <tr>
        <th class="text-left px-4 py-3 text-xs font-semibold tracking-eyebrow uppercase text-igrow-grey-dark/70">
          Property
        </th>
        <!-- … -->
      </tr>
    </thead>
    <tbody>
      <tr class="border-t border-igrow-grey-light hover:bg-igrow-bg-subtle">
        <td class="px-4 py-3">Unit 309, Willow Park Manor</td>
        <!-- Status pill -->
        <td class="px-4 py-3">
          <span class="inline-flex px-2.5 py-0.5 rounded-igrow-pill
                       text-xs font-semibold bg-success-50 text-success-700">
            Paid
          </span>
        </td>
      </tr>
    </tbody>
  </table>
</div>

Sub-brand swaps

The only thing that changes between Rentals, Properties, Home Loans, etc. is the footer gradient and the logo. Everything else stays the same.

<!-- Rentals -->     <footer class="bg-footer-rentals text-igrow-white …">
<!-- Properties -->  <footer class="bg-footer-properties text-igrow-white …">
<!-- Private W. -->  <footer class="bg-footer-private-wealth text-igrow-white …">

Anti-patterns — don't do these

<!-- ❌ Hard-coded brand red -->
<button class="bg-[#B6364B]">…</button>
<!-- ✅ Use the token -->
<button class="bg-igrow-red">…</button>

<!-- ❌ Tailwind's red is wrong for IGrow -->
<button class="bg-red-500">…</button>

<!-- ❌ Square buttons -->
<button class="rounded-md bg-igrow-red">…</button>
<!-- ✅ IGrow buttons are pill-shaped -->
<button class="rounded-igrow-pill bg-igrow-red">…</button>

<!-- ❌ 300ms transitions -->
<a class="transition duration-300">…</a>
<!-- ✅ Cap at 250ms (slow) — IGrow motion is restrained -->
<a class="transition duration-slow ease-igrow">…</a>

<!-- ❌ Drop shadow stacks -->
<div class="shadow-lg shadow-xl">…</div>
<!-- ✅ One IGrow shadow level -->
<div class="shadow-igrow-card hover:shadow-igrow-hover">…</div>