Irish National Lottery

Project overview

Irish National Lottery – Atomic Design System

As a Front-End Developer working on this project, I was responsible for building a robust and accessible design system from the ground up using TypeScript, React, Tailwind CSS, and Storybook. Working closely with the UI designer, I developed a library of reusable components designed for consistency and scalability across the platform. I collaborated with wider development teams to support seamless integration of these components into live pages, enabling smooth user experiences by developing modular, accessible components that supported key user journeys such as ticket purchasing, results checking, account management, and responsible play. These components improved overall site performance, accessibility, and long-term maintainability.

Features overview

Design System & Front-End Architecture

• Component Library in Storybook: Built a comprehensive, documented library of reusable UI components in Storybook, enabling consistent development across teams.
• Reusable, Scalable Components: Developed modular components in React + TypeScript following accessibility (WCAG) standards and responsive design principles.
• Tailwind CSS Integration: Leveraged Tailwind CSS for a utility-first, maintainable styling approach that supported rapid development and consistent theming.
• Theming & Design Tokens: Implemented design tokens and theming support to maintain brand consistency across multiple products and states (e.g. dark mode, game-specific themes).
• Interactive Storybook Docs: Added usage documentation, live examples, props tables, and interaction notes within Storybook for cross-functional collaboration and onboarding.
• Accessibility-First Approach: Baked in accessibility best practices from the start (e.g. semantic HTML, ARIA roles, keyboard navigation), validated via Storybook's a11y addon.
• Faster Development Cycles: Empowered the wider dev team to build new features more efficiently by using tested, ready-made components from the system.

Impact

The result is a robust, accessible design system that gives teams a single source of truth — improving consistency, accessibility, and delivery speed across the platform while reducing long-term maintenance overhead.