Skip to content
FlowDrop™
Get started

CSS Design Tokens

FlowDrop uses CSS custom properties with a --fd-* prefix as its theming API. Override these tokens to customize the editor’s appearance.

How Theming Works

Section titled “How Theming Works”

FlowDrop’s token system has three tiers:

TierPurposeYou customize?
Internal Palette (--_*)Raw color valuesNo
Semantic Tokens (--fd-*)Public theming APIYes
Component stylesConsume semantic tokensNo

Override --fd-* tokens and all components update automatically.

/* Example: Apply a purple theme */
:root {
  --fd-primary: #8b5cf6;
  --fd-primary-hover: #7c3aed;
  --fd-primary-muted: #f5f3ff;
  --fd-accent: #8b5cf6;
  --fd-ring: #8b5cf6;
}

Surfaces

Section titled “Surfaces”
TokenDescription
--fd-backgroundMain background color
--fd-foregroundMain text color
--fd-mutedMuted background (cards, inputs)
--fd-muted-foregroundMuted text color
--fd-cardCard background
--fd-card-foregroundCard text color

Borders

Section titled “Borders”
TokenDescription
--fd-borderDefault border color
--fd-border-mutedSubtle border
--fd-border-strongEmphasized border
--fd-ringFocus ring color

Primary & Accent

Section titled “Primary & Accent”
TokenDescription
--fd-primaryPrimary action color (buttons, links)
--fd-primary-hoverPrimary hover state
--fd-primary-foregroundText on primary background
--fd-primary-mutedLight primary background
--fd-accentAccent color
--fd-accent-hoverAccent hover state

Status Colors

Section titled “Status Colors”

Each status color has four variants:

Base Token-hover-foreground-muted
--fd-success--fd-success-hover--fd-success-foreground--fd-success-muted
--fd-warning--fd-warning-hover--fd-warning-foreground--fd-warning-muted
--fd-error--fd-error-hover--fd-error-foreground--fd-error-muted
--fd-info--fd-info-hover--fd-info-foreground--fd-info-muted

Spacing

Section titled “Spacing”
TokenDefault
--fd-space-3xs4px
--fd-space-2xs6px
--fd-space-xs8px
--fd-space-sm10px
--fd-space-md12px
--fd-space-lg14px
--fd-space-xl16px
--fd-space-2xl20px
--fd-space-3xl24px

Border Radius

Section titled “Border Radius”
TokenDefault
--fd-radius-sm4px
--fd-radius-md6px
--fd-radius-lg8px
--fd-radius-xl12px
--fd-radius-full9999px (pill shape)

Typography

Section titled “Typography”
TokenDefault
--fd-text-xs12px
--fd-text-sm14px
--fd-text-base16px
--fd-text-lg18px
--fd-text-xl20px

Layout

Section titled “Layout”
TokenDefaultDescription
--fd-sidebar-width320pxNode sidebar width
--fd-navbar-height60pxTop navbar height
--fd-toolbar-height40pxCanvas toolbar height

Node Dimensions

Section titled “Node Dimensions”

Node dimensions use a 10px grid to align with the editor’s snap grid:

TokenDefaultDescription
--fd-node-default-width290pxStandard node width
--fd-node-header-height60pxNode header area
--fd-node-terminal-size80pxTerminal node size (start/end)
--fd-node-square-size80pxSquare node size (gateway)
--fd-handle-size20pxPort handle hit area
--fd-handle-visual-size12pxPort handle visible size

Accent HSL Knobs

Section titled “Accent HSL Knobs”

For fine-grained accent control, FlowDrop exposes HSL components:

TokenDefaultDescription
--fd-accent-hue17Accent hue (0–360)
--fd-accent-saturation100%Accent saturation
--fd-accent-lightness34%Accent lightness
--fd-accent-low(derived)Low-intensity accent
--fd-accent-high(derived)High-intensity accent
--fd-gray-hue210Base hue for grays

Quick accent experiments:

:root {
  --fd-accent-hue: 174; /* Teal */
  --fd-accent-hue: 260; /* Purple */
  --fd-accent-hue: 340; /* Pink */
  --fd-accent-hue: 220; /* Blue */
  --fd-accent-hue: 150; /* Green */
}

Dark Mode

Section titled “Dark Mode”

FlowDrop auto-switches tokens based on data-theme:

<html data-theme="dark"></html>

Or programmatically:

import { setTheme, toggleTheme } from '@flowdrop/flowdrop/settings';


setTheme('dark');
toggleTheme();

All semantic tokens have dark-mode equivalents that activate automatically. The accent HSL knobs adjust luminance in dark mode — --fd-accent-low becomes darker and --fd-accent-high becomes lighter.

Next Steps

Section titled “Next Steps”