Nathaniel Burlot
Terug naar werk
ULK Design System

Systemen

ULK Design System

Actief

Het 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.
ULK (Université de Lille Kit) is the university's design system, built to unify visual style across dozens of Typo3-based websites and internal platforms, reduce redundant CSS, and offer accessible, maintainable components for long-term use.

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

Visuals

  • ULK-based news page
  • ULK service status dashboard
  • ULK-based news article
Version 3 visuals not yet available.