Digital design system · V15.9.3

DEM Playerz
design system.

Playerz/Figma als structurele basis, Rayo-achtige motion en de rustige fixture/table-cards uit de coaching app.

Kleur & surface

Navy#00152F

Blue#0757BD

Grass accent#78D34D

Soft#F5F7FA

Soft blue#EEF4FF

Typografie

Display

Samen sterker.

Matter 800 / italic 500, tracking −6% tot −4%.

Section

Wat er speelt.

32–62px afhankelijk van viewport.

Body

Rustige lopende tekst met 1.6–1.75 line-height. Maximaal 55–65 tekens per regel.

Buttons & pijlen

Radius 14px. Pijlen bewegen als een vloeiende conveyor: huidige pijl uit, clone gelijktijdig in.

Card language

Fixture

HBC

14:0013 SEP

DEM 1

4e Divisie A

Content

Nieuws / agenda

24px radius, subtiele 8% blauwe border-mix, zachte gradient en bijna onzichtbare shadow.

Glass

Translucent surface

Voor hero/menu: transparantie moet fotografie laten ademen, nooit de leesbaarheid verlagen.

Standen

#TeamGP

14Victoria00

15WV-HEDW00

16DEM 100

Motion

Menu openPanel wipe 1.08s expo.inOut, cards 0.72s, labels stagger 0.045s.

Menu closeRustiger: labels eerst, cards terug, panel wipe 1.22s.

ScrollLenis + ScrollTrigger. Scroll-depth alleen op grotere secties; geen overmatige floating cards.

HoverCard lift maximaal −3px. Geen springerige easing voor gewone links.

ArrowDual-glyph crossflow 0.34–0.42s. Geen zichtbare set()-sprong.

Reduced motionAlle essentiële content blijft volledig bruikbaar met prefers-reduced-motion.

Layout rules

Containers

Content meestal 1320px max. Hero en bepaalde feature-secties breder, maar met duidelijke witte ademruimte zoals het Figma-template.

Radii

Hero 32px · cards 24px · buttons 14px · icon circles 50%.

Spacing

8px basisritme. Secties 90–130px verticaal desktop, 70–96px mobiel. De hero schaalt op schermhoogte en blijft op desktop tussen 700 en 860px.

Content pages

Geschiedenis / long-form

Gebruik dezelfde Matter-typografie, 22–28px cards, zachte soft-blue vlakken en maximaal één donker navy featureblok per inhoudscluster. Lange verhalen worden opgebroken in tijdlijnkaarten, jaarlabels en compacte facts. Scroll-motion blijft rustig: 38–48px reveal, power3/expo easing en Lenis.

Timeline card26px radius · 1px lijn · ruime padding

Era labelJaar sticky links op desktop

Feature blockNavy + lime label voor belangrijke mijlpalen

Voetbal pages · V14

Website × voetbaldata

Wedstrijdcard

Datum links, teams en logo's centraal, tijd/locatie rechts. Op mobiel vouwt metadata onder de teams zonder horizontale overflow.

Resultcard

Uitslag centraal met dezelfde zachte border, 22px radius en statuschip.

Standentabel

Compacte tabel; eigen DEM-rij krijgt een soft-blue highlight. Teamnaam blijft dominant boven statistiek.

Person cards

Voor bestuur, coördinatoren en opleiding: rol klein, naam groot, contact onderin.

Accordions

Echte buttons met aria-expanded. GSAP height + zachte tekstfade; content blijft zonder motion bereikbaar.

Mobile menu

Voetbal opent direct onder het hoofditem. Categorieën hebben geneste accordions, scroll zonder zichtbare scrollbar en transparante submenu-items.

DEM Playerzdesign system.