Overview
Squeeze consists of a few separate, but related, pieces:
Figma Design Library
This is where it all starts. Designers create guidelines for typography, spacing, colors, and more. Those rules are exercised with high-fidelity component designs, which serve as the building blocks for all UI design at Curology.
Design Tokens
Based on Amazon’s Style Dictionary, Squeeze's design tokens provide up-to-date definitions for spacing, sizing, colors, fonts, etc. When changes are made to the Figma library, a webhook is triggered that creates a pull request into @curology/design-tokens to sync new tokens. This pipeline allows changes to the Figma library's building blocks to be automatically incorporated into a new version of the utility CSS and component library.
Utility CSS
The design tokens only matter if they're easy for engineers to use, and that's where Tailwind CSS comes in. This custom Tailwind implementation leverages Squeeze's unique design tokens and Tailwind's robust CSS library to create classes and build processes that can be consumed to layout any web application.
This utility CSS is used to build the components, and drives consistency for low-level things, like:
- Page padding and margins
- Font sizing and typefaces
- Element spacing
- Responsive breakpoints
- ...and much more!
React Components
Squeeze's React component library exists to help Curology ship new features faster and improve the UX across our many properties. They are the successor to the components of Radiance UI and Daylight UI, built with accessibility, themeability and performance in mind.