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.
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.
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.
Page Layout
Page layouts are created using Page Wrappers, BoundedContent, Grid, the Responsive System, and Space. Correct use is essential for maintaining consistent content alignment across pages.
Refer to Page Layout for more information.
Grid
Grid provides a structured layout framework for page content, ensuring consistent alignment, spacing, and responsiveness across components and screens.
For a quick overview on grid, refer to the following resources:
Refer to Grid for more information.
Responsive System
The Responsive System is a collection of breakpoints and screen classes used to control page layouts and components at different screen sizes
Refer to Responsive System for more information.
Space
Space is used to bring structure and hierarchy to pages. Proper spacing enhances readability, guides user flow, and creates a clean, uncluttered interface.
Refer to Space for more information.
Tokens
Tokens (also known as Design Tokens) are reusable variables that define design properties like color, typography, and spacing. They represent shared design decisions across the UI, serving as the building blocks for consistent and cohesive experiences. They enable designers and developers to easily create and maintain these experiences using a shared language.
If you are unfamiliar with tokens, checkout the Introduction to Design Tokens on 360 learning.
Modes
Modes in SWAN adjust token values to change the appearance of the UI. They apply to all related tokens and components. SWAN supports three modes: Standard (default), Dark, and Compact.
Expansion Packs
Expansion Packs (EPs) are a structured method for sharing bespoke UI Components. These are reusable components created and owned by product teams that solve a specific design or functional need. If widely adopted, these may be considered for graduation to SWAN.
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.
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.
SWAN Overlay
The SWAN Overlay is a browser extension that allows you to see what parts of the VistaPrint UI are using SWAN components, and assess the layout and alignment of the page.
Find out more: SWAN Overlay
Support
Need some help or have an awesome idea? Reach out to us.
