Variables Overview

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

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

Categories

CategoryDescription
Core ColorsThe foundational palette used across the system
Color ApplicationsVariables that apply core colors to backgrounds, text, and borders
SizeSpacing, radius, sizing scales, and layout metrics
TypographyFont families, base font sizes, and type styles
ComponentsElement-specific tokens (e.g. Button Padding, Card Border Radius)