Skip to main content
FlowDrop uses a semantic-first design token system based on CSS custom properties with a --fd-* prefix.

​
Quick start

Override semantic tokens to customize FlowDrop: 
:root {
  /* Change the primary color */
  --fd-primary: #8b5cf6;
  --fd-primary-hover: #7c3aed;

  /* Adjust border radius */
  --fd-radius-md: 0.5rem;
}

​
Token architecture

FlowDrop’s token system has three tiers:
TierPrefixDescription
Internal Palette--_*Raw color values — not for direct use
Semantic Tokens--fd-*The public API — what you customize
Component Tokens(varies)Use semantic tokens in components
Key principle: Override --fd-* tokens. Components automatically use these tokens, so your theme cascades everywhere.

​
Semantic tokens reference

​
Surfaces

TokenDescription
--fd-backgroundMain background color
--fd-foregroundMain text color
--fd-mutedMuted background (cards, inputs)
--fd-muted-foregroundMuted text
--fd-cardCard background
--fd-card-foregroundCard text color

​
Borders

TokenDescription
--fd-borderDefault border color
--fd-border-mutedMuted border
--fd-border-strongStrong border
--fd-ringFocus ring color

​
Primary and accent

TokenDescription
--fd-primaryPrimary action color
--fd-primary-hoverPrimary hover state
--fd-primary-foregroundText on primary
--fd-primary-mutedLight primary background
--fd-accentAccent color
--fd-accent-hoverAccent hover

​
Status colors

Each status color has -hover, -foreground, and -muted variants:
  • --fd-success — Green
  • --fd-warning — Amber
  • --fd-error — Red
  • --fd-info — Blue

​
Spacing

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

TokenValue
--fd-radius-sm4px
--fd-radius-md6px
--fd-radius-lg8px
--fd-radius-xl12px
--fd-radius-fullPill shape

​
Typography

TokenValue
--fd-text-xs12px
--fd-text-sm14px
--fd-text-base16px
--fd-text-lg18px
--fd-text-xl20px

​
Layout

TokenDefault
--fd-sidebar-width320px
--fd-navbar-height60px
--fd-toolbar-height40px

​
Node layout

Node dimensions use a 10px grid for alignment with the editor snap grid:
TokenDefault
--fd-node-default-width290px
--fd-node-header-height60px
--fd-node-terminal-size80px
--fd-node-square-size80px
--fd-handle-size20px
--fd-handle-visual-size12px

​
Theming examples

​
Purple theme

:root {
  --fd-primary: #8b5cf6;
  --fd-primary-hover: #7c3aed;
  --fd-primary-muted: #f5f3ff;
  --fd-accent: #8b5cf6;
  --fd-ring: #8b5cf6;
}

​
Rounded theme

:root {
  --fd-radius-sm: 0.5rem;
  --fd-radius-md: 0.75rem;
  --fd-radius-lg: 1rem;
  --fd-radius-xl: 1.5rem;
}

​
Compact spacing

:root {
  --fd-space-3xs: 0.125rem;
  --fd-space-xs: 0.25rem;
  --fd-space-md: 0.5rem;
  --fd-space-xl: 0.75rem;
}

​
Dark mode

FlowDrop supports dark mode. Enable it with: 
<html data-theme="dark"></html>
Or via JavaScript: 
document.documentElement.setAttribute('data-theme', 'dark');
Or use the built-in theme toggle: 
import { toggleTheme, setTheme } from '@flowdrop/flowdrop/core';

toggleTheme(); // Cycles through light/dark/auto
setTheme('dark'); // Set explicitly
All semantic tokens have dark-mode equivalents that activate automatically.

​
Best practices

  1. Use semantic tokens — Override --fd-primary instead of individual component colors
  2. Keep it minimal — A few token overrides can transform the entire look
  3. Test in context — Colors look different on light vs dark backgrounds
  4. Consider accessibility — Ensure sufficient contrast ratios
  5. Use the cascade — Semantic tokens update all components automatically