design-audit-report.md

# Design Audit Report — Landvex & quiXzoom
**Datum:** 2026-07-06
**Auditor:** Bernt
**Scope:** Alla aktiva sajter i workspace

---

## Sammanfattning

| Sajt | Filer | Emojis | Inline Styles | !important | Status |
|------|-------|--------|---------------|------------|--------|
| landvex-site | 195 | **1 270** ❌ | 4 570 | 1 388 | 🔴 KRITISKT |
| quixzoom-landing | 46 | **1 355** ❌ | 592 | 636 | 🔴 KRITISKT |
| landvex-all | 190 | **1 250** ❌ | 2 | 1 339 | 🔴 KRITISKT |
| quixzoom-market-pages | 327 | **323** ❌ | 325 | 1 | 🟡 ALLVARLIGT |
| landvex-market-pages | 32 | **4** ❌ | 148 | 0 | 🟡 Låg |
| **TOTALT** | **790** | **4 202** | **5 637** | **3 364** | |

---

## 🚨 KRITISKA FYND

### 1. Emojis överallt (4 202 instanser)

**Bryter mot:** Design Constitution — professionell corporate identitet

**Vanligaste emojis:**
- `──` (box-drawing): 852 ggr — används som dekoration/separatorer
- `✓`: 404 ggr — checkmarks i tabeller/UI
- `✗`: 295 ggr — kryss i tabeller/UI
- `✅`: 86 ggr — gröna checkmarks
- `⚠️`: 67 ggr — varningssymboler
- `⚡`: 57 ggr — energi/flash-symbol
- `❌`: 44 ggr — röda kryss
- `🚀`: 38 ggr — raket ("launch")
- `🇸🇪`: 38 ggr — Sverige-flagga
- `🏢`: 37 ggr — byggnad

**Problem:**
- Emojis ser olika ut på olika plattformar (iOS vs Android vs Windows)
- Bryter mot professionell B2B-identitet
- Inte tillgängliga (skärmläsare läser upp dem som "rocket" istället för innebörd)
- Konflikt med Landvex Design Constitution

**Rekommendation:** Ersätt alla emojis med:
- SVG-ikoner (konsekvent rendering)
- CSS-pseudo-element (::before med content)
- Font Awesome eller liknande ikonbibliotek
- Unicode-symboler med fallback (✓ → SVG checkmark)

---

### 2. Inline Styles (5 637 instanser)

**Bryter mot:** Engineering Constitution — separation of concerns

**Fördelning:**
- landvex-site: 4 570 inline styles
- quixzoom-landing: 592
- quixzoom-market: 325
- landvex-market: 148

**Problem:**
- Svårt att underhålla — style ändras på varje element individuellt
- Cachning fungerar sämre
- Konflikt med Design Constitution som kräver design tokens
- Gör det omöjligt att göra globala temaförändringar

**Rekommendation:**
- Flytta alla styles till externa CSS-filer
- Använd CSS-variabler (design tokens)
- Implementera utility-klasser (Tailwind-style eller eget system)

---

### 3. !important (3 364 instanser)

**Bryter mot:** CSS best practices — specificity hell

**Fördelning:**
- landvex-site: 1 388
- landvex-all: 1 339
- quixzoom-landing: 636

**Problem:**
- Visar på CSS-arkitekturproblem
- Gör overrides omöjliga
- Teknisk skuld som växer över tid

**Rekommendation:**
- Refactor CSS med tydlig specificity-hierarki
- Använd CSS-variabler för temavärden
- Inför BEM eller liknande naming convention

---

## 🎨 FÄRGANALYS

### Inkonsekvent färgpalett

**landvex-site** använder:
- `#1d1d1f` (1 067 ggr) — Apple-style mörkgrå
- `#0066ff` (445 ggr) — Landvex blå
- `#888` (427 ggr) — Mellangrå
- `#0a0a0a` (245 ggr) — Nästan svart
- `#10007` (167 ggr) — **OGILTIG HEX!** (5 tecken istället för 3/6)

**quixzoom-landing** använder:
- `#fff` / `#ffffff` (150 ggr totalt) — Vit
- `#0066ff` (58 ggr) — Landvex blå
- `#34c759` (45 ggr) — iOS grön
- `#007aff` (43 ggr) — iOS blå
- `#ff9500` (38 ggr) — iOS orange
- `#ff3b30` (19 ggr) — iOS röd

**Problem:**
- quixzoom-landing använder iOS-systemfärger istället för Landvex-brandfärger
- Färger är hårdkodade istället för CSS-variabler
- `#10007` är ogiltig och kan ge oförutsägbara resultat

**Rekommendation:**
- Definiera canonical färgpalett i Design Constitution
- Ersätt alla hårdkodade färger med CSS-variabler
- Använd endast godkända brandfärger

---

## 📐 TYPOGRAFI

### Inkonsekventa font-storlekar

**landvex-site:**
- 14px: 906 ggr
- 13px: 492 ggr
- 12px: 439 ggr
- .875rem: 299 ggr
- 9px: 235 ggr (för litet för läsbarhet)

**quixzoom-market:**
- Använder rem-enheter (bättre!)
- 1.25rem: 346 ggr
- .875rem: 313 ggr
- 2.5rem: 300 ggr

**Problem:**
- Blandning av px och rem (skala olika vid zoom)
- 9px är för litet för tillgänglighet (WCAG kräver 12px minimum)
- Ingen typografisk skala

**Rekommendation:**
- Definiera typografisk skala i Design Constitution
- Använd rem/enheter för allt
- Minimum 12px för body text

---

## 📏 SPACING & SYMMETRI

### Inkonsekvent spacing

**Vanligaste px-värden:**
- 16px: 2 434 ggr (standard padding/margin)
- 1px: 2 381 ggr (borders)
- 14px: 1 807 ggr
- 12px: 1 525 ggr
- 8px: 1 449 ggr

**Problem:**
- Ingen spacing-skala (4px, 8px, 16px, 24px, 32px, 48px, 64px)
- Magic numbers överallt
- Ojämna värden som 9px, 11px, 13px, 17px

**Rekommendation:**
- Inför spacing-skala (t.ex. 4px base unit)
- Använd CSS-variabler: --space-1, --space-2, etc.
- Eliminera udda värden

---

## 🔍 ANDRA FYND

### Ogiltig CSS
- `#10007` används 167 ggr i landvex-site — detta är en ogiltig hex-färg (5 tecken)

### Saknad struktur
- Ingen konsekvent filorganisation
- Blandning av gammal och ny kod
- Duplicerade sajter (landvex-site vs landvex-all)

---

## 📋 ÅTGÄRDSPRIORITERING

### Omedelbart (denna vecka)
1. ✅ **Ta bort alla emojis** — Ersätt med SVG-ikoner
2. 🔧 **Fixa ogiltig hex-färg** `#10007` → `#100007`

### Kortsiktigt (denna månaden)
3. 🎨 **Standardisera färgpalett** — Definiera CSS-variabler
4. 📐 **Inför spacing-skala** — 4px base unit
5. 📏 **Standardisera typografi** — Definiera skala med rem

### Medellång sikt (nästa kvartal)
6. 🏗️ **Refactor inline styles** → extern CSS
7. 🧹 **Eliminera !important** → bättre specificity
8. 📦 **Konsolidera duplicerade sajter**

---

## FILER MED MEST EMOJIS (top 10)

| Fil | Sajt | Emojis |
|-----|------|--------|
| admin-social-temp.html | landvex-site | 181 |
| admin-social-temp.html | landvex-all | 181 |
| field-inspection-software-comparison.html | landvex-all | 70 |
| api-status.html | quixzoom-landing | 52 |
| customer-dashboard.html | quixzoom-landing | 54 |
| best-infrastructure-inspection-software-2026.html | landvex-site | 46 |
| best-infrastructure-software-2026.html | landvex-all | 46 |
| homepage.html | landvex-fix | 48 |
| stockholm-intelligence.html | landvex-fix | 78 |
| se/index.html | quixzoom-market | 23 |

---

*Rapport genererad av Bernt — Design Audit 2026-07-06*
feat: Passwordless cross-device authentication 2026-07-07 07:11:50 +00:00			`# Design Audit Report — Landvex & quiXzoom`
			`Datum: 2026-07-06`
			`Auditor: Bernt`
			`Scope: Alla aktiva sajter i workspace`

			`---`

			`## Sammanfattning`

			`\| Sajt \| Filer \| Emojis \| Inline Styles \| !important \| Status \|`
			`\|------\|-------\|--------\|---------------\|------------\|--------\|`
			`\| landvex-site \| 195 \| 1 270 ❌ \| 4 570 \| 1 388 \| 🔴 KRITISKT \|`
			`\| quixzoom-landing \| 46 \| 1 355 ❌ \| 592 \| 636 \| 🔴 KRITISKT \|`
			`\| landvex-all \| 190 \| 1 250 ❌ \| 2 \| 1 339 \| 🔴 KRITISKT \|`
			`\| quixzoom-market-pages \| 327 \| 323 ❌ \| 325 \| 1 \| 🟡 ALLVARLIGT \|`
			`\| landvex-market-pages \| 32 \| 4 ❌ \| 148 \| 0 \| 🟡 Låg \|`
			`\| TOTALT \| 790 \| 4 202 \| 5 637 \| 3 364 \| \|`

			`---`

			`## 🚨 KRITISKA FYND`

			`### 1. Emojis överallt (4 202 instanser)`

			`Bryter mot: Design Constitution — professionell corporate identitet`

			`Vanligaste emojis:`
			- `──` (box-drawing): 852 ggr — används som dekoration/separatorer
			- `✓`: 404 ggr — checkmarks i tabeller/UI
			- `✗`: 295 ggr — kryss i tabeller/UI
			- `✅`: 86 ggr — gröna checkmarks
			- `⚠️`: 67 ggr — varningssymboler
			- `⚡`: 57 ggr — energi/flash-symbol
			- `❌`: 44 ggr — röda kryss
			- `🚀`: 38 ggr — raket ("launch")
			- `🇸🇪`: 38 ggr — Sverige-flagga
			- `🏢`: 37 ggr — byggnad

			`Problem:`
			`- Emojis ser olika ut på olika plattformar (iOS vs Android vs Windows)`
			`- Bryter mot professionell B2B-identitet`
			`- Inte tillgängliga (skärmläsare läser upp dem som "rocket" istället för innebörd)`
			`- Konflikt med Landvex Design Constitution`

			`Rekommendation: Ersätt alla emojis med:`
			`- SVG-ikoner (konsekvent rendering)`
			`- CSS-pseudo-element (::before med content)`
			`- Font Awesome eller liknande ikonbibliotek`
			`- Unicode-symboler med fallback (✓ → SVG checkmark)`

			`---`

			`### 2. Inline Styles (5 637 instanser)`

			`Bryter mot: Engineering Constitution — separation of concerns`

			`Fördelning:`
			`- landvex-site: 4 570 inline styles`
			`- quixzoom-landing: 592`
			`- quixzoom-market: 325`
			`- landvex-market: 148`

			`Problem:`
			`- Svårt att underhålla — style ändras på varje element individuellt`
			`- Cachning fungerar sämre`
			`- Konflikt med Design Constitution som kräver design tokens`
			`- Gör det omöjligt att göra globala temaförändringar`

			`Rekommendation:`
			`- Flytta alla styles till externa CSS-filer`
			`- Använd CSS-variabler (design tokens)`
			`- Implementera utility-klasser (Tailwind-style eller eget system)`

			`---`

			`### 3. !important (3 364 instanser)`

			`Bryter mot: CSS best practices — specificity hell`

			`Fördelning:`
			`- landvex-site: 1 388`
			`- landvex-all: 1 339`
			`- quixzoom-landing: 636`

			`Problem:`
			`- Visar på CSS-arkitekturproblem`
			`- Gör overrides omöjliga`
			`- Teknisk skuld som växer över tid`

			`Rekommendation:`
			`- Refactor CSS med tydlig specificity-hierarki`
			`- Använd CSS-variabler för temavärden`
			`- Inför BEM eller liknande naming convention`

			`---`

			`## 🎨 FÄRGANALYS`

			`### Inkonsekvent färgpalett`

			`landvex-site använder:`
			- `#1d1d1f` (1 067 ggr) — Apple-style mörkgrå
			- `#0066ff` (445 ggr) — Landvex blå
			- `#888` (427 ggr) — Mellangrå
			- `#0a0a0a` (245 ggr) — Nästan svart
			- `#10007` (167 ggr) — OGILTIG HEX! (5 tecken istället för 3/6)

			`quixzoom-landing använder:`
			- `#fff` / `#ffffff` (150 ggr totalt) — Vit
			- `#0066ff` (58 ggr) — Landvex blå
			- `#34c759` (45 ggr) — iOS grön
			- `#007aff` (43 ggr) — iOS blå
			- `#ff9500` (38 ggr) — iOS orange
			- `#ff3b30` (19 ggr) — iOS röd

			`Problem:`
			`- quixzoom-landing använder iOS-systemfärger istället för Landvex-brandfärger`
			`- Färger är hårdkodade istället för CSS-variabler`
			- `#10007` är ogiltig och kan ge oförutsägbara resultat

			`Rekommendation:`
			`- Definiera canonical färgpalett i Design Constitution`
			`- Ersätt alla hårdkodade färger med CSS-variabler`
			`- Använd endast godkända brandfärger`

			`---`

			`## 📐 TYPOGRAFI`

			`### Inkonsekventa font-storlekar`

			`landvex-site:`
			`- 14px: 906 ggr`
			`- 13px: 492 ggr`
			`- 12px: 439 ggr`
			`- .875rem: 299 ggr`
			`- 9px: 235 ggr (för litet för läsbarhet)`

			`quixzoom-market:`
			`- Använder rem-enheter (bättre!)`
			`- 1.25rem: 346 ggr`
			`- .875rem: 313 ggr`
			`- 2.5rem: 300 ggr`

			`Problem:`
			`- Blandning av px och rem (skala olika vid zoom)`
			`- 9px är för litet för tillgänglighet (WCAG kräver 12px minimum)`
			`- Ingen typografisk skala`

			`Rekommendation:`
			`- Definiera typografisk skala i Design Constitution`
			`- Använd rem/enheter för allt`
			`- Minimum 12px för body text`

			`---`

			`## 📏 SPACING & SYMMETRI`

			`### Inkonsekvent spacing`

			`Vanligaste px-värden:`
			`- 16px: 2 434 ggr (standard padding/margin)`
			`- 1px: 2 381 ggr (borders)`
			`- 14px: 1 807 ggr`
			`- 12px: 1 525 ggr`
			`- 8px: 1 449 ggr`

			`Problem:`
			`- Ingen spacing-skala (4px, 8px, 16px, 24px, 32px, 48px, 64px)`
			`- Magic numbers överallt`
			`- Ojämna värden som 9px, 11px, 13px, 17px`

			`Rekommendation:`
			`- Inför spacing-skala (t.ex. 4px base unit)`
			`- Använd CSS-variabler: --space-1, --space-2, etc.`
			`- Eliminera udda värden`

			`---`

			`## 🔍 ANDRA FYND`

			`### Ogiltig CSS`
			- `#10007` används 167 ggr i landvex-site — detta är en ogiltig hex-färg (5 tecken)

			`### Saknad struktur`
			`- Ingen konsekvent filorganisation`
			`- Blandning av gammal och ny kod`
			`- Duplicerade sajter (landvex-site vs landvex-all)`

			`---`

			`## 📋 ÅTGÄRDSPRIORITERING`

			`### Omedelbart (denna vecka)`
			`1. ✅ Ta bort alla emojis — Ersätt med SVG-ikoner`
			2. 🔧 Fixa ogiltig hex-färg `#10007` → `#100007`

			`### Kortsiktigt (denna månaden)`
			`3. 🎨 Standardisera färgpalett — Definiera CSS-variabler`
			`4. 📐 Inför spacing-skala — 4px base unit`
			`5. 📏 Standardisera typografi — Definiera skala med rem`

			`### Medellång sikt (nästa kvartal)`
			`6. 🏗️ Refactor inline styles → extern CSS`
			`7. 🧹 Eliminera !important → bättre specificity`
			`8. 📦 Konsolidera duplicerade sajter`

			`---`

			`## FILER MED MEST EMOJIS (top 10)`

			`\| Fil \| Sajt \| Emojis \|`
			`\|-----\|------\|--------\|`
			`\| admin-social-temp.html \| landvex-site \| 181 \|`
			`\| admin-social-temp.html \| landvex-all \| 181 \|`
			`\| field-inspection-software-comparison.html \| landvex-all \| 70 \|`
			`\| api-status.html \| quixzoom-landing \| 52 \|`
			`\| customer-dashboard.html \| quixzoom-landing \| 54 \|`
			`\| best-infrastructure-inspection-software-2026.html \| landvex-site \| 46 \|`
			`\| best-infrastructure-software-2026.html \| landvex-all \| 46 \|`
			`\| homepage.html \| landvex-fix \| 48 \|`
			`\| stockholm-intelligence.html \| landvex-fix \| 78 \|`
			`\| se/index.html \| quixzoom-market \| 23 \|`

			`---`

			`Rapport genererad av Bernt — Design Audit 2026-07-06`