Typography & text

Heading one

Heading two

Heading three

Body text — the quick brown fox jumps over the lazy dog. A link sits inline.

00:12:04.128 CH04 • 48kHz

Shortcut: Ctrl + S to save, Esc to close. 12345 a themed function-key row.

Transport & instruments

01:24:07tc Armed

Output level

48kHz -6dB

Buttons

htmx pending (.htmx-request):

.progress-stack, .vr, .figure, .img-thumbnail:

InboxSentDrafts

Hills under a yellow sun — A caption for the image.

Position helpers: .sticky-top / .sticky-bottom pin to the scroller, .fixed-top / .fixed-bottom to the viewport.

Scroll this box: the bar stays at the top while the rest moves. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Icon pack

assets/icons/icons.svg — one generic outline set, colored by inheriting currentColor. Most themes reskin it through --icon-stroke-width / --icon-fill; a few (windows95, teletext, matrix, winxp-luna, lcars, nokia-3310) also ship real per-icon overrides in themes/<slug>/icons.svg, merged at build time into dist/icons/<slug>.svg — any icon a theme doesn't override still falls back to the generic shape. JS swaps this page's icons to the selected theme's merged sprite; the hrefs below are the pre-JS fallback. See docs/branding-guide.md and CONTRACT.md "Icon system".

Icon buttons

Form controls

Text input A hint about this field.

Select

Textarea

Checkbox

Notifications

Email alerts SMS alerts

Invalid input Enter a number between 1 and 99.

aria-invalid select

Sizes

Readonly / mirror

ArmArmed MuteUnmute MuteUnmute 00:00 14:30

-6dB

Name	Len
Take 1	00:12
Take 2	00:31

Drop a file, or click to browse.

Auto-split at 2 GB Avoids FAT32 limits

Mirror to secondary disk

Surfaces

Panel header

A generic pane.

A lighter-weight card.

Table

Name	Status	Elapsed
Track 01	Connected	00:12:04
Track 02	Pending	00:03:51
Track 03	Disconnected	00:00:00
Track 04	Idle	00:41:17

Navigation

Badges, progress & status

Default Accent Danger Success Warning

AB CD EF

Feedback

Heads up — this is informational.

Saved successfully.

Disk space is low.

Failed to connect.

Saved.

Running low on space.

Something broke.

1,204 Plays today ↑ 12%

00:00:01Session started.

00:00:02Handshake ok.

00:00:07Signal near clip.

00:00:09Dropped frame.

Empty, loading & disclosure

∅ No results Try a different filter.

Advanced options

Extra settings live here.

Divider above; vertical divider inline.

Drawer, input groups & lists

48

Input group: unit addon + attached button share one border.

Take 04 — selected
Take 06 off

16:9 video box

A single-line session title that never wraps, however long it gets.

A two-line summary: this paragraph is deliberately long enough to overflow, so the clamp cuts it off instead of pushing the layout down.

Divided row one Divided row two Divided row three

Session 12 Whole card is one link

Drawer docks to the inline-end edge; .is-start docks inline-start.

Conversation, rows & charts (v4.1)

Today

AT

Ava Thompson 09:41

Is the export fix live yet?

SM

Sam Morgan 09:45

Live. Notes attached.

release-notes.pdf88 KB

Leo is typing…

Can't export invoices as CSV#4821 · AvaPending
Login loop on mobile app#4802 · SamAnswered

When does the keynote start?12 votesSpotlight
Will slides be shared?8 votesAnswered
Is there a coffee break?3 votes

Rod bank D62%

Retention

93%

Coolant

Feed

Diesel

Source	Main	Mon A
Kick	Kick to main	Kick to Mon A
Vocal	Vocal to main	Vocal to Mon A

Run the show without the panic.

A .hero centres a heading, its lede and the calls to action.

Simple pricing

A .band is a full-width page section; .is-tinted paints it.

Solo

$0

1 show
Offline sync

Company

$49/mo

Unlimited shows
Offline sync

.thread/.message (.is-own), .thread-divider, .typing, .attachment, two-line .list-item, .bar-chart, .value-row, .meter-bank, .table.is-matrix, .toolbar.is-plain, .hero, .band, .price, .feature-list, plus the .push, .columns and .is-auto helpers.

Carousel, scrollspy & collapsing nav — no JS

Slide one — swipe, arrow-key, or use the dots.

Slide two — plain anchors, zero script.

Slide three — snap-stop keeps one slide per rest.

Install — click a nav link: smooth-scrolls here and the section becomes :target.

Config — map it with one app-side rule per section (see CONTRACT.md), or .is-active from an observer.

Run — sticky nav, offset and link styling are core.

Collapsing nav: hamburger below 720px, full bar above — native <details>, no script.

Window pattern — min/max, maximize, minimize, drag

Restore Uploads