Vega is the design system used at Global Payments, for crafting beautiful, accessible, and consistent digital experiences for all our products.
See what’s included
Design
{tokens}
Smallest of design decisions, captured as reusable Figma Styles and portable JSON code. Always in sync.
Colors
Neutral, semantic, functional, and accent color tokens, derived from a base spectrum of colors, for light and dark mode.
Typography
Responsive typography heading styles adjust automatically at different breakpoints.
Icons
A preconfigured Icon component links directly to the Font Awesome library, available in Figma and code.
< Components />
Flexible, but consistent building blocks for apps and websites at Global Payments. Available in Figma, and as React, Vue, Angular, or Web Components.
Figma Libraries
Components in Figma closely match their counterparts in code with similar configurable properties and states.
JavaScript Package
Components are built using Stencil to provide a consistent experience for customers no matter which framework drives your app.
Next steps: React Setup.
Recipes
Prebuilt layouts for common user flows. Drop them into your designs, use them as a starting point for inspiration, or mix and match to fit your needs.
Figma Plugins
A custom tool ties the system together, automates repetitive tasks, and simplifies communication between design and development teams.
Organization access is required.
For Designers
For Developers
For Designers
Style layers using design token values.
Custom helpers for creating special components such as Tables and Cards.
Search and use Font Awesome icons without leaving Figma.
Built in accessibility checks for typography and color for WCAG AA compliance.
For Developers
Instantly convert entire Figma designs into clean, usable Vega component code.
Preview generated code as live, interactive HTML.
Copy component code for React, Vue, Angular, and Vanilla JS.
Make further code edits using the CodeSandbox integration.
Essentials
Vega includes most of the essential features expected from a design system, with new features and improvements added constantly.
Accessibility
Accessibility is baked into Vega Components at every step from design to development, with a minimum goal to meet WCAG AA requirements.
White Labeling
Allow customers to style your app using their own brand colors. Easily apply custom colors to relevant components and evaluate them for accessibility.
Dark Mode
Dark mode support is included at a token level. All color tokens include a dark mode variant and change automatically based on a global CSS class or user setting.
Workshops
Weekly sessions where we get together and design with Vega, review component requests from other teams, and share design tips and tricks.
Frequently Asked Questions
Can I create my own component if I can’t find one that I need?
Yes! You may absolutely create your own Vega components, however there are a series of guidelines that we ask you to follow to ensure that your component works best with the system. Learn more about how to contribute to Vega.
Which JavaScript frameworks does Vega support?
Vega supports React (including Next JS), Vue, Angular, and Vanilla JavaScript frameworks. Please review the Getting Started Guide, and look for framework specific examples on our Components pages.