Start designing
The SWAN Design System is a collection of standards, components, tools, and resources that empower teams at Vista to deliver usable, delightful experiences to our customers, faster and more efficiently.
Quick links
Documentation
The SWAN Design System site (you are here now) is the go-to place for all things design system related. View guidelines and coded examples of components, foundational design elements such as colors and typography, and live code playgrounds.
UI Kit
SWAN foundations and components can be used in Figma via the 🦢 SWAN UI Kit library. The library should be enabled in all Vista Figma files by default. If not, it can be enabled via the 
Team library menu.
Tokens
We have curated a course specially for UX designers to understand why using design tokens is important for consistent design practice and scaling a website.
Checkout the Introduction to Design Tokens on 360 learning
Shared libraries
Other useful Figma libraries when designing SWAN experiences are the 🧩 Shared Components and the 🧭 Design Helper Kit. Contributions to both libraries are encouraged.
Figma
Figma is Vista’s design and prototyping tool of choice. If you are new to it, refer to the Intro to Figma presentation. For further support, reach out on the #figma-training slack channel.
Once you are ready to start your first project, use the Project template to structure your Figma files.
Fonts
Vista primarily uses Graphik for all heading and body typography. Tiempos is an alternative heading font used only for seasonal campaigns.
Both fonts are loaded automatically via Figma. If you need to use these fonts outside of Figma, follow these instructions.
Support
Need some help or have an awesome idea? Reach out.
