Flare

v15 · published

Coral light on glass, in the dark.

vividglassyplayfulcrisp

Flare is a re-reading of the command-launcher aesthetic: a near-black canvas where frosted-glass surfaces float behind hairline highlights, lit by a vivid coral that flares on every primary action. Electric azure plays the foil, corners are rounded like a native app, and a coral glow haloes the things that matter. Motion is snappy and confident on a quintic ease. It feels fast, premium, and a little playful - software that delights on a keystroke.

Open the playground →Fork it · design a page →

re-imagined from https://raycast.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 · Authenticate

npx synthesisui@latest login

2 · Add this design system

npx synthesisui add flare --version 15

3 · Import the tokens in your global CSS

@import "_synthesisui/ds/flare/tokens.css";
@import "_synthesisui/ds/flare/theme.css";

Ask your agent

Use the "Flare" design system (slug: flare) to: build the UI I describe next

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

Read these files first (highest authority first):
- _synthesisui/ds/flare/rules.md - project rules for this system (if present); obey them above everything else
- _synthesisui/ds/flare/philosophy.md - the mission, voice and principles (if present); let it shape every screen
- _synthesisui/ds/flare/v15/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="flare"` (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").
- Wire 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 flare "…".

Dependencies

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

Web fonts - Inter, Geist 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.
Chartsnpm i recharts
Charts are themed through your series tokens, but you bring the rendering library (the gallery uses Recharts).

Color

Primitives and roles.

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

color.coal

50#f5f6f7

100#e6e6e8

200#c8c9cc

300#9a9ba0

400#6b6c72

500#434345

600#2a2b2e

700#1b1c1e

800#121316

900#0a0b0e

950#07080a

color.mint

400#4ade80

500#22c55e

600#16a34a

color.veil

500#07080acc

color.amber

400#fbbf24

500#f59e0b

600#d97706

color.azure

300#8fd0ff

400#56c2ff

500#138af2

600#0b6fd1

color.coral

300#ff9d9d

400#ff6363

500#f5454a

600#d62f3a

700#a81f2a

color.glass

100#ffffff0d

200#ffffff14

300#ffffff26

color.crimson

400#f43f5e

500#e11d48

600#be123c

color.semantic - resolved live via CSS variables

info

{color.azure.400}

faint

{color.coal.400}

muted

{color.coal.300}

scrim

{color.veil.500}

accent

{color.azure.400}

border

{color.glass.200}

canvas

{color.coal.900}

danger

{color.crimson.400}

raised

{color.coal.700}

overlay

{color.coal.700}

primary

{color.coral.400}

success

{color.mint.400}

surface

{color.coal.800}

warning

{color.amber.400}

foreground

{color.coal.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

sm12px

md16px

lg24px

xl40px

2xl64px

3xl96px

shadow

glow

ring

Typography

The voice of the system.

Display: Inter · Body: Inter · Mono: Geist Mono

xsDesign, set free0.75rem / 1.45

smDesign, set free0.8125rem / 1.5

baseDesign, set free1rem / 1.6

lgDesign, set free1.25rem / 1.4

xlDesign, set free1.5rem / 1.3

2xlDesign, set free2rem / 1.2

displayDesign, set free2.75rem / 1.1

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

fade

glow

rise

float

press

pulse

shimmer

easings

standardcubic-bezier(0.23, 1, 0.32, 1)

expocubic-bezier(0.075, 0.82, 0.165, 1)

swiftcubic-bezier(0.165, 0.84, 0.44, 1)

durations

base · 0.3sfast · 0.2sslow · 0.5sambient · 1.5s

interaction patterns

presspress-in

Snappy press feedback.

loopglow-loop

Primary surfaces breathe a coral glow.

enterenter-rise

Content springs up and fades in on a quintic ease.

focusfocus-ring

An azure ring snaps on at focus.

hoverhover-lift

Glass surface lifts on hover.

Components · 45

Recipes, 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.

ds-badge

Rounded pill for metadata and status; colored text on a glassy fill.

intent

infoaccentdangerneutralsuccesswarning

ds-button

Rounded action with a coral glow on primary; snappy and bright.

intent

ds-launcher

bespoke · field

The ⌘-space command bar - the product's front door, glowing on focus.

ds-glass-panel

bespoke · surface

The signature frosted surface - translucent white over the dark, blurred behind.

Frosted glass

ds-card

Frosted panel on the dark canvas, edged by a glass hairline; lifts on hover.

padding

Default

A card wearing this system.

None

A card wearing this system.

emphasis

Default

A card wearing this system.

Elevated

A card wearing this system.

ds-select

Field trigger that reveals a focus ring on interaction.

Choose an option

ds-input

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

ds-avatar

Identity token - sized circle with initials or image.

size

MAMAMA

ds-link

bespoke · surface

Inline text link, for words inside sentences - the underline is the affordance, so it reads as a link without relying on colour alone. For standalone actions use button; for navigation chrome use navbar/sidebar items.

A surface wearing this system.

ds-kicker

bespoke · text

Mono uppercase eyebrow with wide tracking - the HUD microtype that labels a section ("01 · ECOSYSTEM"). Use above headings; data-tone="accent" for the highlighted variant.

tone

defaultaccent

ds-readout

bespoke · text

HUD data readout - a mono tabular value over a micro uppercase label ("42s · AVG RENDER"). The corner instrument of cinematic scenes; pair with the count-up hook for live-feeling numbers.

ValueLabel

ds-heading

bespoke · text

Display heading on the system's type scale - the display family at a semibold weight. Pick a `size` step (defaults to 2xl) so headings stay on-scale without hand-set styles.

size

lgxl2xldisplay

ds-text

bespoke · text

Body copy on the system's type scale. Pick a `size` step and a `tone`; defaults to base body text on the foreground color - so text stays on-system without hand-set styles.

size

xssmbaselg

tone

defaultmuted

ds-stack

bespoke · surface

Vertical layout primitive - a flex column with a token `gap` (defaults to md). Stack sections/cards without hand-set flex styles.

gap

A surface wearing this system.

align

A surface wearing this system.

ds-row

bespoke · surface

Horizontal layout primitive - a centered flex row with a token `gap` (defaults to sm). Compose toolbars/inline groups without hand-set flex styles.

gap

A surface wearing this system.

justify

A surface wearing this system.

align

A surface wearing this system.