Design System · v0.1

Warm Clay

Flowpresso's identity surface. Earthy clay, deep teal, blueprint typography. Every component on this page is generic, theme-driven, and reused across all three avenues.

← Back home

01 · Palette

Color tokens

#FAF6F1

Background

--background

#F4ECDF

Surface

--surface

#EFE7DB

Surface Strong

--surface-strong

#2B1F1A

Foreground

--foreground

#C2654A

Primary (Clay)

--primary

#E8A87C

Primary Glow

--primary-glow

#2D8A8A

Secondary (Teal)

--secondary

#E8A87C

Accent

--accent

#EFE7DB

Muted

--muted

#6B5A4E

Muted Foreground

--muted-foreground

#DCCFBE

Border

--border

#B23A2B

Destructive

--destructive

#4A7C59

Success

--success

#D69E2E

Warning

--warning

02 · Typography

Display, body, mono

Bricolage Grotesque for display, Figtree for body, Space Mono for blueprint labels and numerics.

Bricolage Grotesque · Display

Clay, teal, intent.

Used for h1–h3 and oversized numerics.

Figtree · Body

Figtree carries every paragraph, label, and button. It's warm, geometric, and quietly modern — the workhorse of the system.

Space Mono · Blueprint

FLW-001 · 12:24:08 UTC · v0.1.0 · BASIS=warm-clay

03 · Buttons

Actions

04 · Badges & Pills

Status

Default

Secondary

Outline

Destructive

LivePending

05 · Stat Cards

Numerics

Active flows

1,284+12.4%

vs. last 30 days

Revenue

$48.2k+3.1%

Avg. session

4m 12s0.0%

Churn

2.3%-0.8%

lower is better

06 · Cards

Content surfaces

Avenue brief

Quiet container for editorial content.

Cards inherit warm-clay tokens and pair with SectionLabel eyebrows.

Surface variant

Use bg-surface for grouped subsections.

Notes

All tokens are theme-driven — no hardcoded hex.

07 · Forms

Inputs

Avenue

Notes

08 · Table

Data

Flow	Status	Owner	Revenue
Onboarding · Clay	Live	MMaya	$12,480
Booking · Teal	Draft	JJules	$0
Checkout · Glow	Live	AAnders	$8,210

09 · Tabs

Switching context

Overview content uses the same surface tokens as cards.

10 · Overlays

Modal & Sheet

11 · Avatars

Identity

MAJLAN

12 · Empty State

Zero data

No flows yet

When you create your first flow it'll show up here with status, owner, and revenue.

13 · Section Label

Blueprint eyebrow

System · 01

Avenue · Teal

Diagnostics