Flowkit (Beta)Variables

Color

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

All colors are managed through variables and grouped by role.

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 ColorsNeutral Colors
Accent PrimaryNeutral Primary
Accent SecondaryNeutral Secondary
Accent TertiaryNeutral Inverse
Accent Primary Hover
Accent Secondary Hover
Accent Tertiary Hover

Tints

In variables, 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.

GroupTint Range
Accent PrimaryA10 – A90
Accent SecondaryA10 – A90
Accent TertiaryA10 – A90
Neutral PrimaryA10 – A90
Neutral InverseA10 – 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 ContextVariable Example
BackgroundBG Primary, BG Accent Secondary, BG Inverse
TextText Primary, Text On Accent Primary, Text On Overlay
BorderBorder Primary, Border Accent, Border Inverse Secondary