Konsten först
Bilder och titlar ska bära upplevelsen. UI ska stödja orientering, inte dominera.
Liljevalchs digital design system
Style guide
En samlad komponentkatalog för navigationsprototypen och framtida WordPress-implementation. Den ska visa hur Liljevalchs kan kännas redaktionellt, tydligt och samtida utan att tappa konsthallsidentiteten.
Principer
Komponenterna är byggda för prototypen men ska vara enkla att översätta till WordPress/Gutenberg.
Redaktionell rytm
Långa sidor får kännas kuraterade: stora bildytor, tydliga datum och lugna övergångar.
Praktiskt nära
Öppettider, entré, hitta hit och program ska alltid vara nära besökarens beslut.
Motion med värdighet
Scrollanimationer ska avslöja och fördjupa. De får aldrig göra text svårläst.
Style guiden är SSOT för återkommande moduler. När en ny sida byggs ska komponenterna här vara förstahandsvalet innan nya mönster introduceras.
Design tokens
Färger, spacing och grundformer som ska återkomma konsekvent.
Ink
#1a1a1a
Text och mörka ytor
Warm paper
#f4f1ea
Redaktionell bakgrund
Paper 2
#ebe7dd
Sekundära ytor
Accent
#000000
Länkar, linjer, knappar, status
Logo green
#63d05a
Logotypprickar och diskret signal
Puff green
#e0ffdd
Befintlig puff-/kampanjyta
Stora redaktionella sidor.
Kort ska kännas redaktionella, inte appiga.
Primär separator för listor, tabeller och menyer.
Typografi
Chronicle Text G3 / Chronicle SSm. Få grader, stora rubriker och lugn brödtext.
When We See Us
clamp(3rem, 6vw, 5.5rem)Besök oss
clamp(2.5rem, 5vw, 4.5rem)På gång
clamp(2rem, 3.5vw, 3rem)Guidad visning
clamp(1.45rem, 2.2vw, 2rem)Välkommen till Liljevalchs, Stockholms största och äldsta konsthall.
clamp(1.35rem, 2.2vw, 2rem)Texten ska vara redaktionell, lugn och läsbar snarare än produktmässig. Radlängden bör hållas under kontroll på breda ytor.
1rem-1.125rem.85rem-.95remUtställning
.72rem-.78remNavigation
Två alternativ i kunddialogen: A · traditionell topbar med megapaneler och B · samlad megameny. Båda delar samma menystruktur.
Länkar, knappar och ikoner
Textlänkar är primära. Knappar används för tydliga handlingar.
Textlänk
För läs mer, sekundära vägar och redaktionella länkar i text.
Outline-knapp
För bokning, biljett, prenumeration eller tydligt kommando.
Ikonknapp
För trånga headerlägen: sök, varukorg, meny och språk.
Kortgrid
Standardutförandet för alla kortgriddar — används på samtliga sidor i prototypen.
Kortgrid · Startsidans kort
<?= component_current_grid($cards) ?>Liggande bild, titel, datumintervall och etikettrad med kategori + plats. Speglar dagens liljevalchs.se och används på alla sidor i prototypen.
When We See Us
10 oktober 2025–30 augusti
Pågående utställning · Liljevalchs+
Ylva Snöfrid, Musernas hus
21 juni–10 januari 2027
Kommande utställning · Konsthallen
Sara-Vide Ericson, DRIFT
13 november–28 februari 2027
Kommande utställning · Konsthallen
Megapaneler
Dropdown-panelen ur variant A, renderad statiskt. Kolumnvis länkflöde (flow-2/3/4), CTA i vänsterspalt och bildkort till höger.
Megapanel 1 · Med bildkort
<?= component_mega_panel($megaPanels['utstallningar']) ?>Tre zoner: rubrik + CTA, grupperade länkspalter och ett redaktionellt bildkort. Samma komponent driver alla åtta paneler i prototypen.
Media och redaktionella moduler
Bilder ska vara riktiga Liljevalchs-bilder och bära känslan.
Besök
Boka en guidad visning
Upplev konsten tillsammans. Bild och text-modulen används för större vägval, skolspår och redaktionella puffar.
Läs mer
Titta på Vårsalongsfilmen
Film-puff för redaktionella videor eller dokumentation från en utställning.
Kalendarium och besöksdata
Evenemang visas som kort (Kortgrid, enligt Figma-skissen), kompletterat med tabeller och faktarutor för besöksdata.
Eventgrid · Kort i kalendariet
<?= component_current_grid($eventCards) ?>Evenemang visas som kort med tid och kategori · plats — samma Kortgrid som på alla andra sidor.
Dagliga introduktioner
Visning · Ingår i entrén
Workshop och högläsning
Barn och unga · Skaparverkstaden
Invigning: Ylva Snöfrid, Musernas hus
Program · Konsthallen
| Måndag | 11-17 |
|---|---|
| Tisdag och torsdag | 11-20 |
| Onsdag, fredag-söndag | 11-17 |
| Ordinarie | 165 kr |
|---|---|
| Pensionär/student | 135 kr |
| Under 18 år | Fri entré |
Stora fakta · Öppettider och entré
<?= component_stat_grid($stats) ?>Etikett, stort värde och kompletterande rader — enligt Figma-skissens besökssida. | i datat blir radbrytning.
Öppet idag11–17
Mån, ons–sön 11–17 · Tis & tors 11–20
Dagliga introduktioner tis–fre kl 12 och 15 — ingår i entrén.
Entrépris, ordinarie165 kr
Fri entré under 18 år och måndagar.
Pensionär och student 135 kr.
Info-kort · Hårlinje
<?= component_info_grid($items) ?>Transparenta kort med tunn topplinje i fyra kolumner. Används för Hitta hit, Bra att veta och Tillgänglighet på besökssidan.
Kollektivtrafik
Spårvagn 7 eller buss 67 till Liljevalchs/Gröna Lund. Färja från Slussen till Allmänna Gränd.
Garderob
Låsbara skåp en trappa ned. Golven tål inte broddar eller gångstavar.
Hörsel
Hörsystem med lurar och T-slinga finns att tillgå.
Husdjur
Hundar och andra husdjur är inte tillåtna i konsthallen.
Filterchips
Pill-formade kategorifilter — används ovanför Eventgriden på Evenemang.
Alla evenemangVisningarSamtal och programBarn och unga
Formulär, feedback och FAQ
Formulär ska kännas enkla och redaktionella, med tydliga labels och stabila kontroller.
FAQ · Frågekort
<?= component_faq($items) ?>Enligt liljevalchs.se/om/vanliga-fragor/ (Spectra FAQ-blocket): vita kort med 1px ram, plusikon till höger som blir kryss vid öppning. Byggd på details/summary.
Besök oss
Öppettider, entrépriser, hitta hit och tips inför besöket.
Barn och unga
Skola, skaparverkstad och program för yngre besökare.
Press
Pressbilder, texter, villkor och kontakt ska vara lätt åtkomligt.
Framtidsspår · 2027-komponenter
Mönster från den vilande 2027-visionen (nås via ?v=3): större bildnärvaro, mörka ytor, live-besöksdata och redaktionella menyer. Sparade som inspiration för kommande etapper.
Liljevalchs 2027
Konsten först. Besöket nära.
Hero-modulen kan bära bild, titel, program och praktisk information i samma första vy.
Djurgårdsvägen 60
Till 30 augusti 2026
Ingår i entré
Pågående
When We See Us
Ett sekel av svart figurativt måleri.
Kommande
Ylva Snöfrid
Musernas hus öppnar 21 juni.
Motion
Effekterna ska skapa förväntan och djup, inte störa orientering.
Mask + translate
Text och kort får komma in med mjuk mask. Ingen blur på läsbar text.
Bildrörelse
Bakgrunder och bilder får röra sig långsammare än scroll för rymd.
Scrollindikator
Subtil linje på framtidsspåret (?v=3) för att visa att sidan är en berättelse.
Reduced motion
All motion ska falla tillbaka till statiskt läge med prefers-reduced-motion.