Färgfabriken digital design system

Style guide

En samlad visuell referens för prototypen: färger, typografi, komponenter och ett nytt navigationskoncept med mega dropdowns.

Öppna prototyp Se navigation

Principer

Designriktningen ska bära Färgfabrikens roll som konsthall, plats och programmaskin.

01

Platsen först

Färgfabriken ska kännas som en fysisk konsthall i rörelse: bild, rum, program och Lövholmen ska vara närvarande redan i första vyn.

02

Programmet nära

Besökaren ska snabbt förstå vad som visas nu, vad som händer kommande dagar och hur man tar sig dit.

03

Redaktionellt, inte generiskt

Layouten får vara tydlig och praktisk men ska ha nerv: stora titlar, hårda linjer, riktiga bilder och oväntade accentytor.

04

Modulärt för WordPress

Varje mönster ska kunna översättas till template parts, block patterns eller ACF-block utan att låsa implementationen.

Style guiden är tänkt som SSOT för prototypens återkommande moduler. Nya sididéer bör först komponeras av dessa mönster.

Design Tokens

En stram bas med få färger, tydliga kontraster och accentytor som kan bära kampanj och status.

Ink
#111111
Text, linjer och mörka ytor

Paper
#f7f4ee
Primär bakgrund

Paper soft
#fffaf1
Kort och navigationspaneler

Acid
#d7ff38
Status, markerade val och CTA

Red
#e64c36
Nyhetsbrev och starka kampanjytor

Sky
#b9d8ff
Besöksinformation och lugn kontrast

Maxbredd 1480px

Sidorna får vara breda och redaktionella, men innehållet ska fortfarande linjera.

Linje 1px #111

Hårda grafiska gränser bygger igenkänning och hjälper scanningen.

Radius 0-8px

Färgfabriken ska kännas mer affisch och rum än app-kort.

Grid gap 1px / 1.25rem

Täta kortgrids kan använda 1px-gap, större sektioner får mer luft.

Typografi

Iosevka Etoile bär rubriker, brödtext, navigation, knappar och formulär. FF Gothic används sparsamt som displaytypsnitt där identiteten behöver tryckas upp.

Display

Att slå rot

clamp(4rem, 9vw, 9rem)
Sektion

På gång

clamp(2rem, 4vw, 4.8rem)
Korttitel

De underjordiskas karneval

clamp(1.45rem, 2vw, 2.2rem)
Ingress

En startsida som låter konsthallen, programmet och platsen ta mer plats direkt.

1.05rem-1.35rem
Metadata

18 april - 18 juni

0.78rem uppercase

Komponenter

Grundkomponenter för länkar, knappar, filter, programkort, fakta och redaktionella puffar.

Textlänk Primär knapp Sekundär knapp

Innehållsmoduler

Bildmodulerna ska visa verklig plats, verk, människor och program. Undvik generiska illustrationer.

Färgfabrikens kafé

Huset

Kafé, butik och platsen runt programmet

Startsidan ska kunna växla mellan starka programytor och praktiska vardagsingångar utan att tappa identiteten.

Läs mer
Konsthallen11-18

Dagens öppettider nära beslutet.

Kaféet11-16

Separat status för husets vardagsfunktion.

AdressLövholmsbrinken 1

Kort adress i fakta, längre vägbeskrivning i besökssida.

Formulär

Formulär ska vara få, tydliga och fristående. Labels visas alltid.

Motion

Effekterna ska stödja orientering och känsla. Navigation och text får aldrig bli långsamma.

Hover

Länkar får tydlig underline. Bilder kan skala subtilt, men texten ska inte flytta sig.

Paneler

Mega panels ska öppna direkt vid klick. Undvik fördröjda animationer i navigation.

Reduced motion

Eventuell scrollreveal ska respektera prefers-reduced-motion och falla tillbaka till statiskt läge.

WordPress-mappning

Prototypen är frikopplad, men mönstren är valda för att kunna flyttas in i befintligt child theme.

Header + mega panelsTemplate part med nav-data från WP-menyer eller ACF Options.
ProgramkortWP_Query mot events/utställningar, fallback till manuell kurering.
BesöksfaktaACF Options för öppettider, adress, avvikelser och CTA.
Style guideIntern dokumentationssida eller låst preview i stagingmiljö.