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

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

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

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

Threshold Gold--color-yellow-40#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 — minimum readable size

--text-body15px · Inter

Nav tags, secondary UI metadata

--text-small14px · Inter · captions only

Captions, disclaimers, timestamps — never body copy

--text-xs12px · Inter · badges only

Badges, stat labels — never body copy

Typography Utility Classes

Drop-in classes for quick styling. Each pairs the correct font, size, and weight from the design system.

.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 for those characters only.

Example: Save 20% Today

Logo

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

White wordmark SVG — on charcoal

Black wordmark SVG — on light backgrounds

Wordmark PNG — fallback raster logo

Icon PNG — favicon, app icon

Components

Production-ready patterns. Copy CSS directly from the skill.

Buttons

Buttons use Recoleta font, pill-shape (border-radius: var(--radius-full)), charcoal background. Never use mauve as button color.

Cards (Outer / Inner Pattern)

Card Title

Cards use a warm Sand-10 outer wrap with a white inner and a Grey-30 border. This creates visual depth.

Another Card

Outer radius is 24px (--radius-xl), inner radius is 20px (--radius-lg). Padding on outer is just 8px.

Stat Cards

Total Revenue

R4.2M

Active Vendors

128

Conversion

34%

Badges

Success Error Warning Primary

Labels

⚠ Low Stock Alert

Inputs

Info Message

This is an informational message using Sand-10 background and Sand-20 border. Use for tips, context, or helper text.

Section Panel

Section TitleActive

Section content goes here. Sections are flat white panels with a border, used for grouping related content in dashboards.

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