The Marble Shrine: Style Guide

One button, four modifiers. Square corners (--radius-btn), uppercase Spectral, accent-driven. --primary fills, --ghost outlines in the hairline color, --sm compacts. Every call-to-action on the site is this class.

Compact circular actions for in-context toggles. The mark is inline SVG inking currentColor, the same icon set the favorite button and audio player use. Accent on the active state.

Destructive actions outline in --danger and fill on hover. Reserved for irreversible operations (delete account), inside a hairline "danger zone" section.

A pair (or few) of buttons sharing a border; the active one fills accent. Used for grid/table views and the profile chart scale toggle.

Page-background fill, hairline border, card radius, font: inherit (Spectral). Focus rings the accent; aria-invalid rings --danger. One shared class (src/styles/forms.css) replaces the per-page field CSS the auth and contact pages had grown.

Same field treatment, vertically resizable, min-height floor.

Native select, same field treatment. Drives the catalog sort and facet dropdowns.

Label, control, and a help or error line stacked. The label is the eyebrow treatment; the error is --danger with role="alert". Pairs with aria-invalid on the input.

Pill-shaped toggle with a live count. Active uses --accent-soft; tracking tightens to --track-chip at this size.

Custom box on the site's field language: hairline border, accent fill + checkmark when checked, --accent-soft focus ring. Used for the shows filter facets and the contact form.

Same treatment, round, filled-dot when selected. Used for the account-merge picker.

An on/off toggle built on a real checkbox (accessible by default). The track fills --accent-soft and the knob slides to accent when on. For binary settings where a chip toggle would read as a filter.

Themed track and thumb. The audio player scrubber uses the lighter accent-color version; this is the fuller styled slider for settings-style controls.

The standard elevated surface: --bg-elev, hairline, card radius, elevate-on-hover. Renders an <a> when given an href, else a <div>.

Small rounded status/source tag with three variants. Jump links, format tags, verify chips.

Account status on the profile page. Admin fills accent; subscriber uses accent-soft; free is muted.

The one small uppercase label: --fs-2xs with --track-label. Sits above titles.

Section heading with an optional right-aligned meta slot for chips or counts.

The one responsive tile/card grid, with an overflow guard and a two-column mobile floor. Pages set --grid-min/--grid-gap.

Uppercase tracked heads, hairline row rules.

Progressive-enhancement disclosure, no JS. Chevron rotates on open.

Quiet muted trail; current page un-linked. Emits matching JSON-LD.

role="tablist" of buttons; the active tab fills accent and carries a count. Drives the show/era media panels and the player's recording-source switch.

Chronological pager on show and album pages: direction eyebrow over a descriptive label.

In-page navigation reuses the Pill primitive as anchor links.

Dashed hairline frame, quiet copy, always a contribution link. The archive's "help us fill this in" moment.

Pill track, accent fill, animated width. The fundraising goal on the support page.

The one place fixed, non-theme colors are allowed. Each encodes a recording's source lineage.

Accent left-rule callout for the recurring support ask.