1️⃣ Lighthouse färgpalett
Princip:
4 färgfamiljer
varje färg har klar + matt
används som linjer, parenteser och markörer
Inte som stora block.
🔵 Blå – Perspektiv / Kunskap
klar#2F80ED
matt#AFCBF6
användning:
kategorin Kunskap
citat
reflektioner
🟢 Grön – Relation / Närvaro
klar#27AE60
matt#A9DFBF
användning:
Relationer
känsla
empati
möten
🟡 Gul – Möjlighet / Kreativitet
klar#F2C94C
matt#FCE9A6
användning:
idéer
nya perspektiv
tankenötter
#EB5757
#F5B5B5
🔴 Röd – Handling / Mod
klar#EB5757
matt#F5B5B5
användning:
beslut
ansvar
förändring
2️⃣ Typografisk profil
Du behöver två typsnitt.
Ett modernt
Ett mänskligt
Rubriker
Manrope
modern
varm
luftig
Brödtext
Source Serif 4
bokkänsla
väldigt läsbar
mänsklig
Kombination
Titel
Manrope 600
Underrubriker
Manrope 500
Brödtext
Source Serif 400
3️⃣ Designspråk för berättelser
Det viktigaste här:
färg = kategori
Inte dekoration.
Berättelsekort
exempel:
│
Perspektiv, klarhet och
nya sätt att se världen
Den tunna linjen bär färgen.
Inte bakgrunden.
Reflektionsruta
matt färg.
exempel:
bakgrund:
Citat
du nämnde parenteser.
Det är briljant.
exempel:
“Den som lyfter blicken
förstår sammanhanget.”
4️⃣ Lighthouse grafisk filosofi
Den här är viktig.
Den ska styra allt.
Grundprincip
Lighthouse är inte en kurs.
Det är en hamn för orientering.
Här lär man sig inte genom instruktioner.
Man lär sig genom perspektiv.
Designregler
1️⃣ färg används sparsamt
2️⃣ tunna linjer
3️⃣ mycket luft
4️⃣ inga tunga boxar
5️⃣ bilder får vara enkla
grafiskt språk
inte:
kursportal
utbildning
coaching
utan:
orientering
reflektion
perspektiv
5️⃣ hur portalen ska kännas
inte som:
LinkedIn.
inte som:
kursplattform.
utan som:
en stillahamn där man tänker klart.
6️⃣ den viktigaste raden i hela Lighthouse
Du skrev:
“Här lär du dig av frågorna — inte av svaren.”
Det är guld.
Den ska finnas:
på startsidan
i footern
i onboarding
i citat
Lighthouse – Visuell struktur
Grundprincipen är enkel:
Portal → Hamn → Berättelse → Reflektion → Nästa steg
Det ska kännas som en resa i små steg.
1. Startsidan – Fyren
Syfte:
Besökaren ska förstå vad Lighthouse är på 10 sekunder.
Struktur:
Vad Lighthouse är
FYRA RIKTNINGAR
Kunskap
Relationer
Möjligheter
Handling
DAGENS BERÄTTELSE
HUR DET FUNGERAR
INGÅNG TILL HAMNEN
Hero
Stor lugn rubrik.
Exempel:
Lighthouse Port
Här lär du dig inte av svaren.
Du lär dig av frågorna.
Kort text:
Ett orienteringssystem för människor som vill förstå livet bättre – utan att gå en kurs.
2. De fyra riktningarna
Här använder du dina färger.
Layout:
4 kort.
🟢 Relationer
🟡 Möjligheter
🔴 Handling
Varje kort leder till en samlingssida.
3. Hamnen
Hamnen är biblioteket.
Här ligger alla berättelser.
Layout:
Filter
Kunskap
Relationer
Möjligheter
Handling
Elementor Loop Grid passar perfekt här.
Kort per berättelse:
Kort citat
Kategori
Läs berättelsen
4. Berättelsesidan
Den här har du nästan redan byggt.
Struktur:
UTDRAG
BERÄTTELSEN
REFLEKTION
AVSLUT
NÄSTA BERÄTTELSE
Viktigt
Maxbredd:
900 px
(lika som du redan valt)
Det är perfekt.
5. Reflektionsrutan
Den är Lighthouse hjärta.
Design:
matt färg
tunn vänsterlinje
mycket luft
Exempel:
Vad i ditt liv försöker du påverka
som egentligen inte ligger i din kontroll?
Vad ligger faktiskt inom din räckvidd?
Hur skulle känslan förändras
om du lade energin där istället?
6. Avslut
Här ska känslan vara lugn.
Exempel:
Låt den vara nog.
Imorgon väntar nästa steg.
7. Navigering
Botten på varje berättelse:
Till Hamnen
Nästa berättelse →
Det gör att man stannar kvar i portalen.
8. Designregler
Viktigt att hålla detta konsekvent.
Maxbredd
900 px
Rubriker
Manrope
Brödtext
Source Serif
Luft mellan stycken
24 px
Linjer
1 px
9. Bildspråk
Du behöver nästan inga bilder.
Om du använder dem:
symboliska
enkla
gärna illustrationer
Inte stockfoton.
10. Lighthouse känsla
Allt ska kännas:
lugnt
reflekterande
intelligent
mänskligt
Inte:
kurs
coach
självhjälp
11. Den osynliga strukturen
Bakom allt ligger fyra frågor:
Kunskap
→ Vad ser jag?
Relation
→ Vad känner jag?
Möjlighet
→ Vad kan jag göra?
Handling
→ Vad väljer jag?