01 — Color Palette

Tokens & Surfaces

Every brand color and gradient, rendered from the live CSS tokens lifted from the brand guidelines HTML.

Surfaces
bg
#08090C
surface
#111318
surface-2
#1A1D25
surface-3
#22252F
border
#2A2D37
border-subtle
#1E2028
Brand — Flat
green
#00E87B
gold
#F5A623
blue
#008BFF
red
#EF4444
Brand — Gradients
grad-green
grad-green-ext
grad-hero
grad-blue
grad-gold
Text

text — primary body & headlines (#F0EDE6)

text-dim — secondary emphasis (#C4C1BA)

text-muted — captions & metadata (#8A8D96)

text-faint — disabled / fine print (#5A5D66)

02 — Typography

Scale & Voice

Bricolage Grotesque (display), Inter (body), Space Mono (labels).

h1-hero · clamp(40, 8vw, 72) · 800 · -2px

Build a halal recruitment business.

h2-section · clamp(28, 5vw, 52) · 700 · -1.2px

Proof over promises.

h3-sub · clamp(24, 4vw, 36) · 700 · -0.8px

The Blueprint

h4-card · 20 · 600 · -0.4px

Module Four — AI agents as a B2B product

h5-label · 16 · 600
Free Support Community
Body · Inter 15 / 1.65

Listen, trust me when I say this: recruitment is the most underrated halal B2B play right now. A single £50k hire at a 15% fee gets you £7,500. Ten hires in a year? That's £75,000 without touching interest.

Gradient text variants

Gradient text — hero (green → blue)

Gradient text — green

Gradient text — gold

03 — Buttons

Call-to-Action System

Variants
Sizes — gradGreen
04 — Cards

Surfaces & Containers

standard

Default card — surface + border

Standard content container used for most cards across the site.

elevated

Elevated — lighter surface

Used inside other cards, or to distinguish nested content.

featured

Featured — solid green border

The pricing card, hero testimonial, or any highlighted element.

glow

Glow — ambient radial backdrop

Adds atmosphere. Used sparingly on hero cards.

05 — Halal / Haram Contrast

The green-vs-red contrast mechanic

Used wherever two paths are being compared — the Problem section, the pricing comparison, the FAQ, anywhere a "right path vs. wrong path" frame is needed.

Haram trap
Interest-based business "courses"

Teaches you to build wealth on riba. Blessings dry up even if the numbers look good on paper.

Halal path
Recruitmentle — B2B halal agency

You charge businesses a fee to hire staff. Zero interest, zero haram, 100% Barakah-aligned.

06 — Logo Variants

Wordmarks & Icons

wordmark-dark (default)
Recruitmentle wordmark
wordmark-light
Recruitmentle wordmark light
wordmark-mono-white
Recruitmentle wordmark mono
icon-le (favicon)
LE icon
icon-le-circle (avatar)
LE icon circle
icon-le-outline
LE icon outline
07 — Ambient Glow

Green atmosphere

Radial glow behind the content — subtle depth, never a solid block. Used on Hero and Final CTA.

07b — Gold Glow

Halal Robbery atmosphere

Gold variant for the pricing section.

Reserve your free seat
Speak to our team