Lovable build brief — Konstruktiva public website
Sökväg i arbetsmaterialet: site/LOVABLE.md
Lovable build brief — Konstruktiva public website
Build a production-quality public website for the political initiative represented by this repository.
1. Source-of-truth rule01
Use site/ as the authoritative source for public navigation, hierarchy and political copy.
Read in this order:
CURRENT.mdsite/README.mdsite/00-start.mdsite/01-manifest.mdsite/02-politik.mdsite/03-sa-arbetar-vi.mdsite/04-var-med.mdsite/05-oppenhet.mdsite/06-fragor-och-svar.mdsite/07-fordjupning.mdsite/08-press.md
For visual identity, then read:
movement/design/README.mdmovement/design/konstruktiva-designsystem-v2.html
For public pedagogy where site/ does not already specify the presentation, use movement/07-publik-pedagogik.md.
For deeper policy pages, read program/README.md first and then the relevant current program/*.md file.
Do not invent, reconcile or upgrade political positions by reading memory/, audits/, sources/, future/, old budget iterations or historical communications directly. Those folders can be exposed as transparency/deep-content material, but they are not direct political copy sources unless a site/ page explicitly points to them.
2. Project status and naming02
This is a political initiative under construction, not yet a formally adopted party/manifest.
Current public working name: Konstruktiva.
Naming rules:
Konstruktiva= current public working name;Swarm= repository/project/architecture name;Förnyarna= superseded previous working name;- final legally adopted party name = not yet decided.
Never silently convert:
- working name → legally final party name;
- working program → adopted program;
- DIRECTION → COMMITMENT;
- PILOT → permanent policy;
- OPEN → chosen policy;
- future signal/scenario → party policy;
- shadow-budget work → final election budget.
The status must be visible but not dominate the experience.
3. Central configurable values03
Create one central config/module for:
initiativeName
initiativeNameStatus
contactEmail
pressEmail
webUrl
privacyUrl
statusLabel
lastUpdated
Initial values should treat initiativeName as Konstruktiva and initiativeNameStatus as a visible but unobtrusive working-name label.
Do not scatter names or contact data across components.
4. Core message hierarchy04
The page must make this understandable without scrolling through policy jargon.
Primary movement idea
Det ska gå att fixa.
Political compass
Fri i ditt liv. Stark i det gemensamma. Öppen för framtiden.
Public promise
Du ska få göra mer. Staten ska krångla mindre. Och det som är viktigt ska fungera.
Three owned tasks
- Det viktiga ska fungera.
- Sverige ska gå att bygga.
- Det som inte fungerar ska gå att laga.
Do not lead the homepage with the academic label systemisk meliorism. Explain it only on the idea/deep-dive layer.
5. Information architecture05
Primary navigation:
- Start
- Vår idé
- Politik
- Så arbetar vi
- Var med
- Öppenhet
- Frågor & svar
Secondary/footer:
- Fördjupning
- Arbetsprogram
- Källor
- Granskningar
- Framtidsradar
- Press
- Integritet
- Tillgänglighet
- Kontakt
Recommended routes:
/
/manifest
/politik
/politik/skola
/politik/vard-omsorg
/politik/jobb-foretag
/politik/ekonomi-skatt
/politik/bostad-energi
/politik/klimat-landsbygd
/politik/trygghet
/politik/migration-gemenskap
/politik/demokrati-ai
/politik/forskning-kultur
/politik/eu-forsvar
/sa-arbetar-vi
/var-med
/oppenhet
/fragor-och-svar
/fordjupning
/program
/kallor
/granskningar
/framtidsradar
/press
6. UX principle: progressive disclosure06
Every policy should support this reading depth:
10-second answer → concrete proposals → why → status → cost/capacity → objections → sources → full document
Do not dump long markdown documents into the main user journey.
The site should feel simple at the top and unusually deep underneath.
7. Politics page behavior07
Turn each section of site/02-politik.md into a clear category card and detail page.
Each detail page should support:
- short position;
- 3–7 concrete changes;
Why this fits our core idea;- visible status chips where relevant;
What is still open?section;- deep links to source program documents;
- optional links to relevant audits and sources.
Never infer a missing concrete position from ideological text.
8. Openness dashboard08
Make /oppenhet a distinctive part of the product rather than a legal footer.
Include cards/sections for:
- current initiative/program status;
- commitments / directions / pilots / open questions;
- current budget-model status according to
CURRENT.md; - recent material corrections;
- versions/history;
- audits;
- sources;
Submit factual criticismCTA.
Design the status system so that worsening status is visually legitimate, not treated like a software error. The point is to make self-correction credible.
If repository data is not wired dynamically at first launch, use the authored snapshot in site/05-oppenhet.md and structure components so dynamic GitHub ingestion can be added later.
9. “Var med” is not a generic signup page09
The core concept is Lokal fixverkstad.
Make the seven-step process visually clear:
- choose a real problem;
- understand the system;
- listen before solving;
- build an alternative;
- try to break it;
- submit/publish it;
- show what actually happened.
Then offer participation paths:
- propose a problem;
- contribute expertise;
- build locally;
- review a proposal;
- help practically.
Until a legally verified membership process exists, do not use Bli medlem as the primary CTA.
10. Forms and privacy10
For initial launch, create UI-ready forms but do not invent a data backend or privacy promise.
Interest form fields:
- name;
- email or phone;
- municipality;
- contribution type;
- short optional message;
- explicit contact consent.
Criticism form fields:
- claim/page concerned;
- source or argument to review;
- optional contact method.
Do not ask users for sensitive personal data. Include clear helper copy.
11. Deep repository material11
The long-term differentiator is that the visitor can inspect the work.
Create reusable document-browser components that can later render repository markdown with:
- title;
- status;
- last updated;
- source path;
- document family;
- related documents;
- raw GitHub link;
- readable rendered markdown.
Document families:
- Program
- Movement
- Sources
- Audits
- Future radar
- Working canon
Working canon and future radar need strong labels explaining they are not automatically public policy. Historical budget/program iterations also need explicit HISTORICAL/SUPERSEDED treatment and must not rank as current simply because their filename is numerically high.
12. Design direction — binding source12
The visual design is not open-ended. Treat movement/design/README.md and movement/design/konstruktiva-designsystem-v2.html as the binding visual source of truth.
Key identity:
- ochre
#E19F1Das primary action/identity color; - plum
#6F4E5Efor editorial/depth surfaces; - muted teal
#699494for information/system layers; - olive
#A0A643for verified/development states; - burgundy
#612134as dark accent/focus/problem color; - paper
#F7F3EAas neutral base; - near-black
#191816as primary text.
Typography roles:
- Barlow Condensed — wordmark, campaign/action, short wayfinding;
- Fraunces — editorial headings, ideas, quotes;
- Atkinson Hyperlegible — body, UI, forms, metadata.
Use safe fallbacks when webfonts are unavailable.
Avoid conventional party-site aesthetics: no smiling-politician hero, flag-wall, stock crowd, glossy campaign gradients or pseudo-government portal.
The visual identity should communicate:
- serious but not bureaucratic;
- intellectually confident but plain-spoken;
- civic rather than corporate;
- transparent rather than polished-to-death;
- contemporary but durable;
- human, practical, repair/build/work oriented.
A useful conceptual visual language is repair / systems / connections / construction / visible layers, but do not turn it into literal gears, circuit-board clichés or hacker cosplay.
13. Accessibility13
Meet WCAG-minded best practice from the first build and follow the stricter rules in movement/design/README.md:
- semantic HTML;
- keyboard navigation;
- visible focus;
- strong contrast;
- scalable text;
- no essential hover-only interactions;
- meaningful labels and error messages;
- reduced-motion support;
- alt text structure;
- accessible accordions and dialogs;
- no essential information only in color.
Create a human/analog contact route that does not require social media, e-ID or a smartphone.
14. Technical implementation14
Prefer content-driven components rather than hardcoded bespoke pages.
Recommended content model:
type PublicPage = {
title: string
slug: string
summary?: string
status?: "COMMITMENT" | "DIRECTION" | "PILOT" | "OPEN" | "PUBLIC_DRAFT"
sourcePaths?: string[]
lastUpdated?: string
body: string
}
Keep authored Swedish copy intact unless fixing obvious typography/formatting. Do not rewrite policy for marketing effect.
If adding search, search public site/ and current program/ first. Deep working folders and historical versions should be opt-in filters.
16. Definition of done for the first production build16
The first production-capable version is good enough when:
- a stranger understands the core idea in under 20 seconds;
- Konstruktiva is consistently shown as a working name, never as a falsely finalized legal name;
- all seven main routes work;
- politics can be scanned and opened into depth;
- the movement manifesto is prominent but optional;
Var medmakes participation concrete;- openness/status is visible and comprehensible;
- no superseded working name is presented as current;
- no OPEN issue has been invented into a position;
- no historical budget version is presented as current;
- the visual result clearly follows
movement/design/; - the site is strong on mobile and keyboard;
- all deep-content links point to real repository material or are clearly marked as not yet wired;
- changing the working/final initiative name later requires one config change.
Do not wait for every deep repository browser feature before shipping the first version. The public content layer is complete enough to build the launch site now.