# Liljevalchs Prototyp 2026 - Designriktning

## Grundprincip

Det här är inte ett redesignprojekt. Prototypen ska använda Liljevalchs befintliga visuella uttryck från liljevalchs.se och bara avvika där vi medvetet testar ny navigationsstruktur eller små, beslutade förbättringar.

Formmässig utgångspunkt:

- Nuvarande Liljevalchs.se är facit för typografi, logotypbehandling, färgkänsla, grundlayout, bildhantering, länkar, knappar och innehållskomponenter.
- Navigationen är det primära testområdet.
- När en detalj inte diskuteras aktivt ska prototypen falla tillbaka till nuvarande sajt, inte hitta på ett nytt uttryck.

## Medvetna testytor

Följande får avvika från nuvarande sajt i prototypen:

- Variant 1: befintlig horisontell navigation med förbättrade dropdowns/mega-dropdowns.
- Variant 2: avskalad topbar med en samlad megameny inspirerad av Nordiska museet, men anpassad till Liljevalchs uttryck.
- Variant 3: "Liljevalchs 2027", en medvetet mer offensiv framtidsvision som testar internationell toppklass med redaktionell startsida, fullskärmsmeny, stor bildnärvaro och eleganta scroll-/reveal-animationer.
- Mobil navigation: hamburgare och menystruktur får testas innan WordPress-implementation.
- Små UI-förfiningar som gör befintligt uttryck tydligare, t.ex. ikonbehandling, hover states och bättre hierarki.

Följande ska inte ändras utan separat beslut:

- Typografisk grundkänsla.
- Logotyp och gröna prickar.
- Färgskala.
- Sidornas allmänna layoutkaraktär.
- Innehållskomponenternas basuttryck.
- Tonalitet i rubriker, länkar och etiketter.

## Typografi

Primär typografi är Chronicle Text G3, samma grund som nuvarande liljevalchs.se använder via Typography.com och lokala Chronicle Text G3-filer.

Riktlinjer:

- Rubriker ska vara stora, serifbaserade och lugna, inte hårt displaydesignade.
- Brödtext ska kännas redaktionell och läsbar.
- Versala etiketter används sparsamt för metadata, inte som generell navigationsstil.
- Letter spacing ska vara diskret. Undvik kraftigt spärrad text utom på små etiketter där nuvarande sajt redan gör det.
- Navigation ska kännas som Liljevalchs, inte som en ny produktdesign.

### Begränsad typografisk skala

Prototypen ska använda få, återkommande typografiska grader. Nya komponenter ska i första hand välja en av nivåerna nedan och inte introducera egna mellanlägen.

| Nivå | Användning | Storlek |
| --- | --- | --- |
| Display | Hero-rubrik och mycket stora redaktionella huvudrubriker | `clamp(3rem, 6vw, 5.5rem)` |
| H1 | Sidrubrik / huvudrubrik på undersida | `clamp(2.5rem, 5vw, 4.5rem)` |
| H2 | Sektionsrubrik, större kortgrupp | `clamp(2rem, 3.5vw, 3rem)` |
| H3 | Kort-/artikelrubrik och större menygrupp | `clamp(1.45rem, 2.2vw, 2rem)` |
| Ingress | Inledande brödtext / redaktionell sammanfattning | `clamp(1.35rem, 2.2vw, 2rem)` |
| Brödtext | Standardtext | `1rem` till `1.125rem` |
| Liten text | Metadata, datum, hjälptext | `.85rem` till `.95rem` |
| Etikett | Små versala etiketter | `.72rem` till `.78rem` |

Undantag ska vara avsiktliga och lätta att motivera. Exempel: hero-text över bild kan behöva egen responsiv justering, men ska fortfarande kännas som en variant av Display/H1. Megamenyer ska använda H2/H3 + brödtextnivåer, inte egna displaygrader.

## Färger

Basfärger i prototypen ska ligga nära nuvarande uttryck:

- Svart/bläck för text: `#1a1a1a`
- Varm pappersbakgrund: `#f4f1ea`
- Ljus sekundär bakgrund: `#ebe7dd`
- Svart accent för länkar, knappar, linjer, datum och status: `#000000`
- Grön logotypprick och diskret signal: `#63d05a`
- Tunna linjer: `rgba(26,26,26,.14)`

Färgerna ska användas återhållsamt. Nuvarande liljevalchs.se är i grunden svart/vit med starka bildytor; rosa/gröna puffytor kan förekomma där de speglar befintliga kampanj- eller innehållsmoduler, men rött ska inte användas som generell systemaccent.

## Logotyp

Använd original-SVG från Liljevalchs:

`https://liljevalchs.se/wp-content/uploads/2021/03/liljevalchs_2.svg`

Regler:

- Svart logotyp på ljus bakgrund.
- Vit logotyp över hero eller mörk/bildbakgrund.
- De gröna prickarna ska alltid finnas kvar och ligga enligt originalets SVG-koordinater.
- Logotypstorlek ska vara konsekvent inom samma vy. I variant 2 ska loggan vara lika stor i header och öppnad megameny.

## Ikoner

Ikoner ska vara enkla linjeikoner och kännas integrerade med typografin.

Standardikoner i prototypen:

- Varukorg: ikon, visa endast siffra om något finns i varukorgen.
- Sök: ikon.
- Språk: globikon med språkval under hover/fokus.
- Meny: hamburgare utan text i variant 2.
- Stäng: texten "Stäng" plus kryss i megameny.

Ikoner ska inte ersätta tydliga textlänkar där text ger bättre orientering, men i trånga headerlägen är ikon-only rätt.

## Länkar och knappar

Länkar:

- Textlänkar är primär interaktion.
- Hover ska vara subtilt men tydligt, oftast accentfärg eller understrykning.
- Navigation över hero är vit och blir svart när headern ligger på vit bakgrund.

Knappar:

- Använd knappar bara för tydliga handlingar eller kontroller.
- Outline-knappar får användas där nuvarande sajt har CTA-liknande uttryck.
- Undvik moderna app-knappar med kraftiga rundningar om de inte redan finns i nuvarande uttryck.

## Bilder

Bilder ska bära mycket av Liljevalchs-känslan.

Regler:

- Använd riktiga Liljevalchs-bilder från nuvarande sajt i prototypen.
- Undvik generiska stockbilder.
- Kort och listor ska ha stabila bildproportioner.
- Hero ska visa faktisk utställnings-/rumskänsla, inte dekorativ gradientgrafik.

## Komponenter som ska spegla nuvarande sajt

Style guide-sidan visar grundexempel för:

- Rubriknivåer.
- Brödtext och ingress.
- Metadata/datum.
- Textlänkar.
- Knappar.
- Ikonknappar.
- Listor.
- Cards för utställning/program/nyhet.
- Accordion/details.
- Färger.
- Header-/navigationsprinciper.

## Prototypsidor

Prototypen ska inte återskapa hela liljevalchs.se. Den ska visa de sidtyper som behövs för att kunna bedöma navigation, hierarki och känsla.

Rekommenderad uppsättning:

- Startsida - visar hero, aktuell utställning, "På gång", puffar, nyheter och skolväg.
- Besök - praktisk informationssida med öppettider, entré, hitta hit, butik, mat och tillgänglighet.
- Utställningar - listvy för pågående och kommande utställningar.
- Program / På gång - kalender/listvy för evenemang och visningar.
- Enskild utställning/evenemang - detaljsida med längre redaktionell text, plats, öppettider och relaterat innehåll.
- Barn och unga - sektionssida med skola, skaparverkstad, Ung Vårsalong och barnprogram.
- Om - samlingssida med kort presentation och länkar till undersidor som Aktuellt, Kontakt, Medarbetare och Liljevalchs+.
- Press - arbets-/materialvy med pressinformation och presskort.

Butik/WooCommerce behöver främst synas i navigationen och varukorgen. En full produktsida behövs inte för navigationsbeslutet om inte köpresan blir en separat fråga.

## Arbetsregel

Vid varje ny UI-ändring:

1. Kontrollera först om samma detalj redan finns på nuvarande liljevalchs.se.
2. Om den finns: använd samma uttryck.
3. Om den saknas: gör minsta möjliga tillägg som passar Liljevalchs.
4. Om ändringen är en medveten avvikelse: dokumentera varför i PR eller i detta dokument.

## Visuell referens

Se `style-guide.html` för en klickbar intern referenssida.