Prism

v16 · published

Refracted light on a precise white grid.

prismaticpreciseluminousconfident

Prism is a re-reading of financial-infrastructure design language: a clean, cool-white canvas where a single confident blurple carries every primary action, and color otherwise arrives as refracted light - indigo bleeding into magenta and warm amber across gradient panels. Surfaces are pure white lifted by signature ink-blue shadows, edges are precise and lightly rounded, and the type is airy and low-weight so big statements feel calm rather than loud. Motion decelerates on one smooth curve; nothing snaps. It reads as engineered trust dressed in spectral color.

Fork it into your own →Open the playground →

re-imagined from https://stripe.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 prism

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 "Prism" design system (slug: prism) to: build the UI I describe next

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

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

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, Source Code Pro
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.fog

50#ffffff

100#f6f8fc

200#eef1f8

300#dde3ef

400#aab2c8

500#6b7693

600#4d566f

700#353c52

800#232838

900#161a26

950#0a0c14

color.iris

300#b5b3fe

400#8a86fd

500#635bff

600#533afd

700#4322c4

750#5c53ff

800#2c2484

850#5c53ff

900#1d1a5c

color.jade

400#34c77f

500#15be53

600#0f9a43

700#0e8038

color.veil

500#0a0c14b3

color.amber

400#f5a623

500#e0890a

600#b86d00

700#9e6107

color.coral

400#ff6b6b

500#e5484d

600#c0353a

700#d91f25

color.magenta

300#ffd7ef

400#f99fdf

500#f44bcc

600#d92ba6

700#a51d85

750#cf0da1

color.semantic - resolved live via CSS variables

info

{color.iris.850}

faint

{color.fog.400}

muted

{color.fog.500}

scrim

{color.veil.500}

accent

{color.magenta.750}

border

{color.fog.200}

canvas

{color.fog.100}

danger

{color.coral.700}

raised

{color.fog.50}

overlay

{color.fog.200}

primary

{color.iris.750}

success

{color.jade.700}

surface

{color.fog.50}

warning

{color.amber.700}

foreground

{color.fog.900}

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: Inter · Body: Inter · Mono: Source Code Pro

xsDesign, set free0.75rem / 1.5

smDesign, set free0.875rem / 1.5

baseDesign, set free1rem / 1.6

lgDesign, set free1.25rem / 1.4

xlDesign, set free1.625rem / 1.3

2xlDesign, set free2.125rem / 1.2

displayDesign, set free3.25rem / 1.05

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

rise

spin

press

pulse

aurora

shimmer

easings

expocubic-bezier(0.16, 1, 0.3, 1)

inoutcubic-bezier(0.45, 0.05, 0.55, 0.95)

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

standardcubic-bezier(0.25, 1, 0.5, 1)

durations

base · 0.3sfast · 0.15sslow · 0.5sambient · 0.8s

interaction patterns

presspress-in

Tactile press feedback.

hovercard-lift

Surface lifts on hover with a deeper ink-blue shadow.

enterenter-rise

Content rises and fades in on entrance.

focusfocus-ring

An iris focus ring blooms on keyboard focus.

loopambient-aurora

Gradient panels drift slowly, like refracted light moving.

Components · 24

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.

prism-panel

bespoke · surface

The signature hero surface - refracted light drifting across a spectral gradient.

Refracted light

code-snippet

bespoke · surface

Inline-of-the-product code block - mono on deep ink, the way infra shows its API.

prism.charges.create({ amount: 2000 })

card

bespoke · surface

White vessel on the cool canvas, defined by a hairline and an ink-blue shadow; lifts on hover.

padding

A card wearing this system.

emphasis

A card wearing this system.

chip

bespoke · pill

Compact entity/filter token - a pill holding an avatar/icon, a label and an optional ds-chip-remove. Set data-active="true" for a selected filter (tints the primary); use a <button> or add ds-chip-remove for a dismissible chip.

active

MAMaya AndersenMAMaya Andersen

stat

bespoke · indicator

KPI / metric - a label over a prominent value, with an optional delta. Compose ds-stat with ds-stat-label, ds-stat-value and ds-stat-delta (tone=up/down colors the change against neutral). Line several ds-stat in a flex row with a divider/border for a KPI strip.

Monthly revenue$128,430▲ 4.2%

tabs

bespoke · control

Segmented control. The trigger marked data-active="true" lifts onto a surface; panels carry the body.

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

texttexttexttext

tone

texttext

badge

bespoke · surface

Mono-stamped pill for metadata and status; colored text on a faint cool chip.

intent

PillPillPillPillPillPill

field

bespoke · field

Form field group. Compose ds-field with ds-field-label, the control, ds-field-hint and (when invalid) ds-field-error.

EmailEnter a valid email.

input

bespoke · surface

Quiet field that blooms an iris focus ring on interaction.

modal

bespoke · surface

Centered dialog over a scrim. Compose ds-modal (the centering layer) with ds-modal-overlay, ds-modal-panel, and ds-modal-header/body/footer.

steps

bespoke · indicator

Step indicator for a multi-step flow (wizard/checkout/onboarding). Compose ds-steps with ds-steps-step and ds-steps-connector between them; nest a ds-steps-marker (the numbered circle) and ds-steps-label inside each step. Mirror data-state="done|active|upcoming" on BOTH the step and its marker (like switch on/off).

table

bespoke · surface

Data table. Compose <table class="ds-table"> with ds-table-head, ds-table-row, ds-table-cell-head and ds-table-cell.

Project	Status	Updated
Halogen	Active	2h ago
Cinnabar	Paused	1d ago
Ember	Active	3d ago

avatar

bespoke · indicator

Identity token - sized circle with initials or image.

size

MAMAMA

button

bespoke · surface

Compact, low-radius action. Primary carries the lone blurple; it lifts a hair on hover.

intent

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

kickerkicker

navbar

bespoke · surface

Horizontal navigation bar. Compose ds-navbar with ds-navbar-item (active=true marks the current route; data-locked="true" dims a disabled/"soon" item).

select

bespoke · field

Field trigger that reveals a focus ring on interaction.

Choose an option

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.

LabelValue

stepper

bespoke · control

Numeric stepper - a value flanked by minus/plus controls. Compose ds-stepper with two ds-stepper-button (each a <button>; add the disabled attribute at a bound) and a ds-stepper-value between them.

breadcrumb

bespoke · text

Trail of ancestors. Compose ds-breadcrumb with ds-breadcrumb-item (current=true for the leaf) and ds-breadcrumb-separator.

pagination

bespoke · control

Page navigation. Compose ds-pagination with ds-pagination-item (active=true for the current page).

empty-state

bespoke · surface

Zero-data placeholder. Compose ds-empty-state with ds-empty-state-icon, ds-empty-state-title and ds-empty-state-description.

✦

No projects yet

Create your first project to get started.

icon-button

bespoke · action

Square, label-less action for toolbars and row controls - a quieter sibling of button.

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.