Irish National Lottery
Irish National Lottery
Design System
Design System
Project overview
Project overview
National Lottery Ireland – 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.
National Lottery Ireland – 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:
Features overview:
Design System & Front-End Architecture – Features Overview
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.
Design System & Front-End Architecture – Features Overview
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.
Available for new projects
Available for new projects
Available for new projects
Got a question or something on your mind? Big, small, or just a random idea - I’m all ears!
Hit the button below and let’s chat.