Voltage

v15 · published

High-voltage green, black ink, money that moves.

electricboldhigh-contrastroundedbrash

Voltage is a re-reading of the money-app aesthetic at its most fearless: the brand color isn't an accent, it's the whole canvas. A shocking electric green floods the page, black ink sits on top with zero apology, and crisp white cards float above it carrying the numbers. Everything is a full pill - buttons, tags, status - and the type is a tight grotesk that lets huge balances breathe. The signature move is the inversion: in the native light face, primary actions are black pills with green type; flip to dark and the world goes black while the green leaps forward as a glowing pill. It feels loud, instant, and confident - fintech with the volume up.

Fork it into your own →Open the playground →

re-imagined from https://cash.app

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 voltage

2 · Turns the check and the tools on

npx synthesisui@latest connect

2 · Turn the check and the tools on

npx synthesisui@latest connect

Ask your agent

Use the "Voltage" design system (slug: voltage) to: build the UI I describe next

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

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

Dependencies

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

Web fonts - Hanken Grotesk, 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.ink

50#ffffff

100#f8f8f8

200#e8e8e8

300#cfcfcf

400#999999

500#767676

600#555555

700#3a3a3a

800#222222

850#4d4d4d

900#111111

950#000000

color.veil

500#000000cc

color.amber

400#ffcf4d

500#ffb800

600#e09b00

700#5e4400

800#845b00

color.green

50#e6ffe8

100#b8ffbe

200#7bff86

300#3bff4d

400#00f015

500#00e013

600#00b80f

700#00900c

800#056b0c

850#005c08

900#0a4a0d

950#005a08

975#007b0a

color.cobalt

400#5a82d6

500#3860be

600#2b4d9e

700#2a488f

color.scarlet

400#ff5a5f

500#f5333a

600#d61f26

700#9e080d

800#c71c23

color.semantic - resolved live via CSS variables

info

{color.cobalt.700}

faint

{color.ink.400}

muted

{color.ink.850}

scrim

{color.veil.500}

accent

{color.green.850}

border

{color.ink.200}

canvas

{color.green.500}

danger

{color.scarlet.700}

raised

{color.ink.50}

overlay

{color.ink.50}

primary

{color.ink.950}

success

{color.green.950}

surface

{color.ink.50}

warning

{color.amber.700}

foreground

{color.ink.950}

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

ring

Typography

The voice of the system.

Display: Hanken Grotesk · Body: Hanken Grotesk · Mono: JetBrains Mono

xsDesign, set free0.75rem / 1.4

smDesign, set free0.875rem / 1.5

baseDesign, set free1rem / 1.55

lgDesign, set free1.25rem / 1.35

xlDesign, set free1.75rem / 1.2

2xlDesign, set free2.5rem / 1.1

displayDesign, set free4rem / 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 - 8 live

rise

spin

pulse

fade-in

shimmer

scale-in

slide-up

pulse-ring

easings

outcubic-bezier(0, 0, 0.2, 1)

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

standardease-in-out

durations

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

interaction patterns

enterreveal

Cards scale up softly into place.

enterentrance

Content rises and fades in cleanly.

entercta-slide

The sticky CTA slides up from the bottom edge.

hoverhover-lift

White cards lift on hover.

looplive-pulse

A ring radiates out from live status dots.

looploading-spin

The progress ring spins while money moves.

Components · 8

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.

amount

bespoke · text

The bespoke balance figure - a huge, tight-tracked currency display for the number that matters.

tone

$980.00$980.00

cashtag

bespoke · pill

The bespoke $handle - Voltage's identity pill, a black-on-green tag that names you in one tap.

$voltage

card

bespoke · surface

Crisp white tile floating on the green; soft neutral shadow, generous radius, lifts on hover.

padding

A card wearing this system.

emphasis

A card wearing this system.

badge

bespoke · surface

Full-pill chip for status and metadata; bold colored text on a soft tinted fill.

intent

PillPillPillPillPillPillPill

input

bespoke · surface

Pill-edged field; a green voltage ring snaps on at focus.

avatar

bespoke · indicator

Identity token - sized circle with initials or image.

size

MAMAMA

button

bespoke · surface

The signature full pill - black on green natively, inverting to green on black in the dark face. Type takes the canvas color so the contrast always flips with the mode.

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.