> This page is for Flowkit CSS Framework, version v1.
> 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 site. 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                                                        |
| ------------------ | ------------------------------------------------------------------ |
| Core Colors        | The foundational palette used across the system                    |
| Color Applications | Variables that apply core colors to backgrounds, text, and borders |
| Size               | Spacing, radius, sizing scales, and layout metrics                 |
| Typography         | Font families, base font sizes, and type styles                    |
| Components         | Element-specific tokens (e.g. Button Padding, Card Border Radius)  |