← All UI styles
Memphis Blocks
Primary blocks, mismatched corners, and cheerfully wrong proportions.
Die-cut stickerexpressiveCreative toolsCulture productsPlayful brands
Construction · Die-cut sticker
Each element is die-cut: a thick keyline right around the shape, then a soft drop, as if it were peeled off a sheet and pressed down.
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 Memphis Blocks style. Primary colors in flat blocks, corners that disagree with each other, and proportions that are deliberately off. It should look assembled rather than designed. Build
The numbers in this prompt are printed from the tokens below, so it cannot drift from what the specimen renders.
What carries the look
- flat primary blocks
- mismatched corner radii
- deliberately off proportions
- assembled look
What this style refuses
- a consistent radius scale
- muted color
- gradients
- symmetrical 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
#fdf9ec#121210Surface
#ffffff#1c1c19Border
#111111#f2f2eeText
#111111#f7f7f2Muted text
#4d4d4d#a3a39cAccent
#0057b8#5aa9ffOn accent
#ffffff#04122bShape and type
Radius0 / 14 / 2 px
Border2px solid
Shadownone
DisplayImpact
BodyVerdana
Monoui-monospace
Type scale11 · 13 · 15 · 18 · 24 · 34 px
Weights500 / 800 / 900
Line height1.4
Tracking0em
Spacing8px grid · regular
Surfaceflat
Accentblock
Separatorhairline
Labelssentence case
Blurnone
Measured contrast — body 17.93:1 light, 17.45:1 dark; secondary text 8.03:1 and 7.39:1. Every pair clears WCAG AA in both themes, checked on each build.
Specimen · Specimen.tsx
import type { CSSProperties } from "react";
/**
* Vibary · Memphis Blocks
*
* Primary blocks, mismatched corners, and cheerfully wrong proportions.
*
* One complete product screen, rendered from the token object below —