Design System

All components for the DoubleTZ CRM. Bright blue + white, extremely compact.

Typography

4xl DM Sans 28px Bold
3xl DM Sans 22px Semi
2xl DM Sans 18px Semi
xl DM Sans 16px Regular
lg DM Sans 14px - Body Large
base DM Sans 13px - Body Default
sm DM Sans 12px - Small / Labels
xs DM Sans 11px - Caption / Hint

Colors

Primary
Hover
Light
Lighter
Subtle
Success
Warning
Error
Text
Secondary
Muted

Buttons

Variants

Sizes

With icons & groups

Form Inputs

We'll never share your email
Order reference must be at least 6 characters

Checkboxes

Radio buttons

Toggles

Custom Dropdowns

Gucci
Prada
Versace
Dolce & Gabbana
Armani
Fendi
Add new brand...
Pending
Processing
Shipped
Delivered
Cancelled
United States
United Kingdom
Italy
France
Germany
Spain
Japan
South Korea
China
UAE

Badges & Tags

Badges

Default Primary Delivered Pending Cancelled

Badges with dots

Active Processing Overdue New

Tags (removable)

Gucci Prada VIP Client Express

Cards

Total Orders 1,247 +12.5% this month
Revenue $84,320 +8.2% this month
Pending 23 -3 from yesterday
Recent Orders

Card with header and actions. Used for dashboard widgets, lists, and grouped content.

Order Progress
Completed 78%
Shipped 45%
Returns 12%

Table

Order ID Brand Client Status Amount Date Actions
#ORD-1247
G Gucci
Sarah Miller Delivered $2,450.00 Feb 24, 2026
#ORD-1246
P Prada
James Chen Processing $1,820.00 Feb 23, 2026
#ORD-1245
V Versace
Emily Johnson New $3,150.00 Feb 22, 2026
#ORD-1244
D D&G
Michael Brown Cancelled $980.00 Feb 21, 2026

Tabs

This is the Overview tab content. Tabs switch instantly with no animation.

Details tab content with order specifications and line items.

History tab - timeline of all status changes and events.

Notes tab - internal team notes and communication.

Alerts

Information
A new batch of orders has been imported. Review them in the Orders tab.
Success
Order #ORD-1247 has been marked as delivered.
Warning
3 orders are past their estimated delivery date.
Error
Payment processing failed for order #ORD-1244.

Avatars

S Small
JC Default
EJ Large
SM JC EJ +3
Group

Breadcrumbs & Pagination

Breadcrumbs

Pagination

Tooltips

This is a tooltip Info Badge tooltip More information

Modal

Toast Notifications

Loading States

Spinners

Skeleton loading

Empty State

No orders yet

Create your first order to get started.

CRM Example: Order Detail

G

Gucci

Client: Sarah Miller

Delivered
Order Total $2,450.00
Items 6
Placed Feb 20
Delivered Feb 24

Assigned Team

SM JC
Sarah M., James C.

Fulfillment Progress

Overall 100%
Express Shipping VIP Gift Wrap