Systemen
ULK Design System
ActiefHet designsysteem van de Université de Lille, gebouwd om visuele stijl te verenigen over tientallen Typo3-websites en onderhoudbare, toegankelijke componenten te bieden.
- Domein
- Design system Components Accessibility
- Gereedschap
- CSS variables BEM Typo3 Bootstrap JS VS Code Git
- Tijdlijn
- Grondleggende versies (v1 & v2) gestart in 2022. Versie 3 momenteel in ontwikkeling met een gespecialiseerde collega.
Context
De behoefte kwam van het platformbeheerteam, dat moeite had om visuele consistentie te handhaven op honderden sites verspreid over meerdere Typo3-instanties (faculteiten, onderwijs/onderzoek/evenementen, laboratoria, diensten), en van de communicatiedirectie die wilde dat de gedrukte identiteit correct weerspiegeld werd op het web. Elke instantie heeft een template dat wordt uitgerold naar de betreffende sites en vervolgens aangepast aan de behoeften van de webmasters. Voorheen stapelden deze aanpassingen zich op zonder gemeenschappelijk kader, met overschrijvingen die soms conflicteerden en de algehele visuele consistentie vertroebelden.
ULK heeft drie iteraties doorgemaakt. Het idee om de structuur te centraliseren voortkwam uit een suggestie, die mijn afdelingshoofd vervolgens concreet oppakte en doorzette binnen het team. Versies 1 en 2, met name de BEM-nomenclatuur en de algemene logica, werden daarvandaan gebouwd met de beschikbare middelen, waarbij v2 al een echte kwaliteitssprong markeerde ten opzichte van v1. Versie 3 begon toen een collega gespecialiseerd in designsystemen zich bij het team voegde: zij nam die structuur over en verfijnde deze aanzienlijk, door een tokenlaag toe te voegen en een technische diepgang die past bij de groeiende omvang van het project.
Structure & logic
- BEM-nomenclatuur:
ulk-s-voor structuur,ulk-c-voor componenten,ulk-o-voor objecten, naast andere prefixen afhankelijk van het elementtype - CSS variables for colors, fonts, and spacing, injected centrally with minimal per-instance overrides
- Atomic utility classes (u- prefix) for one-off, punctual styling outside the main BEM structure
- Accessible JS components based on Bootstrap patterns
Accessibility features
- Color system designed with WCAG contrast in mind
- Optional font switch: Dyslexia, Luciole
- Dark mode and theme toggling
- Consistent spacing and typographic scale
- Responsive grid and components
Standards
- WCAG 2.1 AA compliance target
- French RGAA requirements
- Screen reader compatible markup when paired with proper semantic HTML
Samenwerking & status
- Versies 1 en 2 ontwikkeld met mijn afdelingshoofd, over de fundamentele beslissingen
- Versie 3 in uitvoering, gedragen door een collega gespecialiseerd in designsystemen, met tokenarchitectuur en technische verfijning
- Systeem actief, uitgerold op meerdere institutionele sites