Themes
Themes are Inspire’s design system layer. A theme defines the visual language — colours, typography, spacing, and shape — and provides per-component visual designs. Changing a scene’s theme re-skins all its content instantly.
Theme Structure
A theme consists of two layers:
1. Style Tokens
Design tokens define the visual foundation:
| Token Category | Examples |
|---|---|
| Colours | Primary, secondary, background, surface, text, accent, error, warning, success |
| Typography | Font families (heading, body, mono), size scale, weight scale, line heights |
| Spacing | Spacing scale (xs, sm, md, lg, xl, 2xl, 3xl) |
| Shape | Border radius values (none, sm, md, lg, full) |
| Elevation | Shadow definitions (none, sm, md, lg) |
2. Component Designs
Each component can have a visual design defined within the theme. This design specifies how the component’s inputs map to visual elements using the theme’s tokens.
Creating a Theme
Navigate to Themes
From the sidebar, click Themes.
Create new theme
Click New Theme. Give it a name (e.g. “Corporate Dark”, “Retail Bright”).
Define style tokens
Configure each token category. Use the colour picker, font selector, and numeric inputs to define your design system.
Colours example:
| Token | Value | Usage |
|---|---|---|
| Primary | #7b2d5f | Buttons, links, active states |
| Secondary | #c23074 | Accents, highlights |
| Background | #0f0a2e | Page/screen background |
| Surface | #1a1545 | Card backgrounds |
| Text | #ffffff | Primary text |
| Text Secondary | #a0a0b0 | Secondary/muted text |
Design components
For each component you want to include, open the Component Designer and create a visual design using the theme’s tokens. See Components for details.
Save and apply
Save the theme. You can now apply it to any scene.
Built-in Themes
Inspire ships with five system themes ready to use:
| Theme | Description |
|---|---|
| Optymyse | The default Optymyse brand theme |
| Corporate | Clean, professional styling for business environments |
| Modern Dark | Sleek dark-mode design |
| Playful | Bright, energetic styling |
| Vibrant | Bold, high-contrast colour palette |
You can use these as starting points, duplicate them to create variations, or create entirely new themes from scratch.
Applying a Theme
To apply a theme to a scene:
- Open the scene in the Designer
- Click the Theme selector in the toolbar
- Choose the theme from the dropdown
- All components in the scene update to reflect the new theme
Changing a theme does not affect element-level content (text, images, shapes). Only components respond to theme changes. This is by design — components encapsulate themed visual behaviour.
Theme Inheritance
Themes can be duplicated to create variations. Common patterns:
- Light / Dark — Same tokens but inverted colour values
- Brand variations — Same layout designs but different colour palettes per brand
- Seasonal — Holiday or event-specific colour and typography overrides
Exporting and Importing Themes
Themes can be exported as JSON files for sharing between Inspire installations:
- Export — From the theme list, click the menu on a theme and select Export
- Import — Click Import Theme and upload a
.jsontheme file
Exported themes include all style tokens and component designs.
Best Practices
| Practice | Why |
|---|---|
| Start with tokens, then design components | Ensures consistency across all component designs |
| Use semantic colour names | ”Primary” not “Blue” — so themes can vary freely |
| Test with real content | Verify your theme works with actual data, not just placeholders |
| Create at least two themes | Having a light and dark variant validates your design system |
| Keep typography scale consistent | Use the defined scale rather than arbitrary sizes |