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
6.3 KiB
6.3 KiB
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
#10007anvä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)
- ✅ Ta bort alla emojis — Ersätt med SVG-ikoner
- 🔧 Fixa ogiltig hex-färg
#10007→#100007
Kortsiktigt (denna månaden)
- 🎨 Standardisera färgpalett — Definiera CSS-variabler
- 📐 Inför spacing-skala — 4px base unit
- 📏 Standardisera typografi — Definiera skala med rem
Medellång sikt (nästa kvartal)
- 🏗️ Refactor inline styles → extern CSS
- 🧹 Eliminera !important → bättre specificity
- 📦 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