lizell · Oct 23, 2026 · Oct 21, 2026 · Oct 21, 2026 · Oct 21, 2026 · Oct 22, 2026
diff --git a/404.html b/404.html
@@ -1,4 +1,5 @@
 ---
+body_class: manual-design manual-subpage
 title: Det här är inte sidan du letar efter
 description: Sidan kunde inte hittas.
 permalink: /404.html

diff --git a/AGENTS.md b/AGENTS.md
diff --git a/AGENTS.md b/AGENTS.md
@@ -0,0 +1,35 @@
+# Projektinstruktioner
+
+## Arbetssätt
+
+- Statisk Eleventy-sajt med Liquid, Markdown och Sass; Node 24. Håll lösningen enkel. Inga nya paket eller tjänster för vanliga innehålls- och layoutändringar.
+- Läs berört innehåll, mall och aktiv CSS före ändring. Återanvänd befintliga komponenter och skicka deras indata uttryckligen.
+- Filkarta, innehållsfält och sektionssyntax finns i [README.md](README.md). Dokumentera ändrade gemensamma mönster där.
+- Bevara andras arbete. Kontrollera branch och diff före Git-operationer. Fortsätt på uppgiftens branch; ändra inte `main` utan uttrycklig instruktion. Push till `main` publicerar sajten.
+
+## Design och figurer
+
+- Följ [designmanualen](docs/designmanual/README.md) vid bild-, komponent- och layoutarbete. Läs relevanta avsnitt i [HTML-manualen](docs/designmanual/index.html). Uppdatera manualen när designbeslut ändras.
+- Behåll Athega-orange `#ff6600`, mörk text på ljusa ytor och manualens gemensamma typografi, knappar och layoutprinciper.
+- Utgå från manualens [gemensamma berättelse](docs/designmanual/README.md#gemensam-berättelse-för-bilderna) och fyll i [bildbriefen](docs/designmanual/bildbrief.txt). Bifoga de referensbilder som briefen anger. Låt figurernas egenskaper styra handlingen och bildens samspel med sidans budskap:
+  - **Athegamannen:** erfaren, trygg och handlingskraftig. Bygger, granskar och omprövar. Bevara den breda, kraftiga och kompakta silhuetten.
+  - **Ada:** nyfiken, uppmärksam och experimenterande. Formulerar idéer, skissar och testar. Hon och Athegamannen är jämbördiga och får växla roller.
+  - **Byte:** upptäcker det andra missar genom att nosa och följa spår. Hans fynd ska tydligt höra ihop med scenens problem eller resultat.
+- Figurerna berättar något; alla tre behöver inte vara med. Se [deras presentation](vara-figurer/index.md). I maskinmotivet ska instruktion in, produkt ut och granskning vara begripliga.
+- Kontrollera anatomi, igenkänning och proportioner. Planera luft, bildplacering och mobilbeskärning så att handling och detaljer syns i faktisk visningsstorlek.
+
+## Innehåll och kod
+
+- Skriv löptext i Markdown och metadata i front matter. Behåll startsidans innehåll och navigation i befintliga `_data/`-filer.
+- På sektionssidor ligger allt innehåll inom `{% section %}`-anrop. Håll presentation i mallar och CSS, inte i innehållet. Escapa textdata, inte redan renderad HTML.
+- Bevara texter, permalänkar, rubriknivåer och länkmål när uppgiften inte gäller dem. E-postlänkar ska visa adressen.
+- Personalmetadata renderas av medarbetarmallen. Bloggkort använder `post.data.excerpt`; artikelns ingress använder dess egen `description`. Kontrollera artikeln innan gemensamma ingressregler ändras.
+- Aktiv CSS finns i `_includes/styles/`, importerad från `assets/site.scss`. Återanvänd variabler; använd `@use` och behåll responsiva importer sist. Kontrollera importkedjan innan äldre kod ändras eller tas bort.
+- Bevara bilder som fortfarande används och publicerade bloggdemon under `assets/blog/`. Undanta nya interna dokument från Eleventys input.
+- Ändra inte beroenden som sidoeffekt. Kontrollera projektets versioner och officiell dokumentation vid osäker API- eller konfigurationssyntax.
+
+## Verifiering
+
+- `npm start` startar lokal server. `npm run build` bygger till `_site/`; `npm run check` kontrollerar sajten. Kör `npm test` vid kodändringar och `npm run check:urls` när sidstruktur eller adresser påverkas.
+- Kontrollera berörda sidor, länkar och bilder. Vid layoutändringar: granska dator och mobil i webbläsaren. Vid omstrukturering: jämför genererad HTML och innehåll före/efter.
+- Redovisa vad som ändrats, vad som verifierats och eventuella begränsningar. Lägg inte till tester som bara speglar implementationen.
diff --git a/CLAUDE.md b/CLAUDE.md
diff --git a/README.md b/README.md
@@ -485,3 +485,51 @@ Om utvecklingsservern får en annan port än 8080 används adressen den skriver
 ## Hemligt rymdspel
 
 Kontroller, multiplayer, arkitektur och tester finns i [spelets README](docs/space-egg/README.md).
+
+## Designförslag
+
+[Designmanualen](docs/designmanual/README.md) samlar karaktärsskisser och förslag
+till bildspråk, typografi och layout. Den kan läsas direkt i GitHub eller som PDF.
+HTML-versionen öppnas lokalt utan server. Materialet är undantaget från
+sajtbygget; efter bygget tas även bilder som fångats av bildkopieringens glob bort.
+
+### Lokalt designprov
+
+Designförslaget i PR #61 provar manualens bildvärld och typografi på
+startsidan och de övriga sidorna, inklusive bloggposterna. Kör `npm run build` och `npm start` enligt instruktionerna ovan.
+Startsidesinnehållet ligger kvar i `_data/home/content.json`. Klassen
+`manual-design` i startsidans metadata avgränsar stilen i
+`_includes/styles/home-manual.scss`; Systemutveckling, AI & maskininlärning och Om oss använder dessutom
+`manual-subpage` och `_includes/styles/manual-subpages.scss`. Kompletterande sidtyper beskrivs nedan.
+
+En fristående Markdown-bild inne i hero-sektionen väljer en dekorativ illustration
+bredvid rubrik och ingress. Sammanfattning och kontaktlänkar följer under bilden.
+Bilderna i provet är AI-genererade koncept med manualens karaktärsblad som referens.
+
+Tjänstesidorna använder `manual-service` för parvis presentation av
+arbetssätt, sammanlänkade processteg och en ljus kontaktsektion. Även kortsektioner
+kan ha en fristående dekorativ Markdown-bild före sektionsrubriken; bilden visas
+bredvid introduktionen och påverkar inte kortens innehåll.
+
+AI-labbet använder dessutom `manual-ai` för två separata fokusområdesrader med
+introduktion och kontakt till vänster och konkreta tillämpningar till höger.
+
+### Gemensam form och uppmaningar i designprovet
+
+Alla tjänste-, företags-, personal- och enkla innehållssidor samt bloggöversikten
+använder `manual-design`. Bloggposter ärver `manual-design manual-article` från `_posts/_posts.json`. `manual-article.scss` ger centrerad rubrik och ingress samt vänsterjusterad brödtext med begränsad läsbredd. Inläggens texter och originalbilder behålls.
+`manual-actions.scss` definierar den gemensamma ramknappen för fristående
+`a.text-link`. Länkar i löptext, navigation och
+klickbara kort får inte denna stil. Relaterade uppmaningar samlas i `hero-actions`
+eller `callout-links`. Sidtypernas kompletterande regler finns i
+`manual-remaining.scss`; texter och permalänkar är bevarade.
+
+Bloggöversikten varierar fyra kompakta inlägg med ett större kort över hela
+bredden. Större kort växlar bildsida på dator, men följer vanlig läsordning på
+mobil. Inläggens kronologiska ordning ändras inte; kort utan bild får en
+textbaserad variant. Bloggposternas gemensamma HTML-mall är oförändrad.
+
+Designförslaget har två responsiva lägen: bred layout över 980 px och staplad
+layout vid 980 px och mindre. Sidornas `manual-*`-moduler använder samma
+brytpunkt; undvik ett separat mellanläge med blandade kolumnlayouter.
+Äldre sidor utan `manual-design` behåller sina befintliga brytpunkter.
diff --git a/_data/home/content.json b/_data/home/content.json
@@ -2,11 +2,8 @@
   "intro": {
     "heading": "Vi är experter på den senaste mjukvarutekniken",
     "emphasis": "och erbjuder den till våra kunder.",
-    "lead": "Nyfikna på att utforska nytt, med erfarenhet av vad som håller."
-  },
-  "about": {
-    "eyebrow": "Athega i korthet",
-    "body": "Sedan 1997 har vi legat nära den senaste tekniska utvecklingen, alltid med långsiktighet och verklig nytta som krav. Vi kombinerar beprövad systemutveckling med nya arbetssätt där AI används som förstahandsmetod när det ger bättre kvalitet och snabbare utveckling."
+    "lead": "Nyfikna på att utforska nytt, med erfarenhet av vad som håller.",
+    "image": "/assets/img/manual-home-maskinen-futuristisk.webp"
   },
   "services": {
     "heading": "Våra fokusområden",

diff --git a/_employees/_employees.json b/_employees/_employees.json
@@ -1,3 +1,4 @@
 {
-  "layout": "employee"
+  "layout": "employee",
+  "body_class": "manual-design manual-person"
 }
diff --git a/_includes/home.html b/_includes/home.html
@@ -1,14 +1,17 @@
-<main id="main" class="section-page">
+<main id="main" class="manual-home-content" tabindex="-1">
   {% include "home/intro.html" %}
 
-  <section class="section focus-section" id="tjanster">
+  <section class="manual-services" id="tjanster" aria-label="{{ home.content.services.heading | escape }}">
     <div class="shell">
-      {% include "home/about.html" %}
       {% include "home/services.html" %}
-      {% include "home/blog.html" %}
     </div>
   </section>
 
   {% include "home/consult.html" %}
+
+  <section id="bloggen" class="manual-journal shell" aria-label="{{ home.content.blog.heading | escape }}">
+    {% include "home/blog.html" %}
+  </section>
+
   {% include "home/searching.html" %}
 </main>
diff --git a/_includes/home/about.html b/_includes/home/about.html
diff --git a/_includes/home/blog.html b/_includes/home/blog.html
@@ -10,6 +10,7 @@ <h2 class="eyebrow">{{ home.content.blog.heading | escape }}</h2>
           <img src="{{ post.data.image_url }}" alt="">
         {% endif %}
         <div>
+          <time class="home-latest-date" datetime="{{ post.date | date: '%Y-%m-%d' }}">{{ post.date | swedishDate }}</time>
           <h3>{{ post.data.title }}</h3>
           <p>{{ post.data.excerpt }}</p>
         </div>

diff --git a/_includes/home/intro.html b/_includes/home/intro.html
@@ -1,6 +1,7 @@
-<section class="page-hero home-page-hero">
-  <div class="shell">
-    <h1>{{ home.content.intro.heading | escape }} <span>{{ home.content.intro.emphasis | escape }}</span></h1>
-    <p class="page-lead">{{ home.content.intro.lead | escape }}</p>
+<section class="manual-hero shell">
+  <div class="manual-hero-copy">
+    <h1>{{ home.content.intro.lead | escape }}</h1>
+    <p class="page-lead">{{ home.content.intro.heading | escape }} {{ home.content.intro.emphasis | escape }}</p>
   </div>
+  <img class="manual-hero-image" src="{{ home.content.intro.image | escape }}" alt="" width="1536" height="1024" fetchpriority="high">
 </section>
diff --git a/_includes/layout.html b/_includes/layout.html
@@ -25,7 +25,7 @@
     <link rel="icon" type="image/svg+xml" href="/assets/img/icon.svg">
     <link rel="stylesheet" href="/assets/site.css">
   </head>
-  <body>
+  <body{% if body_class %} class="{{ body_class | escape }}"{% endif %}>
     <a class="skip-link" href="#main">Hoppa till innehållet</a>
     {% include "header.html" %}
     {{ content }}