Patterns
Library

Patterns

Real layouts built from the primitives — each in light and dark.

Application shell

The standard chrome — a glass sidebar and top bar over the aurora canvas, with the content area inside.

Preview
light
Console
Dashboard
Active1,204
Errors3
Recent activity
dark
Console
Dashboard
Active1,204
Errors3
Recent activity

Data table

A panel with an eyebrow header, a search + filter toolbar, severity cells, status chips, and a row action.

Preview
light
Findings
Search…
IDSeveritySourceStatus
F-1042CriticalScanner AOpen
F-1041HighScanner BTriage
F-1038MediumManualReview
F-1031LowScanner AClosed
dark
Findings
Search…
IDSeveritySourceStatus
F-1042CriticalScanner AOpen
F-1041HighScanner BTriage
F-1038MediumManualReview
F-1031LowScanner AClosed

KPI strip

A compact metrics row of stat pills above a grid of severity stat cards — the top of a dashboard.

Preview
light
Processed12,847
Closed9,021
Review318
Escalated42
Critical
12
High
38
Medium
120
Low
208
dark
Processed12,847
Closed9,021
Review318
Escalated42
Critical
12
High
38
Medium
120
Low
208

Form

A settings form inside a panel — labelled fields, a select, a textarea, and a right-aligned action row.

Preview
light

Profile settings

Draft
dark

Profile settings

Draft

Empty & loading states

Zero states and skeleton loaders — what a surface shows before and without data.

Preview
light
No findings
You're all caught up — new items will show here.
dark
No findings
You're all caught up — new items will show here.

Sign-in card

A centered authentication card with a spectrum keyline, a soft glow, and the field + primary-action stack.

Preview
light
Sign in

Forgot your password?

dark
Sign in

Forgot your password?