Bernt
6989a98d75
- Arkitektur: docs/auth/passwordless-architecture.md - Backend: iom/quixzoom-auth-service/ (FastAPI + Redis) - Webb: quixzoom-market-pages/se/login/ (QR-kod + polling) - App: iom/quixzoom-app/src/features/auth/ (push + deep links) Flöde: QR-kod → app-godkännande → webb-inloggad
228 lines
6.3 KiB
Markdown
228 lines
6.3 KiB
Markdown
# 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*
|