Design Openbook

Design Style Names

What are the names of common UI design styles like glassmorphism and neumorphism? Common style names are Flat design, Skeuomorphism, Neumorphism, Glassmorphism, Liquid Glass, Brutalism and Claymorphism.

Name a style instead of saying "make it pretty" and the AI sets texture, shadow and transparency to match.

Terms and previews

Tap a preview to pause it; tap again to play.

  1. Flat design

    Solid color areas only, no shadows or texture

  2. Skeuomorphism

    Imitates the texture of real objects such as leather, paper and metal

  3. Neumorphism

    Soft shadows that make shapes look raised or pressed in, in the same color as the background

  4. Glassmorphism

    A translucent glass panel with the background blurred behind it

  5. Liquid Glass

    The glass material Apple has used since iOS 26, which bends light like a water drop

  6. Brutalism

    Thick borders, primary colors and a deliberately rough layout

  7. Claymorphism

    A soft, rounded, clay-like 3D feel

How to use it

  • Pick one style per screen. Mixing glass and brutalism makes neither work.
  • Glass styles need a background behind them (a photo, color blur) for the effect to show. On a white background it is just a gray panel.
  • Text on a translucent panel easily loses contrast. Raise the panel opacity or enlarge the text.
  • In neumorphism, button edges blur and it is hard to tell what is tappable. Use a strong color for main buttons.

Prompts to copy

Glass player screen

Build a music app playback screen in Glassmorphism style.
- The background is the album cover, enlarged and blurred.
- Playback controls sit on a translucent glass panel. Background blur 20px, white at 15% opacity.
- Adjust the panel opacity so the contrast between text and background is at least 4.5:1.
- Do not use the glass effect on any other element.

Source posts: @uxwoodytips

All cards (27)