Site settings
Change the appearance of the site to suit your preferences
Welcome to Spor: Vy’s Design System
Spor is Vy's design system. For us, it is a common language for designers and developers. It is designed to help our teams build holistic user journeys of high quality, both for employees and for our customers.
What is Spor?
Spor provides everything you need to design and build products at Vy:
- Visual design guidelines (brand identity, typography, and colors)
- Reusable digital components (for both design and code)
- Documentation on how to use components and patterns effectively
- Code libraries to maintain consistency across our digital products
Spor is open-source, and we encourage all designers and developers at Vy to contribute. Our GitHub repository is publicly accessible, making it easy to collaborate and improve our design system together.
🏗 How to Get Started
Starting a new role can be overwhelming, whether you're a developer, designer, or product manager. Spor is here to help you get up to speed on our processes, tools, and best practices.
📌 First steps:
- Read through the documentation relevant to your role
- Explore the component library
- Follow our guides to understand our design and development workflows
Spor is constantly evolving to reflect our latest technology, design principles, and ambitions. This documentation is updated regularly to keep everything relevant.
🎭 Brand Identity
Vy has a clear and structured design language that defines how we present ourselves. This includes:
- Typography & Colors
- Imagery & Illustration Style
- Tone of Voice & Language
Understanding our brand identity is key to designing experiences that feel consistent with Vy. Familiarize yourself with our branding guidelines to ensure your work aligns with our overall vision.
📌 Need approval on branding? The marketing team oversees all branding decisions. For major projects, approval is required from our Brand Manager, Nina Tøgard:
- ✉️ Email:nina.togard@vy.no
- 📞 Phone: +47 916 53 264
🧩 Components: The Building Blocks
Components are the interactive elements that make up our digital experiences. Each component is:
- Designed with usability in mind
- Built with accessibility best practices
- Tested and optimized for performance
📌 Where to find them:
- Browse components on this platform to see them in action
- Find the same components in Figma for designers
- Read detailed guidelines on when and how to use each component
All components include variants, states, and interactive behaviors to make implementation seamless.
🎨 Design Tokens: The DNA of Our System
Design tokens define everything from colors and spacing to typography and shadows. They ensure consistency across all platforms and products.
💡 What do design tokens control?
- 🎨 Colors (e.g.,
brand.surface, text.inverted) - 📏 Spacing & Layout (e.g.,
spacing.md, radius.lg) - 🔤 Typography (e.g.,
font.heading, lineHeight.base)
Instead of using hard-coded values, use design tokens to ensure your design remains flexible, scalable, and future-proof.
📌 Need to check if a design is following the system?
Verify the correct use of colors and typography by referencing our design tokens.
Spor is designed to make your life easier by providing a solid foundation for design and development. Explore, experiment, and contribute—we’re all building this together! 🚀