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

# Color

> Color variables and how they are used in the Flowkit Framework.

The framework uses a system of structured color variables that power the entire site. These variables are applied consistently across text, backgrounds, borders, and component variations.

All colors are managed through variables and that are grouped by the following roles:

* [**Core Colors**](#core-colors)\
   The foundational palette used across the system
* [**Tints**](#tints)\
   Create depth and hierarchy without introducing additional colors
* [**Contextual Usage**](#contextual-usage)\
   Semantic variables that reference core colors behind the scenes

---

## Core Colors

Core colors represent the main color tokens for UI elements like buttons, cards, and links. These include both accent and neutral palettes. These are the foundational variables used for background fills, button states, and links.

| Accent Colors          | Neutral Colors    |
| ---------------------- | ----------------- |
| Accent Primary         | Neutral Primary   |
| Accent Secondary       | Neutral Secondary |
| Accent Tertiary        | Neutral Inverse   |
| Accent Primary Hover   |                   |
| Accent Secondary Hover |                   |
| Accent Tertiary Hover  |                   |

---

## Tints

Each core color includes a tint scale ranging from `A10` (lightest) to `A90` (strongest). These are used for opacity layering, accessible text, or background overlays. Tints allow you to create depth and hierarchy without introducing additional colors.

| Group            | Tint Range |
| ---------------- | ---------- |
| Accent Primary   | A10 – A90  |
| Accent Secondary | A10 – A90  |
| Accent Tertiary  | A10 – A90  |
| Neutral Primary  | A10 – A90  |
| Neutral Inverse  | A10 – A90  |

Examples:

* Text Secondary uses Neutral Inverse A60
* Border Primary uses Neutral Inverse A50
* BG Overlay uses Neutral Inverse A90

---

## Contextual Usage

Many design variables reference core colors behind the scenes. These are more semantic and mapped to actual UI roles. Update any of the base colors, and these will automatically reflect those changes in the UI.

| Usage Context | Variable Example                                        |
| ------------- | ------------------------------------------------------- |
| Background    | BG Primary, BG Accent Secondary, BG Inverse             |
| Text          | Text Primary, Text On Accent Primary, Text On Overlay   |
| Border        | Border Primary, Border Accent, Border Inverse Secondary |