Flower Marketplace — Design Spec

Brand, color, typography, components and layout guidance for the wholesale order platform. Developers can copy CSS tokens directly from assets/styles.css.

1 · Brand

Soft, calm, modern. Deep teal as the structural anchor (top bar, hero gradients), purple as the primary interactive color, and a warm cream as the neutral surface. The tone is professional without being corporate — like a well-lit greenhouse, not a spreadsheet.

2 · Color Palette

Brand

Teal 900

#134E48

Teal 800

#18605A

Purple 700

#5B3D8A

Purple 600

#6D4AA1

Purple 500

#8765B8

Purple 50

#F3EDF9

Neutrals

Cream 50 (bg)

#FAF8F7

Cream 100

#F4F1F4

White (card)

#FFFFFF

Gray 200 (border)

#ECE9EF

Gray 500 (label)

#8C8997

Gray 900 (text)

#1F1D2B

Accent / Status

Pink 50 (row)

#FCE8EB

Orange (Processing)

#F08A3E

Green (High margin)

#45A87A

Gold (Med margin)

#D4A83A

Red (Low / overdue)

#E34C5D

Blue (Picking)

#4A89DC

3 · Typography

Single typeface: Inter, with system fallbacks. Numeric values use font-variant-numeric: tabular-nums so columns align.

Page Heading — 28/700

font-weight: 700 · letter-spacing: 0 · used for spec / landing pages

Topbar Title — 17/600 white on teal

topbar h1.page-title

$48,920 — KPI Value 20/700

.kpi .value

Card Title — 14/600

.card-title

Body / table cell — 13/400

body, td

Table Header — 10.5/600 uppercase tracked

thead th

4 · Spacing & Radius

Base unit: 4px. Tokens: 4 / 8 / 12 / 14 / 18 / 22 / 28 / 40.
Card padding: 18px 20px (compact: 14px 16px).
Card radius: 14px (large containers), 10px (inputs, tiles), 6px (chips).
Sidebar width: 232px. Topbar height: 60px.

5 · Shadows

shadow-sm
0 1px 2px /04

shadow
0 2px 8px /06

shadow-lg
0 8px 24px /08

6 · Components

Buttons

Inputs

Badges Processing Shipped Picking On Hold 22.4% Med Lost Net 30

Donut

62%

High

35%

Med

Low

Table (excerpt)

Product	Category	Qty	Total	Status
🌹 Roses Freedom 60cm CO · Red	Roses	80	$680.00	High 38.8%
🌸 Sprays White Floreana ECU · White	Sprays	100	$115.00	Low 0.3%

Pink row highlights low-margin or attention items. Hover: --cream-50.

7 · Layout Rules

Persistent left sidebar (232px) with grouped nav. Active item gets --purple-50 bg + --purple-700 text.
Persistent top bar (60px, --teal-900 bg, white text). Page title centered-left.
Content area uses 22–28px padding. Cards live on the cream surface with subtle 1px border and shadow-sm.
Tables wrap in .table-wrap for consistent rounded corners. Toolbar at top, pagination at bottom.
Right-rail summary panes (margin, AR, alerts) are ~320px wide; main content takes the remainder.

8 · Accessibility & Polish

Body text contrast ≥ 4.5:1 against cream. Avoid pure gray on white at <14px.
Focus state: box-shadow: 0 0 0 3px var(--purple-50) + border purple-500.
Status colors used consistently: orange = in-progress, green = good, gold = warn, red = urgent, blue = neutral process state.
Numbers right-aligned with font-variant-numeric: tabular-nums.

9 · Implementation Notes for Developers

The prototype is plain HTML + one stylesheet + one tiny JS file — no frameworks, no build step.
All CSS lives in assets/styles.css. Tokens are CSS custom properties under :root.
SVG icons are inline (Lucide-style). Free to swap for an icon library like lucide-react.
Sidebar + topbar are duplicated per page intentionally so the prototype works opened directly from disk. In React, extract them as a layout component.
Charts are inline SVG placeholders — replace with Recharts / Chart.js / ECharts as you wire real data.
The pink row (.row-pink) is a semantic "attention" highlight, not just decoration.

Prepared for the FMI Order System redesign.