Den exakta referensimplementationen finns i:

• konstruktiva-designsystem-v2.html

HTML-filen ska behandlas som ett levande designkort och komponentbibliotek. Om den visuella identiteten ändras ska både HTML-filen och denna specifikation uppdateras samtidigt.

---

Konstruktiva ska kännas som öppen samhällsbyggnad, inte som ett traditionellt kampanjpaket eller en startup.

Formspråket ska kombinera:

• verkstad och konstruktion;
• folkbildning och redaktionell tydlighet;
• mänsklig värme;
• systemtänkande;
• granskningsbarhet;
• praktisk handlingskraft.

Visuellt ska det kännas mer som en ritning, en arbetsyta och en bra tidskrift än som reklambyråpolitik.

Identiteten ska vara vuxen, varm, tydlig och ovanlig utan att bli excentrisk.

---

Primär identitetsfärg

Ockra — #E19F1D

Användning:

• huvudytor;
• hero-sektioner;
• affischer;
• primära CTA-knappar;
• kampanjmarkeringar;
• konstruktiva/aktiva element.

Semantik:

• energi;
• byggande;
• handling;
• verkstad;
• värme.

Färgen ska läsas som ockra/senap/guld, inte som säkerhetsorange. Därför ska den normalt kombineras med varmvit, plommon och redaktionell typografi snarare än tung svart industrigrafik.

Sekundär identitetsfärg

Plommon — #6F4E5E

Användning:

• redaktionella ytor;
• citat;
• sekundära identitetsytor;
• fördjupning;
• ideologiska texter;
• tonal kontrast till ockra.

Semantik:

• djup;
• mänsklighet;
• reflektion;
• idéinnehåll.

Informationsfärg

Dämpad teal — #699494

Användning:

• systemgrafik;
• teststatus;
• informationslager;
• diagram;
• sekundära UI-element.

Semantik:

• information;
• undersökning;
• balans;
• test.

Utvecklings-/resultatfärg

Oliv — #A0A643

Användning:

• genomfört;
• verifierat lokalt arbete;
• långsiktighet;
• utveckling;
• statuskomponenter.

Mörk accent

Vinröd — #612134

Användning:

• starka sekundära knappar;
• fokusmarkering;
• problemstatus;
• länkar;
• mörk accent där hög kontrast behövs.

Neutral bas

Papper — #F7F3EA

Standardbakgrund. Ska ge ett varmare och mindre sterilt uttryck än rent vitt.

Nästan svart — #191816

Primär textfärg på ljusa ytor.

Mjuk text — #4C4842

Sekundär text och metadata när full kontrast inte behövs.

Linje — #D9D1C5

Diskreta avdelare, kortkanter och struktur.

---

Färgval ska utgå från WCAG-kontrast, inte smak.

Godkända standardpar i designkortet:

• #E19F1D + #191816 ≈ 7.75:1 — AAA;
• #6F4E5E + #FFFFFF ≈ 7.17:1 — AAA;
• #699494 + #191816 ≈ 5.29:1 — AA för normal text;
• #A0A643 + #191816 ≈ 6.78:1 — AA och AAA för stor text;
• #612134 + #FFFFFF ≈ 11.83:1 — AAA.

Förbjudna standardkombinationer

Använd inte:

• vit text på ockra;
• vit text på teal;
• vit text på oliv;
• plommontext på ockra som vanlig brödtext;
• färg som enda bärare av status eller betydelse.

Status ska alltid innehålla ord och/eller ikon, exempelvis ✓ Genomfört, inte endast grön/oliv färg.

---

Tre familjer används med tydligt separerade roller.

Barlow Condensed

Vikter: 600, 700, 800.

Roll:

• logotyp/wordmark;
• reklam;
• affisch;
• kampanjrubrik;
• navigering/wayfinding;
• korta budskap;
• siffror och markörer.

Karaktär:

• kompakt;
• tydlig på avstånd;
• handlingskraftig;
• byggd snarare än dekorativ.

Använd inte kondenserad displayfont för längre brödtext.

Fraunces

Vikter: 600, 700, 800.

Roll:

• H1–H3 på redaktionella sidor;
• ingress;
• citat;
• debatt/opinion;
• längre rubriker;
• ideologiska och reflekterande ytor.

Karaktär:

• varm;
• mänsklig;
• idébärande;
• redaktionell utan att kännas gammaldags.

Ingress ska normalt inte vara kursiv.

Atkinson Hyperlegible

Vikter: 400, 700.

Roll:

• brödtext;
• UI;
• formulär;
• knappar;
• metadata;
• källor;
• diagram;
• siffror;
• dokument;
• små textstorlekar.

Detta är huvudfont för läsbarhet. Den är vald för tydligt åtskilda bokstavsformer och ska användas där funktion går före karaktär.

Fallbacks

Webb:

• display: Barlow Condensed, Arial Narrow, Arial, sans-serif;
• editorial: Fraunces, Georgia, Times New Roman, serif;
• body/UI: Atkinson Hyperlegible, Arial, Helvetica, sans-serif.

Office/PDF när webbfont inte är tillgänglig:

• rubrik/editorial: Georgia;
• brödtext/UI: Arial.

Fontfiler ska inte distribueras från repot. Webben får hämta publikt hostade fonter eller använda säkra fallbacks.

---

Scenario	Font	Vikt	Regel
Logotyp / kampanjord	Barlow Condensed	800	Kort, stort, gärna versalt
Affischrubrik	Barlow Condensed eller Fraunces	700–800	Handling = Barlow, idé = Fraunces
Webbrubrik H1–H3	Fraunces	600–800	Redaktionell och mänsklig
Ingress	Fraunces	600	Stor, tydlig, ej kursiv som standard
Brödtext	Atkinson Hyperlegible	400	Maximal läsbarhet
UI / formulär / knappar	Atkinson Hyperlegible	700	Tydliga teckenformer
Citat / debatt	Fraunces	700	Karaktär utan pynt
Diagram / siffror / status	Atkinson Hyperlegible	700	Läsbart i små storlekar
Press / PDF / Office fallback	Arial + Georgia	400–700	Robust kompatibilitet

---

Arbets-wordmark:

KONSTRUKTIVA

• Barlow Condensed 800;
• stora bokstäver;
• mycket stor grad;
• tät men inte sammanpressad letter-spacing;
• normalt mörk text på ockra eller ljus bakgrund.

Primär praktisk rad:

Det ska gå att fixa.

Vision:

Fri i ditt liv. Stark i det gemensamma. Öppen för framtiden.

De ska inte alltid visas samtidigt. Wordmark + en rad räcker ofta.

---

Designkortet visar tre återkommande lägen.

Handling

Ockra bakgrund + mörk Barlow Condensed.

Använd för:

• affisch;
• deltagande;
• CTA;
• fixkväll;
• valmaterial;
• mobil hero.

Exempel:

DET SKA GÅ ATT FIXA.

Idé och djup

Plommon bakgrund + vit Fraunces.

Använd för:

• ideologi;
• citat;
• långsiktig vision;
• essä/debatt;
• fördjupning.

Granskning och kunskap

Varmvit/pappersbakgrund + mörk text + små ockra markeringar.

Använd för:

• policy;
• case;
• källor;
• analys;
• resultat;
• Vad skulle få oss att ändra oss?;
• ekonomiska modeller;
• korrigeringar.

---

Standardkomponenter:

Primär

• bakgrund #E19F1D;
• text #191816;
• Atkinson Hyperlegible 700.

Sekundär

• bakgrund #612134;
• text vit.

Tertiär

• transparent bakgrund;
• vinröd text;
• vinröd kant.

Mörk

• bakgrund #191816;
• text vit.

Alla interaktiva kontroller ska ha:

• minst 44 × 44 px effektiv klick-/touchyta;
• synlig textetikett;
• tydligt :focus-visible-läge;
• funktion utan hover;
• begriplig betydelse utan färg.

---

Status är en central del av Konstruktivas visuella språk eftersom rörelsen ska visa vad vi vet och var i processen något befinner sig.

Standard:

• ✓ Genomfört — oliv + mörk text;
• ◉ Testas — teal + mörk text;
• ○ Under utredning — ockra + mörk text;
• ! Problem identifierat — vinröd + vit text;
• ? Ej bedömt — neutral ljus bakgrund + mörk text.

Färg får aldrig ensam kommunicera status.

Samma princip gäller diagram och grafer: etikett, form, mönster eller direktvärde ska finnas utöver färg.

---

Policy-, case- och resultatkort ska normalt innehålla:

1. status;
2. begriplig rubrik;
3. kort förklaring;
4. konkret nästa länk/handling.

Kort ska inte bli dekorativa block som döljer text. De ska fungera som progressiv disclosure.

Kortbakgrund: i första hand #FFFCF7 eller varmvit.

Rubrik: Fraunces.

Brödtext/UI: Atkinson Hyperlegible.

---

Visuell kvalitet och tillgänglighet är samma designproblem, inte separata lager.

Text

• brödtext minst 16 px på webb;
• normal designbaseline i referensfilen är 17 px;
• radavstånd ca 1.5–1.65;
• långa textkolumner ungefär 60–75 tecken;
• undvik mycket tunn text;
• undvik långa stycken i versaler;
• undvik kursiv brödtext;
• skapa inte en extra liten finstil-font för viktig information.

Semantik

• använd riktig H1/H2/H3-hierarki;
• använd riktiga länkar och knappar;
• använd tabeller för tabulär data;
• status ska ha text;
• länkar ska inte identifieras enbart med färg.

Tangentbord

Alla kontroller ska ha starkt och synligt fokusläge.

Referensimplementation:

• 4 px vinröd outline;
• 4 px offset.

Rörelse

Respektera prefers-reduced-motion.

Ingen central betydelse får kräva animation, blinkning eller rörelse.

Fotografier

Text får inte ligga direkt över stökiga eller ljusa fotografier utan:

• solid textplatta;
• eller tillräckligt mörkt/opaakt lager med verifierad kontrast.

Svartvitt och print

Material ska fortfarande gå att förstå:

• utskrivet i svartvitt;
• med avstängda bakgrundsfärger;
• utan externa webbfonter.

Print-CSS i referensfilen tar bort skuggor och gör länkar tydliga.

---

Referensdesignen använder tre huvudsakliga lägen:

Desktop > 1050 px

• fler-kolumnslayout;
• fem kontrastkort på rad;
• fyra innehållskort;
• tre typografiska roller bredvid varandra.

Mellanläge ≤ 1050 px

• huvudsektioner går till en kolumn;
• kontrastkort 2 kolumner;
• innehållskort 2 kolumner.

Mobil ≤ 650 px

• allt i en kolumn;
• body 16 px minimum;
• mindre marginaler;
• wordmark skalas ner;
• hero behåller sin identitet utan att kräva horisontell scroll.

---

Konstruktiva ska undvika:

• klassisk blå partigrafik;
• rött som huvudidentitet;
• säkerhetsorange + svart industrigrafik som genomgående signal;
• gradient-tung startup-estetik;
• neon;
• generiska AI-glows;
• överdrivet rundade SaaS cards;
• stockfoto av leende kandidater som primär identitet;
• färgkodning utan text;
• vit text på ljusa accentfärger;
• extremt tunna typsnitt;
• intern jargong som designmotiv;
• symboler som måste förklaras för att fungera;
• dekor före begriplighet.

---

När fotografi används ska det i första hand visa:

• verkliga platser;
• människor i verkliga sammanhang;
• arbete och problemlösning;
• offentliga miljöer;
• lokala system som faktiskt diskuteras;
• prototyper, processer och resultat.

Undvik att göra partiledning/personer till standardmotiv för allt innehåll.

Protagonisten ska oftast vara problemet, människorna som berörs och lösningen.

---

När en webbplats byggs ska konstruktiva-designsystem-v2.html användas som visuell referens.

Minimikrav:

• CSS-tokens från :root ska återanvändas eller speglas i design tokens;
• typografiska roller ska behållas;
• förbjudna färgpar får inte introduceras;
• statuskomponenter ska vara semantiskt redundanta;
• tillgänglighetsreglerna ska behandlas som krav, inte rekommendationer;
• komponenter får förändras visuellt men inte förlora sin roll eller begriplighet.

Om en ny lösning behöver bryta mot designkortet ska orsaken dokumenteras och designkortet uppdateras om den nya lösningen blir standard.

---

Designsystemet är den visuella motsvarigheten till movement/07-publik-pedagogik.md.

Det ska stödja samma kedja:

Se → förstå → se bevis → utforska → delta → fördjupa → bära.

Det visuella systemet ska därför hjälpa människor att förstå:

• vad som är budskap;
• vad som är fakta;
• vad som är status;
• vad som är ett case;
• vad som är en möjlighet att delta;
• vad som går att granska vidare.

Formgivningen ska uttrycka samma princip som rörelsen i övrigt:

Lätt att förstå, svår att misstolka och möjlig att granska hela vägen ner.