NuMarket Design System

01 — Foundation

Color Palette

The full brand palette. Use semantic aliases wherever possible over raw tokens.

Sand — warm backgrounds, cards, accents

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 — supporting accent, thresholds

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

Semantic — states and outcomes

Mint Tint--color-green-10#E9FAF1

Verdant--color-green-30#4DAE84

Emerald--color-green-40#2F7A5A

Petal Veil--color-red-10#FFF2F2

Soft Crimson--color-red-30#D86060

Crimson--color-red-40#B10000

Threshold Gold--color-yellow-40#FFD252

Neutrals — structure and text

Grey Light--color-grey-10#F9F9F9

Grey Mid--color-grey-20#EAEAEA

Grey Base--color-grey-30#D1D1D1

Stone--color-grey-50#7C7C7C

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

Charcoal--color-charcoal#121212

02 — Foundation

Typography

Recoleta for brand headings and buttons. Inter for all body copy and UI labels.

Display--text-display · 40px

Customer Capital

H1 / Recoleta--text-h1 · 26px

Local businesses thrive

H2 / Recoleta--text-h2 · 24px

Your card earns credits

H3 / Recoleta--text-h3 · 16px

Buy in, earn back, belong

Body / Inter 400--text-body · 13px

NuMarket connects customers to the businesses they love. Customers earn credits when businesses succeed — no debt, no equity dilution.

Small / Inter 400--text-small · 12px

Credits applied at checkout · No expiry · Transferable

Label / Inter 600--text-xs · 10px upper

Total invested · Active members · Avg. return

Symbol in Recoleta.symbol wraps glyphs

Save 20% today

Recoleta — Brand font

Regular 400

Medium 500

Bold 700

Inter — Body font

Regular 400 — body copy and metadata

Medium 500 — subtle emphasis

SemiBold 600 — labels and headings

03 — Foundation

Spacing & Radius

Consistent spacing tokens and border radius scale used across all components.

Spacing scale

--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 scale

sm4px

md10px

lg20px

xl24px

full1000px

04 — Components

Buttons

Pill-shaped, Recoleta font. Primary action is always charcoal. Sand is a warm accent option.

04 — Components

Badges & Labels

Compact state indicators (badges) and bordered contextual labels.

Active Pending Closed New Draft

⚠ Only 3 spots left ✦ Threshold reached

04 — Components

Cards

Warm Sand-10 outer with a white inner and a Grey-30 border. The signature NuMarket card pattern.

Moksh Kitchen

Indian street food in Johannesburg. Buy in from R200 and earn credits on every visit.

Open

The Bread Basket

Artisan bakery. 47 members funded their new oven — investors eat free on launch day.

Funding

Dark Card Variant

Charcoal bg + off-white text. Use for featured or hero content areas.

Featured

04 — Components

Stat Cards

Dashboard metrics with Recoleta values and Inter labels.

Total Members

2,841

↑ 12% this month

Credits Issued

R94k

↑ 8% this month

Businesses Live

138

↑ 4 this week

Avg. Return

18%

Across all cohorts

04 — Components

Form Inputs

Minimal inputs with focus state using Mauve accent border.

Business name

Email address

Buy-in amount

04 — Components

Information Messages

Warm Sand-10 panels for contextual notes and onboarding guidance.

💡 Your credits never expire and can be used across all NuMarket businesses you've invested in.

✓ Payment confirmed. Your investment in The Bread Basket is live — you'll earn credits from opening day.

⚠ This business is nearing its funding threshold. Only 3 spots remain at this tier.

04 — Components

Table

Clean tabular data with uppercase Inter column headers and subtle row dividers.

Business	Category	Members	Status	Your credits
Moksh Kitchen	Restaurant	312	Active	R 640
The Bread Basket	Bakery	47	Funding	R 200
Karoo Coffee Co.	Café	891	Active	R 1,240

05 — Patterns

Approved Color Pairings

These six combinations are pre-approved for card and section backgrounds.

Charcoal

bg: charcoal · text: sand-10

Sand Light

bg: sand-10 · text: charcoal

Plum

bg: mauve-40 · text: mauve-10

Amber Clay

bg: sand-40 · text: sand-10

Emerald

bg: green-40 · text: green-10

Crimson

bg: red-40 · text: red-10