Design System

Living style guide voor Lift Suite Pro. Alle tokens, componenten en patterns op één plek — de bron van waarheid voor visuele consistentie.

Colors Typography Buttons Badges Cards Patterns Alerts Stats Icons Accessibility

Colors

Tokens defined in src/styles/theme.css. Use the named utilities, never raw cyan-*.

Brand

Cyan is split into a decorative shade (500) and an interactive shade (700+). Never use 500 for text or button backgrounds.

brand-50

#ECFEFF

Tinted card backgrounds, persona-tech bg

brand-100

#CFFAFE

Hover tint, hero glow

brand-500

#06B6D4

Decorative ONLY — icon tints, gradients, dots

brand-600

#0891B2

Hover step toward brand-700

brand-700

#0E7490

Interactive default — links, buttons, badges

brand-800

#155E75

Active/pressed state, focus on light

brand-on-dark

#22D3EE

Brand accent on dark surfaces (cyan-400)

Neutrals (slate scale)

ink

#0F172A

Headings, primary text

body-text

#334155

Body copy (11:1 on white)

muted-text

#64748B

Captions, meta (4.6:1)

subtle-text

#94A3B8

Subtle text on dark only

surface-1

#FFFFFF

Primary section bg

surface-2

#F8FAFC

Alternate sections

surface-3

#F1F5F9

Inline highlight blocks

surface-dark

#0F172A

CTA / dark sections

surface-darker

#020617

Footer

Semantic

Each semantic colour has a foreground (text/icon) and a paired *-bg (tinted background).

success

#047857 / #ECFDF5

Uptime, compliant, completed

warning

#B45309 / #FFFBEB

Expiring certs, reminders (alert state)

danger

#B91C1C / #FEF2F2

Downtime, critical alerts

info

#1D4ED8 / #EFF6FF

Analytics, prediction stats

Persona accents

persona-tech

#C2410C / #FFF7ED

Servicetechnici (warm terracotta — was teal until 2026-05)

persona-facility

#1D4ED8 / #EFF6FF

Facilitair Managers

persona-ops

#1E3A8A / #DBEAFE

Operations Directors (deep navy — was indigo until 2026-05)

Warm accent

Decorative warmth to balance the otherwise-cool cyan/slate palette. Same hue as warningbut a different semantic — use accent-warm for emphasis, never for alert/error states.

accent-warm

#B45309 / #FEF3C7

Decorative warmth — hero pulse, Quote icons, featured pills

Typography

Heading sizes use Tailwind's text-* scale; colours use design tokens.

h1 — text-6xl text-ink

Uw alles-in-één platform

h2 — text-5xl text-ink

Krachtige functies

h3 — text-2xl text-ink

Multi-Tab Dashboard

lead — text-xl text-body-text

Datagedreven, proactief beheer voor maximale efficiëntie.

body — text-base text-body-text

Compleet overzicht van status, kosten en probleemliften in één centraal dashboard. Real-time inzicht in alle kritische aspecten van uw liftportefeuille.

caption — text-sm text-muted-text

15.000+ beheerde liften — 99.5% uptime

link — text-brand-700 hover:text-brand-800

Meer informatie over Lift Suite Pro

Buttons & Links

All buttons are rounded-full px-8 py-3. Focus states are global.

Badges & Pills

Persona pills, status badges, marketing pills.

Persona pills

Voor Servicetechnici Voor Facilitair Managers Voor Operations Directors

Brand badge — bg-brand-700

Integratie PartnerLive status

Semantic status

Operationeel Onderhoud nodig Storing Update beschikbaar

Cards

Standard rounded-2xl with border-slate-200.

Feature card

Standaard card patroon — icoontegel, titel, body en inline link.

Meer info

Featured

Feature card — featured

Lichte border met brand-cyan badge voor partner-, premium- of geselecteerde items. (De zware border-2 + gradient variant is uitgefaseerd.)

Compact card

Kleinere variant voor grids van mini-features (zie "Over Lift Suite Pro").

Patterns

Composities die meermaals voorkomen op de homepage. Hergebruik deze structuur in plaats van varianten te bouwen.

Step card (How it works)

Genummerde processtap. Gebruik <ol> als ouder voor screen-reader volgorde. Bewaar gelijke kaarthoogte met flex flex-col h-full + items-stretch.

Onboarden
Importeer uw liftportefeuille via CSV of API.
Week 1–2
Monitoren
Live dashboard, automatische alerts, QR-scan.
Vanaf week 3
Voorspellen
AI-engine signaleert vroege storingstekenen.
Maand 2
Optimaliseren
Benchmarking, TCO, KPI-rapportages.
Maand 3+

Testimonial card

Gebruik <figure> + <blockquote> voor correcte semantiek. Persona-token bepaalt de avatar-tint.

"Sinds we Lift Suite Pro gebruiken halen we 30% meer eerste-keer-fixes."

Mark Janssen

Servicetechnicus

"Voor het eerst hebben we één bron van waarheid voor compliance."

Sanne de Vries

Facilitair Manager

"De voorspellende engine bespaart ons honderdduizenden euro's per jaar."

Pieter Bakker

Director of Operations

Hover convention

Alle interactieve cards gebruiken dezelfde transitie:

border border-slate-200 hover:border-brand-700/50 hover:shadow-xl transition-all duration-200

Alerts

Inline notificatie blokken voor systeemstatus, compliance reminders, etc.

Alle liften operationeel

Laatste check: 2 minuten geleden. Alle 247 liften rapporteren normale status.

Voorspellend onderhoud

Lift A-12 toont vroege tekenen van slijtage. Geplande inspectie binnen 14 dagen aanbevolen.

NEN-EN 81 keuring vervalt binnen 30 dagen

3 liften vereisen herinspectie vóór 31 mei. Plan inspecties via het compliance dashboard.

Storing gedetecteerd — Lift B-04

Onverwachte stilstand sinds 14:32. Technicus is automatisch gewaarschuwd.

"Liftbeheer slimmer, veiliger en efficiënter maken voor iedereen in de Nederlandse liftindustrie."

Stats / KPIs

Semantic colours communicate the meaning of a number at a glance.

15.000+

Beheerde Liften

text-ink — neutraal

85%

Voorspellingsnauwkeurigheid

text-info — analytics

-30%

Minder Downtime

text-danger — afname

99.5%

Platform Uptime

text-success — gezond

Iconography

Lucide, inline SVG. Rendered server-side as static SVGs — no client JS.

BarChart3

Brain

Bell

Smartphone

Calculator

Shield

Wrench

Users

Target

Activity

TrendingUp

Zap

Cloud

Mail

Phone

Check

Quote

Star

Plug

LineChart

Sparkles

Clock

ArrowDown

CheckCircle2

Accessibility & Contrast

All token combinations below meet WCAG AA (4.5:1 for body text, 3:1 for large text and UI).

Foreground	Background	Ratio	Status	Sample
brand-700	white	5.4 : 1	Pass AA	Meer info
white	brand-700	5.4 : 1	Pass AA	Plan een demo
ink	white	17.9 : 1	Pass AAA	Headline tekst
body-text	white	11.0 : 1	Pass AAA	Body kopij
muted-text	white	4.6 : 1	Pass AA	Caption tekst
brand-on-dark	surface-dark	9.1 : 1	Pass AAA	Brand op donker
success	white	5.7 : 1	Pass AA	99.5% Uptime
danger	white	7.2 : 1	Pass AAA	-30% Downtime
info	white	7.0 : 1	Pass AAA	85% Voorspelling
warning	white	5.5 : 1	Pass AA	Onderhoud nodig
cyan-500 (legacy)	white	2.7 : 1	Fail — never use as text	Niet gebruiken

Focus states

All interactive elements get a global :focus-visible outline in brand-700. Try tab-pressing through these:

Focus me And me Inline link too

Reduced motion

Een globale @media (prefers-reduced-motion: reduce) regel in theme.cssbeperkt animatie- en transitieduur tot 0,01ms en zet smooth scrolling uit.

Voor Tailwind-utility-animaties zoals animate-pulse gebruik altijd de motion-safe: variant zodat de bedoeling expliciet is in de markup.

<span class="size-2 bg-brand-500 rounded-full motion-safe:animate-pulse"></span>

Skip link

Layout.astro rendert een verborgen "Spring naar hoofdinhoud"-link die zichtbaar wordt op keyboard-focus. Eerste tab-stop op elke pagina.