FlutterFlow. Violet control room at midnight.
- Developer tools
- Dark theme
- 9 colors
- 2 typefaces
FlutterFlow's design system is a midnight workspace for app builders: near-black canvas (#060311) with deep violet energy radiating from gradient orbs and glowing CTAs. Urbanist, an understated geometric sans, carries the brand voice with generous letter-spacing that makes even 100px headlines feel architectural rather than shouty. The interface follows a clear three-tier surface stack — Obsidian canvas, Onyx cards, and Electric Violet accents — creating a developer-tool density that still feels premium and approachable. Every interactive element whispers confidence: pill-shaped buttons, 24px card radii, hairline violet borders, and minimal elevation replaced by subtle glows and gradient washes.

FlutterFlow design system
Brand4
Violet supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color
Saturated brand depth — testimonial card backgrounds, gradient mid-stops, and decorative fills that reinforce violet identity without competing with Electric Violet for attention
Soft brand highlight — icon tints, secondary accents, and gradient highlights that lighten the violet palette for hover states and decorative ornament
Radial gradient seed — the orb color that radiates from the hero top-left corner and bleeds into card backgrounds, creating atmosphere without flat fill
Neutrals5
Icon detail in light/banner contexts and SVG illustration fills where maximum contrast is required against white backgrounds
Page canvas — the deep near-black backdrop for the entire site. Carries a subtle violet undertone that keeps the darkness warm and on-brand rather than cold
Card surfaces and hairline borders — one step lighter than the canvas, creates soft layering without shadows. Used for widget tree panels, input fields, and elevated containers
Muted body and helper text — descriptions, metadata, secondary nav items. Sits clearly below white in hierarchy while maintaining AAA contrast on the dark canvas
Light supporting surface for subtle backgrounds and section separation. Do not promote it to the primary CTA color
Try a pairing
Pick any two colors from the palette to check whether text stays readable on top.
Aa
Pure White on Electric Violet
7.41 : 1 contrast
- Body textPasses AA 4.5
- Large textPasses AA 3
- StrictPasses AAA 7











