Skip to content
UIGrammer
EN 中文

Anti-pattern · Depth · Medium

Mixed Flat & Skeuomorphic

Mixed flat and skeuomorphic means one screen carries both flat icons and glossy bevelled elements — two depth languages arguing with each other.

The tell

Stroke icons beside a gradient-and-inner-shadow button, or a neumorphic card next to flat list rows.

Why it happens

Models sample each component from a different reference, and each reference belongs to a different era of visual style. Nothing in the prompt constrains them to agree.

The rule

Declare one depth language for the whole page and hold it across every component.

  1. Choose the depth level explicitly: flat, subtle elevation, or physical/skeuomorphic.
  2. Apply that choice to icons, buttons, cards and inputs alike — no exceptions.
  3. If one element must stand out, differ by colour or size, never by depth language.

What is a Mixed Flat & Skeuomorphic?

A single screen that pairs flat 1.5px stroke icons with a glossy gradient button, a neumorphic pressed panel and a realistic drop shadow is speaking four depth languages at once. Depth is a system, not a per-component decision: pick how much the interface pretends to be physical, then hold that line everywhere.

Fix prompt

Paste this after your existing prompt to strip the pattern from the result.