Design System
02
Overview
Our design system was built to bring visual consistency and accessibility standards across every page of the Théâtre Déchaînés ticketing experience.
Category
Colors & Typography
Challenge
Designing for accessibility means every visual decision carries weight. Without a unified system, typography and color choices risk being inconsistent, creating confusion, poor readability, and barriers for users who rely on clear visual hierarchy. We needed a structured foundation that would keep the interface coherent across all ticketing pages while meeting WCAG contrast and legibility standards. We defined two core typefaces: Inter for its clean readability on screen, and Crimson Pro for its warmth and editorial presence. Each was scaled across display, headline, title, label, and body styles to create a clear typographic hierarchy. For color, we built a full palette covering primary, secondary, surface, accent, and neutral tones as each tested for sufficient contrast ratios to support users with low vision. Every decision was documented so that both designers and developers could reference and apply styles consistently without ambiguity.
Impact
The design system became the backbone of our entire project. It ensured that every screen felt cohesive, every text element was readable, and every color choice was intentional and accessible. By having these rules defined early, we were able to design faster, reduce back-and-forth, and hand off our work clearly by giving Théâtre Déchaînés a scalable visual foundation they can build on long after this project ends.
