Huevy

Documentation

Overview

Huevy (pronounced "hue- 'y' ", sounds like "UI") is a modern platform for generating, managing, and syncing design system tokens between your design environment in Figma and development projects. It serves as your bridge for consistent design and code, reducing manual work and streamlining updates across your workflow.

Getting Started

1. Usage and Account

  • You can try our palette generator and type scale generator without creating an account.
  • Registering for a free account gives you the ability to save your design system and access from anywhere.
  • No credit card needed for the free plan.

2. Dashboard

  • Pro users get access to dashboard where they can manage up to 5 design systems.
  • Dashboard allows users to add new design systems and switch between existing design systems.

3. Design Systems

  • Design Systems are collections of design tokens including color palettes and type scales. (More token types coming soon!)
  • To view or edit an existing design system, click theView button on button on the Design System card.
  • To add a new design system, go to the dashboard and click the+ New Design Systembutton.
  • To delete a design system, click the Trash icon on the top-right corner of the Design System card.

Palette Generator

  • Select Color Harmony from the dropdown menu.Analogous is pre-applied. You can change to either triadic or split-complimentary.
  • Customize color palettes using color controls. Each change is immediately reflected in the preview.
  • For consistency in design, color palettes are always generated with a consistent lightness ranging from very light to very dark.
  • For fresh color palettes, use theRandomizebutton.
  • Every auto generation (refresh, randomize) creates a three-color set which are always tied to a harmony. To skip the harmony, you can manually change each color.
  • You can choose to include system colors in the palette with theSystem Colorstoggle.
  • To add any new palette or changes made to palette, click theAdd to Design Systembutton. Once added, the colors will be updated in the Design System panel on the right side.
  • If you do not add the changes to the design system, they will be lost when you navigate away from the palette generator.

Type Scale Generator

  • Base size determines the value of 1 rem. This is equal to Body-Medium/Button-Medium text size.
  • Scaling ratio defines the ratio by which the next font sizes increase or previous font size decreases.
  • You can choose to include certain font weights and line heights in your design system.
  • Important :Figma doesn’t natively support em / rem units in typography fields. Therefore, the values of line-heights cannot be applied since Figma only accepts pixel values for line-heights. However, line-heights on Huevy are still generated and saved as part of the design system for use in code.
  • Once you have generated and refined your type scale, you can add it to your design system by clicking theAdd to Design Systembutton.
  • If you do not add the changes to the design system, they will be lost when you navigate away from the typescale generator.
  • Customization of typescale ratio and font sizes are coming soon for Pro users.

Design Systems

  • Design System name and summary can be previewed in the right side panel of the palette and typescale generator pages.
  • Each new design system is named as "New Design System". You can edit the name of your design system by clicking the name and pressingEnterkey
  • Once you have added palette and typescale tokens to your design system, you can export them by clicking theDownloadbutton
  • Free users can only export their design system as a JSON file. If either palette or typescale tokens are exported, the download will include a JSON file. If both are exported, it will be a ZIP file containing the JSON files.
  • Pro users need not export their design systems and can import it directly into Figma or dev projects via API key available in the user dropdown menu in the header and on the dashboard.

Figma Plugin

  • Free users can import Design System JSON files manually, using the Huevy Figma plugin.
  • Simply browse or drag-and-drop the JSON files and their tokens will be imported as variables into your Figma file. To apply edits, new JSON files need to be re-imported which will overwrite existing variables.
  • Pro users can import their design systems directly by simply entering the API key available in the user dropdown menu in the header and on the dashboard.
  • Once API key is entered, it will fetch the design systems associated with the account which can be selected to import the tokens. Any updates to the design system in Huevy can be synced by clicking the "Sync" button in the plugin.

Dev Sync & CLI

The Huevy CLI syncs design system tokens from huevy.app directly into your development projects as CSS variables, Tailwind config, and utility classes. Available for Pro users only.

Installation & Setup

  • Install the package:npm install huevy
  • Run interactive setup:npx huevy
    This will prompt for your API key, let you select a design system, and generate the necessary files.

Commands

  • npx huevy - Interactive setup and initial sync
  • huevy sync - Re-sync design system and update files
  • huevy status - Show current configuration and version info
  • huevy uninstall - Remove all generated files and configuration

Generated Files

  • huevy-variables.css - CSS custom properties with clean naming (--primary-500, --fs-button-medium)
  • huevy.tailwind.js - Ready-to-use Tailwind CSS configuration

Integration Steps

  1. Import the Tailwind config in your tailwind.config.js:
    const huevyConfig = require('./huevy.tailwind.js');
module.exports = {
  ...huevyConfig,
  content: ['./src/**/*.{js,jsx,ts,tsx}']
};
  2. Import CSS variables in your main CSS file:
    @import "./huevy-variables.css";
  3. Use the generated CSS variables in your styles:
    .button {
  background-color: var(--primary-500);
  color: var(--primary-50);
  font-size: var(--fs-button-medium);
}

Utility Classes

Ready-to-use CSS utility classes for common design patterns. Import thehuevy-variables.cssfile to access all utilities.

Color Utilities

Apply colors to text, backgrounds, and borders. Available for all color palettes: primary, secondary, accent, grey, success, warning, and error.

Text Color

text-primary-500

Background

bg-accent-100

Border Color

border-primary-500

Note: Huevy uses grey instead of gray to avoid conflicts with Tailwind CSS utilities.

Font Size Utilities

Set text sizes using semantic class names that match your design system.

text-heading1

Heading 1

text-body-medium

Body Medium

Font Weight Utilities

Control text weight with fine-grained control from thin to black. Latest Huevy CLI uses fw- prefix.

fw-regular

Regular Weight Text

fw-bold

Bold Weight Text

Available weights: fw-thin (100), fw-extralight (200), fw-light (300), fw-regular (400), fw-medium (500), fw-semibold (600), fw-bold (700), fw-extrabold (800), fw-black (900)

Combined Example

Combine multiple utilities for complete styling:

Combined Utilities

Classes: bg-primary-500, text-primary-50, text-heading5, font-fw-semibold