01

Foundations

Colors · Typography

Color tokens

--page-bg
Page bg
--card-bg
Card bg
--nav-bg
Nav bg
--layout-sidebar-bg
Sidebar bg
--text-primary
Text primary
--text-secondary
Text secondary
--button-bg
Button
--button-hover-bg
Button hover
--button-disabled-bg
Btn disabled
--input-border
Input border
--badge-success-bg
Badge success
--badge-warning-bg
Badge warning
--badge-error-bg
Badge error
--badge-neutral-bg
Badge neutral
--surface-bg2
Surface 2
--surface-bg3
Surface 3
--text-muted
Text muted
--status-success-soft
Success soft
--status-warn-soft
Warn soft
--status-error-soft
Error soft
--status-info-soft
Info soft
--chart-color1
Chart 1
--chart-color2
Chart 2
--chart-color3
Chart 3
--chart-color4
Chart 4
--chart-color5
Chart 5
--chart-color6
Chart 6

Typography

heading · var(--heading-font-size) · var(--heading-font-weight)

Invoice Manager

label · var(--label-font-size) · var(--label-font-weight)

Status filter

text · base

The quick brown fox jumps over the lazy dog.

text-secondary · muted

Last updated 2026-04-24

text-muted · subdued

Draft · Not submitted

Motion

--animation-duration-fast: 120ms --animation-duration-normal: 180ms --animation-duration-slow: 260ms --animation-ease-out --animation-ease-in-out
Glass Effect
Glass Card
--glass-bg · --glass-border
backdrop-filter: blur(20px)
02

Components

All variants · All states

A11y & Utilities

surface-2
surface-3

prefers-reduced-motion: all transitions disabled at OS level

Switch / Toggle

Tabs

Tab content area

Accordion

Accordion body content. Smooth max-height animation on toggle.

Hidden content revealed on click.

Dropdown

Progress

Linear 60%

Linear 30%

Indeterminate

Circular 75%

Circular 40%

Typography Scale

.t-display · --type-scale-display-size

Display

.t-h1 · --type-scale-h1-size

Heading 1

.t-h2 · --type-scale-h2-size

Heading 2

.t-h3 · --type-scale-h3-size

Heading 3

.t-lead · lead paragraph

Lead — slightly larger, secondary color.

.text · body base

Body text — base size, primary color.

.t-small · --type-scale-small-size

Small text

.t-overline · uppercase label

Overline label

.t-mono · code / numbers

mono · 0123 · code

KPI Cards

Total Revenue ₽ 2 480 000 ↑ 12.4% vs last month
Invoices Paid 148 ↑ 8 this week
Overdue 7 ↓ needs attention

Filter Chips

Table — Sortable Headers

Invoice ▲ Client ⇅ Amount ⇅ Status ⇅
#1042 ООО Ромашка 48 000 ₽ Paid
#1041 ИП Сидоров 12 500 ₽ Pending

Table — Empty State

InvoiceClientAmount
📄

No invoices found

Try adjusting your filters

Buttons

Hover on Default to see hover state

Badges

Paid Pending Overdue Draft

Alerts

Invoice INV-1042 has been paid successfully.
Invoice INV-1046 is due in 3 days.
Invoice INV-1044 is overdue by 27 days.
6 invoices this month. Total: $36,930.

Form Inputs

Checkbox & Radio

Table

Invoice # Client Amount Date Status Action
INV-1042 Acme Corp $4,200.00 2026-04-01 Paid
INV-1043 TechFlow Ltd $1,850.00 2026-04-05 Pending
INV-1044 Globex Inc $9,600.00 2026-03-28 Overdue
INV-1045 Initech $730.00 2026-04-10 Paid
INV-1046 Umbrella Co $2,150.00 2026-04-12 Pending

Expandable Table

NameStatusAmount
Alice Johnson Active $1,200 ▼
Contract signed 2024-01-15. Next review in Q2. Preferred contact via email.
Bob Smith Pending $850 ▼
Awaiting document verification. Follow up scheduled for next week.
Carol Davis Overdue $2,400 ▼
Payment overdue by 14 days. Escalated to finance team on 2026-04-10.

Click any row to expand / collapse details

Pagination

Nav

Sidebar

Invoices Clients Reports Settings

Card

Card heading

Cards accept themed border, radius and shadow. This is a nested card to show the component in isolation.

Secondary text sits beneath.

Date Picker

03

Live Demo

Invoice Manager application
Viewport:
Invoice # Client Amount Date Status Action
INV-1042 Acme Corp $4,200.00 2026-04-01 Paid
INV-1043 TechFlow Ltd $1,850.00 2026-04-05 Pending
INV-1044 Globex Inc $9,600.00 2026-03-28 Overdue
INV-1045 Initech $730.00 2026-04-10 Paid
INV-1046 Umbrella Co $2,150.00 2026-04-12 Pending
INV-1047 Stark Industries $18,400.00 2026-04-15 Draft
Total Invoices 6
Total Amount $36,930.00
Overdue 1
Invoice INV-1042 has been paid successfully.
Invoice INV-1046 is due in 3 days.
Invoice INV-1044 is overdue by 27 days.
You have 6 invoices this month. Total: $36,930.00
04

Charts

Sparkline · Area · Bar · Stacked Bar · Donut · Heatmap · Gantt
Sparkline
Area Chart
Series A
Series B
Bar Chart
Series A
Series B
Stacked Bar
Q1
Q2
Q3
Donut Chart
60% target
Primary 60%
Secondary 30%
Other 10%
Heatmap (color-mix intensity)
Mon → Sun · 4 weeks
Gantt Chart
W1
W2
W3
W4
W5
W6
W7
W8
Discovery
Discovery
Design
Design
Development
Development
Testing
Testing
Launch
Launch
05

Dev UX

Static States · Grid Utilities

Static States (.is-hover / .is-focus / .is-disabled / .is-selected)

Button

Chip

Default is-hover is-selected is-focus

Input

Grid Utilities (.grid-2 / .grid-3 / .row)

.grid-2

Col 1
Col 2

.grid-3

A
B
C

.row (flex)

Item 1 Item 2 Item 3