diff --git a/404.html b/404.html
index d8f4200..2fc7030 100644
--- 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
deleted file mode 120000
index 681311e..0000000
--- a/AGENTS.md
+++ /dev/null
@@ -1 +0,0 @@
-CLAUDE.md
\ No newline at end of file
diff --git a/AGENTS.md b/AGENTS.md
new file mode 100644
index 0000000..4e23109
--- /dev/null
+++ 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
deleted file mode 100644
index 9e0867a..0000000
--- a/CLAUDE.md
+++ /dev/null
@@ -1,161 +0,0 @@
-# Projektinstruktioner
-
-`AGENTS.md` är en länk till denna fil. Instruktionerna gäller både människor och
-AI-assistenter som arbetar i repot. Praktiska exempel och innehållsfält finns i
-`README.md`.
-
-## Mål och teknik
-
-Athegas webbplats är en statisk Eleventy-sajt med Liquid, Markdown och Sass.
-GitHub Pages publicerar den genererade katalogen `_site/`. Behåll detta arbetssätt:
-vanliga innehållsändringar ska inte behöva någon backend, databas, klientrendering,
-extern tjänst eller nya paket.
-
-Alla delar av lösningen får vidareutvecklas. Följ den befintliga strukturen så
-att liknande uppgifter löses på samma sätt. Välj en liten, begriplig lösning och
-uppdatera dokumentationen när du inför eller ändrar ett gemensamt mönster.
-
-## Hitta rätt fil
-
-- Startsidesinnehåll: `_data/home/content.json`.
-- Startsidesmetadata: `index.html`.
-- Huvudnavigation: `_data/navigation.json`, gemensam för dator och mobil.
-- Personal: `_employees/*.md`; standardlayout finns i `_employees/_employees.json`.
-- Bloggposter: `_posts/*.md`; standardlayout och URL-mönster i `_posts/_posts.json`.
-- Bloggens årsarkiv: `blogg/year.html`, grupperat från publicerade artiklar via
- `scripts/blog-archives.mjs`. Årsarkiv med innehåll ersätter gamla omdirigeringar
- automatiskt. Gemensam layout och årsnavigering finns i `_includes/blog/`.
-- Tjänste- och företagssidor: vanligt Markdown-innehåll i respektive
- `index.md` under `teknikgranskning/`, `systemutveckling/`, `ai-labbet/`,
- `ai-labbet/industri/`, `jobba/`, `konsultnatverk/` och `om-oss/`.
- Korta `{% section %}`-anrop väljer presentation; gemensamma mallar
- finns i `_includes/sections/` och sidomslaget i `_layouts/sections.html`.
-- Nya enkla sidor utan front matter: `sidor/*.md`; `sidor/sidor.json` väljer
- standardlayouten. Filen `sidor/exempel.md` får adressen `/sidor/exempel/`.
-- Övriga innehållssidor: respektive Markdown-fil och dess valda layout.
-- Sidstruktur: `_layouts/`, `_includes/layout.html` och `_includes/home.html`.
-- Återanvändbara komponenter: `_includes/components/`, `_includes/employees/`
- och `_includes/blog/`; Markdown-sektioner i `_includes/sections/`.
-- Aktiv CSS: `_includes/styles/`, importerad från `assets/site.scss`.
-- Byggkonfiguration: `eleventy.config.js`, `package.json`, `scripts/dev.mjs`.
-- Markdown-sektionernas tolkning: `scripts/markdown-sections.mjs`.
-
-## Arbetsgång
-
-1. Läs den berörda mallen och dess innehållsfil innan du ändrar något. Sök efter
- befintliga komponenter och användningar av fältet eller CSS-klassen.
-2. Vid en textändring: ändra innehållet där det redan hör hemma. Behåll rubriknivåer,
- länkmål, omslag, CSS-klasser och sektionsordning om uppgiften inte gäller dessa.
-3. Vid en strukturändring: återanvänd en komponent om dess struktur passar.
- Utöka den vid gemensamma behov. Skapa en ny när behovet har en annan struktur.
- Undvik kopierade specialvarianter och generella sidbyggare utan konkret behov.
-4. Skicka komponentens indata uttryckligen som Liquid-parametrar, exempelvis
- `{% include "components/service-card.html", service: service %}`.
- Låt sidmallar välja placering och komponentvariant, medan innehållsfilerna
- innehåller texter, länkar och listor.
-5. Vid en omstrukturering som ska bevara designen: jämför genererad HTML, text,
- attribut och CSS före och efter. Blanksteg mellan block får skilja sig;
- blanksteg mellan ord och inline-element kan påverka resultatet.
-6. Redovisa vad som ändrats och vad som verifierats. Följ användarens avgränsning
- om denne bara vill ha en granskning eller uttryckligen avstår från tester.
-
-## Innehållskonventioner
-
-- Front matter ska vara metadata: titel, beskrivning, layout, permalänk och
- artikel-/personmetadata. Flytta inte löptext, sektionsrubriker, listor eller
- sidans kontaktlänkar till YAML eller JSON för att slippa HTML i Markdown.
-- Skriv innehåll i Markdown: rubriker, stycken, listor, länkar, bilder och citat.
- På tjänste- och företagssidor ligger texten mellan `{% section ... %}` och
- `{% endsection %}`. Ett nytt `###`-avsnitt skapar ett kort i en kortgrupp.
- Målgruppskort avgränsas med `---`. Kopiera befintliga sektionsanrop och behåll
- deras variant vid textändringar. Lägg inte CSS-klasser eller HTML i innehållet.
-- `layout: sections` renderar Markdown inne i sektionsanropen, exakt en gång;
- lägg allt sidinnehåll inom dessa anrop. Vanliga textsidor använder `layout: page`
- eller ärver den i `sidor/`, och behöver inga sektionsanrop alls.
-- Navigation och startsidans befintliga strukturerade data ligger fortsatt i
- `_data/`. Escapa sådana textvärden med `escape`. Renderad Markdown i `content`
- och sektionsmallarnas HTML-fält ska däremot inte escapas en gång till.
-- Länkar till e-post ska visa mottagaradressen i den synliga texten. Komponenten
- `text-link.html` (även i callouts) gör detta från fältet `email`.
- Kontaktuppgifter finns i sidfoten och sidornas kontaktsektioner; huvudmenyn
- har ingen separat kontaktknapp.
- I Markdown skrivs adressen i länktexten: `[Kontakta oss – reception@athega.se](mailto:reception@athega.se)`.
-- Personalens namn, roll, porträtt och bildtext renderas av medarbetarmallen.
- Skriv metadata och presentation i personens Markdown-fil, utan profil-include.
- Listan på Om oss byggs från `collections.employees` i filnamnsordning.
-- Behåll befintliga permalänkar när namn, rubriker eller filnamn ändras. Vid
- borttagning av innehåll, undersök även länkar till den gamla adressen.
-- Bloggens front matter nås direkt i sidmallen (`title`, `description`, `image_url`).
- I en collection används `post.data.title`, `post.data.excerpt` (egen `description`, annars
- första stycket; skapas av `scripts/post-defaults.mjs`) och `post.url`. Artikelns ingress
- använder bara den egna `description`.
-- Kontrollera artikelns egen ingress innan du ändrar gemensam ingresstilldelning.
- Äldre artiklar kan innehålla `description` i brödtexten; en artikel kan använda
- `hide_excerpt_in_article` för att dölja mallens ingress.
-- `draft: true` utesluter en sida vid produktionsbygge men visar den vid serve/watch.
-- Markdown inne i HTML-omslag kräver rätt blankrader. Kontrollera den genererade
- strukturen när du flyttar innehåll över en sådan gräns.
-- Ta inte bort bilder som fortfarande används av andra sidor eller historiska
- blogginlägg. Bedöm referenser, inte bara filnamn.
-
-## CSS och äldre kod
-
-Återanvänd variablerna i `_includes/styles/base.scss` och de aktiva komponenternas
-klasser. Bevara importordningen i `assets/site.scss`; responsiva regler kommer sist.
-Använd Sass `@use` för nya moduler.
-
-Behåll Athega-orange (`#ff6600`) i dekor och accenter. På ljusa ytor ska
-meningsbärande text vara mörk; orange text används på mörka ytor. Ett medvetet
-designundantag är betonad text i huvudrubriker (`.page-hero h1 span`), som
-använder Athega-orange även på vitt utan bakgrundsmarkering. Tjänste- och
-bloggkort har inga pilikoner. Vid hovring och tangentbordsfokus markeras
-kortens rubriker med orange understrykning.
-
-Äldre `_includes/*.scss`, `_includes/home/*.scss` och vissa gamla HTML-komponenter
-ligger kvar från tidigare design. De är inte automatiskt aktiva bara för att de
-finns. Kontrollera include- och importkedjan innan du ändrar eller tar bort dem.
-Den aktuella layouten laddar inte `/assets/site.js`; lägg inte tillbaka den för
-att lösa ett problem utan att först kontrollera vad som faktiskt behövs.
-
-Bloggdemon under `assets/blog/` kan innehålla egna HTML-, CSS- och JavaScript-filer.
-Behandla dem som publicerat innehåll när du bedömer om kod är oanvänd.
-
-## Lokal miljö och verifiering
-
-Projektet anger Node.js 24 i `.nvmrc`; GitHub Actions använder också Node 24.
-
-```bash
-npm ci # Installera låsta beroenden
-npm start # Lokal server; använd den port som skrivs ut
-npm run build # Sass och Eleventy till _site/
-```
-
-Verifiera det ändringen kan påverka: bygge, berörda sidor, personal, datum, bilder,
-interna länkar och relevanta skärmstorlekar. Ett lyckat bygge bevisar inte ensamt
-att en layout är oförändrad. Lägg inte till tester som bara speglar implementationen.
-
-Eleventy använder repots rot som input. README.md, CLAUDE.md och AGENTS.md är
-undantagna i konfigurationen. Nya dokumentationsfiler eller exempelsidor behöver
-också placeras eller undantas så att de inte oavsiktligt blir publicerade sidor.
-
-## Verifiera versionsberoende information
-
-Vid ändringar av beroenden, konfiguration eller biblioteksanrop:
-
-- Kontrollera projektets versioner i package.json, package-lock.json
- och .nvmrc.
-- Verifiera osäker syntax och API-användning mot officiell dokumentation
- för den version projektet använder.
-- Använd tillgänglig dokumentationssökning, exempelvis Context7 eller
- webbsökning. Inget särskilt sökverktyg är ett krav.
-- Uppdatera inte beroenden som sidoeffekt av innehålls- eller layoutarbete.
-
-Rena text- och innehållsändringar kräver normalt ingen extern sökning.
-
-## Git och publicering
-
-Kontrollera aktuell branch och lokala ändringar före Git-operationer. Bevara
-andras arbete. Ange målbranch uttryckligen när användaren ber om en push till en
-viss branch. Det incheckade arbetsflödet bygger och publicerar vid push till main
-samt kan startas manuellt. För den här layoutversionen arbetar vi i NewLayout;
-ändra inte main utan en uttrycklig uppgift som gäller main.
diff --git a/README.md b/README.md
index bae5740..37b50ac 100644
--- 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
index 78f9ab5..0c8f88f 100644
--- 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
index f0df014..a69fdf4 100644
--- 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
index 9ce8595..3cfa1d9 100644
--- a/_includes/home.html
+++ b/_includes/home.html
@@ -1,14 +1,17 @@
-
+
{% include "home/intro.html" %}
-
+
- {% include "home/about.html" %}
{% include "home/services.html" %}
- {% include "home/blog.html" %}
{% include "home/consult.html" %}
+
+
+ {% include "home/blog.html" %}
+
+
{% include "home/searching.html" %}
diff --git a/_includes/home/about.html b/_includes/home/about.html
deleted file mode 100644
index 8f4e9f3..0000000
--- a/_includes/home/about.html
+++ /dev/null
@@ -1,4 +0,0 @@
-
+ {% endif %}
diff --git a/_includes/styles/home-manual.scss b/_includes/styles/home-manual.scss
new file mode 100644
index 0000000..b8413f8
--- /dev/null
+++ b/_includes/styles/home-manual.scss
@@ -0,0 +1,470 @@
+// Shared visual language for the pages taking part in the design-manual study.
+.manual-design {
+ --neutral: #f4f2ed;
+ --shell: min(1216px, calc(100% - 48px));
+ --text-base: 18px;
+ --text-card: 24px;
+ --text-lead: 22px;
+ --text-section: 36px;
+ --text-page: 52px;
+ --leading-copy: 1.65;
+ --radius: 4px;
+ font-family: "Helvetica Neue", "Segoe UI", Arial, sans-serif;
+ font-weight: 400;
+
+ h1,
+ h2,
+ h3 {
+ font-family: Georgia, "Times New Roman", serif;
+ font-weight: 700;
+ letter-spacing: -0.025em;
+ }
+ h1 {
+ font-size: var(--text-page);
+ line-height: 1.12;
+ }
+ h2 {
+ font-size: var(--text-section);
+ line-height: 1.2;
+ }
+ h3 {
+ font-size: var(--text-card);
+ line-height: 1.25;
+ }
+ .eyebrow {
+ font-family: inherit;
+ font-size: 14px;
+ font-weight: 500;
+ letter-spacing: 0.08em;
+ }
+ .site-header {
+ background: var(--paper);
+ backdrop-filter: none;
+ }
+ .nav-wrap {
+ min-height: 88px;
+ }
+ .brand img {
+ width: 160px;
+ }
+ .nav {
+ font-size: 16px;
+ font-weight: 500;
+ gap: 24px;
+ }
+ .nav a {
+ display: inline-flex;
+ align-items: center;
+ min-height: 44px;
+ }
+ .mobile-menu {
+ font-size: 16px;
+ }
+ .mobile-menu summary {
+ border-radius: 4px;
+ }
+
+ .manual-hero {
+ display: grid;
+ grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
+ align-items: center;
+ gap: 32px;
+ padding-block: 64px;
+ }
+ .manual-hero-copy {
+ position: relative;
+ z-index: 1;
+ }
+ .manual-hero h1 {
+ margin: 0 0 24px;
+ text-wrap: pretty;
+ }
+ .manual-hero .page-lead {
+ margin: 0;
+ max-width: 40ch;
+ font-size: var(--text-lead);
+ line-height: 1.5;
+ color: var(--muted);
+ }
+ .manual-hero-image {
+ width: 100%;
+ height: auto;
+ // Fade the scene into the page without cropping the illustration.
+ mask-image:
+ linear-gradient(to right, transparent, #000 7%, #000 93%, transparent),
+ linear-gradient(to bottom, transparent, #000 5%, #000 94%, transparent);
+ mask-composite: intersect;
+ }
+
+ .focus-intro {
+ max-width: 65ch;
+ font-size: 18px;
+ line-height: 1.65;
+ }
+
+ .manual-services {
+ padding-block: 64px;
+ background: var(--neutral);
+ }
+ .focus-label {
+ margin-bottom: 32px;
+ }
+ .home-service-grid {
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ gap: 0 64px;
+ border: 0;
+ }
+ .home-service-grid .service-card {
+ display: block;
+ border: 0;
+ border-top: 1px solid var(--line-strong);
+ padding: 32px 0;
+ }
+ .home-service-grid .service-card:nth-last-child(-n + 2) {
+ padding-bottom: 0;
+ }
+ .service-card h2 {
+ font-size: 24px;
+ line-height: 1.25;
+ font-weight: 700;
+ margin-bottom: 16px;
+ }
+ .service-card p {
+ max-width: 55ch;
+ font-size: 18px;
+ }
+
+ .section.unified-callout,
+ .section.join-section {
+ padding-block: 64px;
+ }
+ .join-grid {
+ grid-template-columns: 1fr 1fr;
+ grid-template-areas: "label label" "heading copy";
+ gap: 24px 64px;
+ }
+ .join-grid h2 {
+ max-width: 22ch;
+ font-size: var(--text-section);
+ font-weight: 700;
+ margin: 0;
+ }
+ .join-grid > .eyebrow {
+ margin: 0;
+ }
+ .join-grid > div p {
+ font-size: 18px;
+ margin-bottom: 24px;
+ }
+ .text-link {
+ font-size: 16px;
+ min-height: 44px;
+ line-height: 1.5;
+ padding-block: 8px;
+ }
+
+ .manual-journal {
+ padding-block: 64px;
+ }
+ .home-latest {
+ margin: 0;
+ }
+ .home-latest-heading {
+ margin-bottom: 32px;
+ align-items: center;
+ }
+ .home-latest-heading h2 {
+ font-family: Georgia, "Times New Roman", serif;
+ font-size: var(--text-section);
+ font-weight: 700;
+ letter-spacing: -0.025em;
+ text-transform: none;
+ }
+ .home-latest-heading h2::before {
+ display: none;
+ }
+ .home-latest-heading .text-link {
+ font-size: 16px;
+ flex-shrink: 0;
+ }
+ .home-latest-grid {
+ grid-template-columns: 1.1fr 1fr;
+ grid-template-rows: min-content 1fr;
+ gap: 32px 48px;
+ align-items: start;
+ }
+ .home-latest-card {
+ display: flex;
+ flex-direction: column;
+ border: 0;
+ border-radius: 0;
+ background: transparent;
+ transition: none;
+ }
+ .home-latest-card:is(:hover, :focus-visible) {
+ transform: none;
+ }
+ .home-latest-card:is(:hover, :focus-visible) h3 {
+ text-decoration: underline;
+ text-decoration-color: var(--orange);
+ text-underline-offset: 0.2em;
+ text-decoration-thickness: 2px;
+ }
+ .home-latest-card img {
+ width: 100%;
+ height: auto;
+ aspect-ratio: 16 / 9;
+ min-height: 0;
+ object-fit: cover;
+ border-radius: 4px;
+ }
+ .home-latest-card > div {
+ padding: 24px 0 0;
+ }
+ .home-latest-card h3 {
+ font-size: 24px;
+ font-weight: 700;
+ line-height: 1.25;
+ margin-bottom: 16px;
+ }
+ .home-latest-card p {
+ display: block;
+ overflow: visible;
+ font-size: 18px;
+ line-height: 1.65;
+ }
+ .home-latest-date {
+ display: block;
+ margin-bottom: 12px;
+ color: var(--muted);
+ font-size: 13px;
+ line-height: 1.5;
+ }
+ .home-latest-card:first-child {
+ grid-row: span 2;
+ }
+ .home-latest-card:first-child h3 {
+ font-size: 28px;
+ }
+ .home-latest-card:not(:first-child) {
+ display: grid;
+ grid-template-columns: 144px minmax(0, 1fr);
+ gap: 24px;
+ }
+ .home-latest-card:not(:first-child) img {
+ aspect-ratio: 1;
+ }
+ .home-latest-card:not(:first-child) > div {
+ padding: 0;
+ }
+ .home-latest-card:not(:first-child) h3 {
+ font-size: 22px;
+ margin-bottom: 12px;
+ }
+ .home-latest-card:not(:first-child) p {
+ font-size: 16px;
+ }
+ .home-latest-card:last-child {
+ padding-top: 32px;
+ border-top: 1px solid var(--line);
+ }
+
+ .site-footer {
+ padding: 48px 0 24px;
+ }
+ .footer-top {
+ grid-template-columns: 1fr 1fr 1.3fr 0.7fr;
+ gap: 32px;
+ }
+ .footer-top img {
+ width: 128px;
+ }
+ .footer-links {
+ gap: 0;
+ font-size: 16px;
+ }
+ .footer-links > span {
+ font-size: 13px;
+ margin-bottom: 8px;
+ }
+ .footer-links a {
+ display: flex;
+ align-items: center;
+ min-height: 44px;
+ width: fit-content;
+ }
+ .footer-links p {
+ margin: 8px 0 0;
+ }
+ .footer-social a {
+ width: 100%;
+ }
+ .footer-bottom {
+ margin-top: 32px;
+ font-size: 13px;
+ }
+
+ @media (max-width: 980px) {
+ .manual-hero {
+ grid-template-columns: 1fr;
+ gap: 32px;
+ padding-block: 48px;
+ }
+ .manual-hero-copy {
+ max-width: 660px;
+ }
+ .manual-hero-image {
+ max-width: 720px;
+ justify-self: center;
+ }
+ .join-grid {
+ gap: 24px 32px;
+ }
+ .home-latest-grid {
+ grid-template-columns: 1fr;
+ grid-template-rows: none;
+ gap: 32px;
+ }
+ .home-latest-card:first-child {
+ grid-row: auto;
+ }
+ .home-latest-card:not(:first-child) {
+ grid-template-columns: 240px minmax(0, 1fr);
+ }
+ .home-latest-card:not(:first-child) img {
+ aspect-ratio: 16 / 9;
+ }
+ .home-latest-card {
+ display: grid;
+ grid-template-columns: 240px minmax(0, 1fr);
+ align-items: start;
+ gap: 24px;
+ }
+ .home-latest-card > div {
+ padding: 0;
+ }
+ --shell: calc(100% - 40px);
+ --text-page: 36px;
+ --text-section: 28px;
+ --text-card: 22px;
+ --text-lead: 20px;
+ .nav-wrap {
+ min-height: 72px;
+ }
+ .brand img {
+ width: 136px;
+ }
+ .manual-hero {
+ padding-block: 32px;
+ gap: 24px;
+ }
+ .manual-services,
+ .manual-journal,
+ .section.unified-callout,
+ .section.join-section {
+ padding-block: 48px;
+ }
+ .home-service-grid {
+ grid-template-columns: 1fr;
+ }
+ .home-service-grid .service-card {
+ padding: 24px 0;
+ }
+ .home-service-grid .service-card:nth-last-child(2) {
+ padding-bottom: 24px;
+ }
+ .service-card h2,
+ .home-latest-card h3 {
+ font-size: 22px;
+ }
+ .join-grid {
+ grid-template-columns: 1fr;
+ grid-template-areas: "label" "heading" "copy";
+ gap: 24px;
+ }
+ .join-grid h2 {
+ max-width: 24ch;
+ }
+ .home-latest-heading {
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 16px;
+ }
+ .home-latest-grid {
+ gap: 32px;
+ }
+ .home-latest-card {
+ display: flex;
+ gap: 0;
+ }
+ .home-latest-card > div {
+ padding-top: 16px;
+ }
+ .home-latest-card:first-child h3 {
+ font-size: 24px;
+ }
+ .home-latest-card:not(:first-child) {
+ grid-template-columns: 96px minmax(0, 1fr);
+ gap: 16px;
+ }
+ .home-latest-card:not(:first-child) img {
+ aspect-ratio: 1;
+ }
+ .home-latest-card:not(:first-child) h3 {
+ font-size: 20px;
+ }
+ .home-latest-card:last-child {
+ padding-top: 24px;
+ }
+ .site-footer {
+ padding-block: 24px 16px;
+ }
+ .footer-top {
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+ }
+ .footer-top img {
+ width: 104px;
+ margin: 0;
+ }
+ .footer-links {
+ flex-direction: row;
+ flex-wrap: wrap;
+ gap: 0 20px;
+ font-size: 14px;
+ }
+ .footer-links > span {
+ display: none;
+ }
+ .footer-links a {
+ min-height: 36px;
+ max-width: 100%;
+ overflow-wrap: anywhere;
+ }
+ .footer-top > :nth-child(3) {
+ align-items: center;
+ justify-content: space-between;
+ gap: 4px 16px;
+ }
+ .footer-links p {
+ margin: 0;
+ font-size: 13px;
+ }
+ .footer-social {
+ width: auto;
+ }
+ .footer-social a {
+ width: fit-content;
+ gap: 8px;
+ }
+ .footer-bottom {
+ flex-direction: row;
+ flex-wrap: wrap;
+ gap: 4px 16px;
+ margin-top: 12px;
+ padding-top: 12px;
+ font-size: 12px;
+ }
+ }
+}
diff --git a/_includes/styles/manual-actions.scss b/_includes/styles/manual-actions.scss
new file mode 100644
index 0000000..0967cc9
--- /dev/null
+++ b/_includes/styles/manual-actions.scss
@@ -0,0 +1,39 @@
+// One treatment for standalone actions, regardless of page or importance.
+.manual-design {
+ a.text-link {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ gap: 8px;
+ max-width: 100%;
+ min-height: 48px;
+ padding: 10px 20px;
+ border: 2px solid var(--orange);
+ border-radius: 4px;
+ background: var(--paper);
+ color: var(--ink);
+ font-family: inherit;
+ font-size: 16px;
+ font-weight: 600;
+ line-height: 24px;
+ text-align: center;
+ text-decoration: none;
+ overflow-wrap: anywhere;
+ transition: background-color 180ms ease;
+ &:is(:hover, :focus-visible) {
+ background: #fff4eb;
+ }
+ &:focus-visible {
+ outline: 3px solid var(--ink);
+ outline-offset: 4px;
+ box-shadow: 0 0 0 4px var(--paper);
+ }
+ }
+ .hero-actions,
+ .callout-links {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: start;
+ gap: 16px;
+ }
+}
diff --git a/_includes/styles/manual-article.scss b/_includes/styles/manual-article.scss
new file mode 100644
index 0000000..5392607
--- /dev/null
+++ b/_includes/styles/manual-article.scss
@@ -0,0 +1,107 @@
+// Shared article presentation; content and original images stay in each post.
+.manual-article {
+ .article-shell {
+ width: var(--shell);
+ padding-block: 48px 80px;
+ --article-text: 19px;
+ }
+ .back-link {
+ min-height: 44px;
+ display: inline-flex;
+ align-items: center;
+ margin-bottom: 40px;
+ font-size: 14px;
+ text-decoration: underline;
+ text-decoration-color: var(--orange);
+ text-underline-offset: 0.25em;
+ }
+ .article-shell header {
+ max-width: 960px;
+ margin-inline: auto;
+ text-align: center;
+ margin-bottom: 48px;
+ padding-bottom: 40px;
+ border-bottom: 2px solid var(--orange);
+ }
+ .article-shell h1 {
+ max-width: 22ch;
+ margin-inline: auto;
+ font-size: 52px;
+ font-weight: 700;
+ line-height: 1.12;
+ letter-spacing: -0.025em;
+ overflow-wrap: anywhere;
+ hyphens: auto;
+ }
+ .article-lead {
+ max-width: 62ch;
+ margin-inline: auto;
+ margin-bottom: 0;
+ font-size: 23px;
+ line-height: 1.5;
+ }
+ .article-body {
+ max-width: 720px;
+ margin-inline: auto;
+ line-height: 1.75;
+ }
+ .article-body h2 {
+ margin-top: 56px;
+ font-size: 32px;
+ font-weight: 700;
+ line-height: 1.2;
+ letter-spacing: -0.025em;
+ text-wrap: pretty;
+ }
+ .article-body h3 {
+ font-size: 26px;
+ font-weight: 700;
+ }
+ .article-body p {
+ margin-bottom: 24px;
+ }
+ .article-body img {
+ width: auto;
+ margin-block: 32px;
+ border-radius: 4px;
+ }
+ .article-body blockquote {
+ margin-block: 40px;
+ padding: 24px 32px;
+ background: var(--neutral);
+ border-left: 3px solid var(--orange);
+ font-style: normal;
+ font-size: 21px;
+ line-height: 1.6;
+ }
+ @media (max-width: 980px) {
+ .article-shell {
+ padding-block: 24px 48px;
+ --article-text: 18px;
+ }
+ .back-link {
+ margin-bottom: 24px;
+ }
+ .article-shell header {
+ padding-bottom: 24px;
+ margin-bottom: 32px;
+ }
+ .article-shell h1 {
+ font-size: 36px;
+ }
+ .article-lead {
+ font-size: 20px;
+ }
+ .article-body h2 {
+ font-size: 28px;
+ margin-top: 40px;
+ }
+ .article-body h3 {
+ font-size: 24px;
+ }
+ .article-body blockquote {
+ padding: 20px;
+ font-size: 19px;
+ }
+ }
+}
diff --git a/_includes/styles/manual-remaining.scss b/_includes/styles/manual-remaining.scss
new file mode 100644
index 0000000..20adad9
--- /dev/null
+++ b/_includes/styles/manual-remaining.scss
@@ -0,0 +1,431 @@
+.manual-review {
+ .audience-grid article,
+ .audience-grid article.inverse {
+ background: var(--neutral);
+ }
+ // These are six review topics, not a sequential workflow.
+ .step-grid {
+ grid-template-columns: repeat(3, minmax(0, 1fr));
+ gap: 32px;
+ }
+ .step-grid article:not(:last-child)::after {
+ display: none;
+ }
+ .step-grid article > span {
+ display: none;
+ }
+ .step-grid article h3 {
+ margin-top: 0;
+ }
+ @media (max-width: 980px) {
+ .step-grid {
+ grid-template-columns: 1fr;
+ }
+ .step-grid article {
+ padding: 0;
+ }
+ }
+}
+.manual-industry {
+ .step-grid article > span {
+ background: var(--paper);
+ }
+ .case-grid {
+ gap: 32px;
+ }
+ .case-grid article {
+ min-width: 0;
+ padding: 32px;
+ border-radius: 4px;
+ }
+ .case-grid h3 {
+ font-size: 24px;
+ font-weight: 700;
+ hyphens: auto;
+ overflow-wrap: anywhere;
+ }
+ @media (max-width: 980px) {
+ .case-grid {
+ grid-template-columns: 1fr;
+ }
+ }
+}
+.manual-careers,
+.manual-network {
+ .work-intro-copy {
+ max-width: 65ch;
+ }
+ .work-values-list {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 32px 64px;
+ border: 0;
+ }
+ .work-values-list .work-value-row {
+ padding: 24px 0 0;
+ align-items: start;
+ align-content: start;
+ border: 0;
+ border-top: 1px solid var(--line);
+ }
+ .work-value-row h3 {
+ font-size: 24px;
+ font-weight: 700;
+ }
+ .case-grid {
+ gap: 32px;
+ }
+ .case-grid article {
+ padding: 32px;
+ }
+ .case-grid h3 {
+ font-size: 24px;
+ font-weight: 700;
+ line-height: 1.25;
+ }
+ .work-profile,
+ .stacked-prose {
+ display: grid;
+ grid-template-columns: 1fr 1.4fr;
+ grid-template-rows: min-content 1fr;
+ gap: 24px 64px;
+ }
+ .work-profile > h2,
+ .stacked-prose > h2 {
+ font-size: var(--text-section);
+ font-weight: 700;
+ grid-column: 1;
+ }
+ .work-profile > .large-prose,
+ .stacked-prose > .large-prose {
+ grid-column: 2;
+ grid-row: 1 / span 2;
+ margin: 0;
+ }
+ .work-profile > a,
+ .stacked-prose > a {
+ grid-column: 1;
+ justify-self: start;
+ align-self: start;
+ }
+ .feature-list {
+ margin-top: 0;
+ }
+ .network-quote {
+ max-width: none;
+ margin-top: 48px;
+ padding: 32px;
+ gap: 32px;
+ background: var(--neutral);
+ border-radius: 4px;
+ }
+ .network-quote img {
+ border-radius: 4px;
+ }
+ @media (max-width: 980px) {
+ .case-grid {
+ grid-template-columns: 1fr;
+ }
+
+ .work-values-list {
+ grid-template-columns: 1fr;
+ gap: 24px;
+ }
+ .work-profile,
+ .stacked-prose {
+ grid-template-columns: 1fr;
+ grid-template-rows: none;
+ gap: 24px;
+ }
+ .work-profile > .large-prose,
+ .stacked-prose > .large-prose {
+ grid-column: 1;
+ grid-row: auto;
+ }
+ .network-quote {
+ grid-template-columns: 1fr;
+ padding: 24px;
+ gap: 24px;
+ }
+ .network-quote img {
+ width: 96px;
+ height: 96px;
+ }
+ }
+}
+.manual-person {
+ .article-shell {
+ width: var(--shell);
+ padding-block: 64px;
+ }
+ .article-body {
+ max-width: 760px;
+ margin-inline: auto;
+ }
+ .employee-profile {
+ display: grid;
+ grid-template-columns: 1fr 220px;
+ gap: 16px 32px;
+ align-items: start;
+ margin-bottom: 48px;
+ }
+ .employee-profile h1 {
+ font-size: var(--text-page);
+ font-weight: 700;
+ margin: 0;
+ align-self: end;
+ }
+ .employee-profile .title {
+ grid-column: 1;
+ font-size: 20px;
+ line-height: 1.5;
+ color: var(--muted);
+ }
+ .employee-profile .portrait {
+ grid-column: 2;
+ grid-row: 1 / span 2;
+ width: 100%;
+ margin: 0;
+ border-radius: 4px;
+ }
+ .article-body h2 {
+ font-weight: 700;
+ font-size: var(--text-section);
+ }
+ .article-body h3 {
+ font-weight: 700;
+ font-size: 24px;
+ }
+ @media (max-width: 980px) {
+ .article-shell {
+ padding-block: 32px 48px;
+ }
+ .employee-profile {
+ grid-template-columns: 1fr;
+ margin-bottom: 32px;
+ }
+ .employee-profile .portrait {
+ grid-column: 1;
+ grid-row: auto;
+ width: min(100%, 360px);
+ }
+ }
+}
+.manual-content {
+ main > .section {
+ padding-block: 64px;
+ }
+ .large-prose {
+ max-width: 760px;
+ overflow-wrap: anywhere;
+ }
+ .large-prose h1 {
+ font-size: var(--text-page);
+ font-weight: 700;
+ line-height: 1.12;
+ }
+ .large-prose h2 {
+ font-size: var(--text-section);
+ margin-top: 48px;
+ }
+ .large-prose h3 {
+ font-size: 24px;
+ margin-top: 32px;
+ }
+ .large-prose a {
+ text-decoration: underline;
+ text-decoration-color: var(--orange);
+ text-underline-offset: 0.2em;
+ }
+ @media (max-width: 980px) {
+ main > .section {
+ padding-block: 32px 48px;
+ }
+ }
+}
+.manual-archive {
+ .news-feature {
+ grid-template-columns: 1.1fr 1fr;
+ gap: 48px;
+ background: transparent;
+ border-radius: 0;
+ min-height: 0;
+ }
+ .news-feature:hover {
+ transform: none;
+ }
+ .news-feature > img {
+ height: auto;
+ aspect-ratio: 3 / 2;
+ border-radius: 4px;
+ }
+ .news-feature-copy {
+ padding: 16px 0;
+ }
+ .news-feature-copy h2 {
+ font-size: 32px;
+ font-weight: 700;
+ }
+ .news-feature-copy .eyebrow {
+ letter-spacing: 0;
+ text-transform: none;
+ }
+ .news-feature:is(:hover, :focus-visible) h2 {
+ text-decoration: underline;
+ text-decoration-color: var(--orange);
+ text-underline-offset: 0.2em;
+ }
+ .news-grid {
+ grid-template-columns: 1fr 1fr;
+ gap: 40px 48px;
+ }
+ .news-card {
+ display: grid;
+ grid-template-columns: 144px minmax(0, 1fr);
+ align-items: start;
+ gap: 24px;
+ padding-top: 24px;
+ border-top: 1px solid var(--line);
+ }
+ .news-card > img,
+ .news-card > .news-image-placeholder {
+ aspect-ratio: 1;
+ border-radius: 4px;
+ }
+ .news-card-copy {
+ padding: 0;
+ }
+ .news-card h2 {
+ font-size: 24px;
+ font-weight: 700;
+ line-height: 1.25;
+ }
+ .news-card p {
+ font-size: 16px;
+ line-height: 1.65;
+ }
+ // Four compact entries, then a larger visual pause. DOM and date order stay intact.
+ .news-card:nth-child(5n) {
+ grid-column: 1 / -1;
+ grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
+ align-items: center;
+ gap: 48px;
+ padding: 32px;
+ border: 0;
+ border-radius: 4px;
+ background: var(--neutral);
+ }
+ .news-card:nth-child(5n) > img {
+ aspect-ratio: 3 / 2;
+ }
+ .news-card:nth-child(5n) h2 {
+ font-size: 32px;
+ }
+ .news-card:nth-child(5n) p {
+ display: block;
+ overflow: visible;
+ font-size: 18px;
+ }
+ .news-card:nth-child(10n) > img {
+ grid-column: 2;
+ grid-row: 1;
+ }
+ .news-card:nth-child(10n) .news-card-copy {
+ grid-column: 1;
+ grid-row: 1;
+ }
+ .news-card:nth-child(5n):has(> .news-image-placeholder) {
+ grid-template-columns: 1fr;
+ border-left: 3px solid var(--orange);
+ }
+ .news-card:nth-child(5n) > .news-image-placeholder {
+ display: none;
+ }
+ .news-card:nth-child(5n):has(> .news-image-placeholder) .news-card-copy {
+ max-width: 65ch;
+ }
+ .blog-years a {
+ border-radius: 4px;
+ font-size: 14px;
+ }
+ @media (max-width: 980px) {
+ .news-feature {
+ gap: 32px;
+ }
+ .news-card:nth-child(5n) {
+ gap: 24px;
+ padding: 24px;
+ }
+ .news-card:nth-child(5n) h2 {
+ font-size: 28px;
+ }
+ .news-grid {
+ grid-template-columns: 1fr;
+ }
+
+ .news-feature {
+ grid-template-columns: 1fr;
+ gap: 24px;
+ }
+ .news-feature-copy {
+ padding: 0;
+ }
+ .news-feature-copy h2 {
+ font-size: 28px;
+ }
+ .news-card {
+ grid-template-columns: 96px minmax(0, 1fr);
+ gap: 16px;
+ }
+ .news-card h2 {
+ font-size: 22px;
+ }
+ .news-card:nth-child(5n) {
+ grid-template-columns: minmax(0, 1fr);
+ gap: 24px;
+ padding: 20px;
+ }
+ .news-card:nth-child(5n) h2 {
+ font-size: 24px;
+ }
+ .news-card:nth-child(5n) p {
+ font-size: 16px;
+ }
+ .news-card:nth-child(10n) > img,
+ .news-card:nth-child(10n) .news-card-copy {
+ grid-column: auto;
+ grid-row: auto;
+ }
+ }
+}
+
+.manual-characters {
+ .about-intro-copy a {
+ text-decoration: underline;
+ text-decoration-color: var(--orange);
+ text-underline-offset: 0.2em;
+ }
+ .focus-grid {
+ grid-template-columns: repeat(3, minmax(0, 1fr));
+ }
+ .about-intro-copy > p:first-child {
+ float: right;
+ width: 120px;
+ margin: 0 0 24px 32px;
+ }
+ .about-intro-copy > p:first-child img {
+ width: 100%;
+ height: auto;
+ }
+ @media (max-width: 980px) {
+ .focus-grid {
+ grid-template-columns: 1fr;
+ }
+
+ .about-intro-copy > p:first-child {
+ float: none;
+ width: 100px;
+ margin: 0 0 24px;
+ }
+ }
+}
diff --git a/_includes/styles/manual-subpages.scss b/_includes/styles/manual-subpages.scss
new file mode 100644
index 0000000..44764e8
--- /dev/null
+++ b/_includes/styles/manual-subpages.scss
@@ -0,0 +1,501 @@
+.manual-subpage {
+ --section-flow-gap: 64px;
+ .section-page > .page-hero {
+ padding-block: 64px;
+ }
+ .section-page > .page-hero > .manual-page-intro {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ align-items: center;
+ gap: 48px;
+ }
+ .section-page > .page-hero > .manual-page-intro > * {
+ margin: 0;
+ }
+ .manual-page-intro img {
+ width: 100%;
+ height: auto;
+ }
+ .page-hero h1 {
+ font-size: var(--text-page);
+ font-weight: 700;
+ line-height: 1.12;
+ margin-bottom: 24px;
+ }
+ .page-hero h1 span {
+ color: inherit;
+ }
+ .page-hero .page-lead {
+ font-size: var(--text-lead);
+ line-height: 1.5;
+ margin: 0;
+ }
+ .section-page > .page-hero > .manual-page-details {
+ display: grid;
+ grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
+ align-items: start;
+ gap: 48px;
+ margin-top: 48px;
+ padding-top: 32px;
+ border-top: 1px solid var(--line);
+ }
+ .section-page > .page-hero > .manual-page-details > * {
+ margin: 0;
+ }
+ .manual-page-details .hero-actions {
+ justify-self: end;
+ }
+ .manual-page-details .hero-actions:only-child {
+ grid-column: 1 / -1;
+ justify-self: start;
+ }
+ .hero-summary {
+ font-size: 18px;
+ line-height: 1.65;
+ }
+ .text-link {
+ overflow-wrap: anywhere;
+ display: inline-block;
+ }
+ .hero-actions {
+ min-width: 0;
+ }
+ .section-heading h2,
+ .prose-grid > h2 {
+ font-weight: 700;
+ line-height: 1.2;
+ font-size: var(--text-section);
+ max-width: 26ch;
+ }
+ .section-page .section-heading {
+ margin-bottom: 32px;
+ }
+ .heading-note {
+ max-width: 65ch;
+ font-size: 18px;
+ }
+ .focus-grid {
+ gap: 32px;
+ border: 0;
+ }
+ .focus-grid article {
+ min-height: 0;
+ padding: 24px 0 0;
+ border: 0;
+ border-top: 1px solid var(--line);
+ }
+ .focus-grid h3,
+ .step-grid h3 {
+ font-weight: 700;
+ font-size: var(--text-card);
+ line-height: 1.25;
+ }
+ .step-grid {
+ gap: 32px;
+ }
+ .step-grid h3 {
+ hyphens: auto;
+ overflow-wrap: anywhere;
+ }
+ .step-grid article {
+ padding: 0;
+ background: transparent;
+ border-radius: 0;
+ }
+ .step-grid article > span {
+ display: inline-flex;
+ min-width: 44px;
+ min-height: 44px;
+ align-items: center;
+ justify-content: center;
+ background: var(--orange);
+ color: var(--ink);
+ font-size: 14px;
+ letter-spacing: 0;
+ border-radius: 4px;
+ }
+ .audience-grid {
+ gap: 32px;
+ }
+ .audience-grid article,
+ .audience-grid article.inverse {
+ padding: 32px;
+ background: var(--neutral);
+ color: var(--ink);
+ border: 0;
+ border-top: 3px solid var(--orange);
+ border-radius: 0;
+ }
+ .audience-grid h3 {
+ font-size: var(--text-card);
+ line-height: 1.25;
+ font-weight: 700;
+ margin-top: 24px;
+ }
+ .audience-grid article .eyebrow {
+ color: var(--muted);
+ font-size: 13px;
+ line-height: 1.6;
+ letter-spacing: 0.04em;
+ }
+ .audience-grid .eyebrow::before {
+ display: none;
+ }
+ .audience-grid p,
+ .audience-grid li {
+ line-height: 1.65;
+ }
+ .audience-grid .text-link {
+ font-size: 16px;
+ color: var(--ink);
+ }
+ .about-history > .shell {
+ display: grid;
+ grid-template-columns: 1fr 2fr;
+ gap: 48px;
+ border-top: 1px solid var(--line);
+ padding-top: 48px;
+ }
+ .about-history .eyebrow {
+ margin: 8px 0 0;
+ }
+ .about-intro-copy {
+ max-width: 65ch;
+ }
+ .about-facts .facts-grid {
+ gap: 32px;
+ }
+ .about-facts .facts-grid > div {
+ padding: 32px;
+ border-radius: 4px;
+ }
+ .about-facts .facts-grid span {
+ font:
+ 700 52px/1.1 Georgia,
+ serif;
+ }
+ .team-section .split-heading {
+ grid-template-columns: 1.2fr 1fr;
+ gap: 48px;
+ }
+ .team-grid {
+ gap: 32px;
+ }
+ .team-card img {
+ border-radius: 4px;
+ }
+ .team-card figcaption {
+ font-size: 18px;
+ font-weight: 500;
+ margin-top: 16px;
+ }
+ .team-card a:is(:hover, :focus-visible) + figcaption {
+ text-decoration: underline;
+ text-decoration-color: var(--orange);
+ text-underline-offset: 0.25em;
+ }
+ .prose-grid {
+ gap: 48px;
+ }
+ @media (max-width: 980px) {
+ .section-page > .page-hero > .manual-page-intro {
+ gap: 32px;
+ }
+ .page-hero h1 {
+ font-size: 40px;
+ }
+ .section-page > .page-hero > .manual-page-details {
+ grid-template-columns: 1fr;
+ gap: 24px;
+ }
+ .manual-page-details .hero-actions {
+ justify-self: start;
+ }
+ .step-grid {
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ }
+ .about-history > .shell {
+ grid-template-columns: 1fr 2fr;
+ gap: 32px;
+ }
+
+ --section-flow-gap: 48px;
+ .section-page > .page-hero {
+ padding-block: 32px;
+ }
+ .section-page > .page-hero > .manual-page-intro {
+ grid-template-columns: 1fr;
+ gap: 24px;
+ }
+ .page-hero h1 {
+ font-size: 36px;
+ }
+ .section-page > .page-hero > .manual-page-details {
+ margin-top: 24px;
+ padding-top: 24px;
+ gap: 16px;
+ }
+ .page-hero .eyebrow {
+ margin-bottom: 24px;
+ }
+ .focus-grid,
+ .step-grid {
+ grid-template-columns: 1fr;
+ gap: 24px;
+ }
+ .step-grid article {
+ padding-bottom: 24px;
+ border-bottom: 1px solid var(--line-strong);
+ }
+ .step-grid article:last-child {
+ padding-bottom: 0;
+ border-bottom: 0;
+ }
+ .audience-grid article,
+ .audience-grid article.inverse {
+ padding: 24px;
+ }
+ .about-history > .shell {
+ grid-template-columns: 1fr;
+ gap: 24px;
+ padding-top: 32px;
+ }
+ .about-facts .facts-grid {
+ grid-template-columns: 1fr;
+ gap: 16px;
+ }
+ .about-facts .facts-grid > div {
+ display: flex;
+ align-items: center;
+ gap: 24px;
+ padding: 24px;
+ }
+ .about-facts .facts-grid span {
+ font-size: 36px;
+ min-width: 100px;
+ }
+ .about-facts .facts-grid p {
+ margin: 0;
+ }
+ .team-section .split-heading,
+ .prose-grid {
+ grid-template-columns: 1fr;
+ gap: 24px;
+ }
+ .team-grid {
+ gap: 24px 16px;
+ }
+ .team-card figcaption {
+ font-size: 16px;
+ }
+ }
+}
+
+// Shared service-page rhythm: connected steps and a quieter invitation.
+.manual-service {
+ .focus-grid {
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ gap: 40px 64px;
+ }
+ .focus-grid article {
+ padding-top: 24px;
+ }
+ .focus-grid p {
+ max-width: 54ch;
+ }
+ .section-intro-illustrated {
+ display: grid;
+ grid-template-columns: 1.4fr 1fr;
+ align-items: center;
+ gap: 48px;
+ margin-bottom: 48px;
+ }
+ .section-intro-illustrated .section-heading {
+ margin-bottom: 0;
+ }
+ .section-intro-illustrated img {
+ width: 100%;
+ max-width: 360px;
+ justify-self: end;
+ mix-blend-mode: multiply;
+ }
+ .step-grid {
+ gap: 32px;
+ }
+ .step-grid h3 {
+ hyphens: auto;
+ overflow-wrap: anywhere;
+ }
+ .step-grid article {
+ position: relative;
+ }
+ .step-grid article:not(:last-child)::after {
+ content: "";
+ position: absolute;
+ top: 21px;
+ left: 52px;
+ right: -24px;
+ height: 2px;
+ background: var(--orange);
+ }
+ .step-grid article > span {
+ position: relative;
+ z-index: 1;
+ border: 2px solid var(--orange);
+ background: var(--neutral);
+ border-radius: 50%;
+ }
+ .section.join-section {
+ background: var(--paper);
+ padding-block: 64px;
+ }
+ .join-section .join-grid {
+ grid-template-columns: 1fr 1fr;
+ gap: 24px 64px;
+ }
+ .join-section .join-grid h2 {
+ max-width: 22ch;
+ }
+ .join-section .callout-links {
+ align-items: center;
+ gap: 16px 24px;
+ }
+ @media (max-width: 980px) {
+ .focus-grid {
+ gap: 32px;
+ }
+ .section-intro-illustrated {
+ gap: 32px;
+ }
+ .step-grid article:nth-child(2)::after {
+ display: none;
+ }
+ .join-section .join-grid {
+ gap: 24px 32px;
+ }
+
+ .focus-grid {
+ grid-template-columns: 1fr;
+ gap: 24px;
+ }
+ .section-intro-illustrated {
+ grid-template-columns: 1fr;
+ gap: 24px;
+ margin-bottom: 32px;
+ }
+ .section-intro-illustrated img {
+ max-width: 280px;
+ justify-self: center;
+ }
+ .step-grid {
+ gap: 0;
+ }
+ .step-grid article {
+ padding: 0 0 32px 64px;
+ border: 0;
+ }
+ .step-grid article > span {
+ position: absolute;
+ top: 0;
+ left: 0;
+ }
+ .step-grid article h3 {
+ margin-top: 8px;
+ }
+ .step-grid article:not(:last-child)::after {
+ display: block;
+ top: 52px;
+ bottom: 8px;
+ left: 21px;
+ right: auto;
+ width: 2px;
+ height: auto;
+ }
+ .join-section .join-grid {
+ grid-template-columns: 1fr;
+ gap: 24px;
+ }
+ .section.join-section {
+ padding-block: 48px;
+ }
+ }
+}
+
+// AI audiences are readable rows rather than two dense boxes.
+.manual-ai {
+ .audience-grid {
+ grid-template-columns: 1fr;
+ gap: 48px;
+ }
+ .audience-grid article,
+ .audience-grid article.inverse {
+ display: grid;
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+ grid-template-areas: "label features" "heading features" "copy features" "link features";
+ gap: 16px 64px;
+ padding: 32px 0 0;
+ border: 0;
+ border-top: 2px solid var(--orange);
+ background: transparent;
+ }
+ .audience-grid article > .eyebrow {
+ grid-area: label;
+ margin: 0;
+ }
+ .audience-grid article > h3 {
+ grid-area: heading;
+ font-size: 28px;
+ max-width: 25ch;
+ margin: 0;
+ }
+ .audience-grid article > p:not(.eyebrow) {
+ grid-area: copy;
+ margin: 0;
+ max-width: 54ch;
+ }
+ .audience-grid article > .text-link {
+ grid-area: link;
+ justify-self: start;
+ margin-top: 8px;
+ }
+ .audience-grid .feature-list {
+ grid-area: features;
+ align-self: start;
+ margin: 0;
+ padding: 16px 24px;
+ background: var(--neutral);
+ border-radius: 4px;
+ }
+ .audience-grid .feature-list li {
+ padding: 16px 0;
+ }
+ .audience-grid .feature-list li:last-child {
+ border-bottom: 0;
+ }
+ .section-intro-illustrated .section-heading h2 {
+ max-width: 24ch;
+ }
+ @media (max-width: 980px) {
+ .audience-grid article,
+ .audience-grid article.inverse {
+ gap: 16px 32px;
+ }
+
+ .audience-grid {
+ gap: 32px;
+ }
+ .audience-grid article,
+ .audience-grid article.inverse {
+ grid-template-columns: 1fr;
+ grid-template-areas: "label" "heading" "copy" "features" "link";
+ gap: 16px;
+ padding-top: 24px;
+ }
+ .audience-grid article > h3 {
+ font-size: 24px;
+ }
+ .audience-grid .feature-list {
+ padding: 8px 16px;
+ }
+ }
+}
diff --git a/_layouts/page.html b/_layouts/page.html
index 6c54ab8..8926c34 100644
--- a/_layouts/page.html
+++ b/_layouts/page.html
@@ -1,4 +1,5 @@
---
layout: default
+body_class: manual-design manual-content
---
{% include "page.html" %}
diff --git a/_posts/_posts.json b/_posts/_posts.json
index 0799ab9..bccc6b0 100644
--- a/_posts/_posts.json
+++ b/_posts/_posts.json
@@ -1,4 +1,5 @@
{
"layout": "post",
- "permalink": "/blogg/{{ page.date | date: '%Y/%m/%d' }}/{{ page.fileSlug }}/"
+ "permalink": "/blogg/{{ page.date | date: '%Y/%m/%d' }}/{{ page.fileSlug }}/",
+ "body_class": "manual-design manual-article"
}
diff --git a/ai-labbet/index.md b/ai-labbet/index.md
index 91c5ae6..c8cea3c 100644
--- a/ai-labbet/index.md
+++ b/ai-labbet/index.md
@@ -1,11 +1,14 @@
---
layout: sections
+body_class: manual-design manual-subpage manual-service manual-ai
title: AI & maskininlärning
description: Praktiska AI- och maskininlärningslösningar för verksamheter, digitala tjänster och industri.
---
{% section "hero", "ai" %}
+
+
AI & maskininlärning
# Från möjlighet till *fungerande lösning.*
@@ -60,6 +63,8 @@ Vi utvecklar produktionsnära lösningar där data, modeller, sensorer, hårdvar
{% section "steps", "soft" %}
+
+
Så arbetar vi
## Från ett tydligt problem till en hållbar lösning.
@@ -84,7 +89,7 @@ Vi följer resultatet och utvecklar modeller och arbetssätt när behoven förä
{% endsection %}
-{% section "callout", "dark" %}
+{% section "callout", "light" %}
Erfarenhet på riktigt
diff --git a/ai-labbet/industri/index.md b/ai-labbet/industri/index.md
index 5a8b173..02b164d 100644
--- a/ai-labbet/industri/index.md
+++ b/ai-labbet/industri/index.md
@@ -1,11 +1,14 @@
---
layout: sections
+body_class: manual-design manual-subpage manual-service manual-industry
title: AI för industri
description: Produktionsnära AI för optimering, kvalitetskontroll och prediktivt underhåll.
---
{% section "hero", "industry" %}
+
+
AI för industri
# När AI möter *den fysiska verkligheten.*
diff --git a/apps/optibbera/integritetspolicy.md b/apps/optibbera/integritetspolicy.md
index 8d6da8b..1065a73 100644
--- a/apps/optibbera/integritetspolicy.md
+++ b/apps/optibbera/integritetspolicy.md
@@ -1,4 +1,5 @@
---
+layout: page
title: Integritetspolicy för Optibbera
---
diff --git a/apps/optibbera/privacy-policy.md b/apps/optibbera/privacy-policy.md
index 8d6da8b..1065a73 100644
--- a/apps/optibbera/privacy-policy.md
+++ b/apps/optibbera/privacy-policy.md
@@ -1,4 +1,5 @@
---
+layout: page
title: Integritetspolicy för Optibbera
---
diff --git a/assets/img/manual-about.webp b/assets/img/manual-about.webp
new file mode 100644
index 0000000..d648502
Binary files /dev/null and b/assets/img/manual-about.webp differ
diff --git a/assets/img/manual-ai-process.webp b/assets/img/manual-ai-process.webp
new file mode 100644
index 0000000..c838a35
Binary files /dev/null and b/assets/img/manual-ai-process.webp differ
diff --git a/assets/img/manual-ai.webp b/assets/img/manual-ai.webp
new file mode 100644
index 0000000..2f11ca0
Binary files /dev/null and b/assets/img/manual-ai.webp differ
diff --git a/assets/img/manual-characters.webp b/assets/img/manual-characters.webp
new file mode 100644
index 0000000..eb0a2eb
Binary files /dev/null and b/assets/img/manual-characters.webp differ
diff --git a/assets/img/manual-community.webp b/assets/img/manual-community.webp
new file mode 100644
index 0000000..0892d9d
Binary files /dev/null and b/assets/img/manual-community.webp differ
diff --git a/assets/img/manual-home-maskinen-futuristisk.webp b/assets/img/manual-home-maskinen-futuristisk.webp
new file mode 100644
index 0000000..56bf619
Binary files /dev/null and b/assets/img/manual-home-maskinen-futuristisk.webp differ
diff --git a/assets/img/manual-home-samarbete.webp b/assets/img/manual-home-samarbete.webp
new file mode 100644
index 0000000..11deff7
Binary files /dev/null and b/assets/img/manual-home-samarbete.webp differ
diff --git a/assets/img/manual-review.webp b/assets/img/manual-review.webp
new file mode 100644
index 0000000..5038bb2
Binary files /dev/null and b/assets/img/manual-review.webp differ
diff --git a/assets/img/manual-system-process.webp b/assets/img/manual-system-process.webp
new file mode 100644
index 0000000..db77c37
Binary files /dev/null and b/assets/img/manual-system-process.webp differ
diff --git a/assets/img/manual-system.webp b/assets/img/manual-system.webp
new file mode 100644
index 0000000..8bdf39c
Binary files /dev/null and b/assets/img/manual-system.webp differ
diff --git a/assets/site.scss b/assets/site.scss
index c907f65..44079c0 100644
--- a/assets/site.scss
+++ b/assets/site.scss
@@ -13,4 +13,9 @@
@use "styles/prism";
@use "styles/footer";
@use "styles/section-spacing";
+@use "styles/home-manual";
+@use "styles/manual-subpages";
+@use "styles/manual-remaining";
+@use "styles/manual-actions";
+@use "styles/manual-article";
@use "styles/responsive";
diff --git a/blogg/index.html b/blogg/index.html
index 6b69742..471ebce 100644
--- a/blogg/index.html
+++ b/blogg/index.html
@@ -1,4 +1,5 @@
---
+body_class: manual-design manual-subpage manual-archive
title: Blogg
description: Athegas artiklar om mjukvaruutveckling, AI, data och teknik.
---
diff --git a/blogg/year.html b/blogg/year.html
index 7df0c1d..3110685 100644
--- a/blogg/year.html
+++ b/blogg/year.html
@@ -1,4 +1,5 @@
---
+body_class: manual-design manual-subpage manual-archive
pagination:
data: collections.blogYears
size: 1
diff --git a/docs/designmanual/README.md b/docs/designmanual/README.md
new file mode 100644
index 0000000..382bde6
--- /dev/null
+++ b/docs/designmanual/README.md
@@ -0,0 +1,151 @@
+# Athega · Designmanual
+
+**Version 0.1 · uppdaterad 23 oktober 2026.** Figurer, illustrationer, färg, typografi och layout på Athegas webbplats.
+
+[Öppna hela manualen som PDF](athega-designmanual-0.1.pdf). GitHub visar PDF-filen direkt; om förhandsvisningen inte laddas går den att ladda ned därifrån.
+
+
+
+## Uttrycket
+
+Bilderna bär personligheten. Webbsidan är lugn, tydlig och enkel att använda. Illustrationerna ska visa en konkret handling som hör ihop med sidans budskap.
+
+Athega-orange **#ff6600** och företagets logotyp är grunden. Georgia kombineras med enkel sans, vitt med varm neutral som stödfärg. En större startsidesscen och en mindre bild per tjänstesida är riktmärket.
+
+## Tre karaktärer
+
+Trion heter **Athegamannen, Ada och Byte**. Athegamannen följer med från [sajten från 1997](https://1997.athega.se/athega.html). Ada är uppfinnaren och Byte är hunden. Ada har en blinkning till Ada Lovelace; Byte förenar datorvärlden med hundens nyfikenhet.
+
+[Läs deras berättelse på sajten](../../vara-figurer/index.md).
+
+
+
+- **Athegamannen:** originalets svarta framåtsvepta frisyr, mörka glasögon, vita dräkt och orange handskar. Bred bröstkorg, breda axlar och kraftiga armar och lår ger honom en kompakt silhuett.
+- **Ada:** kopparröd hårknut, runda glasögon, vit arbetsjacka och orange scarf. Tar lika mycket initiativ som Athegamannen; båda får tänka, bygga och testa.
+- **Byte:** rufsig, ljus päls med mörka fält, asymmetriska öron och orange halsband. Upptäcker det andra missar genom naturligt hundbeteende.
+
+Alla tre behöver inte vara med i varje bild. Använd karaktärsbladet som referens för utseende och proportioner. Dräkternas triangelsymboler ersätter inte företagets logotyp.
+
+[Se den ursprungliga Athegamannen](assets/athegamannen-original.jpg).
+
+## Gemensam berättelse för bilderna
+
+Athega gör nya tekniska möjligheter användbara. Vi är nyfikna nog att prova och erfarna nog att bedöma resultatet. Tekniken hjälper oss att bygga; människorna ger riktning, granskar och förbättrar. Bra lösningar växer fram genom samarbete, experiment och uppmärksamhet på detaljer.
+
+Detta är grunden för alla illustrationer, oavsett sida eller motiv. Figuren,
+handlingen och resultatet ska tillsammans bära sidans budskap. Berättelsen är
+ett arbetsunderlag för bildproduktion, inte extra förklarande text på sajten.
+
+### Så gör du en ny bild utan tidigare kontext
+
+1. Läs sidans text och formulera ett enda budskap som bilden ska stödja.
+2. Fyll i [bildbriefen](bildbrief.txt): handling, synligt resultat, figurer, komposition, placering och visningsstorlek.
+3. Bifoga [karaktärsbladet](assets/karaktarer.png) för identitet och [bildreferensen](../../assets/img/manual-home-maskinen-futuristisk.webp) för material, färger och detaljnivå. Öppna bilderna; filnamn räcker inte som referenser.
+4. Generera med hela briefen och referenserna. Kontrollera berättelse, anatomi och läsbarhet i dator- och mobilvyn. Rätta fel och spara slutlig prompt.
+
+### Bildvärlden
+
+Ren europeisk serieteckning med tydliga konturer, begränsade färgfält och lätt
+skuggning. Tekniken har släta vita eller elfenbensfärgade höljen, dämpat blå
+moduler, glas och Athega-orange förbindelser. Den får vara fantasifull, men
+funktion och samband ska vara begripliga. Håll miljön enkel och lämna luft runt
+motivet. Använd vit bakgrund mot vitt, eller verklig transparens när bilden ska
+fungera på olika ytor. Undvik mässingsestetik, magiska effekter och inbakad text.
+
+Athegamannen bidrar med erfarenhet och handlingskraft, Ada med nyfikenhet och
+experimentlust och Byte med uppmärksamhet på det andra missar. De två människorna
+är jämbördiga och kan växla roller. Välj vilka figurer som behövs för berättelsen.
+
+### Samma grund, olika motiv
+
+| Sidans budskap | Möjlig handling | Vad bilden ska göra synligt |
+| --- | --- | --- |
+| Från idé till fungerande produkt | En instruktion matas in, en produkt kommer ut och granskas | Teknikens möjligheter och människans omdöme |
+| Systemutveckling | Ada och Athegamannen fogar samman moduler efter en gemensam skiss | Delarna bildar en fungerande helhet |
+| AI och experiment | En figur provar, den andra jämför resultatet med utgångspunkten | Lärande genom försök och utvärdering |
+| Teknikgranskning | En förbindelse följs och en svag del undersöks | Problem upptäcks och blir möjliga att åtgärda |
+| Samarbete | Figurer löser varsin del av ett gemensamt problem | Kompletterande perspektiv och gemensamt ansvar |
+
+Exemplen är utgångspunkter, inte fasta scener. Varje bild ska ha en egen anledning
+att finnas. Maskinen är ett motiv bland flera; den ska inte bli standardbild för
+varje tjänst. Små fynd kan belöna den som tittar närmare, men huvudbudskapet ska
+fungera även när bilden visas litet.
+
+## Bildspråk
+
+Ren europeisk serieteckning med tydliga bläckkonturer, begränsade plana färger och lätt skuggning. En tydlig handling per bild, luft runt motivet och få men meningsfulla detaljer. Undvik generiska kontorsmotiv, överlastade maskiner och inbakad text.
+
+Illustrationerna är **AI-genererade**. Karaktärsbladet och stilreferensen är grund för bildproduktionen. Kontrollera anatomi, uttryck och kontinuitet i varje ny bild.
+
+## Färg och typografi
+
+| Del | Värde |
+| -------------- | ------------------------------------------- |
+| Athega-orange | `#ff6600`, befintlig signaturfärg |
+| Text | `#111315`, sekundär text `#363a3c` |
+| Grund | Vitt `#ffffff` och varm neutral `#f4f2ed` |
+| Avdelare | `#dedfdb` |
+| Illustrationer | Dämpad blå `#6b7f8a` som komplement |
+| Rubriker | Georgia, fet |
+| Brödtext | Helvetica Neue, Segoe UI, Arial, sans-serif |
+
+Mörk text på ljusa ytor. Fristående uppmaningar använder vita ramknappar med orange kant. Orange används som accent och som text på mörka ytor. Logotypens färg och form ändras inte.
+
+Georgia med enkel sans är sajtens typografipar. HTML-manualens provsida har kvar möjligheten att jämföra med enbart sans-serif.
+
+## Layout och interaktion
+
+Sidfoten är kompakt i det smala läget: mindre logotyp, länkar i rad som bryts vid behov, kontaktuppgifter bredvid varandra och inga grupprubriker. Alla länkar och kontaktuppgifter finns kvar.
+
+- Två responsiva lägen: bred layout över 980 px och staplad layout vid 980 px och mindre. Navigationen växlar samtidigt. Kompakta listkort och personkort kan behålla sin interna kolumnindelning där den är läsbar.
+- Innehållsbredd upp till 1 216 px, sidmarginaler 24 px på större skärmar och 20 px på mobil.
+- Avståndsskala: 8, 16, 24, 32, 48, 64 och 96 px.
+- Tydlig introduktion, relevant illustration och snabb väg vidare till tjänsterna. Ingen tidningsliknande sidindelning.
+- Kort får orange understrykning vid hovring och tangentbordsfokus, utan pilikoner.
+- Diskreta övergångar på 150–250 ms, synligt tangentbordsfokus och stöd för minskad rörelse. Ingen styrning av besökarens scrollning.
+- Nya bilder planeras för sin placering och mobilversion. De befintliga 3:2-bilderna visas utan att figurer kapas.
+
+PDF-manualen innehåller även typografisk skala, sidstrukturer, komponentexempel, produktionsregler och en sammanfattning av uttrycket.
+
+## Prova den interaktiva manualen lokalt
+
+Öppna `docs/designmanual/index.html` från en lokal kopia av den här branchen. På macOS, från repots rot:
+
+```sh
+open docs/designmanual/index.html
+```
+
+Ingen installation eller server behövs. På avsnittet **Layout** går det att växla mellan mobil och större vy samt mellan två rubriktypsnitt. GitHub visar HTML-källan, men kör inte den interaktiva sidan i sin filförhandsvisning.
+
+## Filer och lokal visning
+
+- [Hela manualen, PDF](athega-designmanual-0.1.pdf)
+- [Interaktiv manual, HTML-källa](index.html)
+- [Provsida, HTML-källa](preview.html)
+- [Bildbrief att återanvända](bildbrief.txt)
+- [Sammanfattade genereringsinstruktioner](genereringsprompter.txt)
+- [Färger och grundvärden i CSS](tokens.css)
+
+Startsidan, tjänste- och företagssidorna, personalsidorna och bloggöversikten använder samma formspråk. Bloggposterna använder samma form med centrerad rubrik och ingress, vänsterjusterad brödtext och tydliga citat. Texterna och originalbilderna behålls; den gemensamma HTML-mallen är oförändrad. Kör `npm ci` och `npm start` från repots rot för att prova sajten. Själva manualen ligger separat och är undantagen från Eleventy-bygget.
+
+## Knappar
+
+Alla fristående uppmaningar använder samma ramknapp: vit bakgrund, mörk text
+(`#111315`, 16 px, vikt 600, 24 px radavstånd) och 2 px Athega-orange ram
+med 4 px hörnradie. Minst 48 px höjd och 10 × 20 px inre luft.
+Vid hover används `#fff4eb`; tangentbordsfokus har en separat mörk kontur.
+
+Relaterade knappar placeras tillsammans med 16 px mellanrum. Den viktigaste
+kommer först. Länkar i löptext är understrukna. Navigation och klickbara kort
+behåller sina egna beteenden.
+
+## Maskinen på startsidan
+
+Startsidans motiv använder en modern maskin med vita höljen, dämpat blå moduler
+och Athega-orange förbindelser. Ada matar in instruktioner, Athegamannen tar emot
+produkten direkt ur maskinen och Byte hittar en orange pusselbit som saknas i
+produktens gränssnitt. Sambandet mellan instruktion, resultat och granskning ska
+vara synligt. Behåll den rena seriestilen och undvik mässing och alkemiska effekter.
+
+[Startsidans bild](../../assets/img/manual-home-maskinen-futuristisk.webp) ·
+[Bildprompt](maskinen-futuristisk-prompt.txt)
diff --git a/docs/designmanual/assets/athega.svg b/docs/designmanual/assets/athega.svg
new file mode 100644
index 0000000..e662772
--- /dev/null
+++ b/docs/designmanual/assets/athega.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/docs/designmanual/assets/athegamannen-original.jpg b/docs/designmanual/assets/athegamannen-original.jpg
new file mode 100644
index 0000000..93fa96a
Binary files /dev/null and b/docs/designmanual/assets/athegamannen-original.jpg differ
diff --git a/docs/designmanual/assets/karaktarer.png b/docs/designmanual/assets/karaktarer.png
new file mode 100644
index 0000000..910291e
Binary files /dev/null and b/docs/designmanual/assets/karaktarer.png differ
diff --git a/docs/designmanual/assets/samarbete.png b/docs/designmanual/assets/samarbete.png
new file mode 100644
index 0000000..3aaf7ea
Binary files /dev/null and b/docs/designmanual/assets/samarbete.png differ
diff --git a/docs/designmanual/athega-designmanual-0.1.pdf b/docs/designmanual/athega-designmanual-0.1.pdf
new file mode 100644
index 0000000..47f97a9
Binary files /dev/null and b/docs/designmanual/athega-designmanual-0.1.pdf differ
diff --git a/docs/designmanual/bildbrief.txt b/docs/designmanual/bildbrief.txt
new file mode 100644
index 0000000..29e9e7b
--- /dev/null
+++ b/docs/designmanual/bildbrief.txt
@@ -0,0 +1,47 @@
+BILDBRIEF FÖR ATHEGA
+
+GRUND OCH BERÄTTELSE
+Athega är ett konsultbolag inom mjukvaruutveckling, AI och teknisk granskning.
+Athega gör nya tekniska möjligheter användbara. Vi är nyfikna nog att prova och erfarna nog att bedöma resultatet. Tekniken hjälper oss att bygga; människorna ger riktning, granskar och förbättrar. Bra lösningar växer fram genom samarbete, experiment och uppmärksamhet på detaljer.
+Bilden ska visa en begriplig handling som stöder sidans budskap. Tekniken är ett verktyg som människor använder med omdöme. Visa gärna nyfikenhet och diskret humor.
+
+FYLL I FÖR DEN HÄR BILDEN
+Sida och avsnitt: [namn och relevant text från sidan]
+Budskap: [en mening om vad besökaren ska förstå]
+Handling: [vem gör vad med vilket föremål?]
+Resultat: [vilken nytta, upptäckt eller förbättring blir synlig?]
+Figurer och roller: [välj de figurer som behövs; beskriv varje handling]
+Komposition: [huvudmotiv, läsriktning, samband mellan föremålen]
+Placering: [bredvid text / över hela bredden / mindre sektionsbild]
+Format och storlek: [bildförhållande och faktisk visningsbredd på dator och mobil]
+Bakgrund: [vit för vit sidyta / transparent om bilden måste fungera på flera ytor]
+
+BILDVÄRLD OCH UTFÖRANDE
+Ren europeisk serieteckning med tydliga bläckkonturer, begränsade färgfält och lätt skuggning. Vuxna, uttrycksfulla figurer. Modern, genomtänkt teknik: släta vita eller elfenbensfärgade höljen, dämpat blå moduler, glas och orange förbindelser. Apparater och miljöer får vara fantasifulla men deras funktion och samband ska gå att läsa.
+Athega-orange #ff6600 är signaturfärgen. Använd mörkt bläck, vitt/elfenben och dämpat blått som stöd. Orange kan markera en koppling, en viktig del eller en upptäckt. Ingen mässingsestetik, åldrade ångmaskiner, neonmiljö eller magiska effekter.
+En tydlig huvudhandling, enkel miljö och luft runt motivet. Ingen inbakad text, bildtext eller UI-knapp för sajten. En avbildad produkt får ha enkla gränssnittsformer utan läsbar text. Ingen extra logotyp eller påhittade märken.
+
+KARAKTÄRER
+Athegamannen: erfaren, trygg, handlingskraftig och lätt självironisk. Stor svart framåtsvept frisyr, mörka glasögon, vit dräkt och orange handskar. Breda axlar, kraftig bröstkorg, armar och lår; kompakt silhuett. Kan formulera, bygga, testa, granska och ompröva. Undvik poserande superhjälte och en smal, utdragen kropp.
+Ada: nyfiken, uppmärksam och experimenterande. Kopparröd hårknut med penna, runda glasögon, vit arbetsjacka, orange scarf, mörka byxor och platta skor. Hon och Athegamannen är jämbördiga och får växla mellan idé, bygge och granskning.
+Byte: liten rufsig hund med ljus päls, mörka fält, asymmetriska öron och orange halsband. Upptäcker det andra missar genom att nosa, titta och följa spår. Hans fynd ska höra ihop med scenens problem eller resultat. Ingen talande hund eller hund som använder verktyg.
+Alla tre behöver inte vara med. Bevara identitet och kläder från referensbladet; variera poser och situationer.
+
+REFERENSER ATT BIFOGA
+Sökvägarna nedan utgår från repots rot. Öppna och bifoga själva bilderna, inte bara deras filnamn:
+1. docs/designmanual/assets/karaktarer.png — identitet, proportioner, kläder och teckningsstil.
+2. assets/img/manual-home-maskinen-futuristisk.webp — material, palett, detaljnivå och visuell tydlighet. Detta är stilreferens, inte ett krav på maskin eller samma komposition i varje bild.
+Ange referensernas roller i bildprompten. Saknas filerna: hämta dem innan nya bilder skapas; återskapa inte figurerna ur minnet.
+
+MOTIV OCH SAMBAND
+Välj motiv från sidans innehåll: exempelvis bygga en sammanhängande lösning, jämföra ett experiment med en skiss, följa en förbindelse eller upptäcka en svag del. Återanvänd bildvärlden, inte samma maskin på varje sida.
+Om en maskin används: visa hur instruktionen matas in och hur produkten fysiskt kommer ut. Visa människans arbete med resultatet. Ett fynd ska kunna kopplas till resultatet genom exempelvis samma form, färg och en motsvarande saknad del.
+
+KONTROLL FÖRE ANVÄNDNING
+- Förstår man huvudhandlingen utan förklarande bildtext?
+- Hänger indata, handling och resultat ihop visuellt?
+- Är figurerna igenkännbara, proportionerna rätt och anatomin rimlig? Inga extra händer, saknade ben eller sammanväxta föremål.
+- Fungerar bilden vid sidans faktiska visningsstorlek på dator och mobil? Viktig information får inte bero på en pytteliten detalj.
+- Finns luft runt figurer, fötter, svansar och viktiga föremål? Planera beskärning och eventuell kanttoning utan att handlingen försvinner.
+- Stämmer färger, material och detaljnivå med referenserna?
+Rätta fel före publicering. Spara den färdiga bildprompten tillsammans med manualens produktionsunderlag.
diff --git a/docs/designmanual/genereringsprompter.txt b/docs/designmanual/genereringsprompter.txt
new file mode 100644
index 0000000..4079bcd
--- /dev/null
+++ b/docs/designmanual/genereringsprompter.txt
@@ -0,0 +1,20 @@
+ATHEGA · BILDBRIEFAR FÖR KONCEPTSKISSER, 21 OKTOBER 2026
+Sammanfattning av instruktionerna till det inbyggda imagegen-verktyget.
+
+KARAKTÄRSBLAD
+Referenser: sajtens ursprungliga Athegaman; Tobbes tidigare skiss med rödhårig kvinnlig uppfinnare; valt seriestilsprov med Athegamannen bland sammanlänkade moduler.
+Skapa ett karaktärsblad i liggande 3:2 med tre tydligt separerade helfigurer och en mindre handlingspose per figur. Ren varmvit bakgrund, vuxen europeisk seriestil, uttrycksfull bläckkontur, begränsade plana färger och lätt skuggning. Ingen text.
+Athegamannen: bevara ikonisk svart framåtsvept frisyr, mörka glasögon, vit dräkt, orange handskar och triangelsymbol.
+Kvinnlig uppfinnare: kopparröd hårknut med penna, runda glasögon, vit kort arbetsjacka, mörka byxor, platta skor, orange scarf och liten triangelsymbol. Egen silhuett, lika kompetent och framträdande.
+Hund: liten rufsig blandrashund, ljus päls med mörka fält, asymmetriska öron, orange halsband och triangelformad bricka. Naturligt hundbeteende.
+Handlingsposer: mannen undersöker en koppling, kvinnan skissar, hunden nosar på en kabel utan att bita.
+
+GEMENSAM SCEN
+Referenser: det genererade karaktärsbladet och valt seriestilsprov.
+Bevara alla tre figurernas identitet, kläder och proportioner. En scen utan paneler eller text, liggande 3:2. Konstruktionen är huvudmotiv, människorna cirka en fjärdedel av bildens höjd. Kvinnan passar in en brygga och jämför med ritningen; mannen testar en orange koppling; hunden undersöker var förbindelsen försvinner in i en båge. Likvärdiga mänskliga roller. Elfenbensvit grund, dämpad blå, bläck och Athega-orange #ff6600. Luft, rena konturer, lätt skuggning. Ingen extra figur, logotyp, pratbubbla eller dekorativ text.
+
+STATUS
+Bilderna är utforskande AI-genererade skisser. Ansikten, anatomi, proportioner, pälsmarkeringar och uttryck behöver granskas och låsas innan en slutlig karaktärsmanual tas fram.
+
+PROPORTIONSKORRIGERING
+Athegamannen har breddats i både karaktärsbladet och scenen med originalfiguren som referens: bredare axlar och bröstkorg, kraftigare armar och lår, kompaktare silhuett. Identitet, kläder och handling bevaras. Övriga figurer och komposition ska behållas.
diff --git a/docs/designmanual/index.html b/docs/designmanual/index.html
new file mode 100644
index 0000000..e1e9555
--- /dev/null
+++ b/docs/designmanual/index.html
@@ -0,0 +1,776 @@
+
+
+
+
+
+ Athega · Designmanual 0.1
+
+
+
+ Hoppa till innehållet
+
+ Designmanual · 0.1 · 23 oktober 2026
+
+
+
+
+
+
01 / Ett sammanhängande uttryck
+
Nyfikenhet med en egen karaktär.
+
+ En fantasifull bildvärld med tre återkommande figurer. En lugn,
+ modern webbplats som gör erbjudandet lätt att förstå.
+
+
+ Manualen beskriver Athegas bildvärld och webbdesign.
+ Illustrationerna får stå för berättelsen och humorn. Typografi,
+ navigation och layout hjälper besökaren att hitta rätt.
+
+
+
+
+
+ Scen med hela trion. AI-genererad illustration. Klicka på bilderna för full
+ storlek.
+
+
+
+ Grundprinciper
+
Det som håller ihop uttrycket
+
+
Athega-orange och befintlig logotyp.
+
Illustrationer i serietidningsstil.
+
+ Athegamannen, Ada och Byte som återkommande trio.
+
+
Lugn layout där bilderna bär personligheten.
+
Innehållet styr bildval och layout.
+
+
+
+ Formspråk
+
Sajtens uttryck
+
+ Karaktärerna, Georgia med enkel sans, vitt med varm neutral
+ som stödfärg präglar sajten. Bilderna visar konkreta handlingar som
+ hör ihop med innehållet.
+
+
+
+
+
+
02 / Igenkänning över tid
+
Tre figurer. Ett gemensamt universum.
+
+ Karaktärerna ska vara lätta att känna igen även i små utsnitt. De
+ får lösa problem tillsammans, upptäcka något eller testa en idé.
+ Alla tre behöver inte synas i varje bild.
+
+
+
+
+
Trion heter Athegamannen, Ada och Byte. Namnen är fastställda. Ada har en blinkning till Ada Lovelace; Byte förenar datorvärlden med hundens nyfikenhet.
+
+
+
Athegamannen
+
+ Igenkänning: stor svart framåtsvept frisyr,
+ mörka solglasögon, vit dräkt och orange handskar.
+
+
+ Personlighet: trygg, handlingskraftig och lätt
+ självironisk. Får fundera, pröva och ändra sig.
+
+
+ Behåll: originalets breda axlar, kraftiga
+ bröstkorg, armar och lår samt kompakta silhuett och färger. Låt
+ honom arbeta i scenen, utan stora hjälteposer.
+
+
+
+
Ada
+
+ Igenkänning: kopparröd hårknut med penna, runda
+ glasögon, vit arbetsjacka, mörka byxor och orange scarf.
+
+
+ Personlighet: nyfiken, uppmärksam och
+ experimenterande. Tar lika mycket initiativ som Athegamannen.
+
+
+ Behåll: en egen silhuett. Växla vem som tänker,
+ bygger och testar så att rollerna inte blir låsta.
+
+
+
+
Byte
+
+ Igenkänning: liten och rufsig, ljus päls med
+ mörka fält, asymmetriska öron och orange halsband.
+
+
+ Personlighet: hittar det andra missar. Nosar,
+ tittar och följer spår.
+
+
+ Behåll: naturligt hundbeteende. Humorn ligger i
+ situationen; hunden behöver varken prata eller använda verktyg.
+
+
+
+
+
+
+ Förankring i Athega. Athegamannen kommer från
+ sajten från 1997. Ada är uppfinnaren och Byte är hunden.
+ Dräkternas triangelsymboler hör till karaktärerna och ersätter
+ inte företagets logotyp.
+
+
+
+ Karaktärsbladet är referens för figurernas utseende och proportioner.
+ Nya vinklar och poser ska bevara deras igenkänning.
+
+
+
+
Startsidans motiv: en modern maskin med vita höljen, dämpat blå moduler och orange förbindelser. Ada matar in instruktioner, Athegamannen tar emot produkten direkt ur maskinen och Byte hittar en orange pusselbit som saknas i gränssnittet. Sambandet mellan instruktion, resultat och granskning ska vara synligt. Behåll den rena seriestilen och undvik mässing och alkemiska effekter.
+
03 / Bilden ska berätta något
+
En ren seriestil med små berättelser.
+
+
Den gemensamma berättelsen
+
Athega gör nya tekniska möjligheter användbara. Vi är nyfikna nog att prova och erfarna nog att bedöma resultatet. Tekniken hjälper oss att bygga; människorna ger riktning, granskar och förbättrar. Bra lösningar växer fram genom samarbete, experiment och uppmärksamhet på detaljer.
+
Alla illustrationer utgår från detta. Välj en konkret handling utifrån sidans budskap: bygga en helhet, prova en idé, granska en förbindelse eller upptäcka en svag del. Maskinen är ett motiv bland flera. Berättelsen styr bildproduktionen och kräver ingen extra förklarande text på sajten.
+
Från sidinnehåll till bild
+
+
Läs sidans text och formulera ett budskap. Fyll i bildbriefens handling, synliga resultat, figurer, placering och visningsstorlek.
+
Bifoga karaktärsbladet för identitet och bildreferensen för material, palett och detaljnivå. Referensens maskin och komposition behöver inte återanvändas.
+
Visa genomtänkt teknik med vita höljen, dämpat blå moduler, glas och orange förbindelser. Enkel miljö, ren serieteckning och luft. Ingen mässingsestetik eller magiska effekter.
+
Låt figurernas egenskaper styra deras handlingar. Ada och Athegamannen kan växla roller; Bytes upptäckt ska höra ihop med resultatet.
+
Kontrollera anatomi, visuella samband och läsbarhet i faktisk dator- och mobilstorlek. Spara slutlig prompt. Hela produktionsunderlaget finns i den återanvändbara bildbriefen.
+
+
+
+
+
+
Visuella regler
+
+
+ Handritad, tydlig konturlinje. Något kraftigare ytterkontur
+ och lättare detaljer.
+
+
+ Begränsad färgskala, huvudsakligen plana färger och diskret
+ skuggning.
+
+
Varmvit bakgrund med luft runt motivet.
+
+ Orange framhäver en viktig del eller förbindelse. Färgen
+ behöver inte täcka hela bilden.
+
+
+ Vuxna, stiliserade figurer med uttrycksfulla poser. Samma
+ detaljnivå på figurer och miljö.
+
+
+ Text och knappar ligger i HTML, aldrig inbakade i
+ illustrationen.
+
+
+
+
+
Berättelseregler
+
+
+ En tydlig handling per bild: undersöka, bygga, testa eller
+ förbättra.
+
+
+ Figurerna samspelar med motivet. Undvik poserande framför en
+ kamera.
+
+
Låt funktion och humor gå att upptäcka utan förklaring.
+
+ Variera miljö och situation. Alla tjänster ska inte
+ illustreras med samma byggklossar.
+
+ Illustrationer är metaforer. Kundcase och
+ medarbetarpresentationer använder verkliga uppgifter och
+ porträtt.
+
+
+
+
+
+
+
+
+
Sammanhang
+
Motividé att utveckla
+
Bildens uppgift
+
+
+
+
+
Startsida
+
Trion löser ett problem tillsammans.
+
Förmedla nyfikenhet, erfarenhet och personlighet.
+
+
+
Systemutveckling
+
En fungerande konstruktion byggs ut utan att stanna.
+
Visa vidareutveckling och ansvar för helheten.
+
+
+
AI & maskininlärning
+
Flera försök jämförs, ett resultat undersöks.
+
Betona experiment, utvärdering och omdöme.
+
+
+
Teknikgranskning
+
Figurerna följer en koppling in under ytan.
+
Gestalta att förstå hur något faktiskt fungerar.
+
+
+
Små detaljbilder
+
+ En blick, en tass eller ett verktyg från en större scen.
+
+
Skapa igenkänning utan ännu en stor illustration.
+
+
+
+
+
+ Detta är motivbriefar, inte nya påståenden eller kundcase. Nya
+ illustrationer ska granskas i den storlek där de ska användas.
+
+
+
+
04 / Befintlig avsändare, lugnare inramning
+
Orange visar vägen.
+
+ Behåll den orange logotypen. Använd originalfilen utan omritning,
+ filter eller genererad ersättning. Ge den fri yta motsvarande minst
+ halva dess höjd. Illustrationerna får en kompletterande, dämpad blå
+ ton.
+
+
+
+
+
+
Athega-orange
+ #ff6600 · --orange
+
+ Logotyp, accenter, länkunderstrykningar och handlingsknappar.
+
+
+
+
+
+
+
Bläck
+ #111315 · --ink
+
Rubriker, text, fokusmarkering och enstaka mörka ytor.
+
+
+
+
+
+
Vitt
+ #ffffff · --paper
+
Huvudyta och innehåll som behöver tydlig läsro.
+
+
+
+
+
+
Varm neutral
+ #f4f2ed · --neutral
+
+ Stödyta. Ingen pappersstruktur eller gulnad effekt.
+
+
+
+
+
+
+
Illustrationsblå
+ #6b7f8a
+
+ Främst i bilderna. Ska inte konkurrera med orange i
+ gränssnittet.
+
+
+
+
+
+
+
Linje
+ #dedfdb · --line
+
+ Diskreta avdelare. Inte ensam markering av viktiga kontroller.
+
+
+
+
+
+
Läsbarhet före färgeffekt
+
+ Fristående uppmaningar använder vit bakgrund, mörk text och 2 px Athega-orange ram.
+ Länkar i löptext har mörk text med orange understrykning. Orange används som accent,
+ inte som text på vitt. Vit text på Athega-orange används inte för vanlig knapptext.
+
+
+ Beräknat från de angivna färgvärdena. Detta är inte en
+ tillgänglighetsgranskning av hela sajten. Logotypen är en separat
+ varumärkestillämpning.
+
+
+
+
+
05 / Redaktionell karaktär i lagom dos
+
Ett rubriktypsnitt. En enkel lästext.
+
+ Typografipar Georgia till huvud- och sektionsrubriker.
+ Helvetica Neue med Segoe UI och Arial som reserv
+ till brödtext och navigation. Inga externa fontanrop behövs. Det
+ exakta utseendet varierar mellan operativsystem.
+
+
+
+ Nyfikna på att utforska nytt, med erfarenhet av vad som håller.
+
+
+ Vi är experter på den senaste mjukvarutekniken och erbjuder den
+ till våra kunder.
+
+
+
+
+
+
+
Nivå
+
Dator / mobil
+
Vikt & radavstånd
+
+
+
+
+
H1
+
52 / 36 px
+
Georgia 700 · 1,12
+
+
+
H2
+
36 / 28 px
+
Georgia 700 · 1,2
+
+
+
H3 / kortrubrik
+
24 / 22 px
+
Georgia 700 · 1,25
+
+
+
Ingress
+
22 / 20 px
+
Sans 400 · 1,5
+
+
+
Brödtext
+
18 / 18 px
+
Sans 400 · 1,65
+
+
+
Navigation
+
16 / 16 px
+
Sans 500 · 1,4
+
+
+
Etikett / bildtext
+
13–14 / 13–14 px
+
Sans 500 · 1,5
+
+
+
+
+
+ Löptext får högst cirka 65 tecken per rad. Undvik tunna vikter,
+ långa versalrubriker, dekorativa kursiver och stora citat som bryter
+ sönder startsidan. En H1 per sida. Bryt långa svenska ord vid behov,
+ utan fasta radbrytningar som bara fungerar på en skärmstorlek.
+
+
+
+
Bloggartiklar har centrerad rubrik och ingress samt vänsterjusterad brödtext med högst 720 px läsbredd. Behåll varje artikels originalbilder och text; små bilder förstoras inte för att fylla spalten.
+
På sajten används bred layout över 980 px och staplad layout vid 980 px och mindre. Navigationen växlar samtidigt. Undvik ett separat mellanläge med blandade kolumner.
+
06 / Samma system, olika uppgifter
+
Erbjudandet ska gå att hitta direkt.
+
+ En gemensam innehållsbredd på högst 1216 px, 24 px sidmarginal på
+ dator och 20 px på mobil. Använd avståndsskalan 8, 16, 24, 32, 48,
+ 64 och 96 px. Varje nytt avsnitt behöver inte en egen bakgrundsfärg,
+ ram eller etikett.
+
+
+
+
Startsida
+
Logotyp + tydlig navigation
+
Budskap + kort förklaring + väg till tjänster
+
En gemensam scen med trion
+
Fyra erbjudanden med korta beskrivningar
+
Erfarenhet och vägen till kontakt
+
Utvalda blogginlägg
+
Jobba med oss + kompakt sidfot
+
+
+
Tjänstesida
+
Samma navigation och typografiska skala
+
Vad vi hjälper till med + kontaktlänk
+
En mindre scen som förklarar tjänsten
+
Arbetssätt i läsbara avsnitt
+
Process, exempel eller fördjupning
+
Tydlig kontakt + gemensam sidfot
+
+
+
+ Bildformat: planera stora scener för 16:9 eller
+ 2:1, mindre motiv för 4:3. Generera eller komponera för formatet;
+ skär inte bort ansikten och handling för att fylla en ruta. Bilderna här är 3:2 och visas därför utan beskärning. På
+ mobil kan en förenklad komposition behövas.
+
+
Sidfoten är kompakt i det smala läget: mindre logotyp, länkar i rad
+ som bryts vid behov, kontaktuppgifter bredvid varandra och inga
+ grupprubriker. Alla länkar och kontaktuppgifter finns kvar.
+
Provsida: pröva inramningen
+
+ Startsidesutsnitt med befintliga texter. Provet visar rubrik,
+ ingress, illustration, tjänster och kontakt. Det är inte en komplett
+ implementation av sajten. Växla typsnitt för att bedöma hur mycket
+ redaktionell känsla ni vill ha.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Öppna provsidan i ett eget fönster. Datorläget använder tillgänglig bredd i manualen; i eget fönster
+ kan du se den vid full skärmbredd. Kontrollerna kräver JavaScript,
+ själva innehållet gör det inte.
+
+ Vald knappstil: mörk text på vitt med 2 px orange ram, samma stil för båda uppmaningarna och en liten
+ rörelse vid pekare eller tangentbordsfokus.
+
+
+
+
Knappar och länkar
+
+
En tydlig primär handling per avsnitt.
+
Alla fristående uppmaningar använder samma ramknapp: vit bakgrund, mörk text (#111315), 2 px orange ram (#ff6600), 16 px text i vikt 600, 24 px radavstånd och 4 px hörnradie. Minst 48 px höjd och 10 × 20 px inre luft.
+
Vid hover används #fff4eb. Tangentbordsfokus har separat mörk kontur och ljus separation.
+
Uppmaningar som hör ihop placeras tillsammans med 16 px mellanrum och samma utseende. Den viktigaste kommer först. Längre text får radbrytas på mobil.
+
Länkar inne i löptext är understrukna. Navigation och klickbara kort behåller sina egna beteenden; de får inte knappramar.
+
+ Minst 44 × 44 px som designmål för kontroller och menylänkar.
+
+
+ Synlig fokusmarkering med mörk kontur och ljus separation.
+
+
+ Länkar går att förstå utan enbart färg. E-postlänkar visar
+ adressen.
+
+
+ Högst 4 px hörnradie. Undvik många olika
+ kortformer.
+
+
+
Kort och navigation
+
+
Tjänste- och bloggkort har inga dekorativa pilikoner.
+
Rubriken får orange understrykning vid hover och fokus.
+
Hela kortet kan vara en länk om det bara har ett mål.
+
+ Mobilmenyn ska fungera med tangentbord och utan JavaScript.
+
+
+
+
+
Rörelse
+
+
150–250 ms för enkel återkoppling på kontroller.
+
+ En hund som tittar eller en koppling som reagerar kan prövas
+ som enstaka detalj.
+
+
Ingen ständig animation vid text som ska läsas.
+
+ Ingen scrollkapning eller innehåll som först måste animeras
+ fram.
+
+ Innehåll ligger i befintlig Markdown och startsidans
+ datafil.
+
+
+ Gemensamma färger, avstånd och typografi samlas i aktiva
+ Sass-variabler.
+
+
+ Mallar väljer bildplacering och komponentvariant.
+ Innehållsfiler får inte bli sidbyggare.
+
+
+ Sajten är statisk och använder inga externa fonttjänster.
+
+
+ Kontrollera startsida, tjänstesida, Om oss och blogg vid
+ ändringar av gemensamma komponenter.
+
+
+
+
+
Bildproduktion
+
+
Använd manualens karaktärsblad och stilreferens.
+
+ Skriv en kort bildbrief med handling, format och användning.
+
+
+ Bifoga samma karaktärsblad och en godkänd stilbild till varje
+ ny generering.
+
+
+ Granska poser, anatomi, ansikten, proportioner och
+ kontinuitet.
+
+
+ Exportera webbversioner med rimliga dimensioner. Behåll
+ original och prompt separat.
+
+
+ Sätt bredd och höjd på bilder. Ladda bilder under första vyn
+ senare. Dekorativa bilder får tom alt-text; informativa bilder
+ får en kort beskrivning.
+
+
+
+
+
+
Filstruktur vid en framtida implementation
+
+ assets/img/brand/characters/ för fastställda
+ referenser och assets/img/illustrations/ för
+ publicerade illustrationer. Manualen och arbetsmaterial ska
+ uttryckligen undantas från Eleventy eller lagras utanför sajtens
+ input. Dessa mappar har inte skapats i repot.
+
+
+
+ Återanvändbar bildbrief
+
BILDBRIEF FÖR ATHEGA
+
+GRUND OCH BERÄTTELSE
+Athega är ett konsultbolag inom mjukvaruutveckling, AI och teknisk granskning.
+Athega gör nya tekniska möjligheter användbara. Vi är nyfikna nog att prova och erfarna nog att bedöma resultatet. Tekniken hjälper oss att bygga; människorna ger riktning, granskar och förbättrar. Bra lösningar växer fram genom samarbete, experiment och uppmärksamhet på detaljer.
+Bilden ska visa en begriplig handling som stöder sidans budskap. Tekniken är ett verktyg som människor använder med omdöme. Visa gärna nyfikenhet och diskret humor.
+
+FYLL I FÖR DEN HÄR BILDEN
+Sida och avsnitt: [namn och relevant text från sidan]
+Budskap: [en mening om vad besökaren ska förstå]
+Handling: [vem gör vad med vilket föremål?]
+Resultat: [vilken nytta, upptäckt eller förbättring blir synlig?]
+Figurer och roller: [välj de figurer som behövs; beskriv varje handling]
+Komposition: [huvudmotiv, läsriktning, samband mellan föremålen]
+Placering: [bredvid text / över hela bredden / mindre sektionsbild]
+Format och storlek: [bildförhållande och faktisk visningsbredd på dator och mobil]
+Bakgrund: [vit för vit sidyta / transparent om bilden måste fungera på flera ytor]
+
+BILDVÄRLD OCH UTFÖRANDE
+Ren europeisk serieteckning med tydliga bläckkonturer, begränsade färgfält och lätt skuggning. Vuxna, uttrycksfulla figurer. Modern, genomtänkt teknik: släta vita eller elfenbensfärgade höljen, dämpat blå moduler, glas och orange förbindelser. Apparater och miljöer får vara fantasifulla men deras funktion och samband ska gå att läsa.
+Athega-orange #ff6600 är signaturfärgen. Använd mörkt bläck, vitt/elfenben och dämpat blått som stöd. Orange kan markera en koppling, en viktig del eller en upptäckt. Ingen mässingsestetik, åldrade ångmaskiner, neonmiljö eller magiska effekter.
+En tydlig huvudhandling, enkel miljö och luft runt motivet. Ingen inbakad text, bildtext eller UI-knapp för sajten. En avbildad produkt får ha enkla gränssnittsformer utan läsbar text. Ingen extra logotyp eller påhittade märken.
+
+KARAKTÄRER
+Athegamannen: erfaren, trygg, handlingskraftig och lätt självironisk. Stor svart framåtsvept frisyr, mörka glasögon, vit dräkt och orange handskar. Breda axlar, kraftig bröstkorg, armar och lår; kompakt silhuett. Kan formulera, bygga, testa, granska och ompröva. Undvik poserande superhjälte och en smal, utdragen kropp.
+Ada: nyfiken, uppmärksam och experimenterande. Kopparröd hårknut med penna, runda glasögon, vit arbetsjacka, orange scarf, mörka byxor och platta skor. Hon och Athegamannen är jämbördiga och får växla mellan idé, bygge och granskning.
+Byte: liten rufsig hund med ljus päls, mörka fält, asymmetriska öron och orange halsband. Upptäcker det andra missar genom att nosa, titta och följa spår. Hans fynd ska höra ihop med scenens problem eller resultat. Ingen talande hund eller hund som använder verktyg.
+Alla tre behöver inte vara med. Bevara identitet och kläder från referensbladet; variera poser och situationer.
+
+REFERENSER ATT BIFOGA
+Sökvägarna nedan utgår från repots rot. Öppna och bifoga själva bilderna, inte bara deras filnamn:
+1. docs/designmanual/assets/karaktarer.png — identitet, proportioner, kläder och teckningsstil.
+2. assets/img/manual-home-maskinen-futuristisk.webp — material, palett, detaljnivå och visuell tydlighet. Detta är stilreferens, inte ett krav på maskin eller samma komposition i varje bild.
+Ange referensernas roller i bildprompten. Saknas filerna: hämta dem innan nya bilder skapas; återskapa inte figurerna ur minnet.
+
+MOTIV OCH SAMBAND
+Välj motiv från sidans innehåll: exempelvis bygga en sammanhängande lösning, jämföra ett experiment med en skiss, följa en förbindelse eller upptäcka en svag del. Återanvänd bildvärlden, inte samma maskin på varje sida.
+Om en maskin används: visa hur instruktionen matas in och hur produkten fysiskt kommer ut. Visa människans arbete med resultatet. Ett fynd ska kunna kopplas till resultatet genom exempelvis samma form, färg och en motsvarande saknad del.
+
+KONTROLL FÖRE ANVÄNDNING
+- Förstår man huvudhandlingen utan förklarande bildtext?
+- Hänger indata, handling och resultat ihop visuellt?
+- Är figurerna igenkännbara, proportionerna rätt och anatomin rimlig? Inga extra händer, saknade ben eller sammanväxta föremål.
+- Fungerar bilden vid sidans faktiska visningsstorlek på dator och mobil? Viktig information får inte bero på en pytteliten detalj.
+- Finns luft runt figurer, fötter, svansar och viktiga föremål? Planera beskärning och eventuell kanttoning utan att handlingen försvinner.
+- Stämmer färger, material och detaljnivå med referenserna?
+Rätta fel före publicering. Spara den färdiga bildprompten tillsammans med manualens produktionsunderlag.
+ Illustrationerna är skapade med det inbyggda imagegen-verktyget.
+ Karaktärsbladet bygger på originalfiguren, den tidigare kvinnliga
+ figuren och det valda seriestilsprovet. Scenen använder
+ karaktärsbladet som referens. Sammanfattade bildbriefar för
+ illustrationerna finns i
+ genereringsprompter.txt.
+
+
+
+
09 / Formspråket i korthet
+
Så hänger uttrycket ihop.
+
+
Karaktärerna: Athegamannen, Ada och Byte.
+ Använd karaktärsbladet och deras egenskaper som grund.
+
Typografin: Georgia i rubriker, enkel sans
+ i brödtext och gränssnitt.
+
Bakgrunden: vitt som huvudyta, varm neutral
+ som stödfärg.
+
Bildmängden: en större startsidesscen och
+ en mindre bild per tjänstesida är riktmärket. Varje bild ska
+ bidra till sidans berättelse.
+
+
+ Figurer, typografi, färger och bilder bildar ett gemensamt
+ uttryck på hela sajten.
+
Det är ofta våra lösningar du möter, inte vårt namn.
+
+ Vi har arbetat med digitala medier, tillverkning, finans och
+ samhällstjänster sedan webben var ung. Våra konsulter går in där
+ tekniken är viktig och kraven är höga.
+
+
+
+
+
+
+
diff --git a/docs/designmanual/tokens.css b/docs/designmanual/tokens.css
new file mode 100644
index 0000000..880843f
--- /dev/null
+++ b/docs/designmanual/tokens.css
@@ -0,0 +1,32 @@
+/* Athega designmanual 0.1. Förslag, inte sajtens aktuella produktionsvärden. */
+:root {
+ --orange: #ff6600;
+ --ink: #111315;
+ --muted: #363a3c;
+ --paper: #ffffff;
+ --neutral: #f4f2ed;
+ --line: #dedfdb;
+ --illustration-blue: #6b7f8a;
+ --font-heading: Georgia, "Times New Roman", serif;
+ --font-body: "Helvetica Neue", "Segoe UI", Arial, sans-serif;
+ --text-page: clamp(36px, 4vw, 52px);
+ --text-section: clamp(28px, 3vw, 36px);
+ --text-card: 24px;
+ --text-base: 18px;
+ --leading-title: 1.12;
+ --leading-copy: 1.65;
+ --shell: min(1216px, calc(100% - 48px));
+ --space-1: 8px;
+ --space-2: 16px;
+ --space-3: 24px;
+ --space-4: 32px;
+ --space-5: 48px;
+ --space-6: 64px;
+ --space-7: 96px;
+ --radius: 4px;
+}
+@media (max-width: 640px) {
+ :root {
+ --shell: calc(100% - 40px);
+ }
+}
diff --git a/eleventy.config.js b/eleventy.config.js
index c911bb9..ba0776a 100644
--- a/eleventy.config.js
+++ b/eleventy.config.js
@@ -100,6 +100,8 @@ export default function(eleventyConfig) {
// Ta bort .liquid-filer från output efter build (de processas separat)
eleventyConfig.on('eleventy.after', async () => {
const fs = await import('fs/promises');
+ // Bildkopiering med glob följer inte template-undantagen nedan.
+ await fs.rm('_site/docs/designmanual', { recursive: true, force: true });
try {
await fs.unlink('_site/assets/site.js.liquid');
} catch (e) {
@@ -113,8 +115,8 @@ export default function(eleventyConfig) {
// Ignorera dokumentationsfiler (ska inte generera sidor)
eleventyConfig.ignores.add("README.md");
+ eleventyConfig.ignores.add("docs/designmanual/**");
eleventyConfig.ignores.add("docs/space-egg/README.md");
- eleventyConfig.ignores.add("CLAUDE.md");
eleventyConfig.ignores.add("AGENTS.md");
// Ignorera SCSS-filer (kompileras separat)
diff --git a/index.html b/index.html
index 2bd9dc8..ce1c751 100644
--- a/index.html
+++ b/index.html
@@ -1,5 +1,6 @@
---
title: Teknik som gör verklig skillnad
+body_class: manual-design
description: Athega kombinerar beprövad systemutveckling med modern AI och teknikgranskning.
---
{% include "home.html" %}
diff --git a/jobba/index.md b/jobba/index.md
index 4434470..3e7c479 100644
--- a/jobba/index.md
+++ b/jobba/index.md
@@ -1,11 +1,14 @@
---
layout: sections
+body_class: manual-design manual-subpage manual-service manual-careers
title: Jobba med oss
description: Läs om konsultrollen, teknikintresset, gemenskapen och vardagen på Athega.
---
{% section "hero" %}
+
+
Jobba med oss
# Stor frihet. *Vassa kollegor.*
@@ -102,7 +105,7 @@ Driver du eget men saknar kollegor och ett sammanhang? I Athegas konsultnätverk
{% endsection %}
-{% section "callout", "dark" %}
+{% section "callout", "light" %}
Nästa steg
diff --git a/konsultnatverk/index.md b/konsultnatverk/index.md
index 7469a5f..3a5d30f 100644
--- a/konsultnatverk/index.md
+++ b/konsultnatverk/index.md
@@ -1,11 +1,14 @@
---
layout: sections
+body_class: manual-design manual-subpage manual-service manual-network
title: Konsultnätverket
description: Athegas nätverk för skickliga systemutvecklare som driver eget.
---
{% section "hero" %}
+
+
Athegas konsultnätverk
# Egen, *inte ensam.*
@@ -32,7 +35,7 @@ Du behåller friheten i ditt eget bolag och får samtidigt kollegor, affärsstö
{% endsection %}
-{% section "callout", "dark" %}
+{% section "callout", "light" %}
Konsultnätverket
diff --git a/om-oss/index.md b/om-oss/index.md
index c42872f..6e466c9 100644
--- a/om-oss/index.md
+++ b/om-oss/index.md
@@ -1,5 +1,6 @@
---
layout: sections
+body_class: manual-design manual-subpage
title: Om oss
description: >-
Möt människorna på Athega och läs om vårt teknikintresse, vår historia och hur bolaget arbetar i
@@ -8,6 +9,8 @@ description: >-
{% section "hero" %}
+
+
Om Athega
# Teknikintresse som *aldrig har gått över.*
@@ -18,6 +21,14 @@ I snart tre decennier har vi hjälpt svenska företag med avancerad mjukvaruutve
{% section "history" %}
+Athega i korthet
+
+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.
+
+{% endsection %}
+
+{% section "history" %}
+
Nyfikna från början
Athega grundades 1996 under namnet III Information Integration Innovation HB och blev Athega AB den 1 november 1997. Drivkraften var ett genuint intresse för det som då kallades internetteknik.
@@ -70,6 +81,16 @@ Vi söker erfarna systemutvecklare som vill fortsätta vara nyfikna och göra ve
{% section "company" %}
+## Några andra bekanta ansikten.
+
+Athegamannen har hängt med sedan 1997. Nu har han fått sällskap av uppfinnaren Ada och hunden Byte. Tillsammans ger de vårt teknikintresse en tecknad form.
+
+[Möt Athegamannen, Ada och Byte](/vara-figurer/)
+
+{% endsection %}
+
+{% section "company" %}
+
## Bolagsinformation.
**Athega AB**\
diff --git a/roller/ai-utvecklare.md b/roller/ai-utvecklare.md
index 458c668..f544e1a 100644
--- a/roller/ai-utvecklare.md
+++ b/roller/ai-utvecklare.md
@@ -1,4 +1,5 @@
---
+layout: page
title: AI-utvecklare
---
diff --git a/roller/apputvecklare/index.md b/roller/apputvecklare/index.md
index 97d9a15..1ca11c7 100644
--- a/roller/apputvecklare/index.md
+++ b/roller/apputvecklare/index.md
@@ -1,4 +1,5 @@
---
+layout: page
title: Apputvecklare
---
diff --git a/roller/devops.md b/roller/devops.md
index c32ea1d..df4e73c 100644
--- a/roller/devops.md
+++ b/roller/devops.md
@@ -1,4 +1,5 @@
---
+layout: page
title: DevOps
---
diff --git a/roller/frontendutvecklare.md b/roller/frontendutvecklare.md
index 811e379..fa5cace 100644
--- a/roller/frontendutvecklare.md
+++ b/roller/frontendutvecklare.md
@@ -1,4 +1,5 @@
---
+layout: page
title: Frontendutvecklare
tagline: Frontendutvecklare
sub_tagline: Systemutveckling av webbgränssnitt
diff --git a/roller/fullstackutvecklare/annons.md b/roller/fullstackutvecklare/annons.md
index b237f66..e365c01 100644
--- a/roller/fullstackutvecklare/annons.md
+++ b/roller/fullstackutvecklare/annons.md
@@ -1,4 +1,5 @@
---
+layout: page
title: Fullstackutvecklare med erfarenhet av Javascript och Java
---
diff --git a/roller/fullstackutvecklare/index.md b/roller/fullstackutvecklare/index.md
index a49cc3a..c30fcf7 100644
--- a/roller/fullstackutvecklare/index.md
+++ b/roller/fullstackutvecklare/index.md
@@ -1,4 +1,5 @@
---
+layout: page
title: Fullstackutvecklare
tagline: Fullstackutvecklare
sub_tagline: Fullstack betyder kunskap om hela "stacken" men vad innebär det?
diff --git a/roller/projektledare.md b/roller/projektledare.md
index f7335c8..149918d 100644
--- a/roller/projektledare.md
+++ b/roller/projektledare.md
@@ -1,4 +1,5 @@
---
+layout: page
title: Agilcoach och projektledare
---
diff --git a/scripts/markdown-sections.mjs b/scripts/markdown-sections.mjs
index 5e7efa1..bc04a76 100644
--- a/scripts/markdown-sections.mjs
+++ b/scripts/markdown-sections.mjs
@@ -29,6 +29,15 @@ function inlineTokens(block) {
return block?.find(token => token.type === 'inline')?.children || [];
}
+function takeImage(blocks) {
+ const imageAt = blocks.findIndex(block => {
+ const tokens = inlineTokens(block);
+ return block[0].type === 'paragraph_open' && tokens.length === 1 && tokens[0].type === 'image';
+ });
+ if (imageAt === -1) return undefined;
+ return inlineTokens(blocks.splice(imageAt, 1)[0])[0].attrGet('src');
+}
+
function isLink(block) {
if (block?.[0].type !== 'paragraph_open') return false;
const tokens = inlineTokens(block);
@@ -106,6 +115,7 @@ export function createSectionRenderer(md, renderTemplate) {
switch (kind) {
case 'hero': {
template = 'hero';
+ data.image = takeImage(blocks);
Object.assign(data, header(blocks, 'h1'));
if (!data.heading) throw new Error('A hero needs a # heading.');
data.links = links(blocks);
@@ -116,6 +126,7 @@ export function createSectionRenderer(md, renderTemplate) {
case 'focus': case 'steps': case 'cases': case 'values': case 'community': {
template = 'cards';
const parts = cards(blocks);
+ data.image = takeImage(parts.intro);
Object.assign(data, header(parts.intro));
data.intro = parts.intro.map(block => paragraph(block, 'heading-note')).join('');
data.cards = parts.cards;
diff --git a/scripts/markdown-sections.test.mjs b/scripts/markdown-sections.test.mjs
index bd7f932..3170328 100644
--- a/scripts/markdown-sections.test.mjs
+++ b/scripts/markdown-sections.test.mjs
@@ -58,3 +58,23 @@ test('incorrect block names and variants give clear errors', async () => {
await assert.rejects(render('Text', 'focus', 'stakced'), /Unknown focus variant: stakced/);
await assert.rejects(render('Ingen rubrik', 'hero'), /hero needs a # heading/);
});
+
+test('hero illustration is separated from prose while preserving links and summary', async () => {
+ for (const variant of ['default', 'ai']) {
+ const html = await render('\n\nTjänst\n\n# En *rubrik*\n\nIngress.\n\nSammanfattning med **betoning**.\n\n[Kontakt](mailto:reception@athega.se)', 'hero', variant);
+ assert.equal((html.match(/Ingress\.<\/p>/);
+ assert.match(html, /Sammanfattning med betoning<\/strong>/);
+ assert.match(html, /href="mailto:reception@athega.se"/);
+ }
+});
+
+test('steps support a decorative illustration without consuming heading or cards', async () => {
+ const html = await render('\n\nArbetssätt\n\n## Från idé till lösning\n\nEn introduktion.\n\n### Förstå\n\nFörsta steget.\n\n### Bygga\n\nNästa steg.', 'steps', 'soft');
+ assert.equal((html.match(/Från idé till lösning<\/h2>/);
+ assert.match(html, /En introduktion\./);
+ assert.equal((html.match(//g) || []).length, 2);
+ assert.match(html, /
Bygga<\/h3>/);
+});
diff --git a/systemutveckling/index.md b/systemutveckling/index.md
index 1ad53ae..5313ad9 100644
--- a/systemutveckling/index.md
+++ b/systemutveckling/index.md
@@ -1,5 +1,6 @@
---
layout: sections
+body_class: manual-design manual-subpage manual-service
title: Systemutveckling
description: >-
Seniora systemutvecklare som hjälper er att utveckla, modernisera och förvalta verksamhetskritiska
@@ -8,6 +9,8 @@ description: >-
{% section "hero" %}
+
+
Systemutveckling
# Senior utvecklingskraft som *håller hela vägen.*
@@ -56,6 +59,8 @@ Vi använder moderna AI-stödda arbetssätt när de ger högre kvalitet och kort
{% section "steps", "soft" %}
+
+
Från behov till förvaltning
## Vi tar ansvar där ni behöver det.
@@ -78,7 +83,7 @@ Vi skapar system och kunskap som kan leva vidare, skalas och förändras över t
{% endsection %}
-{% section "callout", "dark" %}
+{% section "callout", "light" %}
Behöver ni förstärkning?
diff --git a/teknikgranskning/index.md b/teknikgranskning/index.md
index d246e25..5112df6 100644
--- a/teknikgranskning/index.md
+++ b/teknikgranskning/index.md
@@ -1,11 +1,14 @@
---
layout: sections
+body_class: manual-design manual-subpage manual-service manual-review
title: Teknikgranskning
description: Teknikgranskning av mjukvara, arkitektur och arbetssätt för investerare, köpare och teknikbolag.
---
{% section "hero", "technical-review" %}
+
+
Teknikgranskning · Mjukvarukvalitet
# Känn till teknikens verkliga kvalitet *innan den förändrar affären.*
@@ -78,7 +81,7 @@ Teknisk beredskap för GDPR och relevanta EU-krav, medan juridisk tolkning lämn
{% endsection %}
-{% section "callout", "dark" %}
+{% section "callout", "light" %}
Resultatet
diff --git a/vara-figurer/index.md b/vara-figurer/index.md
new file mode 100644
index 0000000..1a40c2f
--- /dev/null
+++ b/vara-figurer/index.md
@@ -0,0 +1,72 @@
+---
+layout: sections
+body_class: manual-design manual-subpage manual-characters
+title: Athegamannen, Ada och Byte
+description: Möt våra tecknade figurer. Athegamannen har följt med sedan 1997, och nu får han sällskap av uppfinnaren Ada och hunden Byte.
+---
+
+{% section "hero" %}
+
+
+
+Våra figurer
+
+# En gammal bekant. *Två nya vänner.*
+
+Möt Athegamannen, Ada och Byte. Tre olika personligheter med samma lust att undersöka vad som finns runt nästa hörn.
+
+{% endsection %}
+
+{% section "focus" %}
+
+Lär känna trion
+
+## Nyfikna på sitt eget sätt.
+
+### Athegamannen
+
+Frisyren sitter där den ska. Glasögonen också. Athegamannen har hängt med sedan 1997 och är fortfarande redo att kavla upp ärmarna.
+
+Han är trygg, handlingskraftig och inte särskilt rädd för att göra om. Erfarenhet betyder ju också att veta när man behöver tänka ett varv till. Och han tar hellre itu med problemet än ställer sig i en hjältepose.
+
+### Ada
+
+Ada har gärna en penna i håret och en idé som behöver provas. Hon skissar, bygger och ställer frågan som får de andra att stanna upp: varför gör vi egentligen så här?
+
+Namnet är en blinkning till Ada Lovelace. Men vår Ada är upptagen med nästa experiment. Ibland har hon planen, ibland håller hon i verktygen. Hon och Athegamannen turas om att tänka, testa och ändra sig.
+
+### Byte
+
+Byte har nosen nära marken och öronen åt lite olika håll. När de andra följer ritningen följer han spåret som försvinner bakom arbetsbänken.
+
+Han hittar sådant de andra missar, gärna innan någon har förstått att det saknas. Namnet hör hemma i datorvärlden, men Byte själv är mest intresserad av vad som går att nosa på. Och av att få vara med.
+
+{% endsection %}
+
+{% section "history" %}
+
+Sedan 1997
+
+
+
+## Han var här långt före AI-agenterna.
+
+På vår gamla sajt från 1997 möter du redan Athegamannen. Där finns också bildknappar, en animerad övergång och ord som Internet och Intranet. Det är en liten tidskapsel från en annan webb.
+
+Mycket har hänt sedan dess. Athegamannen får följa med vidare, med sin breda silhuett och sitt eget sätt att se på världen. Nu får han sällskap av Ada och Byte i nya bilder om att förstå, bygga och upptäcka tillsammans.
+
+[Ta en tur till vår sajt från 1997](https://1997.athega.se/athega.html).
+
+{% endsection %}
+
+{% section "callout", "light" %}
+
+Bakom figurerna
+
+## Teknikintresse har många ansikten.
+
+Våra figurer ger form åt något vi känner igen hos oss själva: lusten att förstå hur saker fungerar, pröva en idé och lösa problem tillsammans. Människorna bakom Athega träffar du här.
+
+[Lär känna oss på Athega](/om-oss/)
+
+{% endsection %}
Designmanual · 0.1 · 23 oktober 2026
+ 
+ 
Ingress\.<\/p>/);
+ assert.match(html, /Sammanfattning med betoning<\/strong>/);
+ assert.match(html, /href="mailto:reception@athega.se"/);
+ }
+});
+
+test('steps support a decorative illustration without consuming heading or cards', async () => {
+ const html = await render('\n\nArbetssätt\n\n## Från idé till lösning\n\nEn introduktion.\n\n### Förstå\n\nFörsta steget.\n\n### Bygga\n\nNästa steg.', 'steps', 'soft');
+ assert.equal((html.match(/
+ 
+ 