Verda
Produce Sourcing
Foundation

Verda Design System

Tokens and reusable components used across the Verda B2B produce sourcing portal. Every screen must consume these, do not introduce ad-hoc colors, fonts, or button styles.

Colors: Surfaces & Text

Background
--background
Surface Muted
--surface-muted
Card
--card
Foreground
--foreground
Muted
--muted
Border
--border

Colors: Primary (Green)

Primary Soft
--primary-soft
Primary Light
--primary-light
Primary
--primary
Primary Dark
--primary-dark

Colors: Accent (Gold) & Status

Accent
--accent
Success
--success
Warning
--warning
Destructive
--destructive
Info
--info

Typography

Inter · h1 · bold, tight tracking
Fresh sourcing, at scale.
font-display · h2
Section header
font-sans · Inter · body
Operational clarity for supermarkets and bulk buyers sourcing produce.
Small / meta text uses muted-foreground.
font-numeric · tabular numerals for KPIs & tables
$124,580.00 · 1,204 kg · 97.4%

1. Buttons

2. Product Card

Grade A

Roma Tomato

Origin: Jordan Valley

$1.20/ kg
Premium

Beit Alpha Cucumber

Origin: Jordan

$0.90/ kg
Class I

Red Sweet Pepper

Origin: Amman

Request quote
Seasonal

Superior Table Grapes

Origin: Jordan

$2.40/ kg

3. Category Chips

4. Status Pills

DeliveredPending reviewRejectedIn transitDraft

5. KPI Cards

Open Orders
24
+12%vs last
GMV (MTD)
$184,320
+8.4%vs last
On-time Delivery
97.4%
-0.6%vs last
Pending KYC
3
0vs last

6. Timeline / Milestone Tracker

  1. Ordered
    Jul 12
  2. Confirmed
    Jul 12
  3. Loaded
    Jul 13
  4. Shipped
    …
  5. Customs
    …
  6. Delivered
    …

7. Queue Table Row

CustomerItemQtyStatusActions
Seef SupermarketRoma Tomato1,200 kgAwaiting quote
Fresh MartBeit Alpha Cucumber800 kgConfirmed
Gulf RetailRed Pepper400 kgIn transit

8. Approval Modal / Dialog

9. Empty State

No inquiries yet

Once you add products to an inquiry, they'll appear here for a quotation from our Jordan operators.

10. Toast / Notification

11. Role-based Sidebar (Customer · Jordan Operator · Verda Admin · Owner)

Preview: customer navigation. The same component powers all role-scoped screens.