← All UI styles
Atomic Fifties
Turquoise and coral on cream, with thin outlines and cheerful geometry.
BorderedretroHospitalityRetro consumer brandsEvents
Construction · Bordered
No depth at all, but every surface is contained by a drawn line — the border does the work a shadow would do elsewhere.
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 Atomic Fifties style. Mid-century turquoise and coral on warm cream, with thin outlines, boomerang shapes and a generally optimistic tone. Nothing is heavy. Build every surface the Bordered
The numbers in this prompt are printed from the tokens below, so it cannot drift from what the specimen renders.
What carries the look
- turquoise and coral
- warm cream ground
- thin outlines
- optimistic geometry
What this style refuses
- heavy black fills
- cool grey neutrals
- dense compact rows
- moody palettes
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
#faf4e6#15130eSurface
#fffdf6#1d1a14Border
#d9cdb2#373124Text
#22201a#f7f2e5Muted text
#5f5849#a89e8bAccent
#12707a#5fc8cfOn accent
#ffffff#04211fShape and type
Radius6 / 12 / 20 px
Border1px solid
Shadownone
DisplayTrebuchet MS
BodyTrebuchet MS
Monoui-monospace
Type scale11 · 12 · 15 · 17 · 22 · 32 px
Weights400 / 700 / 700
Line height1.5
Tracking0.01em
Spacing8px grid · regular
Surfaceflat
Accentfilled
Separatorhairline
Labelssentence case
Blurnone
Measured contrast — body 14.85:1 light, 16.61:1 dark; secondary text 6.43:1 and 7.01:1. Every pair clears WCAG AA in both themes, checked on each build.
Specimen · Specimen.tsx
import type { CSSProperties } from "react";
/**
* Vibary · Atomic Fifties
*
* Turquoise and coral on cream, with thin outlines and cheerful geometry.
*
* One complete product screen, rendered from the token object below —