Web app components

Every user-facing element type in the Qazana Strata language — themeable, framework-agnostic, token-driven. Syne is the signature face (brand + this title only); everything else is DM Sans, with system-mono for data and Font Awesome for icons.

Foundations

Brand/semantic tokens are overridden per app; neutral surfaces rarely change. Alpha tints use the channel form rgb(var(--primary-rgb) / .12) so one override re-tints everything.
bg--bg
surface--surface
surface-2--surface-2
primary--primary
primary-bright--primary-bright
danger--danger
warning--warning
accent--accent
info--info
text#f0f0f0
muted#8c8c8c
Radius scale
sm · 6 base · 8 lg · 12 pill circular
Elevation
flat sm base lg
Spacing scale (4 · 8 · 12 · 16 · 24 · 32)
4 8 12 16 24 32
Motion
ease cubic-bezier(.22,1,.36,1) · durations 120–300ms · all respect prefers-reduced-motion

Typography

Syne for large headings only · DM Sans for everything else · system-mono for data.
display / Syne 800Désert Dunes
h2 / DM Sans 700Section heading
body / DM Sans 400The quick brown fox jumps over the lazy dog.
mono / datav2.4.1 · 99.98% · 1,284 ms
kbd⌘ V to paste

Icons

Font Awesome 6 (matches the app). Use at the surrounding text color; brand glyphs for streaming services.

Buttons

Variants
Waiting states
Button group · button group (joined)

Forms — full coverage

Clear resting affordance; strong high-contrast focus (green-bright border + ring + subtle bg lift); minimal motion.
Field anatomy & states
Shown on the public share page.
Enter a valid email.
Available
Inputs with add-ons & the URL paste
https://.example.com
Medium strength
Textarea · select · searchable select · multiselect
0 / 140
Choice controls
Numeric · tags · code · upload
60%
house 2024
Drop a file here or browse
Netscape cookie format, up to 1 MB
Date picker · dual-thumb range
Inline calendar
Composed form

Checklist & setup

Tickable checklist — pure-CSS done state, reuses .check
Setup card — progress + per-row actions

Finish setting up

2 of 4 complete

  • Create your accountAll set.
  • Verify your emailAll set.
  • Invite your teamAdd teammates to collaborate.
    Invite
  • Connect a data sourceSync from an existing tool.
    Connect

Badges, tags & status

Pills
VerifiedUncertain GapExperimentalTransition
Tier / role · status dots
FreeProUnlimitedAdmin Healthy Degraded Down

Avatars

FFF G ABC+9

Cards & panels

Feature · plan · pack

Every track, timestamped

Paste a mix, get the full setlist with jump-to timecodes.

Popular
Pro
$14.99/mo
  • 50 credits / month
  • Priority processing
15
credits · $14.99
Bare stacked cards (no .l-stack wrapper) self-space
First card

Sibling .cards with no layout wrapper no longer collapse together.

Second card

A .card + .card rule adds the spacing; wrapping in .l-stack/.l-grid neutralizes it so you never double up.

Third card

Prefer the layout primitives — this is just a safety net.

Cost preview (before spending a credit)
Boiler Room — Night Two
1:42:08 · ~5 segments
Cost1 credit
Balance after46

Graphs & charts

SVG, dependency-free, themed. Line/area, donut, bar, inline sparklines.

Analyses — 14 days

▲ 18%

Users by tier

5.2k
Free · 88% Pro · 9% Unlimited · 3%
Bar chart · sparklines

Songs identified / day

Revenue +12% Churn +3%
Multi-series line · stacked bars

Success vs failure

Success Failure

Spend by source / day

Recognition Proxy AI
Horizontal / ranking · gauge

Top providers (success)

Engine A82%
Engine B51%
Engine C34%
Engine D74%

Uptime (30d)

99.2%
Heatmap · candlestick

Activity (70 days)

KES / USD

Stats & data display

Stat chips (count-up)
9
found
42:10
scanned
62%
done
Stat cards (delta / freshness)
5,210
Total users
+128 this week
18,402
Analyses
+212 today
41 GB
Proxy left
updated 12s ago
3
Open alerts
Key–value / detail list
GenreMelodic Techno
BPM · key120 · A min
Released2017
Seen in72 tracklists
Cover thumbnails (sizes)

Data table

Sortable headers (click), select-all + row selection, toolbar.
3 rows
Email ▲Tier ▲Analyses ▲Joined ▲
ada@lovelace.ioPro612026-03-02
grace@hopper.devFree42026-05-19
alan@turing.ukUnlimited3182026-01-08

Advanced table

Global filter, expandable detail rows, sticky header (scroll the body).
EmailTierJoined
ada@lovelace.ioPro2026-03-02
grace@hopper.devFree2026-05-19
alan@turing.ukUnlimited2026-01-08

Tree & form validation

Tree view (arrows to navigate, →/← expand/collapse)
  • src
    • kits
      • app.css
      • site.css
    • qazana.js
Validated form (submit to check)

Context menu

Right-click the zone for a context menu with grouped, collapsible actions and a destructive item.
Right-click anywhere in here

Loading & progress states

Spinners · progress · indeterminate · radial
small default large 72%
Determinate
Indeterminate
Skeleton loaders
Activity log (live)
[42:02] segment 38:00–38:30 → match Stephan Bodzin – Boavista (90%)
[42:05] segment 38:30–39:00 → no match, queueing for gap retry
[42:07] segment 39:00–39:30 → match Mind Against – Walking Away (88%)
[42:09] provider busy — falling back to next engine
[42:10] segment 39:30–40:00 → match Massano – The Feeling (93%)
[42:11] scanning 40:00–40:30
Section loading state
Loading your analyses…
Step tracker
Upload Analyze 3 Review 4 Export
Upload list
sunset-set-2026.wav
48.2 MB · uploaded
warehouse-b2b-final-master.mp3
31.7 MB · 64%

Feedback

Toasts
Playlist created

14 tracks added to Spotify.

Export failed

Reconnect Spotify and try again.

Low credits

1 credit left this month.

Analysis deleted
Banner · session · empty
Your session expired. Reload to sign in again.

No analyses yet

Paste a mix to get your first tracklist.
Bare alerts (no wrapper) keep their own spacing
Info
Notice blocks carry their own margin-block, so a bare one never butts against neighbouring elements.
Warning
Margins collapse between siblings; wrapping in .l-stack neutralizes it.

Behaviors

Confirm before action · read-more clamp · dismissible (remembered) · relative time
Delete analysis Routed through an accessible dialog, not the blocking native confirm().

Strata ships framework-agnostic, data-attribute-driven behaviors so the same vanilla markup works in any stack. This paragraph is clamped to two lines; the toggle below expands it. Read-more keeps long descriptions, changelog notes, and review excerpts compact without hiding anything from assistive tech, since the full text stays in the DOM and only the visual height is capped.

Info
Dismiss me — I'll stay gone on reload (remembered in storage by key).

Last analysed .

Overlays

Interactive dialog (focus-trap · scroll-lock · Esc · click-outside)
Popover · popconfirm · drawer
Command palette (⌘K · search · arrow keys)
Modals (by intent)
Delete account
Permanently deletes your account and private analyses. Type DELETE to confirm.
Name your playlist
Done
Your playlist is live on Spotify.
Heads up
That used your last credit. Top up to keep identifying mixes.
Sheet (extends dialog — side & bottom)
Filters
Refine by genre, BPM, confidence — complementary controls that slide in without leaving the page.
Track detail
Genre · year · BPM · seen in N tracklists. Slides up over the list on mobile.
Tooltips (positions) — compact attr-text
top bottom right left
Card variant data-tip-card — elevated, multi-line, wraps
card · bottom card · top
Rich popover .tip › .tip-pop — arbitrary markup (rows, divider, note)
Pro $210/yr Pro plan$210 Total$210/year Save $126 vs. 12 single-event licenses
Menu · interactive tabs · single-open accordion · breadcrumbs · divider
Connect Spotify My analyses
Sign out
Home/Library/Désert Dunes
14 identified tracks, in mix order.
How is confidence calculated?
It's the match strength reported for each identified segment.
Why are some segments gaps?
No engine returned a confident match for that stretch.
Can I edit a track?
Yes — fix a title or tag a gap; it improves future results.
or

Multi-step wizard

For multi-stage flows (onboarding, connect-and-export). Click Next / Back.
1Paste URL
2Review
3Export
Step 1 — paste a YouTube DJ mix URL and confirm the credit cost.

More controls

Accessible form field (label + control + help)
Shown on the public share page.
Grouped inputs
@
credits
Toggle group (multi-select)
Stars & rating
0/5 4.0 · read-only
Label · separator
Confidence *Genre optional
or
Hover card
@tale_of_us T Tale Of Us Melodic techno duo · 24 tracks in the Qazana catalog · seen in 312 mixes.
Live toast (click to trigger)
Toast positions (data-toast-pos)

Shared (cross-app)

General components for reuse across products — built on the same tokens.
QR code · pairing code
A7K92F
Color picker
Drag to reorder
Setsa — Âme00:00
Saraya — Bedouin06:32
Time — Tale Of Us28:05
Amount / currency input · currency picker
KES
Quota / usage meter
Storage2.1 / 5 GB
Credits41 / 50
Disk86 / 90 GB
Activity timeline (direction-coded)
Salary+120,000Jun 1
Monthly inflow
Rent−45,000Jun 3
Transfer to savings−20,000Jun 5
Neutral · internal
Connection status
Connected Reconnecting… Offline

Credits & billing

47
credits remaining
Transactions
TodayAnalysis · Désert Dunes−147
Jun 1Monthly grant+5048

Profile & account

A
Ada L.
ada@lovelace.io
3
Spotify
Connected · frank
sk_live_8fa2…e91used 2d ago
Delete account
Permanently remove your account
Qazana Strata · component library