What is the ISQ eLearning Design System?
A shared system of principles, foundations, learning patterns, components, standards and governance for ISQ digital learning experiences across Connect & Learn, Articulate Rise and related learning products.
Purpose
- Create a coherent learner experience across platforms and course types.
- Reduce reinvention through documented patterns, components and shared production standards.
- Improve delivery speed, accessibility, maintainability and readiness for future brand change.
Audiences
| Audience | What the system provides |
|---|---|
| Executives & sponsors | Strategic direction, scope, governance model and investment rationale. |
| Designers & developers | Learning patterns, components, implementation standards, versioning and technical references. |
| Subject matter experts | A clearer explanation of how content is structured and why particular patterns are used. |
| Platform administrators | A consistent model for applying the system within Moodle, Rise and future tools. |
Relationship to Rise and Connect & Learn
A learner moving from Connect & Learn into a Rise course should not experience an abrupt change in visual language, hierarchy, interaction behaviour or quality. Rise is the system's first mature implementation stream; Connect & Learn (Moodle) is the platform-level implementation described in the Connect & Learn 2027 blueprint. The systems are technically different — the experience is deliberately continuous.
Documentation hierarchy
| # | Publication | Role |
|---|---|---|
| 1 | ISQ eLearning Design System | Authoritative strategy, architecture, principles, governance and roadmap. |
| 2 | ISQ Rise Design System: Implementation and Component Guide | Detailed Rise-specific components, HTML/CSS/JS, responsive behaviour and technical guidance. |
| 3 | ISQ Rise Block Selection and Usage Guide | Concise decision guide for choosing native and custom blocks. |
| 4 | ISQ Digital Learning Imagery and Media Guide | Image taxonomy, production dimensions, photography direction, accessibility and file standards. |
| 5 | This live reference site | Live examples, code, variants, status, accessibility and changelog. |
| 6 | Templates and production resources | Starter courses, source CSS, HTML snippets, image templates, QA checklists and storyboard resources. |
Where publications conflict: the umbrella system governs shared principles, platform guides govern platform-specific behaviour, and production code governs the current rendered implementation.
Maturity and roadmap
The system has moved from course-by-course discovery (proven through the Child Protection programme) to formal consolidation. This site represents Roadmap Phase 5 — Document and demonstrate — reached ahead of the completed audit and accessibility gate, so several entries are marked accordingly. See Governance for the full lifecycle model and current open decisions.
How to use this site
Executives and sponsors: read this Overview and Governance. Designers and developers: use Components and Patterns during production, and the Rise implementation guide for technical detail. Reviewers: use the accessibility fields on each component page and the checklists under Resources.