Welcome to Nova! This guide will help you get up to speed quickly, ensuring you create consistent and accessible experiences aligned with Nova’s philosophy.
Understand Nova’s Philosophy
Start by exploring what makes Nova unique:
- Mission, Vision & Values – Get familiar with Nova’s purpose and guiding principles.
- Brand Identity – Learn how voice, tone, and visual identity reflect the brand.
- Design Principles – Discover the mindset that drives decisions across design and development.
Explore the Foundations
Learn how Nova ensures scalability and consistency:
Design Tokens
Understand the building blocks behind colors, spacing, and typography.
Colours
See how we use color palettes and type systems to create hierarchy and clarity.
Typography
See how we use color palettes and type systems to create hierarchy and clarity.
Icons & Illustration
Get to know our visual language and how to use it effectively.
UX Writing
Align your content with Nova’s voice for better communication.
Components & Patterns
Everything you need to design and build UI:
- Component Library – Browse and use components in Figma and Storybook.
- Patterns & Templates – Reuse layout and navigation patterns to save time and stay consistent.
- Data Visualisation – Explore our approach to displaying data clearly and effectively.
Under the Hood for Designers
Dig into how Nova’s design system works behind the scenes to support consistency and creativity.
- Slots & Partials – Learn how reusable design blocks help build flexible, scalable layouts.
- Templates – Use predefined structures to move faster while staying on-brand.
- Custom Components – Use predefined structures to move faster while staying on-brand.
- Intentional Tokens – Understand how intentional tokens help communicate design intent.
Start Designing with Nova
Set up your project with Nova’s design library and start building with confidence.
- Connect the Library – Link the Nova library to your file to use components and styles.
- Update the Library – Accept updates to get the latest components and tokens.
- Explore the Documentation – Find usage tips and examples directly in the components.
- Contribute to the Library – Propose changes and help improve the system.
Access Key Resources
- Nova Figma Library – Design with ready-to-use components. (Link coming soon)
- Storybook – Preview and test interactive components.
- Teams Channels – Collaborate and stay updated.
- Tabler.io – Source additional icons when needed.
Ready to Go?
Start designing with Nova! Need help? Reach out in Teams. Happy designing!