Nathaniel Burlot
Retour aux travaux
ULK Design System

Systèmes

ULK Design System

Actif

Le design system de l'Université de Lille, conçu pour unifier le style visuel sur des dizaines de sites Typo3, réduire le CSS redondant et proposer des composants accessibles et maintenables.

Domaine
Design system Components Accessibility
Outils
CSS variables BEM Typo3 Bootstrap JS VS Code Git
Chronologie
Travaux fondamentaux (v1 & v2) démarrés en 2022. Version 3 en cours avec une collègue spécialisée.
ULK (Université de Lille Kit) est le design system de l'université, conçu pour unifier le style visuel sur des dizaines de sites Typo3 et plateformes internes, réduire le CSS redondant, et proposer des composants accessibles et maintenables sur le long terme.

Contexte

Le besoin est venu de l'équipe de gestion des plateformes, qui peinait à maintenir la cohérence visuelle sur plusieurs centaines de sites répartis sur plusieurs instances Typo3 (composantes, formations/recherche/événements, laboratoires, services), et de la direction de la communication qui voulait que l'identité imprimée soit correctement reflétée sur le web. Chaque instance dispose d'un template, ensuite déployé sur les sites concernés puis personnalisé selon les besoins des webmasters. Auparavant, ces personnalisations s'accumulaient sans cadre commun, avec des surcharges qui entraient parfois en conflit et brouillaient la cohérence visuelle d'ensemble.

ULK a connu trois itérations. L'idée de centraliser la structure est partie d'une suggestion, que mon responsable de service a ensuite portée et poussée concrètement au sein de l'équipe. Les versions 1 et 2, notamment la nomenclature BEM et la logique globale, ont été construites à partir de là avec les moyens du bord, la V2 marquant déjà un vrai saut de qualité par rapport à la V1. La version 3 a démarré quand une collègue spécialisée en design systems a rejoint l'équipe : elle a repris cette structure et l'a significativement affinée, en ajoutant une couche de tokens et une profondeur technique adaptée à l'envergure croissante du projet.

Structure & logique

  • Nomenclature BEM : ulk-s- pour la structure, ulk-c- pour les composants, ulk-o- pour les objets, parmi d'autres préfixes selon le type d'élément
  • Variables CSS pour couleurs, fontes et espacements, injectées centralement avec des surcharges minimales par instance
  • Classes utilitaires atomiques (préfixe u-) pour les besoins de style ponctuels hors structure BEM
  • Composants JS accessibles basés sur Bootstrap

Fonctionnalités accessibilité

  • Système de couleurs conçu avec les contrastes WCAG
  • Changement de fonte optionnel : Dyslexia, Luciole
  • Mode sombre et bascule de thème
  • Espacement et échelle typographique cohérents
  • Grille et composants responsives

Standards

  • Conformité WCAG 2.1 AA visée
  • Exigences RGAA françaises
  • Balisage compatible lecteurs d'écran avec HTML sémantique approprié

Collaboration & statut

  • Versions 1 et 2 développées avec mon responsable de service, sur les décisions fondamentales
  • Version 3 en cours, portée par une collègue spécialisée en design systems, avec architecture de tokens et raffinement technique
  • Système actif, déployé sur plusieurs sites institutionnels

Visuels

  • Page actualités basée sur ULK
  • Tableau de bord état des services ULK
  • Article actualité basé sur ULK
Visuels de la version 3 pas encore disponibles.