Summary
Design-OS is skillSYMS’ adaptive UI engine. From one place you can set your brand palette and typography, build role-specific dashboards, browse the component library, brand your certificates and documents, and run accessibility audits. This guide tours each module so you can shape a consistent, branded experience platform-wide.
Who This Guide Is For
- Training providers personalising the in-app experience
- Administrators responsible for platform look and feel
- Staff who design certificates and dashboards
Prerequisites
Before you begin, ensure you have:
- Admin access to your skillSYMS tenant
- Your brand colours and (optionally) preferred fonts
- An idea of which roles need tailored dashboards
Step 1: Open Design-OS
Navigate to Design-OS (/sdp/design-os).
The overview shows your Theme Status, WCAG Score, Dashboards, and Components counts, a live Brand Palette preview, and tiles linking to each module.
Step 2: Edit Your Theme
Open Design-OS → Theme Editor (/sdp/design-os/theme).
Configure your brand palette, choose presets, and adjust typography and component styles with a live preview. Your theme can be saved as a draft and then published—the overview reflects whether it’s Default, Draft, or Published.
Tip: The Brand Palette preview on the overview updates from your saved theme—use it to sanity-check primary, secondary, accent, and status colours at a glance.
Step 3: Build Dashboards
Open Design-OS → Dashboard Builder (/sdp/design-os/dashboards).
Create role-specific dashboards with drag-and-drop widgets. An AI UI Assistant can generate complete layouts from a prompt (e.g., “Create a SETA compliance dashboard”)—find it at /sdp/design-os/dashboards#ai.
Step 4: Browse the Component Library
Open Design-OS → Component Library (/sdp/design-os/components) to browse the design system catalogue—buttons, cards, tables, learner cards, assessment rubrics, and progress trackers—so your interfaces stay consistent.
Step 5: Brand Your Certificates
Open Design-OS → Certificate Branding (/sdp/design-os/certificates) to brand certificates, statements of results, attendance registers, and invoices with your tenant theming.
Tip: Certificate branding here complements the letterheads and footers in Settings → Branding & Documents—use both for fully branded output.
Step 6: Check Accessibility
Open Design-OS → Accessibility Engine (/sdp/design-os/accessibility) to run audits, check colour-contrast ratios, and confirm WCAG AA/AAA compliance across your theme. The overview surfaces your current WCAG score.
Common Mistakes to Avoid
- Unpublished theme: A draft theme isn’t applied until published—check the Theme Status.
- Poor contrast: Run the accessibility audit; low-contrast palettes fail WCAG and hurt readability.
- Per-role dashboards skipped: Default dashboards work, but role-specific layouts greatly improve usability.
- Branding split confusion: Theme/colours live in Design-OS; document letterheads/footers live in Settings → Branding.
Verification Checklist
Before moving on, verify:
- Your theme is configured and published
- The Brand Palette preview matches your brand
- Role-based dashboards are created where needed
- Certificates are branded
- The accessibility audit passes at your target WCAG level
Next Steps
- Branding & Themes — Logos, letterheads, and footers
- Templates & Documents — Assign branding to templates
- Public Site — Apply branding to your microsite
- Organisation Setup — Complete your provider profile