Diploma in Design Systems, Tokens and Accessibility
Online postgraduate diploma of 800 hours in design systems, tokens and accessibility, structured in 8 modules covering design tokens, visual foundations, components and patterns, digital accessibility, conformance testing and system adoption with WCAG 2.2, EN 301 549 and Figma, with an assigned technical tutor.
Take the controls.
Run a real engineering trade-off from this field. Move the sliders, watch the model react in real time and beat the challenge.
What you will be able to do
Explain the structure and value of a design system.
Design multi-brand and multi-theme token architectures.
Build documented, reusable components.
Apply WCAG 2.2 and EN 301 549 in component design.
Verify accessibility with automated tools and manual testing.
Manage the adoption and versioning of the system.
Develop an accessible design system for a real product.
Who it's for
- Designers building or maintaining design systems.
- Front-end engineers working on component libraries and tokens.
- Digital accessibility specialists who want to embed accessibility at system level.
- Interface designers moving from screens to scalable systems.
- DesignOps leads responsible for tooling and adoption.
- HMI designers applying design systems to vehicle interfaces.
- Engineering or science graduates seeking to enter digital product teams.
What you'll work with
- WCAG 2.2 (Web Content Accessibility Guidelines)
- EN 301 549 (accessibility requirements for ICT products and services)
- Directive (EU) 2019/882 (European Accessibility Act)
- WAI-ARIA 1.2 (accessible rich internet applications)
- Royal Decree 1112/2018 (accessibility of public sector websites and apps in Spain)
- ISO 9241-110 (interaction principles)
- Design Tokens Format Module (W3C Community Group) (standard format for design tokens)
- Figma
- Storybook
- Style Dictionary
- axe DevTools
- Tokens Studio
8 modules
1.1What a design system is1.2Atomic design by Brad Frost1.3Component libraries and guidelines1.4Brand principles and voice1.5Interface inventory1.6Material Design, Carbon and Polaris as references1.7Benefits and costs of the system1.8Design system maturity1.9Design and code as a single source of truth1.10Workshop: interface inventory of a product
2.1The token concept and levels2.2Primitive, semantic and component tokens2.3W3C Community Group token format2.4Transformation with Style Dictionary2.5Colour, typography and spacing tokens2.6Light, dark and multi-brand themes2.7Figma variables as tokens2.8Synchronising tokens with code2.9Token versioning2.10Practical: token pipeline with Style Dictionary
3.1Colour systems and scales3.2Colour combinations with sufficient contrast3.3Modular typographic scales3.4Grids and eight-point spacing3.5Consistent, scalable iconography3.6Elevation and shadows3.7Motion and animation3.8Density and responsive design3.9Illustration and photography3.10Workshop: accessible colour scale
4.1Anatomy of a component4.2States and variants4.3Component APIs4.4Composition and slots4.5Form patterns4.6Navigation and layout patterns4.7Web components and frameworks4.8Documentation with Storybook4.9Visual regression testing4.10Lab: button with states in Figma and React
5.1WCAG 2.2 levels A, AA and AAA5.2The perceivable, operable, understandable and robust principles5.3HTML semantics and ARIA attributes5.4Keyboard navigation and focus5.5Screen reader compatibility5.6Contrast, size and magnification5.7Reduced motion and user preferences5.8Accessible forms and error messages5.9Requirements of EN 301 5495.10Case study: WCAG audit of a component
6.1Automated testing with axe and Lighthouse6.2Manual testing with NVDA and VoiceOver6.3Testing with users with disabilities6.4Accessibility statement6.5Accessibility Directive (EU) 2019/8826.6Royal Decree 1112/2018 for the public sector6.7Integrating tests into continuous integration6.8Accessibility metrics6.9Prioritising remediation6.10Practical: audit with axe and a screen reader
7.1System documentation site7.2Contribution model7.3Semantic versioning of libraries7.4Communicating changes7.5Adoption metrics7.6Migrating existing products7.7Multi-platform systems for web, iOS and Android7.8Design systems in vehicle HMI7.9Design debt and its management7.10Case study: migrating an application to the system
8.1Audit of the existing product8.2Definition of principles8.3Token architecture8.4Component library8.5Accessibility built into components8.6System documentation8.7Adoption plan8.8Evaluation of results8.9Report and presentation8.10Final project: final review with the tutor
How you'll learn
The programme is 100% online on the SEIUM campus, with downloadable material, recorded classes and an assigned technical tutor. There are no fixed timetables: you progress at your own pace within each intake, so it fits around your job.
Each module combines theory, guided reading of the original standard and applied exercises. You work with Figma, Storybook, Style Dictionary, axe DevTools and Tokens Studio, in free, academic or evaluation versions. Exercises are based on real procedures: accessibility audits of components, building component libraries with tokens and testing with screen readers. Assessment is continuous by module, plus the final integrating project.
Standards covered: WCAG 2.2, EN 301 549, Directive (EU) 2019/882, WAI-ARIA 1.2, Royal Decree 1112/2018, ISO 9241-110, Design Tokens Format Module (W3C Community Group).
Build it end to end
Your final project follows the real engineering workflow, step by step, reviewed by your tutor.
Where this takes you
Requirements
- Prior technical training or professional experience in the sector. No university degree is required.
- Internet connection and a computer capable of running the programme software.
- English sufficient to read technical standards.
Ready to start?
Send your application today. Our admissions team replies within 72 hours with your study plan and funding options.
Frequently asked questions
The programme totals 800 hours over 6–8 months. You set your own pace within each intake, and your tutor helps you plan the workload around your job.
You work with Figma, Storybook, Style Dictionary, axe DevTools and Tokens Studio, using free, academic or evaluation versions. Your tutor indicates the free alternative wherever one exists.
A SEIUM Institute diploma, awarded on passing the continuous assessment and the final project. It is SEIUM's own qualification, not an official state degree; its recognition depends on the programme completed and the regulations of each country.
Yes. Modules passed are recognised in a higher programme in the same area (postgraduate diploma or master's). Ask about the recognition policy when you enrol.
Prior technical training or professional experience in the sector (no university degree required), a computer able to run the programme software and English sufficient to read technical standards.
Start dates are set by SEIUM's faculty for each intake. Our admissions team will confirm the next available date when you apply.
Related programmes
Diploma in Haptic Integration with Visual/Audio in the Cockpit
Online postgraduate diploma of 800 hours in Haptic Integration with Visual/Audio in the Cockpit. 8 modules covering multisensory perception, haptic actuation technologies, haptic pattern design, visual…
Diploma in Tank/Fairing Packaging and Usability
Online postgraduate diploma of 800 hours in fuel tank and fairing packaging and usability: 8 modules covering overall motorcycle packaging, fuel tank design, fairings and aerodynamics,…
Diploma in User Research and Service Blueprinting
Online postgraduate diploma of 800 hours in User Research and Service Blueprinting. 8 modules covering user research paradigms, interviews and ethnography, analysis and synthesis, quantitative and…
More in Design, HMI & Product
All Design, HMI & Product programmes → · How to apply · Fees & financing · Scholarships