Skip to main content

Overview

Squeeze is Curology's singular design system. It aims to simplify building and maintaining consistent, accessible, and performant user interfaces. Unlike previous attempts at building reusable UI code, Squeeze is more than just a component library. It's also a comprehensive Figma library, and a set of reusable styles to "glue" our components together into apps.

The Squeeze Ethos​

Squeeze is opinionated and sometimes imposes purposeful contraints on both engineers and designers. This is good.

Squeeze is a living product that will evolve over time. We're all its stewards, and we're all empowered to contribute to it.

Squeeze is not a catch-all for any shared design or functionality. The bigger the system, the more complex it is. The more complex it is, the harder it is to maintain. The harder it is to maintain, the more likely it is to fall into disrepair. Any additions to the system should be carefully considered. One-off designs and implementations belong in application code, not here.

Squeeze is framework agnostic. While today's components are built with React, we've chosen not to tightly couple Squeeze to any Next.js-specific abilities. We want Squeeze and its principals to outlive any one technology stack.

The Pieces of Squeeze​

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.

View in Figma

Design Tokens​

Foundational design tokens are defined in Figma, and also represented in Squeeze's code. You can think of tokens as variables that represent the smallest building blocks of our designs and code, like "Background Color: Primary" or "Font Size: Heading".

Read more about design tokens

Utility CSS​

The design tokens only matter if they're easy for engineers to use, and that's where Tailwind CSS comes in. Our custom Tailwind implementation leverages Squeeze's unique design tokens and Tailwind's robust class library to create styles that can be consumed by any web application using Squeeze components.

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!

Read the Utility CSS docs

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.

Read the React Component docs