> This page is for Flowkit CSS Framework, version v2 (default).
> For other versions, use one of these documentation indexes:
> - v2 (default): https://developers.webflow.com/flowkit/v2.0.0/llms.txt
> - v1: https://developers.webflow.com/flowkit/v1.0.0/llms.txt

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://developers.webflow.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://developers.webflow.com/_mcp/server.

# Variables Overview

> Variables are a collection of values that determine how a website and its parts look.

Flowkit Framework uses variables to ensure consistent, scalable, and easily manageable design styling across Webflow sites. Variables in Flowkit are like design tokens: they define core values (such as colors, spacing, or typography) and are reused throughout classes.

If something needs to change — like a brand color or font size — you only update it in one place.

![Variables](/_fern-img/44ed6b08999ebb18ba89279963ca9bbdeaffd94ea6a506ccbd70caac70fc5a2a.webp)

Each variable has a meaningful, descriptive name following a structured naming convention.

### Categories

| Category   | Description                                        |
| ---------- | -------------------------------------------------- |
| Colors     | The foundational palette used across the system    |
| Sizes      | Spacing, radius, sizing scales, and layout metrics |
| Typography | Font families, base font sizes, and type styles    |