The styles
for vibe design

Everyday project styles, landing pages, back-office and data products, and the styles that make a page memorable. Each card is a real rendered design in that style, the three attributes that identify it, when it is the right answer, and the words to paste into your agent.

all of them on the wall · new styles added daily · every card is a rendered design, not a diagram · the keywords are the payload

LAYOUT STYLE 01everyday

Bento Box Grid

Bento Box Grid layout — interface screenshot
Structure · Rhythm · System
Primary move
modular balance
Surface behavior
varied scale
Visual signature
clear hierarchy

Many features and mixed information, with no single thing that deserves the whole screen. Tiles may differ in size, but the largest has to be obviously largest — otherwise it reads as a tidy cupboard rather than a hierarchy.

modular cardsasymmetric gridvaried sizesclear hierarchy
Details →
LAYOUT STYLE 02everyday

Swiss Minimalism

Swiss Minimalism layout — interface screenshot
Structure · Rhythm · System
Primary move
rational order
Surface behavior
mathematical spacing
Visual signature
disciplined clarity

Pages that earn order from the grid, the type scale and white space instead of decoration. Steady for enterprise tools, documentation sites and professional consoles — as long as the operational feedback does not get deleted along with the ornament.

Swiss gridclean typographywhite spacehigh contrast
Details →
LAYOUT STYLE 03everyday

Glassmorphism

Glassmorphism layout — interface screenshot
Structure · Rhythm · System
Primary move
layered transparency
Surface behavior
frosted blur
Visual signature
luminous depth

The lightness of translucent cards floating over a background. The moment the backdrop gets busy the text smears, so blur, borders and contrast have to be tuned together.

frosted glasstransparent cardsblurred backgroundthin border
Details →
LAYOUT STYLE 04everyday

Neubrutalism

Neubrutalism layout — interface screenshot
Structure · Rhythm · System
Primary move
bold borders
Surface behavior
black outlines
Visual signature
primary colors

Thick black borders, hard shadows and saturated primaries give a page a temper immediately. Right for young brands and creative tools; be careful dropping it into finance or healthcare.

bold bordershard shadowsprimary colorsflat blocks
Details →
LAYOUT STYLE 05everyday

Exaggerated Minimalism

Exaggerated Minimalism layout — interface screenshot
Structure · Rhythm · System
Primary move
bold minimalism
Surface behavior
oversized typography
Visual signature
high contrast

The page looks empty but speaks loudly: enormous type against extreme whitespace. Made for fashion, architecture and portfolios — never force a complex form into it.

oversized typographyextreme whitespacehigh contrastone accent color
Details →
LAYOUT STYLE 06everyday

Flat Design

Flat Design layout — interface screenshot
Structure · Rhythm · System
Primary move
2d
Surface behavior
minimalist
Visual signature
bold colors

Still a workhorse, especially on mobile and for products that need to ship fast. Icons, color and type hierarchy must carry the weight — once shadows are gone, buttons disappear with them if contrast is weak.

flat colorssimple shapesclean iconsno decorative shadows
Details →
LAYOUT STYLE 07everyday

Dimensional Layering

Dimensional Layering layout — interface screenshot
Structure · Rhythm · System
Primary move
depth
Surface behavior
overlapping
Visual signature
z-index

Overlap, shadow and blur lift the important content gently off the page — card systems and modals thrive on it. Keep the layer count low, or the whole page turns grey.

overlapping layersz axissoft shadowforeground focus
Details →
LAYOUT STYLE 08everyday

Soft UI Evolution

Soft UI Evolution layout — interface screenshot
Structure · Rhythm · System
Primary move
evolved soft ui
Surface behavior
better contrast
Visual signature
modern aesthetics

Keeps the soft shadows and gentle touch of early neumorphism while fixing its contrast problem. Fits health, lifestyle and light SaaS — buttons and focus states still have to read clearly.

soft depthbetter contrastclear focus statesubtle shadow
Details →
LAYOUT STYLE 09everyday

Dark Mode OLED

Dark Mode OLED layout — interface screenshot
Structure · Rhythm · System
Primary move
dark theme
Surface behavior
low light
Visual signature
high contrast

A comfortable dark mode is restrained — no line of text should glare. Developer tools, media and night-time apps live here; on a pure black ground, text brightness needs the most care.

deep blackmuted whitehigh contrast accentsnight viewing
Details →
LAYOUT STYLE 10landing

Hero-Centric Design

Hero-Centric Design layout — interface screenshot
Structure · Rhythm · System
Primary move
large hero section
Surface behavior
compelling headline
Visual signature
high-contrast cta

The first screen does one job: make the value obvious. A strong headline, one product visual and one primary button are enough — every extra message costs the reader their next click.

large heroclear value propositionsingle CTAproduct visual
Details →
LAYOUT STYLE 11landing

Minimal & Direct

Minimal & Direct layout — interface screenshot
Structure · Rhythm · System
Primary move
minimal text
Surface behavior
white space heavy
Visual signature
single column layout

Indie products and personal services suit this straight-line structure: few words, short paths, fast decisions. A complex product cannot survive on one beautiful slogan.

single columnminimal copydirect messageone clear action
Details →
LAYOUT STYLE 12landing

Conversion-Optimized

Conversion-Optimized layout — interface screenshot
Structure · Rhythm · System
Primary move
form-focused
Surface behavior
minimalist design
Visual signature
single cta focus

Signup, capture and campaign pages care about one thing: whether people reach the last step. There is exactly one primary action, and the form, endorsements and urgency all serve it.

form focusedsingle conversion goaltrust signalhigh contrast CTA
Details →
LAYOUT STYLE 13landing

Social Proof-Focused

Social Proof-Focused layout — interface screenshot
Structure · Rhythm · System
Primary move
testimonials prominent
Surface behavior
client logos displayed
Visual signature
case studies sections

Show who already uses it, then what changed for them. Full quotes, real faces and checkable numbers persuade more than a row of stat cards — and every claim has to survive verification.

testimonialsclient logoscase metricsverified reviews
Details →
LAYOUT STYLE 14landing

Interactive Product Demo

Interactive Product Demo layout — interface screenshot
Structure · Rhythm · System
Primary move
embedded product mockup
Surface behavior
interactive elements
Visual signature
product walkthrough

Put the product itself in front of the reader — cursor, steps and all. Right for software that needs its operation explained; the demo must never fall behind the real product.

embedded demowalkthroughhover revealstep highlight
Details →
LAYOUT STYLE 15landing

Feature-Rich Showcase

Feature-Rich Showcase layout — interface screenshot
Structure · Rhythm · System
Primary move
multiple feature section
Surface behavior
grid layout
Visual signature
benefit cards

Answers what the product actually covers — a capability map. With many features, group them into sections instead of stuffing everything into same-size cards.

feature cardsbenefit gridproduct demoscomparison
Details →
LAYOUT STYLE 16landing

Trust & Authority

Trust & Authority layout — interface screenshot
Structure · Rhythm · System
Primary move
certificates badges
Surface behavior
expert credentials
Visual signature
case studies with metric

Healthcare, finance and enterprise services settle trust before conversion. Certifications, compliance badges and case numbers all work — provided every item stands up to checking.

certificationsecurity indicatorexpert credentialcase metric
Details →
LAYOUT STYLE 17landing

Storytelling-Driven

Storytelling-Driven layout — interface screenshot
Structure · Rhythm · System
Primary move
narrative flow
Surface behavior
visual story progression
Visual signature
section transitions

A brand story is not a company-profile paragraph — it moves forward chapter by chapter. Emotion and imagery carry the reader; keep one fast entrance for the person who just needs a fact.

narrative flowstory progressionbrand journeychapter structure
Details →
LAYOUT STYLE 18data

Executive Dashboard

Executive Dashboard layout — interface screenshot
Structure · Rhythm · System
Primary move
high-level kpis
Surface behavior
large key metrics
Visual signature
minimal detail

Keeps only what a decision needs: one big number, a few status signals and the current priority. More charts slow the judgment down, not speed it up.

high level KPIsummary viewtrend indicatorat a glance
Details →
LAYOUT STYLE 19data

Data-Dense Dashboard

Data-Dense Dashboard layout — interface screenshot
Structure · Rhythm · System
Primary move
multiple charts and widgets
Surface behavior
data tables
Visual signature
kpi cards

For people who stare at data all day: tables, filters and micro-trends can share one screen. Density is fine — hierarchy is not optional, and the type size never shrinks past legible.

dense griddata tableKPI cardscompact spacing
Details →
LAYOUT STYLE 20data

Real-Time Monitoring

Real-Time Monitoring layout — interface screenshot
Structure · Rhythm · System
Primary move
live data updates
Surface behavior
status indicators
Visual signature
alert notifications

Cares about the moment change happens: waveforms, status lights and a timeline outrank history reports. Red is reserved for real alarms — when the page lights up, you must know where.

live datastatus indicatoralert notificationstreaming chart
Details →
LAYOUT STYLE 21data

Comparative Analysis Dashboard

Comparative Analysis Dashboard layout — interface screenshot
Structure · Rhythm · System
Primary move
side-by-side comparisons
Surface behavior
period-over-period metrics
Visual signature
ab test results

Period-over-period, regions and A/B tests all live on comparison. Once the objects multiply, stop forcing paired cards and switch to the chart that actually answers the question.

side by side comparisonperiod over periodbenchmarkvariance
Details →
LAYOUT STYLE 22data

Predictive Analytics

Predictive Analytics layout — interface screenshot
Structure · Rhythm · System
Primary move
forecast lines
Surface behavior
confidence intervals
Visual signature
trend projections

However beautiful the forecast line, it must not pose as a certainty. Trend, confidence interval and scenarios appear together, so the reader knows how much to trust the number.

forecast lineconfidence intervalscenario modelanomaly detection
Details →
LAYOUT STYLE 23data

Drill-Down Analytics

Drill-Down Analytics layout — interface screenshot
Structure · Rhythm · System
Primary move
hierarchical data explorer
Surface behavior
expandable sections
Visual signature
interactive drill-down

Lets someone walk from the whole down to one specific object. Tree levels, breadcrumbs and a way back matter more than another chart — the user must always know which layer they are on.

hierarchical dataexpandable detailbreadcrumbsummary to detail
Details →
LAYOUT STYLE 24data

User Behavior Analytics

User Behavior Analytics layout — interface screenshot
Structure · Rhythm · System
Primary move
funnel visualization
Surface behavior
user flow diagrams
Visual signature
conversion tracking

Watches how people move, not just the final conversion rate. Draw browse, consider, buy and churn as one path and the problem shows itself faster than isolated numbers ever would.

funneluser flowcohortjourney map
Details →
LAYOUT STYLE 25data

Financial Dashboard

Financial Dashboard layout — interface screenshot
Structure · Rhythm · System
Primary move
revenue metrics
Surface behavior
profit and loss visualization
Visual signature
budget tracking

Ledger-style structure: P&L, balance sheet and cash position side by side. Settle units, periods and the sign convention first, and many numbers stop fighting each other.

revenue metricsprofit and lossbudget trackingcash flow
Details →
LAYOUT STYLE 26data

Sales Intelligence Dashboard

Sales Intelligence Dashboard layout — interface screenshot
Structure · Rhythm · System
Primary move
deal pipeline
Surface behavior
sales metrics
Visual signature
territory performance

Pipeline, quota and team performance usually share one board. Leaderboards change behavior — write down the metric definitions and refresh times, or the board manages the team for you.

deal pipelinequota trackingterritory performancewin loss
Details →
LAYOUT STYLE 27data

Heat Map Style

Heat Map Style layout — interface screenshot
Structure · Rhythm · System
Primary move
color-coded grid matrix
Surface behavior
data intensity visualization
Visual signature
geographical heat maps

Right for intensity distributions, correlation matrices and geographic density. With thin data, do not force it — an honest bar chart tells the truth better.

color matrixintensity mapcorrelationgradient scale
Details →
LAYOUT STYLE 28memorable

Organic Biophilic

Organic Biophilic layout — interface screenshot
Structure · Rhythm · System
Primary move
nature
Surface behavior
organic shapes
Visual signature
green

Green is only the surface — soft curves, natural materials and breathing room do the work. Fits health, sustainability and meditation; hard-edged industrial brands look drained in it.

organic shapesnatural texturesoft greenflowing layout
Details →
LAYOUT STYLE 29memorable

Memphis Design

Memphis Design layout — interface screenshot
Structure · Rhythm · System
Primary move
80s
Surface behavior
geometric
Visual signature
playful

Geometry, jumping color and an 80s wink make Memphis unforgettable. Decoration may be loud; content and buttons must never be buried under it.

geometric shapesplayful patternbright palettepostmodern
Details →
LAYOUT STYLE 30memorable

Y2K Aesthetic

Y2K Aesthetic layout — interface screenshot
Structure · Rhythm · System
Primary move
neon pink
Surface behavior
chrome
Visual signature
metallic

Chrome, jelly colors and millennium-internet energy are the instant identifiers. Fashion and music projects wear it well; serious corporate pages break character immediately.

chromeiridescentbubblegum colorglossy surface
Details →
LAYOUT STYLE 31memorable

Vaporwave

Vaporwave layout — interface screenshot
Structure · Rhythm · System
Primary move
synthwave
Surface behavior
retro-futuristic
Visual signature
80s-90s

Neon, grids and retro-computer artifacts summon the mood instantly. Music and gaming thrive on it; long text and business tools cannot carry that much emotion.

neon gradientretro gridglitchnostalgic future
Details →
LAYOUT STYLE 32memorable

Aurora UI

Aurora UI layout — interface screenshot
Structure · Rhythm · System
Primary move
vibrant gradients
Surface behavior
smooth blend
Visual signature
northern lights effect

Flowing gradients make a strong first impression for brand sites and give music platforms a soft sense of space. Keep the reading area quiet — a page that glows everywhere tires fast.

mesh gradientluminous colorsoft blendatmospheric
Details →
LAYOUT STYLE 33memorable

Retro-Futurism

Retro-Futurism layout — interface screenshot
Structure · Rhythm · System
Primary move
vintage sci-fi
Surface behavior
80s aesthetic
Visual signature
neon glow

The future as the past imagined it: old-equipment texture plus neon and geometry. Games and tech brands eat it up; information-dense pages need the effects turned well down.

vintage sci fiCRT lineneon geometryretro interface
Details →
LAYOUT STYLE 34memorable

Cyberpunk UI

Cyberpunk UI layout — interface screenshot
Structure · Rhythm · System
Primary move
neon
Surface behavior
dark mode
Visual signature
terminal

Black ground, fluorescent accents and terminal elements — the attitude arrives instantly. Ration the scanlines and flicker: people still have to finish reading.

neon terminaldark HUDglitch accentsystem panel
Details →
LAYOUT STYLE 35memorable

Vibrant & Block-based

Vibrant & Block-based layout — interface screenshot
Structure · Rhythm · System
Primary move
bold
Surface behavior
energetic
Visual signature
playful

Big color blocks give young brands real energy — and test color discipline hard. Too many hues and the noise buries the information; hold the main palette to a few.

bold blockshigh saturationgeometric layoutstrong contrast
Details →
LAYOUT STYLE 36memorable

Brutalism

Brutalism layout — interface screenshot
Structure · Rhythm · System
Primary move
raw
Surface behavior
unpolished
Visual signature
stark

Keeps the web's rawest, most direct face — deliberately unrefined. Independent media and experimental projects suit it; transplanted into enterprise services it usually loses control.

raw layoutdefault typestark contrastunpolished edge
Details →
LAYOUT STYLE 37memorable

Skeuomorphism

Skeuomorphism layout — interface screenshot
Structure · Rhythm · System
Primary move
realistic
Surface behavior
texture
Visual signature
depth

Still valuable when a digital interface needs a real-world object to explain itself. Material, light and detail are expensive to do well — spend them on the key scene, not the whole back office.

real texturephysical metaphordepthtactile control
Details →
LAYOUT STYLE 38memorable

Claymorphism

Claymorphism layout — interface screenshot
Structure · Rhythm · System
Primary move
soft 3d
Surface behavior
chunky
Visual signature
playful

Soft, chunky 3D blocks with toy-like charm — made for children's education and playful onboarding. Naturally friendly, naturally unserious: think twice for finance or legal.

soft 3Dchunky formtoy likerounded volume
Details →
LAYOUT STYLE 39memorable

Maximalism

Maximalism layout — interface screenshot
Structure · Rhythm · System
Primary move
more is more
Surface behavior
dense layering
Visual signature
pattern on pattern

The deliberate opposite of restraint: pattern, color and ornament stacked until the page hums. It rewards brands with real personality — and punishes any hierarchy mistake instantly, because everything is already loud.

dense collageclashing patternslayered decorationsaturated palette
Details →
LAYOUT STYLE 40memorable

Kinetic Typography

Kinetic Typography layout — interface screenshot
Structure · Rhythm · System
Primary move
type as interface
Surface behavior
words in motion
Visual signature
oversized marquee

The words are the interface: enormous type, scrolling marquees, letters that respond. Perfect for studios and events; anything that must be read carefully needs the motion held back.

kinetic typeoversized wordsscrolling marqueevariable font
Details →
LAYOUT STYLE 41memorable

Editorial Magazine

Editorial Magazine layout — interface screenshot
Structure · Rhythm · System
Primary move
print grid
Surface behavior
serif headlines
Visual signature
column rules

Borrows the authority of print: a strict grid, serif headlines, pull quotes and column rules. Content-led products wear it well — it collapses without real editorial discipline behind it.

magazine gridserif headlinespull quotescolumn layout
Details →
LAYOUT STYLE 42memorable

Wabi-Sabi

Wabi-Sabi layout — interface screenshot
Structure · Rhythm · System
Primary move
imperfect beauty
Surface behavior
muted earth tones
Visual signature
organic asymmetry

Muted earth tones, handmade texture and compositions that balance without symmetry. Right for craft, tea and slow-living brands — polish it too far and the whole point disappears.

wabi sabimuted earth toneshandmade textureasymmetric balance
Details →
LAYOUT STYLE 43memorable

Art Deco

Art Deco layout — interface screenshot
Structure · Rhythm · System
Primary move
geometric luxury
Surface behavior
gold line work
Visual signature
symmetrical ornament

Stepped forms, thin gold rules and strict symmetry — luxury built from geometry rather than photographs. Hotels, events and premium editions love it; it demands typographic patience.

art decogold linesgeometric ornamentstepped forms
Details →
LAYOUT STYLE 44memorable

Bauhaus

Bauhaus layout — interface screenshot
Structure · Rhythm · System
Primary move
form follows function
Surface behavior
primary shapes
Visual signature
circle triangle square

Primary colors, elementary shapes and a grid that means it. The look reads instantly as design literacy; it needs genuine functional clarity underneath or it becomes a poster wearing an interface.

bauhausprimary colorsgeometric compositionfunctional grid
Details →
LAYOUT STYLE 45memorable

Isometric Illustration

Isometric Illustration layout — interface screenshot
Structure · Rhythm · System
Primary move
2.5d scenes
Surface behavior
isometric depth
Visual signature
miniature worlds

Little 2.5D worlds explain systems better than screenshots: servers, cities, pipelines. Great for developer and infrastructure products — keep the real UI flat so the scene stays special.

isometric illustration2.5d perspectiveminiature scenesoft shadows
Details →
LAYOUT STYLE 46memorable

Hand-Drawn Doodle

Hand-Drawn Doodle layout — interface screenshot
Structure · Rhythm · System
Primary move
sketchy warmth
Surface behavior
marker strokes
Visual signature
wobbly lines

Wobbly borders, marker arrows and doodle icons make software feel human. Education and community products benefit most — the sketch layer decorates, the controls underneath stay precise.

hand drawndoodle iconssketchy bordersmarker strokes
Details →
LAYOUT STYLE 47memorable

Collage & Scrapbook

Collage & Scrapbook layout — interface screenshot
Structure · Rhythm · System
Primary move
mixed media
Surface behavior
torn paper
Visual signature
tape and stickers

Torn edges, washi tape and overlapping paper make a page feel kept rather than published. Journals, zines and personal brands thrive on it; forms and tables need clean paper to sit on.

paper collagetorn edgeswashi tapescrapbook layers
Details →
LAYOUT STYLE 48memorable

Pixel Art

Pixel Art layout — interface screenshot
Structure · Rhythm · System
Primary move
8-bit
Surface behavior
hard pixels
Visual signature
dithered sprites

Chunky pixels, dithered gradients and sprite icons carry instant game heritage. Gaming and retro products own it — body text stays a normal readable face or nobody finishes a sentence.

pixel art8bit blocksditheringsprite icons
Details →
LAYOUT STYLE 49memorable

Monochrome

Monochrome layout — interface screenshot
Structure · Rhythm · System
Primary move
one hue
Surface behavior
tonal steps
Visual signature
single color discipline

One hue doing every job through tonal steps alone. It photographs beautifully and ages well; states like error and success need shape and label support, because color can no longer differ.

monochrome palettetonal hierarchysingle hueink contrast
Details →
LAYOUT STYLE 50memorable

Luxury Noir

Luxury Noir layout — interface screenshot
Structure · Rhythm · System
Primary move
dark luxury
Surface behavior
gold on black
Visual signature
serif elegance

Near-black grounds, restrained gold and a confident serif — premium without a single photograph. Watches, spirits and members' products live here; the gold budget is small on purpose.

black and goldpremium serifdark luxuryfine hairlines
Details →