# 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.

<img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/44ed6b08999ebb18ba89279963ca9bbdeaffd94ea6a506ccbd70caac70fc5a2a/products/flowkit/pages/v2/overview/flowkit-variables.webp" alt="Variables" />

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    |