Hoppa till innehåll
DokumentPolitiskt initiativ under uppbyggnad

Lovable build brief — Konstruktiva public website

Sökväg i arbetsmaterialet: site/LOVABLE.md

Tillbaka till fördjupningen

Lovable build brief — Konstruktiva public website

Build a production-quality public website for the political initiative represented by this repository.

16 avsnitt · ca 8 min
1. Source-of-truth ruleUse site/ as the authoritative source for public navigation, hierarchy and political copy.01

Use site/ as the authoritative source for public navigation, hierarchy and political copy.

Read in this order:

  1. CURRENT.md
  2. site/README.md
  3. site/00-start.md
  4. site/01-manifest.md
  5. site/02-politik.md
  6. site/03-sa-arbetar-vi.md
  7. site/04-var-med.md
  8. site/05-oppenhet.md
  9. site/06-fragor-och-svar.md
  10. site/07-fordjupning.md
  11. site/08-press.md

For visual identity, then read:

  1. movement/design/README.md
  2. movement/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 namingThis is a political initiative under construction, not yet a formally adopted party/manifest.02

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 valuesCreate one central config/module for:03

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 hierarchyThe page must make this understandable without scrolling through policy jargon.04

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

  1. Det viktiga ska fungera.
  2. Sverige ska gå att bygga.
  3. 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 architecturePrimary navigation:05

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 disclosureEvery policy should support this reading depth:06

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 behaviorTurn each section of site/02-politik.md into a clear category card and detail page.07

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 dashboardMake /oppenhet a distinctive part of the product rather than a legal footer.08

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 criticism CTA.

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 pageThe core concept is Lokal fixverkstad.09

The core concept is Lokal fixverkstad.

Make the seven-step process visually clear:

  1. choose a real problem;
  2. understand the system;
  3. listen before solving;
  4. build an alternative;
  5. try to break it;
  6. submit/publish it;
  7. 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 privacyFor initial launch, create UI-ready forms but do not invent a data backend or privacy promise.10

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 materialThe long-term differentiator is that the visitor can inspect the work.11

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 sourceThe visual design is not open-ended.12

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 #E19F1D as primary action/identity color;
  • plum #6F4E5E for editorial/depth surfaces;
  • muted teal #699494 for information/system layers;
  • olive #A0A643 for verified/development states;
  • burgundy #612134 as dark accent/focus/problem color;
  • paper #F7F3EA as neutral base;
  • near-black #191816 as 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. AccessibilityMeet WCAG-minded best practice from the first build and follow the stricter rules in movement/design/README.md:13

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 implementationPrefer content-driven components rather than hardcoded bespoke pages.14

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.

15. SEO and shareabilityEvery main page should have:15

Every main page should have:

  • unique title and meta description;
  • canonical URL placeholder based on webUrl;
  • Open Graph/Twitter metadata;
  • readable URL slug;
  • structured headings;
  • text content rendered server-side/static where possible.

Do not create hundreds of thin pages merely for SEO. Deep pages should exist because they answer a real policy question.

16. Definition of done for the first production buildThe first production-capable version is good enough when:16

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 med makes 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.