Design System Overview ​
The Zuno Engineer App uses a design system that keeps the app visually consistent with the designs created by the product team. This page explains how design updates flow from the design tool to the app.
The Design Workflow ​
Generally it follows this flow:
Figma → Supernova → GitHub PR → Conversion → App1. Figma ​
Designers create and update the visual design in Figma. This includes:
- Colours - The palette used throughout the app
- Spacing - Consistent gaps and padding values
- Typography - Font sizes, weights, and families
- Icons - SVG assets used in the interface
- Border radius - Corner rounding values
2. Supernova ​
Supernova connects to Figma and extracts design tokens (the values that define colours, spacing, etc.). When designers publish changes in Figma, they can prompt Supernova to send changes to the app codebase via a github pull request.
TIP
We had to turn off automatic sync as it was syncing whenever web made changes and since we have to do github-side conversion, it was detecting changes everytime and was being very noisy.
3. Automated Conversion ​
Supernova's default output format isn't directly compatible with React Native. When a Supernova pull request is opened, a GitHub Action automatically:
- Marks the PR as "not ready to merge"
- Converts the tokens into the correct format for our app
- Removes the blocking label
- Adds the PR to the merge queue
This means design updates can flow through with minimal manual intervention.
What Gets Updated ​
Design Tokens ​
| Token Type | Examples |
|---|---|
| Colours | Background colours, text colours, brand colours |
| Spacing | Padding and margin values (4px, 8px, 16px, etc.) |
| Typography | Font sizes, weights, line heights |
| Border radius | Corner rounding (small, medium, large) |
| Opacity | Transparency levels |
Each token set exists in multiple variants:
- zunoLight - Light theme tokens
- zunoDark - Dark theme tokens
The app uses Unistyles to apply these tokens. Unistyles handles theme switching (light/dark mode) and makes the tokens available to all components throughout the app.
Assets ​
Icons and other SVG assets are stored in src/design-system/styling/client-assets/. These are also managed through Supernova.
Requirements for assets:
- Light and dark versions - Each asset must be provided in both light and dark variants to support theme switching
- No clipping on colour-changeable images - Icons and other images that need their colours changed programmatically cannot have clipping applied in Figma. Clipping prevents the app from being able to recolour the asset.
- Only a single colour present for colour-changeable images - If there is more than one colour in the image, the app wont know which needs changing, so will not attempt to.
Key Points for Non-Developers ​
- Changes are automated - Design updates flow to the app without requiring manual code changes
- Multiple themes - The app currently supports light mode and dark mode
- Consistency is enforced - Developers must use design tokens rather than hardcoded values