Färgpalett och kortsystem – Hanna Hägerland
Hanna Hägerland
Färgsystem för huvudsidorna

Pedagogisk YH
med uppdrag

Lugn, levande och tydlig färgsättning
Här ser du en kodad skiss av färgpalett och kortsystem. Tanken är att varje färg får en tydlig roll, så att sidan känns sammanhållen utan att bli platt eller rörig.
Primär knapp / CTA
Designprincip
Få färger – tydliga roller
Mörk bas för struktur, varm accent för prioritet, ljusa ytor för läsbarhet och lugn.
Färgpalett

Färger och användning

Varje färg har en tydlig funktion. Då kan du skilja mellan ingress, projektkort, citatkort och infografik utan att behöva skapa en ny färg för varje ny del.
Petrol
#1E4B58
  • Huvudbakgrund i hero och mörka band
  • Projektkort och vidarelänkar
  • Rubriker/ikoner på ljusa ytor
Sand / varm guldton
#E8D8A8
  • Framlyfta ingresskort
  • Viktiga sammanfattningar
  • Utvalda faktarutor högre upp på sidan
Ljus grön / sage
#E3EEE7
  • Citatkort
  • Repeterande innehåll med mjuk ton
  • Mjuk stödyta för arbetssätt, principer och reflektion
Neutral ljus yta
#F7F5F0
  • Infografik och processkort
  • Bakgrund för steg-för-steg-innehåll
  • Ytor som ska förklara utan att ta över
Vit
#FFFFFF
  • Basbakgrund för större delar av sidan
  • Kort med återkommande innehåll
  • Ge luft mellan starkare sektioner
Guldaccent
#C08A2E
  • Ögonbryn, små rubriker och markeringar
  • Diskreta linjer, pilar och step-indikatorer
  • Aldrig som huvudbakgrund i stora mängder
Mörk textfärg
#22333B
  • Brödtext på ljusa kort
  • Rubriker på sand, sage och ivory
  • Ger stabil kontrast utan att bli kolsvart
CTA-röd
#D94C4C
  • Primära knappar
  • Utvalda call to action
  • Inte som kortfärg – bara för handling
Kortsystem

Exempel på rätt färg för rätt innehåll

Här nedanför syns de korttyper du pratade om, med färger som skiljer funktionerna åt utan att sidan tappar lugnet.
Framlyft innehåll

Ingresskort / viktigt först

Använd den varma sandtonen för innehåll som ska fångas upp direkt: en kort introduktion, en summering eller en nyckelruta högt upp på sidan.

Ingress Sammanfattning Nyckelbudskap
Projektkort

Vidare till projekt och uppdrag

Mörk petrol används för klickbara kort som leder vidare till case, uppdrag och undersidor. Då blir det tydligt vad som är fördjupning och navigation.

Läs mer om projekt →
Citat / mjuk stödyta
“Jag börjar med vad som behöver fungera bättre. Först därefter väljer jag teknik, medier och arbetsformer.”
— Exempel på princip- eller citatkort
Infografik / förklarande innehåll

Neutral yta för modeller och lärvägar

Infografik bör få en neutral ljus bakgrund, inte en ny stark färg. Då kan du visa steg, samband och modeller utan att det känns som ännu en kortkategori.

1
Behov Vad behöver deltagarna kunna?
2
Design Mål, aktiviteter och struktur.
3
Lärmiljö Canvas, Teams eller hybrid upplägg.
4
Uppföljning Utvärdera, analysera och utveckla vidare.
Vit kortfamilj

Återkommande innehåll på vit bakgrund

Vita kort fungerar bra när du har flera återkommande block i rad. Då får du variation via ikon, rubrik och innehåll, inte genom att byta bakgrundsfärg hela tiden.
1

Utbildningsutveckling

Återkommande kort för kompetensområden, översikter och korta beskrivningar.

2

Kursdesign

Passar i rader med flera likvärdiga kort där strukturen ska kännas jämn och luftig.

3

Kvalitet & uppföljning

Vit yta ger andrum mellan mörka band, citatkort och markerade ingressytor.

Rekommenderad logik: Sand för framlyfta ingresskort, mörk petrol för projekt/vidarelänkar, ljus grön för citat och mjuka stödytor, neutral ivory för infografik och vit bakgrund för större återkommande innehåll. På så sätt blir sidan levande men fortfarande lugn.