Introduction

Welcome to the Sport Wales Digital Design Library - a comprehensive design system that provides developers and designers with everything needed to build consistent, accessible digital experiences for Wales' national sports organisation.

Who we are

We are the national organisation responsible for developing and promoting sport and physical activity in Wales. Our work is guided by the Vision for Sport in Wales and the Sport Wales' Strategy.

We are the Welsh Government's lead adviser for all things in sport and we work closely with them in delivering the Vision for Sport in Wales.

We also distribute National Lottery grants and support promising athletes to compete successfully on the world stage. Our digital platforms serve diverse audiences across Wales.

How can our design library help you?

Our design library ensures all Sport Wales digital products share a unified visual identity and user experience. It provides pre-built, tested components that follow accessibility standards and brand guidelines.

When development teams follow the same component library, typography system, and color palette, it creates consistent experiences across all touchpoints while dramatically reducing development time.

When used consistently, the Sport Wales design library will:

  1. Accelerate development with copy-paste ready components and code examples
  2. Ensure accessibility compliance through WCAG 2.1 AA tested components
  3. Maintain brand consistency across all digital platforms and touchpoints
  4. Reduce technical debt through standardized, maintainable component patterns
  5. Enable rapid prototyping with a complete component ecosystem
  6. Support team collaboration with shared design language and specifications

The design library serves as a bridge between design and development teams, providing clear specifications, implementation examples, and reusable code that maintains consistency while allowing for efficient project delivery.

Component library features

Instant Code Copy

Every component includes a working copy button that instantly copies code to your clipboard. No manual selection, no typing errors - just click and paste into your project.

<button class="sw-button sw-button-primary">
  Save and continue
</button>

Multi-Framework Support

Each component provides code examples in HTML/CSS, React, and Tailwind CSS. Switch between implementations instantly to match your project's technology stack.

HTML React Tailwind CSS

Component Variations

Most components offer multiple variations to suit different use cases. Buttons include primary, secondary, warning, and start variants. Cards support different layouts and actions.

Live Interactive Examples

See exactly how components look and behave before implementing them. All examples include hover states, focus indicators, and responsive behavior demonstrations.

Live Button Example

Who is this design library for?

Our design library is here to help us work together to represent Sport Wales digitally.

This library is designed to make your job simpler, whether you're building a simple website component, developing a mobile app, or working with our recommended developers and agencies to create something more complex.

Developers & Engineers

Copy-paste ready code examples in HTML, CSS, React, and Tailwind. Build faster with pre-tested, accessible components that follow Sport Wales brand guidelines.

Designers & UX Teams

Design tokens, color specifications, typography scales, and component patterns. Create consistent interfaces that reflect Welsh sporting excellence.

Product Managers

Ensure brand consistency, accessibility compliance, and efficient development cycles across all Sport Wales digital products and platforms.

External Partners

Agencies and contractors working on Sport Wales projects can access detailed specifications to create digital experiences that match our brand identity.

The components and guidelines are divided into clear sections to help different people. This library is written with our teams and partners in mind – it's all about giving you the tools and specifications to represent our brand digitally in a confident and consistent way.

The library will support you in using the Sport Wales design system in a way that adds value to your work and ensures that our accessibility and brand requirements are met.

This design library is here to support you in your work and when working with developers or designers. Whenever you need help, you can always refer back to these components and guidelines – we're all in this together!

Style guide foundation

Our design library is built on a comprehensive style guide that defines the visual foundation for all Sport Wales digital products. This includes our color system, typography hierarchy, logo usage, and icon library.

Color System

Brand colors with HEX, RGB, HSL values and accessibility-compliant contrast ratios

Typography

Objektiv MK1 and Montserrat with complete type scale and usage guidelines

Logo Standards

Logo variants, sizing rules, clear space requirements, and downloadable assets

Icon Library

FontAwesome icons with Sport Wales sizing standards and semantic usage patterns