Demo navigator

Semi-flat depth (Material Design)

Switch quickly between live demo styles without returning to the library.

High-agency

Asymmetry and broken grid layoutsHigh-agency
Floating compositionHigh-agency
Diagonal layoutHigh-agency

Editorial / typography

DECO
AcademiaEditorial / typography
A
NewsprintEditorial / typography
A
OrganicEditorial / typography
A
Swiss MinimalistEditorial / typography
A
Editorial minimalismEditorial / typography
A
Typography-firstEditorial / typography
DECO
Premium monochromeEditorial / typography
A
Canon grid editorialEditorial / typography
A
Lineart illustrationEditorial / typography
A
Muted colorsEditorial / typography

Grid / product

Art DecoGrid / product
Catholic MondrianismGrid / product
Flat DesignGrid / product
Playful GeometricGrid / product
Bento grid aestheticsGrid / product
Duotone graphicsGrid / product
SuprematismGrid / product
Op art / Optical artGrid / product
Isometric designGrid / product
Wavy sectionsGrid / product
Modular layoutsGrid / product
New York School graphicsGrid / product
Authentic photographyGrid / product
Clay white landscape mockupGrid / product
Flat lay hero imageGrid / product
Perspective app screens mockupGrid / product
Double exposure duotoneGrid / product
MBE illustrationGrid / product
Tailored illustrationsGrid / product

Immersive / premium

CyberpunkImmersive / premium
KineticImmersive / premium
TerminalImmersive / premium
Dark glow / auroraImmersive / premium
3D product renderingImmersive / premium
Motion-led storytellingImmersive / premium
Particle backgroundsImmersive / premium
Double light photographyImmersive / premium
CinemagraphsImmersive / premium

Tactile / organic

BotanicalTactile / organic
Material DesignTactile / organic
NeumorphismTactile / organic
SkeuomorphicTactile / organic
Mature glassmorphismTactile / organic
Claymorphism / soft 3DTactile / organic
Organic mesh gradientsTactile / organic
SkeuomorphismTactile / organic
Subtle colored shadowsTactile / organic
Semi-flat depth (Material Design)Tactile / organic

Experimental / loud

UI
MaximalistExperimental / loud
SketchExperimental / loud
UI
VaporwaveExperimental / loud
POST
Neo-brutalismExperimental / loud
UI
Y2K / retro-futurismExperimental / loud
UI
Anti-designExperimental / loud
UI
Dada deconstructedExperimental / loud
UI
Expressionist graphicsExperimental / loud
UI
Glitch / digital distortionExperimental / loud
UI
RGB channel splitExperimental / loud
UI
Highly-detailed vintageExperimental / loud
UI
Ruined effectExperimental / loud
UI
Comic art illustrationExperimental / loud
UI
Hand-drawn lineartExperimental / loud
UI
Futuristic neon illustrationExperimental / loud
UI
Retro styleExperimental / loud

Tactile / organic

Semi-flat depth (Material Design)

Style libraryJump to CTA

UI Layouts hero pattern

hero-social-app

Drive adoption with a creator-first message and social energy.

Use this when growth, sharing loops, and playful conversion cues are central to the product story.

Still clean and product-oriented, but with extra depthComponents lift just enough to improve scanning and trustUseful for modern websites and dashboards that need balance
Create accountWatch preview

Semi-flat UI / restrained depth / modern product clarity

Flat-design clarity with just enough dimensional depth

Frame Atlas is pulled toward a softer, more touchable, and more approachable feel through oversized rounding, gentle depth, and a friendlier section rhythm.

Back to style catalogCompare Botanical

Material feel

Flat design upgraded with gentle depth

Keeps the legibility of flat design while adding modest elevation, shadow, and highlight so the interface feels more contemporary, trustworthy, and less paper-thin.

Supporting treatments

  • light elevation
  • clean surfaces
  • clear layered hierarchy

Preview cues

01

Still clean and product-oriented, but with extra depth

02

Components lift just enough to improve scanning and trust

03

Useful for modern websites and dashboards that need balance

Soft structure

Tactility here comes from surface treatment, not just from switching to pastel colors.

Claymorphism and organic mesh gradients live in the same family because both prioritize softness and approachability, but one leans toward raised material forms while the other leans toward atmosphere and color environment.

soft block 01

Style-aware storytelling

The same message set is restructured through layout, type scale, surface treatment, and narrative rhythm that change from one family and style to another.

soft block 02

Renderer families underneath

Under the catalog sits a renderer-family system, so multiple styles can reuse a skeleton while still feeling clearly different in visual language.

soft block 03

Visible design trade-offs

Each route makes the trade-offs between clarity, materiality, density, novelty, and conversion feel explicit instead of merely swapping palettes.

Emotional read

“The same product can feel editorial, technical, cinematic, tactile, loud or luxurious depending on composition choices.”

Keywords

semi-flatflat design depthelevationproduct uimodern dashboard

Audience fit: SaaS, dashboards, product marketing, and systems that need clarity without total flatness

Style intelligence

Why this style reads as Semi-flat depth (Material Design)

Keeps the legibility of flat design while adding modest elevation, shadow, and highlight so the interface feels more contemporary, trustworthy, and less paper-thin.

Flat design upgraded with gentle depthlight elevationclean surfaces

Compare against

Botanical

Semi-flat depth (Material Design) prioritizes "flat design upgraded with gentle depth"; Botanical gives a different read within the same family.

View Botanical

Best fit

SaaS, dashboards, product marketing, and systems that need clarity without total flatness

Structural signature

Hero
soft stack
Rhythm
flow · airy
Proof
soft bullets

Avoid

  • keeping it so flat that everything sticks to the background
  • heavy shadows that become pseudo-3D
  • inconsistent rounding and elevation rules

Practical takeaway

A strong style catalog should clarify visual language, not just make screenshots look nicer.

This route demonstrates how the same product can be art directed in radically different directions by changing layout, hierarchy, materiality, and density with intention.

Choose another styleReset to flagship