App UI styles: 12 interface languages from Palm OS to Liquid Glass

Compare twelve sourced app and operating-system interface languages, including Aqua, Metro, Material Design, Fluent 2, HarmonyOS and Liquid Glass.

What qualifies

The entries here are not generic UI components. Each one has a repeatable visual grammar tied to a documented platform or design system, and enough visible character to be recognised across more than one screen. the five-entry standard

What this guide leaves out

Card UI, command palettes and mobile-first design solve grouping, access and process. They can be rendered in any of the visual languages below, so they remain supporting terms rather than styles.

Supporting terms: Card UI / Command Palette / Mobile First

Desktop metaphors and early personal devices

These interfaces made unfamiliar computers legible through windows, objects, texture and unusually strict constraints.

  1. 580

    CDE Interface

    CDEインターフェース / 1993–2000s

    The Common Desktop Environment unified UNIX workstations through Motif-derived bevels, a persistent Front Panel, workspace switching and low-color icons, making different hardware feel like one workplace.

    Visual cues: Box-like Front Panel along the lower edge / Raised buttons and recessed fields made from paired light and dark borders / Low-color pixel icons with dark outlines / Persistent buttons for switching among workspaces

    Open dictionary entry

  2. 599

    Palm OS Interface

    Palm OSインターフェース / 1996–2009

    Palm OS turned a tiny monochrome screen, stylus and strict memory limits into a consistent pocket work tool through the Title, Category menu, Command Bar, hardware buttons and Graffiti writing area.

    Visual cues: A roughly 160 by 160 low-resolution monochrome screen / Title at upper left and Category pop-up at upper right / A Command Bar rising from the lower edge and four application buttons / Thin one-bit icons, rules and the Graffiti input area

    Open dictionary entry

  3. 399

    Aqua

    アクア / 2000–2014

    Mac OS X's design language of buttons you want to lick. Jelly gloss, pinstripes, deep shadows and the genie effect staged digital components as objects you could touch, and set the terms for UI throughout the 2000s. What the web made of it with images is Web 2.0 Gloss.

    Visual cues: Gel-gloss buttons / Pinstriped grounds / Deep drop shadows / Metaphors of water and light

    Open dictionary entry

  4. 581

    KDE Oxygen

    KDE Oxygen / 2006–2014

    Oxygen unified KDE 4 applications, workspace and icons through clear blue, soft gray, fine outlines and icons that seem to rest on a shared shelf, bringing lightness to an information-dense desktop.

    Visual cues: Pale-gray chrome with blue selection and restrained gloss / Dimensional icons with one-pixel edges and a lower shelf shadow / One upper-diagonal light source across materials / Toolbars and docks grouped by fine separators

    Open dictionary entry

Systems built for products at scale

Choose among these by platform, motion model, density and the amount of brand expression allowed inside a shared component language.

  1. 402

    Metro

    メトロ / 2010–2015

    Windows Phone's flat language, which cast type rather than icons in the lead role. Large typography, flat-color live tiles and layouts that run off the edge of the screen transplanted the clarity of transit signage into UI, opening the flat era ahead of iOS 7.

    Visual cues: Type as the hero / Flat-color tiles / Compositions running off-screen / Chrome eliminated

    Open dictionary entry

  2. 472

    Material Design

    マテリアルデザイン / 2014–

    A design system that reduces the physical metaphor of paper and ink to rules of shadow and overlap. Elements are given elevation, shadow states the hierarchy, and motion carries physical cause and effect. It became the model for UI design being distributed as a system. The 2021 revision added colour derived from the device wallpaper, so the palette differs from one user to the next.

    Visual cues: Hierarchy and shadow expressed by elevation / Surfaces overlapping like sheets of paper / Motion that shows cause and effect / A standardized unit of spacing

    Open dictionary entry

  3. 562

    Material You

    Material You / 2021–

    Material You makes adaptability itself consistent: dynamic color, generous shapes and personalized motion vary by person while semantic roles stay stable.

    Visual cues: Harmonized colors derived from wallpaper / Large rounded cards and controls / Selection changes both color and shape / Broad spacing and large display type

    Open dictionary entry

  4. 118

    Fluent 2

    フルーエント2 / 2022–

    Tokenizes color, type, spacing, radius and depth, deploying Solid, Acrylic, Mica and Smoke materials by role across Microsoft products.

    Visual cues: Mica and Acrylic / Neutral tonal hierarchy / Soft corner radii / Tokenized depth

    Open dictionary entry

Contemporary depth and cross-device continuity

These systems use layers, blur, light and responsive surfaces to maintain one identity across phones, desktops and connected devices.

  1. 401

    Aero

    エアロ / 2006–2012

    The translucent glass UI of Vista and 7: frosted window frames, live thumbnails and GPU-composited depth making 'through glass' the OS's standard vocabulary.

    Visual cues: Frosted frames / Reflections and highlights / Live thumbnails / GPU-composited depth

    Open dictionary entry

  2. 582

    GNOME Clearlooks

    GNOME Clearlooks / 2005–2011

    GNOME 2.12's standard theme made GTK applications friendly and simple through pale-gray windows, blue selection, restrained gloss and firm boundaries.

    Visual cues: Pale-gray surfaces with blue selection bars / A quiet highlight only along button tops / Tabs and fields with restrained rounding / Small GNOME icons and a concise two-level hierarchy

    Open dictionary entry

  3. 601

    HarmonyOS Design

    HarmonyOSデザイン / 2019–

    Huawei's visual language reorganizes cards, spacing, arcs, variable type and translucent light materials across different screen sizes and connected devices, favoring continuity of information and action over one fixed screen.

    Visual cues: Large rounded cards grouping information by function / Wide space on light fields with a few saturated accents / Arcs, concentric circles and gentle scaling for operation states / Cards and variable type recomposed to suit device size

    Open dictionary entry

  4. 117

    Liquid Glass

    リキッドガラス / 2025–

    Unifies the floating control and navigation layer as a fluid glass material that refracts and adapts to the content beneath.

    Visual cues: Dynamic refraction / Concentric corner radii / Floating control layers / Reflected background color

    Open dictionary entry

Continue with another guide

Web design styles / Fashion styles

Search all 620 styles