IndexStyle

A dictionary of design styles, written from the works themselves.

It is plain HTML. It opens on any browser and any device, with no app and no account, and machines read the same page.

Terms776

Dictionary

Search by style name or describe what you are making. Name matches come first; purpose, desired effect and medium add relevant alternatives.

TryBauhausa premium recruiting websitea trustworthy finance app

24/48 shown

Interpreted asTrustWeb / UIFinance

539

Skeleton Screen — AI-generated interpretation
AI interpretation, not a reference

Skeleton Screen

スケルトン・スクリーン / 2013– / Technique / UI Expression

Why it is closeTrustWeb / UIFinanceTechnique

A loading treatment that drops the spinner and shows a blank version of the page instead, then fills information into it as the data arrives. Luke Wroblewski named the technique in 2013, writing about his own app Polar, where a spinner had made testers report that the app felt slower than the previous version. The aim is to show advance toward the goal rather than the act of waiting.

No spinner and no progress bar while the screen loads / Blank fields already standing where text and images will land, at the size they will occupy / A layout committed before the data arrives, so nothing shifts when it does / Regions filling in one after another instead of the whole screen appearing at once

design.mdimage prompt

494

GOV.UK Design System — GDS Transport set on the GOV.UK homepage, 2025 — Wikimedia Commons / Public domain

GOV.UK Design System

GOV.UK デザインシステム / 2012– / Style / Platform Screen Languages

Why it is closeTrustWeb / UIFinanceTechnique

The design language the UK government's Government Digital Service publishes and maintains for public services. Everything runs in one undecorated left aligned column set in GDS Transport, and the green button keeps square corners while carrying a darker green band along its bottom edge, dropping by exactly that depth when pressed. Whatever holds keyboard focus turns yellow with a black rule under it.

One undecorated left aligned column, with almost no boxes and no shadows / A green button with square corners and a darker green band along its bottom edge, which drops by that exact depth when pressed / Whatever holds keyboard focus turns yellow with a black rule drawn beneath it / Type sizes step coarsely through 48, 36, 24, 19 and 16px with nothing in between

design.mdimage prompt

118

Fluent 2 — AI-generated interpretation
AI interpretation, not a reference

Fluent 2

フルーエント2 / 2022– / Style / Microsoft UI

Why it is closeTrustWeb / UIFinanceTechnique

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

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

design.mdimage prompt

538

Solarized — Xcode 4 with Solarized Light applied, 2011 — Wikimedia Commons / CC BY 2.0 · © Jason Brennan from Ottawa, Canada

Solarized

ソラライズド / 2011– / Style / UI Expression

Why it is closeTrustWeb / UIFinanceTechnique

Solarized is a sixteen colour scheme for terminal and GUI applications published by Ethan Schoonover with every value in the open, eight monotones and eight accents. The monotones hold symmetric CIELAB lightness differences, so moving between the light and the dark background keeps the same perceived contrast. It lowers brightness contrast on purpose and lets hue relations, not brightness, separate one token from the next.

Backgrounds that are neither pure black nor pure white, one leaning teal and one leaning cream / A small lightness gap between body text and ground, softer than black on white / Eight accents at close to equal lightness, told apart by hue alone / The same accent holding the same role after the background is flipped from dark to light

design.mdimage prompt

42

Bento Grid — AI-generated interpretation
AI interpretation, not a reference

Bento Grid

ベントーグリッド / 2020s / Layout / Information Design

Why it is closeTrustWeb / UIFinanceTechnique

Divides different kinds of information into independent boxes, giving the whole picture at a glance.

Cards large and small / Aligned gutters / One-screen summary / Modules

design.mdimage prompt

1

Swiss — Josef Müller-Brockmann, Musica Viva poster — Wikimedia Commons / Public domain

Swiss

スイス・スタイル / 1950s– / Style / Functionalism

Why it is closeTrustWeb / UIFinanceCalm

Puts order front and center and makes the information itself the protagonist.

Strict grid / Sans-serif type / Asymmetry / Objective photography

design.mdimage prompt

554

Carbon Design System — IBM Carbon — UI-shell usage example from the archived official documentation — Carbon Design System contributors / Apache-2.0

Carbon Design System

Carbon Design System / 2015– / Style / Platform Screen Languages

Why it is closeTrustWeb / UIFinanceTechnique

IBM's system for data-heavy enterprise products, combining a strict grid, IBM Plex type and compact components so complex work remains legible.

IBM Plex and strong type hierarchy / White or deep-gray work surfaces / Dense tables, filters and side navigation / Blue reserved for action and focus

design.mdimage prompt

472

Material Design — Google, Material Design UI components — Wikimedia Commons / Public domain

Material Design

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

Why it is closeTrustWeb / UIFinanceTechnique

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.

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

design.mdimage prompt

326

Banknote Guilloche — United States Educational Series 2 dollar note, 1896 — Wikimedia Commons / Public domain

Banknote Guilloche

紙幣のギヨシェ / 18th century– / Technique / Public Design

Why it is closeTrustWeb / UIFinanceTechnique

The banknote style in which lathe-cut guilloche curves and engraved portraits refuse forgery while making credit visible. America's 1896 Educational Series raised the banknote to allegorical masterpiece.

Continuous guilloche curves / Engraved intaglio portraits / Fine background lathework / Hierarchies of denomination

design.mdimage prompt

568

GitLab Pajamas — AI-generated interpretation
AI interpretation, not a reference

GitLab Pajamas

GitLab Pajamas / 2018– / Style / Platform Screen Languages

Why it is closeTrustWeb / UIFinanceTechnique

GitLab's screen language connects code, issues, review, CI/CD and security inside one DevSecOps product through GitLab Sans and Mono, persistent navigation, dense lists and a purple-inflected neutral palette.

GitLab Sans paired with GitLab Mono for code / Layered structure built from left navigation and application chrome / Dense issue, merge-request and pipeline lists / White or charcoal surfaces with purple as brand focus

design.mdimage prompt

534

Breeze — Breeze on KDE Plasma 5, light colour scheme (Kubuntu 20.10), 2020 — Wikimedia Commons / CC BY 4.0 · © Kubuntu, Breeze

Breeze

ブリーズ / 2014– / Style / Platform Screen Languages

Why it is closeTrustWeb / UIFinanceTechnique

The default visual style KDE introduced with Plasma 5, described in its own announcement as a high contrast, flat theme for the workspace. Graphics assets are simpler and more monochromatic, and layouts lean on typography rather than ornament so elements stay recognisable. Light and dark variants shipped as a matched pair from the beginning.

Flat surfaces with no modelled shading, where edges are carried by contrast alone / Icons and graphic assets reduced toward monochrome, with a tight colour count / Type contrast doing the work ornament would otherwise do, so layout reads through text / The same assets existing as a matched light and dark pair

design.mdimage prompt

571

Canonical Vanilla — AI-generated interpretation
AI interpretation, not a reference

Canonical Vanilla

Canonical Vanilla / 2013– / Style / Platform Screen Languages

Why it is closeTrustWeb / UIFinanceTechnique

Canonical's CSS-based screen language unifies Ubuntu, MAAS, Juju and related sites and applications through Ubuntu type, split grids, ruled sections and generous space, optimized for scanning long technical content.

Thin large headings paired with bold smaller headings in Ubuntu type / Asymmetric 25/75 and 50/50 splits / Fine rules above sections and generous vertical space / White surfaces, dark text and orange or aubergine focus

design.mdimage prompt

566

PatternFly — PatternFly — official desktop data-list demo snapshot — Copyright (c) 2019 Red Hat, Inc. / MIT

PatternFly

PatternFly / 2012– / Style / Platform Screen Languages

Why it is closeTrustWeb / UIFinanceTechnique

Red Hat's open-source screen language for enterprise products keeps complex infrastructure manageable through dense navigation, data views and tightly controlled status color.

Dark masthead and left navigation / Dense tables and forms on white or pale-gray work surfaces / Blue for primary action and red, orange or green for status / List, detail and action shown in coordinated panes

design.mdimage prompt

556

SAP Fiori — AI-generated interpretation
AI interpretation, not a reference

SAP Fiori

SAP Fiori / 2013– / Style / Platform Screen Languages

Why it is closeTrustWeb / UIFinanceTechnique

SAP's role-based design language reduces enterprise processes to the information and actions each person needs, then carries them consistently across devices.

Role-based launchpad tiles / Shell bar and object pages / Compact tables and semantic status / Calm blue on pale work surfaces

design.mdimage prompt

543

GitHub Primer — GitHub Primer ViewComponents — official file-tree snapshots across appearance modes — Copyright (c) 2020 GitHub / MIT

GitHub Primer

GitHub Primer / 2017– / Style / Platform Screen Languages

Why it is closeTrustWeb / UIFinanceTechnique

GitHub's design system for turning dense development workflows into shared rules for color, type, icons, spacing and components. It favors flow over decoration, keeping many states and actions in a small area without giving up accessibility or responsive behavior.

Neutral surfaces with blue links and restrained status colors / Octicons paired with short action labels / Thin borders separating lists, tabs and sidebars / Consistent steps of type and spacing even at high density

design.mdimage prompt

544

Adobe Spectrum — AI-generated interpretation
AI interpretation, not a reference

Adobe Spectrum

Adobe Spectrum / 2013– / Style / Platform Screen Languages

Why it is closeTrustWeb / UIFinanceTechnique

Adobe's cross-application design system. Under the principles Rational, Human and Focused, it changes density between desktop and mobile while keeping tool-heavy interfaces from pulling attention away from the work itself.

Neutral surfaces with vivid color reserved for selection / Icons, type and borders scaling together / Toolbars and property panels joined by fine divisions / The creative work stays stronger than the interface

design.mdimage prompt

489

Adwaita — Nathan Hadley, GNOME Settings 48, 2025 — Wikimedia Commons / CC BY-SA 4.0 · © Nathan Hadley (Pigeon)

Adwaita

アドワイタ / 2011– / Style / Platform Screen Languages

Why it is closeTrustWeb / UIFinanceTechnique

Adwaita is the name GNOME gives its default visual style, defined in the project's Human Interface Guidelines. One set of components has to carry a light style, a dark style and a high contrast style, so colour arrives as named variables that switch rather than as fixed values. A header bar crosses the top of every window holding buttons drawn with no background and no border, and interface icons are monochrome symbolics built on a 16 by 16 pixel grid.

A single header bar across the top of the window, laid out on three alignment points with the window heading in the centre / Header bar buttons carry no background and no border, leaving only the symbol and the label on the surface / Monochrome symbolic icons drawn at 16 by 16 pixels with 2 pixel strokes and no perspective / A published palette of five steps per hue, including Blue 3 at #3584e4

design.mdimage prompt

229

Schematic Transit Diagram — Contemporary example of a schematic transit map (CC BY-SA 3.0) · © Oslo_Metro_diagram.svg : Arsenikk derivative work: Arsenikk (talk)

Schematic Transit Diagram

スキーマティック路線図 / 1933– / Layout / Information Design

Why it is closeTrustWeb / UIFinanceTechnique

Discards geographic accuracy for horizontal, vertical and 45-degree lines with evenly spaced stations. Beck's 1933 London Underground diagram established it as the common language of transit maps worldwide.

Lines limited to 45 degrees / Evenly spaced stations / Color-coded lines / Independence from geography

design.mdimage prompt

480

Apple Desktop Interface — Macintosh System 3 screen, 1986 — Wikimedia Commons / CC0

Apple Desktop Interface

アップル・デスクトップ・インターフェース / 1984–1997 / Style / Apple UI

Why it is closeName matchTrustWeb / UIFinance

This is the design language Apple named itself, in the 1987 guidelines book whose subtitle reads The Apple Desktop Interface. Working with one bit of black and white, it wrote down a house style: halftone dot patterns standing in for gray, rounded window corners, a title bar of stacked horizontal rules, and a heavy bitmap face.

Two tones only, black and white, with gray faked by a checkerboard of black dots / Window corners are rounded and the title bar carries several thin horizontal rules / A menu bar pinned to the top edge of the screen, the Apple mark sitting at its left end / Chicago, a heavy bitmap face whose letters are packed into a cell of 9 by 7 dots

design.mdimage prompt

7

Minimalism — Dan Flavin, Untitled (to Don Judd, Colorist) 1–5, 1987, Tate Modern — Wikimedia Commons / CC BY 2.0 · © Grand Parc—Bordeaux, France from France

Minimalism

ミニマリズム / 1960s– / Style / Functionalism

Why it is closeTrustWeb / UIFinanceCalm

Removes elements to maximize the meaning and tension of what remains.

Vast white space / Few elements / Quiet color / Precise spacing

design.mdimage prompt

546

Ant Design — AI-generated interpretation
AI interpretation, not a reference

Ant Design

Ant Design / 2015– / Style / Platform Screen Languages

Why it is closeTrustWeb / UIFinanceTechnique

A design system that keeps enterprise web applications at low entropy through reusable components and page patterns. Its values — Natural, Certain, Meaningful and Growing — systematize tables, forms, hierarchy and state without reducing information density.

Dense tables set in small type and fine rules / Blue primary actions with explicit semantic colors / Consistent forms, pagination, trees and tables / Readability achieved through alignment and repetition, not generous space

design.mdimage prompt

557

U.S. Web Design System — USA.gov homepage, 2023 — Wikimedia Commons / Public domain

U.S. Web Design System

米国Webデザインシステム / 2015– / Style / Public Design

Why it is closeTrustWeb / UIFinanceCalm

A shared system for accessible, mobile-friendly and trustworthy U.S. federal web services, built from tested public-service patterns.

White, navy and restrained federal red / Large plain headings and readable body text / Official-site banner / Clear forms, alerts and step indicators

design.mdimage prompt

558

NHS Design System — NHS.UK frontend — official error-summary component snapshot — Copyright (c) 2019 NHS England / MIT

NHS Design System

NHSデザインシステム / 2016– / Style / Public Design

Why it is closeTrustWeb / UIFinanceCalm

The NHS system makes urgent health information and services calm, direct and consistent through plain language, strong focus states and tested clinical patterns.

NHS blue and generous white space / Large headings and short paragraphs / Callouts for warning and care advice / Visible focus and simple forms

design.mdimage prompt

580

CDE Interface — AI-generated interpretation
AI interpretation, not a reference

CDE Interface

CDEインターフェース / 1993–2000s / Style / Platform Screen Languages

Why it is closeTrustWeb / UIFinanceTechnique

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.

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

design.mdimage prompt

Editorial policy

IndexStyle is not a list of every term used around design. An independent entry must describe a visual language that can be recognised, reproduced and distinguished from its neighbours. Editorial standard

Back to top