Base Theme: A CSS Utility Generator

Internal CSS Framework

The Base Theme micro-app was used the foundation for the Help Scout Marketing Team's internal CSS Framework, Evolution, which in turn served as the basis for the team's refreshed custom UI Component Library. Note: this repo is private.

Synchronized with Figma

The app consumes data from Figma Design Tokens and a JSON file of specifications and generates a set of CSS variables. The app ensures that design decisions made in Figma are always reflected in the CSS variable system.

CSS variables are generated for colors, fonts, grids, typography, and other design elements in a SCSS file that provides a maintainable and customizable starting point for CSS-based theming, as well as a minified CSS file for use in production.

TL;DR

The Base Theme app generates your own Tailwind-style CSS utility system from your Design Team's Figma Tokens, with all changes made in Figma automatically applied to the CSS.

Variable Families

The variable Families included in the generated theme are:

• Colors: A predefined set of color variables.
• Fonts: Typography settings like font families, sizes, and weights.
• Grids: Grid system variables to ensure consistent layouts.
• Spacing: Spacing utilities for margin and padding.
• Resets: CSS reset rules to standardize styles across browsers.
• Typography: Predefined typographic styles for consistency.