← All UI styles
Miami Sunset
Hot pink and teal over a dusk gradient, with a chrome-edged headline.
HolographicretroMusic and eventsFitness productsRetro-futuristic brands
Construction · Holographic
Surfaces shift hue across their own face like tilted foil, with a bright sheen running diagonally and a prism edge.
Every style renders this same screen, so the only thing changing between two of them is the style. The component above is the file below, running.
Prompt
Design this interface in the Miami Sunset style. Hot pink and teal over a dusk gradient sky, headlines edged like chrome. The palette is loud but the layout stays orderly and grid-aligned. Build every surface the
The numbers in this prompt are printed from the tokens below, so it cannot drift from what the specimen renders.
What carries the look
- hot pink and teal
- dusk gradient sky
- chrome-edged headline
- orderly grid
What this style refuses
- muted or earthy color
- flat grey backgrounds
- serif body text
- cramped layouts
The refusals are the half that keeps generated interfaces from converging — a prompt that only says what to add gets the default look.
Tokens
Palette
RoleLightDark
Background
#fdf0f6#160b1cSurface
#ffffff#1f1129Border
#f2cfe0#3d2145Text
#241426#fceef7Muted text
#6b4f66#bd9cb4Accent
#c81d7a#ff5fb0On accent
#ffffff#25001aShape and type
Radius4 / 10 / 16 px
Border1px solid
Shadowglow
DisplayVerdana
Bodysystem-ui
Monoui-monospace
Type scale11 · 12 · 15 · 17 · 23 · 34 px
Weights500 / 700 / 800
Line height1.45
Tracking0.01em
Spacing4px grid · regular
Surfacegradient
Accentglow
Separatornone
Labelsuppercase
Blurnone
Measured contrast — body 15.77:1 light, 17.03:1 dark; secondary text 6.46:1 and 7.81:1. Every pair clears WCAG AA in both themes, checked on each build.
Specimen · Specimen.tsx
import type { CSSProperties } from "react";
/**
* Vibary · Miami Sunset
*
* Hot pink and teal over a dusk gradient, with a chrome-edged headline.
*
* One complete product screen, rendered from the token object below —