Design system

HeroUI v3 surfaces, color and motion, rebuilt from scratch. No component library underneath.

Revenue

$12,480+4.2%

Last 7 days

Active users

1,284+12%

Last 7 days

Refunds

6+3

Last 7 days

Recent orders

Customer	Status	Amount	Date
ABAna Beridzeana@acme.io	Paid	$249.00	28.07
LMLuka Maisuradzeluka@northwind.dev	Open	$1,150.00	27.07
NKNino Kapanadzenino@fabrikam.com	Paid	$86.40	27.07
GAGiorgi Abashidzegiorgi@contoso.app	Refunded	$412.00	26.07
MLMariam Lomidzemariam@initech.co	Paid	$980.00	25.07
SGSandro Gelashvilisandro@umbrella.dev	Open	$54.90	24.07

Orders: 6

Invite teammate

They get access to this workspace only.

Role

Includes a sign-in link that expires in 24 hours.

Surface ladder

The page sits on background, cards sit on surface, nested panels step down two more levels. In dark mode the same ladder ascends: each level gets lighter, not darker.

--surfaceCards, table bodies and popovers sit here.

--surface-secondaryFramed wells and table frames step one level down.

--surface-tertiaryThe deepest inset panels use the third level.

Tokens

Every color on this page comes from these variables. Edit one value and the whole page follows.

--background

--surface

--surface-secondary

--surface-tertiary

--default

--accent

--success

--warning

--danger

--muted

--border-color

--separator