Servicerapport Design System
Servicerapport Design System — v1.0

Velkommen til Servicerapport
— sådan kan det komme til at se ud

Dette er et mock-up — en visuel prototype der viser hvordan det færdige system kan komme til at se ud. I sidemenuen finder du tanker omkring design og eksempler på sider, funktioner og indhold: fra admin-dashboard og tekniker-app til kundeportal og emails. Intet her er det endelige produkt, men et oplæg du meget gerne må mene noget om, og komme med input og spørgsmål til. Ideen er at vi bygger et white-label system som vi selv bliver kunde i, så det allerede fra start er tænkt ind som en platform andre servicevirksomheder kan abonnere på, og benytte til deres kunder.

PS. Domænet servicerapport.dk er ledigt 😉

Platform — Servicerapport

Det vi bygger

SaaS-platformen bag alt. Bittersweet accent, mørk sidebar, neutral terminologi. Ses kun af super-admins og abonnenter under opsætning.

Abonnent — Eksempel

Bruger af systemet

En servicevirksomhed der lejer platformen. Kører under eget brand, domæne og farver. Eksempel: "VVS Gruppen A/S" med blå accent.

White-Label Klar

Neutral base der bærer enhver virksomheds brand uden at røbe platformen

Konsistent

Tokens sikrer ensartethed på tværs af alle flader og kanaler

Skalerbar

Atomisk opbygning — let at udvide med nye moduler og funktioner

Farver & Design Tokens

Alle farver er defineret som CSS custom properties i index.css. Brug aldrig hardkodede hex-værdier i komponenter.

Platform Tokens (Servicerapport)

Brand / Bittersweet

Primær CTA, aktive states, platform-accent

--brand

#FE5F55

Brand Muted

Hover-baggrunde, highlights

--brand-muted

#EEF2FF

Foreground / Slate-900

Primær tekst, overskrifter

--foreground

#0F172A

Muted Foreground

Sekundær tekst, labels

--muted-foreground

#64748B

Background

Sidens baggrund

--background

#FAFAFA

Card

Kort, paneler, modaler

--card

#FFFFFF

Border

Adskillelseslinjer, input-kanter

--border

#E2E8F0

Sidebar Dark

Sidebar baggrund

--sidebar

#0F172A

Abonnent-farver (white-label)

Abonnenter definerer deres egne brand-farver i admin-opsætningen. Disse overskriver --brand, --primary og --sidebar tokens for deres specifikke tenant. Eksempel-abonnenten "VVS Gruppen A/S" bruger #2563EB (blå).

Status Farver (delte — platform og abonnenter)

Aktiv

Aktive kunder, udstyr OK, gennemført

Advarsel

Snart udløb, afventer bekræftelse

Kritisk

Udløbet, fejl, kræver handling

Info

Informationer, planlagte opgaver

Inaktiv

Inaktive kunder, arkiveret

Typografi

To fonte med klare roller. Sora til display og overskrifter — Geist til UI og brødtekst.

Display / Overskrifter

Sora 700

Professionel servicestyring

Kundeoversigt

H1 — Sideoverskrift

Kommende servicebesøg

H2 — Sektionsoverskrift

Udstyrsstatus

H3 — Kortoverskrift

Seneste aktivitet

H4 — Label

Body / UI — Geist

Systemet håndterer alle jeres servicebesøg, kunder og udstyr ét sted. Teknikerne får automatisk genererede ruter og opgavelister.

Servicebesøget er planlagt til mandag den 17. maj.

Body Large

Kunden har 38 registrerede enheder fordelt på 3 lokationer.

Body Default

Sidst opdateret: 12. maj 2026 kl. 14:32

Body Small / Label

Mono / Data

ID-2026-00142 · 14:32:07 · DKK 1.299,00

Komponenter

Alle komponenter er bygget på shadcn/ui og stylet via design tokens. Brug aldrig hardkodede farver.

Knapper

Kort

Aktive kunder

247

+12 denne måned

Kommende besøg

18

Næste 7 dage

Kræver handling

7

Udløbet udstyr

Spacing Skala

p-1
4px — Indre padding på badges, chips
p-2
8px — Kompakt padding, ikoner
p-3
12px — Tabel-celler, liste-items
p-4
16px — Standard kort-padding
p-6
24px — Sektion-padding, modaler
p-8
32px — Side-padding, store sektioner
p-12
48px — Hero-sektioner, store gaps
p-16
64px — Marketing-sektioner

Badges & Status

Bruges konsekvent til at vise tilstand på kunder, udstyr, opgaver og servicebesøg.

Aktiv Afventer Kræver handling Planlagt Inaktiv
Aktiv

Aktive kunder, udstyr OK, gennemført

Advarsel

Snart udløb, afventer bekræftelse

Kritisk

Udløbet, fejl, kræver handling

Info

Informationer, planlagte opgaver

Inaktiv

Inaktive kunder, arkiveret

Formularer

Konsistent input-stil med tydelig fokus-ring og validering.

E-mail notifikationer

Send automatisk rapport efter hvert besøg

Data & Tabeller

Konsistent tabelstil med hover-states og status-badges. Bruges til kunder, udstyr og opgaver.

KundeTypeEnhederStatus
Aarhus Lufthavn A/SErhverv142 OK
Randers SygehusOffentlig267 Snart udløb
Scandic Hotel AarhusErhverv89 OK
Bilka TilstDetail54 Kræver handling

Sideeksempler

Fem fulde sideeksempler der viser designsystemet i kontekst — platform og abonnent-niveau.

Dashboard

Admin-panel med KPI-kort, diagram og opgavetabel. Viser platform-UI.

Platform — Servicerapport

Marketing Side

Offentlig hjemmeside for Servicerapport SaaS-platformen med priser og features.

Platform — Servicerapport

Email Skabeloner

Tre email-typer vist i to versioner: platform og abonnent-branded.

Platform + Abonnent

Tekniker App

Mobil-interface til teknikere i marken: QR-scanning, tjekliste, fotodokumentation og digital signatur.

Abonnent — Tekniker

Abonnent Opsætning

White-label konfigurationspanel: brand, domæne, e-mail, brugere og abonnement.

Platform — Opsætning

Kundeportal

Slutkundens interface: login, servicehistorik, kommende besøg, rapporter og udstyrsoversigt.

Abonnent — Slutkunde

Super Admin Panel

Platformåber-panel: abonnentøversigt, MRR-vækst, fakturering og aktivitetslog.

Platform — Super Admin

Kunde App

Kundens selvbetjenings-app: eftersyn, guidelines, notifikationer om nye regler og udstyr, plus intelligent mersalg med auto-genererede tilbud.

Abonnent — Slutkunde App

Guidelines

7 regler der sikrer konsistens på tværs af alle fremtidige tilføjelser.

01

Brug altid tokens — aldrig hardkodede farver

Alle farver skal referere til CSS custom properties fra index.css. Dette sikrer at white-label theming virker automatisk for alle abonnenter.

02

Adskil platform og abonnent visuelt

Platform-UI (Servicerapport) bruger bittersweet accent. Abonnent-UI bruger abonnentens egne brand-farver. Bland aldrig de to i samme visning.

03

Sora til overskrifter — Geist til UI-tekst

Brug font-family: 'Sora' på alle h1–h4 og card-titler. Geist er standard body-font via CSS og behøver ikke eksplicit sættes.

04

Neutral terminologi i platform-UI

Brug 'udstyr', 'enheder', 'servicebesøg', 'opgaver'. Undgå branchespecifikke termer som 'brandslukkere' eller 'ventilationsservice' i platform-laget.

05

Status-badges er semantiske

Brug badge-active/warning/danger/info/inactive klasserne konsekvent. Opfind ikke nye farver til status — brug de eksisterende.

06

card-shadow klasser til alle kort

Brug .card-shadow, .card-shadow-md eller .card-shadow-lg i stedet for Tailwinds shadow-* utilities. Dette sikrer ensartet dybde-system.

07

Animationer under 300ms

Brug framer-motion fadeIn-varianten til sektioner. Knapper: scale(0.97) på :active. Modaler: 200–350ms ease-out. Aldrig ease-in.