Flux

v16 · published

Electric blue on black, built to move.

vividkineticbolddarkelectric

Flux is a re-reading of the no-code-canvas aesthetic, where the interface itself is the showreel. A true near-black stage lets floating cards hover on layered shadows and hairline-thin white edges, while a single electric blue cuts through as the signal color and a creative violet answers it. The signature is light in the dark: a radial spotlight gradient washes from a bright corner into the void, the same move the source spends on its hero. Type is a confident geometric grotesk set tight, motion is everywhere and effortless, and every surface feels like it could be dragged, nudged, and published. It feels kinetic, premium, and unmistakably made by people who design for a living.

Fork it into your own →Open the playground →

re-imagined from https://www.framer.com

Use in your project

Pull this design system into any project - it follows the system's tokens, recipes and rules. Run the commands yourself, or let your coding agent set it up and build.

1 · Brings the system in

npx synthesisui@latest init --styles tailwind --ds flux

2 · Turns the check and the tools on

npx synthesisui@latest connect

3 · Reopen your agent and paste this - it wires the tokens, the scope and the fonts

Set up the "flux" design system in this project, so its tokens reach the browser. I already ran the install in my terminal.

1. Add these two lines to the global stylesheet this project's apps actually load (in a monorepo that is usually the shared package's, not the app's), RIGHT AFTER its `@import "tailwindcss"` line:

      @import "<path to the repo root>/_synthesisui/ds/flux/tokens.css";
      @import "<path to the repo root>/_synthesisui/ds/flux/theme.css";

   The position is not cosmetic. Read there, this sheet comes BEFORE any `@theme` this project declares, so wherever both name the same variable the project's own value wins. Moved to the end of the file, ours would win instead - silently.
2. Put `data-ds="flux"` on a root element of each app - the element every page renders inside. Keep any classes it already has; a background they chose is a decision they made.
3. Map this project's type onto the system's family tokens: import from the fonts file the install wrote and point the family variables at it, in the same stylesheet. This is the step people skip, and without it the pages render in the framework's default face.
4. Run: npx synthesisui@latest doctor
   If npm answers `ETARGET` or `No matching version found`, a release is still propagating - wait a minute and run it again, or pin the version the registry does have (`npm view synthesisui version`).
   If it says "no system installed", the install never happened - run `npx synthesisui@latest init --styles tailwind --ds flux` and then start over from step 1.
   It must NOT say "this project does not load it yet". If it does, it names exactly which piece is still missing - fix that one and run it again.
5. Run: npx synthesisui@latest connect
   If npm answers `ETARGET` or `No matching version found`, a release is still propagating - wait a minute and run it again, or pin the version the registry does have (`npm view synthesisui version`).
   If it answers "already had it" on both lines, everything is live and you are done.
   If it WROTE either of them, then they are not live in this session, because hooks and tools are only read at startup. Stop there and tell me, in bold, on its own line: **RESTART THIS SESSION - the check is installed but not running yet.** Do not keep writing files after that; a session that cannot be checked is the state this whole setup exists to avoid.

Do not change any of my existing styles.

Ask your agent

Use the "Flux" design system (slug: flux) to: build the UI I describe next

First make sure it's installed: run `npx synthesisui add flux` if `_synthesisui/ds/flux/` isn't in the project yet.

Read these files first (highest authority first):
- _synthesisui/ds/flux/rules.md - project rules for this system (if present); obey them above everything else
- _synthesisui/ds/flux/philosophy.md - the mission, voice and principles (if present); let it shape every screen
- _synthesisui/ds/flux/v16/GUIDE.md - how to apply the system, the recipes and the token vocabulary

Follow this contract (target framework: next):
- First check whether this refers to UI that already exists in the project. If it does, modify only what's needed and keep the rest intact and on-system. If it doesn't, build it new.
- Scope the markup with `data-ds="flux"` (or rely on it at the app root).
- Style with the design system only: reuse the `.ds-*` recipe classes and the DS-backed Tailwind utilities (`bg-primary`, `text-foreground`, `p-md`, `rounded-lg`, `font-display`…). Never use raw hex/px outside the system's scale.
- Make sure `tokens.css` + `theme.css` are imported in the global CSS (see the GUIDE's "How to apply").
- Implement the behavior yourself (open/close, focus, routing) - the system ships the looks, not the JS.

Composition (make it look composed, not just correct):
- Cap page content with a max-width container and center it - this DS ships `max-w-app` for dashboards/wide UI and `max-w-prose` for text columns. Don't stretch content edge-to-edge.
- Give the page a complete, intentional layout: clear vertical rhythm, sensible density and grouped sections. Never leave a single thin row floating on an empty screen.

Deliver senior-level, production-quality code: clean structure, accessible (ARIA + keyboard), and responsive.

Paste into Claude Code, Cursor or any coding agent. From your project you can also run npx synthesisui use flux "…".

Dependencies

What to install or load so the system renders at full fidelity - it ships token names and recipes, not the assets.

Web fonts - Space Grotesk, Inter, JetBrains Mono
The system ships token names, not the fonts. Load them (Google Fonts, next/font or Fontsource) or type falls back to a generic family and loses the system's identity.
Icons - Lucidenpm i lucide-react
Components reference Lucide icon names. Install it (or swap in your own icon set) to render them.

Color

Primitives and roles.

Named scales forged by the synthesis; semantic roles only ever point at them.

color.jade

400#1fd29b

500#00bb88

600#009e72

color.rose

400#ff6b8a

500#f43f6b

600#d62a55

color.veil

500#080808cc

color.void

50#ffffff

100#f5f5f5

200#e5e5e5

300#cccccc

400#999999

500#666666

600#404040

700#242424

800#171717

900#111111

950#080808

color.amber

400#ffcf4d

500#ffb020

600#e0901a

color.glass

100#ffffff0d

200#ffffff14

300#ffffff26

color.violet

300#b3a0ff

400#9580ff

500#7c5cff

600#6038f0

color.electric

300#66c2ff

400#33adff

500#0099ff

600#0055ff

700#0042c8

color.semantic - resolved live via CSS variables

info

{color.electric.400}

faint

{color.void.500}

muted

{color.void.400}

scrim

{color.veil.500}

accent

{color.violet.500}

border

{color.glass.200}

canvas

{color.void.950}

danger

{color.rose.500}

raised

{color.void.800}

overlay

{color.void.700}

primary

{color.electric.500}

success

{color.jade.500}

surface

{color.void.900}

warning

{color.amber.500}

foreground

{color.void.50}

color.series - categorical data-viz palette (bg-series-*)

series-1

series-2

series-3

series-4

series-5

series-6

series-7

series-8

Foundations

Shape & depth.

Corner radius, spacing rhythm and elevation - the physical feel of the system.

radius

full

spacing

3xs2px

2xs4px

xs8px

sm10px

md15px

lg20px

xl40px

2xl60px

3xl96px

shadow

glow

ring

Typography

The voice of the system.

Display: Space Grotesk · Body: Inter · Mono: JetBrains Mono

xsDesign, set free0.75rem / 1.45

smDesign, set free0.8125rem / 1.5

baseDesign, set free0.9375rem / 1.6

lgDesign, set free1.25rem / 1.35

xlDesign, set free1.625rem / 1.25

2xlDesign, set free2.25rem / 1.1

displayDesign, set free3.875rem / 1.0

Motion

How it breathes.

Every keyframe runs live below, dressed in the system's own colors - durations, easing curves and the interactions they power.

keyframes - 9 live

fade

rise

spin

blink

float

shimmer

scale-in

glow-pulse

spotlight-drift

easings

swiftcubic-bezier(0.4, 0, 0.2, 1)

smoothcubic-bezier(0.44, 0, 0.56, 1)

standardease

durations

base · 0.3sfast · 0.2sslow · 0.6sambient · 1s

interaction patterns

enterreveal

Cards scale up into place as they enter.

enterentrance

Content rises and fades in smoothly.

hoverhover-lift

Surfaces lift toward the viewer on hover.

loopsignal-glow

Primary CTAs breathe an electric-blue glow.

loopcursor-blink

The text cursor blinks while typing.

looploading-spin

The loader ring spins while work happens.

loopambient-float

Floating UI cards drift gently above the stage.

Components · 9

Blueprints, rendered live.

Every value below is a token reference resolved by the renderer - hover, toggle and switch tabs to feel the states. Bespoke components are rendered from their anatomy hint.

cursor

bespoke · pill

The bespoke multiplayer cursor tag - a live collaborator's name riding an electric pill, the signature of a shared canvas.

tone

▸ Marco▸ Marco

spotlight

bespoke · surface

The bespoke hero backdrop - a radial wash of electric light pulled out of the void from one bright corner.

tone

Design bold. Launch fast.

card

bespoke · surface

Floating panel on the dark stage - layered shadow, hairline white edge, lifts toward the viewer on hover.

padding

A card wearing this system.

emphasis

A card wearing this system.

alert

bespoke · surface

Inline message. Tone maps onto the system's own semantic accents.

tone

A message wearing this system.

badge

bespoke · surface

Pill chip for status and metadata; colored text on a glassy fill.

intent

PillPillPillPillPillPillPill

input

bespoke · surface

Field on glass; an electric ring snaps on at focus.

avatar

bespoke · indicator

Identity token - sized circle with initials or image.

size

MAMAMA

button

bespoke · surface

Full-pill action. Primary carries the electric blue and a blue glow; the light variant is a crisp white pill, the way the source spends its CTAs.

intent

select

bespoke · field

Field trigger that reveals a focus ring on interaction.

Choose an option

Icons · lucide

A consistent icon set.

Icons inherit the system: color via currentColor, a standardized stroke, sizing on the scale. Lucide by default; more libraries can be enabled per system.