UI-mockups — fem stilriktningar

Statiska HTML-mockups, ej anslutna till backend. Varje stilriktning visar samma tre sidtyper: landningssida, karta och kontodashboard. Alla mockups har ett färgväljar-verktyg längst ner till höger som visar hur kommuner kan anpassa accentfärgen inom samma designsystem.

Detta är designutforskning för att ersätta dagens UI (som ärvt formspråket från den gamla, nu ersatta, webbplatsen). Klicka igenom och välj vad som känns rätt — inget av detta är kopplat till riktig data.

Midnattssol — ledande riktning ★

Ett designsystem, två lägen: ljust läge (svenskt blått/gult + Falu rött som standardaccent, byggt på Sommarljus) och mörkt läge (Aurora — glasmorfism och gradient-mesh). Klicka på soll-/månikonen i sidhuvudet för att växla. Kartsidan visar även hur olika verksamhets-verticaler (kommun/viking/cykel) kan få egna temaikoner på kartnålarna.

Nordic Noir

Mörk, teknisk och skarp. Space Grotesk/Inter, animerat rutnät, glödande accentfärg. "Cool new tech" -riktningen.

Sommarljus

Ljus, varm turistkänsla. Baloo 2/Nunito, runda former, generösa piller-knappar. "Real bright tourism" -riktningen.

Falu & Fjäll

Klassiskt svenskt och jordnära. Fraunces/Source Sans 3, falurött och granlinjer, dalahäst-ikon, återhållsam symmetri. "Super Swedish" -riktningen.

Aurora — experimentell

Glasmorfism, animerad gradient-mesh, scroll-reveal, conic-gradients och en levande fargbytesknapp via CSS @property. Visar vad modern CSS klarar av.

Bento Brutalist — experimentell

Neo-brutalism: tjocka svarta kanter, hårda skuggor utan blur, asymmetriskt bento-rutnät, roterade klistermärken och en marquee-ticker. Den andra riktningen som testar gränserna.

Vaporwave — experimentell

Synthwave-grid-horisont, chrome-typografi, scanlines och en solnedgång som aldrig rör sig.

Kurbits — experimentell

Maximalistisk svensk folkkonst: dekorativa rankor, mättade primärfärger och chunky skugg-knappar.

Newsprint — experimentell

Svart, papper och en enda djärv spaltfärg, halvtonsraster och tung Anton-typografi i tidnings-layout.

Sagokarta — experimentell

Handritad bilderboks-stil inspirerad av Dataspelsbranschens illustrerade rapportomslag: tjocka bläck-konturer, platta cel-skuggade färger och "klistermärkes"-knappar/kort som lyfter och vrider sig lekfullt vid hovring. Kartan har egna illustrerade nålar som reser sig och vrider sig när man hovrar över dem — som en levande leksakskarta från barndomen. Klicka på sol-/månikonen i sidhuvudet för att växla mellan dag och stjärnklar natt — hela den handritade scenen målas om, med tända stugfönster och tindrande stjärnor.

Norrsken — experimentell

Midnattssol, fast med mycket mer liv: ett glidande norrsken driver över bakgrunden i båda lägena, partiklar stiger genom hjälten, kort tippar i 3D och lyfts fram med scroll-reveal, siffror räknas upp, kartnålar studsar in och pulserar när de är aktiva, och menyn får en glidande understrykning. Samma designsystem, färgväljare och struktur som Midnattssol — bara betydligt mer animerat.