Polish typography, button states, and login screen

Applies the display typeface (already used for small section labels)
consistently to every major heading — page titles, hero titles on
album/playlist/mix pages, the home hero, the sidebar/mobile wordmark, and
empty-state titles — instead of only the smaller ones, fixing an
inconsistent visual hierarchy. Also fixes a couple of real bugs found along
the way: Input had a focus border color with no border width to show it,
Button/IconButton had no focus-visible ring at all, and SectionHeading's
letter-spacing only applied when it had an actions slot.

Button's secondary/subtle variants drop their harsh border and flat grey
hover for a softer accent-tinted wash. The accent (and the per-track
extracted accent) is desaturated for a calmer, more pastel feel without
touching lightness, so on-accent text contrast is unaffected.

The login screen gets the same treatment plus a subtle ambient glow (reusing
the home page's existing accent-gradient technique) and a fluid,
viewport-scaled headline instead of a few fixed breakpoints, so it fills the
available space on wide screens instead of staying pinned to one size.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

This commit is contained in:

Admin

2026-09-10 09:56:16 +02:00

co-authored by

Claude Sonnet 5

parent 45f0a94758

commit 3feef07cbf

18 changed files with 42 additions and 30 deletions

									
										web-player/src/lib/components/ui/PageHeader.svelte
									
		+1
		-1
	
												View File
												
				@@ -13,7 +13,7 @@

				<div class="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between {klass}">

					<div class="min-w-0">

						<h1 class="text-2xl font-semibold tracking-tight text-fg sm:text-4xl">{title}</h1>

						<h1 class="font-display text-2xl font-semibold tracking-tight text-fg sm:text-4xl">{title}</h1>

						{#if subtitle}

							<p class="mt-2 text-sm text-fg-2 sm:text-base">{subtitle}</p>

						{/if}