DOCS | TOKENS

Flow UI exposes a small, stable set of CSS custom properties. Everything else — component colors, backgrounds, border widths, animations — is derived from them. Override any of these at :root (or inside .dark) to retheme the whole system.

Source: @flow-industries/ui/styles/tokens.css.

Colors

All colors are defined in OKLch for perceptual uniformity. Light-mode values live in :root; dark-mode overrides live in .dark.

Surface

Token	Purpose
`--background`	Page background
`--foreground`	Default text
`--muted`	Subtle surfaces (inputs, sidebars)
`--muted-foreground`	De-emphasized text
`--overlay`	Semi-transparent scrim for dialogs and drawers

Intent

Token	Purpose
`--primary` / `--primary-foreground`	Primary buttons and emphasis
`--secondary` / `--secondary-foreground`	Low-emphasis buttons and tags
`--destructive`	Destructive actions
`--success` / `--success-background` / `--success-foreground`	Success — solid fill, a subtle tinted surface, and the green text shown on that surface
`--brand` / `--brand-foreground` / `--brand-text`	Flow pink brand surface, foreground on it, and AA-contrast brand text
`--focus`	Focus border color
`--input` / `--input-focus`	Input background, and its focused tint

Raw palette

Also exposed if you need to reach past semantic tokens:

--color-pink, --color-green, --color-blue, --color-purple, --color-red, --color-orange, --color-yellow.

Each hue also ships a lighter and a darker tint — --color-light-* and --color-dark-* over the same seven names (e.g. --color-light-pink, --color-dark-green). Semantic tokens build on these where it fits: --brand and --focus are both --color-pink. --success is a fixed green (#09b270), and --success-background and --input-focus are color-mix() tints — success over the background, focus over the input. --success-foreground is the green used for that text — a darker green (#067447) in light mode for legible contrast on the tint, and --success itself in dark mode.

Typography

Families

Token	Font
`--font-sans`	Geist Sans
`--font-mono`	Geist Mono

Size scale

--text-xs through --text-9xl. Every size sits ~10% above the Tailwind default for a roomier feel. Full scale:

xs, sm, base, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl, 7xl, 8xl, 9xl.

Line heights

--leading-none, --leading-tight, --leading-snug, --leading-normal, --leading-relaxed, --leading-loose.

Letter spacing

--tracking-tighter, --tracking-tight, --tracking-normal, --tracking-wide, --tracking-wider, --tracking-widest. Defaults lean into the Apple-style tight-by-default aesthetic.

Spacing and sizing

Borders:

Token	Default
`--border-width`	`2px`
`--border-width-focus`	`2px`

Flow UI never uses focus rings. Inputs indicate focus by swapping border color (border-focus), keeping the overall layout stable.

Radii are all derived from --radius via calc(), so overriding --radius reshapes every step:

Token	Expression
`--radius`	`0.75rem` (base)
`--radius-sm`	`calc(var(--radius) - 4px)`
`--radius-md`	`calc(var(--radius) - 2px)`
`--radius-lg`	`var(--radius)`
`--radius-xl`	`calc(var(--radius) + 4px)`
`--radius-2xl`	`calc(var(--radius) + 8px)`
`--radius-3xl`	`calc(var(--radius) + 12px)`
`--radius-4xl`	`calc(var(--radius) + 16px)`
`--radius-squircle`	`var(--squircle-radius, 35%)`

--radius-squircle backs the rounded-squircle utility used by square media (avatars, thumbnails): 35% by default, which keeps them a rounded square rather than a circle.

On browsers that support corner-shape: superellipse(1.6), --radius is bumped to 20px — superellipse corners read better at larger radii — and --squircle-radius goes to 50%, which the superellipse turns into a true squircle.

Animation

Token	Curve
`--ease-out`	`cubic-bezier(0.33, 1, 0.68, 1)`
`--ease-out-expo`	`cubic-bezier(0.22, 1, 0.36, 1)`
`--ease-spring`	`cubic-bezier(0.175, 0.885, 0.32, 1.275)`

Referenced in Tailwind utilities as ease-(--ease-spring).

Overriding

Set any token at :root to retheme globally:

:root {
  --brand: oklch(0.7 0.2 20); /* an orange brand */
  --radius: 0.25rem;           /* sharper corners everywhere */
}

Override inside .dark to affect dark mode only:

.dark {
  --background: oklch(0.15 0 0);
  --foreground: oklch(0.95 0 0);
}

See Theming for a worked multi-palette setup.

Tokens