Colors

The full brand palette. Use semantic aliases in code; raw tokens for reference only.

Sand (Warm / Primary Accent)

Cream Veil--color-sand-10#FCF7F3

Buttermilk Glow--color-sand-20#F3E8DA

Golden Sand--color-sand-30#D5BBA4

Amber Clay--color-sand-40#A38B74

Umber--color-sand-70#5A4438

Mauve (Purple / Supporting Accent)

Whisper--color-mauve-10#F9F6F9

Blush--color-mauve-20#E8D9E1

Mauve--color-mauve-30#A28C9F

Plum--color-mauve-40#85516B

Deep Mauve--color-mauve-70#463443

Green (Success)

Mint Tint--color-green-10#E9FAF1

Soft Mint--color-green-20#BFF2D6

Verdant--color-green-30#4DAE84

Emerald--color-green-40#2F7A5A

Deep Fern--color-green-70#14382A

Red (Alerts / Urgency)

Petal Veil--color-red-10#FFF2F2

Rose Mist--color-red-20#FFD8D8

Soft Crimson--color-red-30#D86060

Crimson--color-red-40#B10000

Oxblood--color-red-70#520000

Yellow (Highlights / Emphasis)

Ivory--color-yellow-10#FFFCF0

Buttercup--color-yellow-20#FFF3B0

Sunbeam--color-yellow-30#FFD252

Threshold Gold--color-yellow-40#E6B800

Burnt Gold--color-yellow-80#8C6000

Neutrals

Charcoal--color-charcoal#121212

Charcoal Light--color-dark-10#4F4F4F

Stone--color-grey-50#7C7C7C

Grey Deep--color-grey-40#B6B6B6

Grey Base--color-grey-30#D1D1D1

Grey Mid--color-grey-20#EAEAEA

Grey Light--color-grey-10#F9F9F9

Sunbeam--color-yellow-30#FFD252

Approved Color Pairings

Charcoal + Sand-10

Sand-10 + Charcoal

Mauve-40 + Mauve-10

Sand-40 + Sand-10

Green-40 + Green-10

Red-40 + Red-10

Typography

Recoleta for headings and buttons. Inter for body, UI, labels. Always load both.

Type Scale

--text-display40px · Recoleta

Display Heading

--text-h126px · Recoleta

Section Heading H1

--text-h224px · Recoleta

Card Heading H2

--text-h316px · Recoleta

Button Label / Sub-heading H3

--text-h414px · Inter · Default body

Body copy, card body, list items

--text-xs12px · Inter · badges only

Badges, stat labels — never body copy

Typography Utility Classes

.t-display

Recoleta · 40px · 400

Display

.t-h1

Recoleta · 26px · 400

Heading One

.t-h2

Recoleta · 24px · 400

Heading Two

.t-h3

Recoleta · 16px · 400

Heading Three

.t-body

Inter · 12px · 400

Body text sample

.t-label

Inter · 10px · 400

Label text sample

Special Character Rule

Recoleta cannot render symbols like %, &, #, @, $, + correctly. Wrap them in <span class="symbol"> to switch to Inter.

Example: Save 20% Today

Logo

All assets from CDN: https://numarket-brand-assets.pages.dev/

White wordmark — on charcoal

Black wordmark — on light backgrounds

Icon PNG — favicon, app icon

Components

Production-ready patterns. All interactive.

Buttons

Buttons use Recoleta, pill-shape (border-radius: var(--radius-full)), charcoal background.

Cards

Card Title

Sand-10 outer wrap, white inner, Grey-30 border. Outer radius 24px, inner 20px.

Another Card

Padding on outer is just 8px — the card outer is purely structural.

Stat Cards

Total Revenue

R4.2M

Active Vendors

128

Conversion

34%

Badges

Success Error Warning Primary

Section Panel

Section TitleActive

Flat white panel with border, used for grouping content in dashboards.

Tabs — Underline

Overview panel. Use underline tabs for primary page-level navigation.

Details panel. Swap any content in here — cards, tables, lists.

History panel. Previous activity and audit log entries.

Settings panel. Configuration options scoped to this context.

Tabs — Pill

All items. Pill tabs suit compact filter bars and dashboard segment controls.

Active items only.

Archived items no longer in active use.

Text Input

Label

Helper text

Text Input — With Icons

Leading icon

Search

Trailing icon

Amount

ZAR

Both icons

Location

Textarea

Description Max 300 characters

Dropdown — Native Select

Spacing

Always use spacing tokens — never magic numbers.

--space-1
4px

--space-2
8px

--space-3
12px

--space-4
16px

--space-5
20px

--space-6
24px

--space-8
32px

--space-10
40px

--space-12
48px

--space-16
64px

Border Radius

Use radius tokens — never hardcoded px values.

--radius-sm4px

--radius-md10px

--radius-lg20px · card inner

--radius-xl24px · card outer

--radius-pill50px · tooltips

--radius-full1000px · buttons