Sciences Po design system: one component library for React and Angular

I was the main developer of Sciences Po's design system, one library of Web Components for the school's React and Angular apps. They render on the server and are built around RGAA 4.1 and WCAG 2.1 AA requirements, down to a sign-in form that works without JavaScript.

Client: Sciences Po
Role: Senior full-stack developer, main developer of the design system
Duration: 18 months, May 2025 to October 2026 (one engagement, three projects)
Setting: Freelance, via RECSI Group, fully remote

001

001·Context

One design system for two frameworks

This institutional design system was made with the school's UX designers and is one of the three projects of my Sciences Po engagement.

002

002·Approach

How I worked on the Sciences Po design system

Brief and my role: One library had to serve both frameworks. As main developer, I built its components, their documentation and its delivery pipeline.
Constraints: Server rendering, RGAA 4.1 and WCAG 2.1 AA requirements, and a critical sign-in form that works without JavaScript.
Technical decisions: Web Components in StencilJS with React and Angular wrappers, server-side rendering, and design tokens kept in step between Figma and the code.
Checks and releases: I documented the components in Storybook, wrote automated tests and set up CI/CD for the library.

003

003·Deliverables

What I delivered on the Sciences Po design system

Web ComponentsStencilJS components that work in both React and Angular
Server-side renderingComponents that render on the server as well as in the browser
AccessibilityBuilt around RGAA 4.1 and WCAG 2.1 AA requirements, with a sign-in form that works without JavaScript
Storybook documentationThe components documented with their states and variants
Design tokensTokens kept in step between Figma and the code