30 chronologies — interface design recorded as lineages, not isolated looks. Back to the dictionary
From System 1 to Liquid Glass. Each era is recorded as a lineage, not an isolated look.
1984
The original Macintosh GUI / Macintosh
Unified desktop, windows, menu bar, icons and trash into one coherent black-and-white screen.
1-bit graphics / Chicago typeface / desktop metaphor / Susan Kare icons
In this dictionary: The starting point of Apple's GUI vocabulary; severe monochrome constraints produced a lucid sign system.
Related: Web 1.0 / Skeuomorphism
1991
Classic Mac OS in color / Macintosh
Introduced color, dimensional controls and richer icons while keeping the original Mac's structure.
color icons / 3D controls / Chicago typeface / desktop metaphor
In this dictionary: Moved from a monochrome sign system to a GUI that signals state with color and depth.
Related: Skeuomorphism / Web 1.0
1997
The Mac OS 8 appearance / Classic Mac OS
Unified the system with gray dimensional widgets, fine grooves and sharp-cornered windows.
beveled controls / neutral gray / pinstripes / dense chrome
In this dictionary: The era that made the desktop UI a single appearance theme, before Aqua.
Related: Skeuomorphism / Web 2.0 Gloss
2001
Mac OS X's first design language / Mac OS X
Translucency, gloss, round buttons, deep shadows and pinstripes presented digital parts as touchable objects.
candy-colored controls / translucency / drop shadows / pinstripes
In this dictionary: Brought physicality and emotional appeal to the computer screen, shaping 2000s UI broadly.
Related: Skeuomorphism / Web 2.0 Gloss / Y2K
2003
The metallic app look / Mac OS X Panther era
iTunes, Safari and others adopted windows fused with horizontal brushed-metal texture.
brushed texture / unified toolbar / rounded window / material metaphor
In this dictionary: A hallmark branch of skeuomorphism: describing an app's purpose through material.
Related: Skeuomorphism / Chromecore
2007
Multi-touch and pictorial UI / iPhone
Made direct finger manipulation understandable with glossy icons, lifelike apps and elastic motion.
direct manipulation / glossy icons / real-world metaphors / elastic motion
In this dictionary: Bridged the shift from physical buttons to the all-touch screen with familiar object imagery.
Related: Skeuomorphism / Web 2.0 Gloss
2013
Thin type, flatness, translucent layers / iPhone / iPad
Dropped pictorial ornament for vivid color, thin type, translucency and motion that conveys depth.
flat surfaces / thin typography / translucency / depth through motion
In this dictionary: The industry-scale turning point from skeuomorphism to flat design.
Related: Flat Design / Vector Minimalism / Glassmorphism / Minimalism
2014
Visual unification of Mac and iOS / Mac
Simplified the Mac's dimensional widgets; introduced brighter color, thinner lines, translucent sidebars.
flattened controls / translucent sidebars / simplified icons / iOS alignment
In this dictionary: Reorganized Mac-specific expression from the Aqua era toward a language shared with iOS.
Related: Flat Design / Vector Minimalism / Glassmorphism
2020
Reunifying Apple's platforms / Mac
Redesigned the Mac with generous spacing, rounded geometry, floating sidebars and unified icon shapes.
rounded geometry / layered materials / unified icons / spacious controls
In this dictionary: Aligned iPhone, iPad and Mac under the same principles while keeping the Mac's controls.
Related: Glassmorphism / Neumorphism / Flat Design / Vector Minimalism
2023
Spatial computing UI / Apple Vision Pro
Extended the screen into space: translucent windows, materials that react to real light, input by eye, hand and voice.
spatial windows / glass materials / eye tracking / natural shadows
In this dictionary: Built the UI's structure from real-world distance, light and the body — not the inside of a display.
Related: Glassmorphism / Minimalism
2025
A dynamic material across every OS / iOS / iPadOS / macOS / watchOS / tvOS
Applied a transparent material that reflects, refracts and deforms with content to navigation and control layers.
refraction / adaptive translucency / dynamic shape / cross-platform language
In this dictionary: Unified the transparency, light and fluidity cultivated in Aqua, iOS 7 and visionOS as one Apple-wide language.
Related: Glassmorphism / Skeuomorphism / Minimalism
From Windows 1.0 through Fluent and Windows 11. Each era is recorded as a lineage, not an isolated look.
1985
The tiled GUI / Microsoft Windows
Brought non-overlapping windows, menus, scrollbars and standard apps to MS-DOS.
tiled windows / limited color / bitmap icons / MS-DOS shell
In this dictionary: The first complete kit of Windows' basic parts.
Related: Web 1.0 / Skeuomorphism
1990
The Program Manager era / Microsoft Windows
Spread the business GUI widely with beveled buttons, 16-color icons and Program Manager.
Program Manager / 16-color icons / beveled controls / gray chrome
In this dictionary: Formed the standard image of the PC GUI.
Related: Skeuomorphism / Web 1.0
1995
Start menu and taskbar / Microsoft Windows
Combined the Start button, taskbar and desktop into one persistent navigation structure.
Start menu / taskbar / desktop icons / Chicago-like gray UI
In this dictionary: Established the Windows interaction skeleton still in use today.
Related: Web 1.0 / Skeuomorphism
2001
The Windows XP look / Windows XP
Blue taskbar, green Start button, rounded corners and a bright landscape wallpaper aimed at the home.
saturated blue / rounded controls / glossy buttons / Bliss wallpaper
In this dictionary: The turn from corporate gray UI to an emotional, consumer-facing OS expression.
Related: Web 2.0 Gloss / Y2K
2006
The translucent UI of Vista and 7 / Windows Vista / 7
Adopted translucent glass, light, depth, live thumbnails and smooth animation.
glass frames / blur / light streaks / live thumbnails
In this dictionary: Put GPU composition to work for both appearance and comprehension.
Related: Glassmorphism / Y2K / Web 2.0 Gloss
2010
Windows Phone's typographic UI / Windows Phone 7
Left icon-centered UI behind with large type, flat color, live tiles and compositions running past the screen's edge.
bold typography / live tiles / flat color / content before chrome
In this dictionary: Proposed flat design at OS scale before iOS 7.
Related: Flat Design / Vector Minimalism / Swiss / Minimalism
2017
A system of light, depth and motion / Windows / Microsoft products
Extended from 2D screens to many devices with the shared principles of Light, Depth, Motion, Material and Scale.
acrylic material / reveal light / connected motion / depth
In this dictionary: Returned material and space to Metro's flatness, growing it into an adaptive design system.
Related: Glassmorphism / Flat Design / Vector Minimalism
2021
Centered layout and soft geometry / Windows
Integrated Fluent into the everyday desktop with a centered Start, rounded corners, Mica material and simplified icons.
centered taskbar / rounded corners / Mica material / soft geometry
In this dictionary: Modernized Windows by lowering visual density while keeping its structure.
Related: Glassmorphism / Minimalism
The search page, Android, and the evolution of Material Design. Each era is recorded as a lineage, not an isolated look.
1998
A home page reduced to search / Web
Chose the opposite of the portal era: a logo, a search box and two buttons.
white space / single task / blue links / minimal chrome
In this dictionary: The defining case of restraint itself as brand expression.
Related: Minimalism / Web 1.0
2008
The open smartphone UI / Android
Combined the notification drawer, home-screen widgets, physical keys and touch.
status drawer / widgets / mixed input / utilitarian icons
In this dictionary: Made extensibility and information density — unlike the iPhone — the axis of mobile UI.
Related: Skeuomorphism / Flat Design / Vector Minimalism
2014
The paper-and-ink design language / Android / Web
Systematized paper-like surfaces, elevation shadows, meaningful motion, bold color and grids.
digital paper / elevation / meaningful motion / bold color
In this dictionary: Became the model of the public design system unifying many products and toolchains.
Related: Flat Design / Vector Minimalism / Skeuomorphism / Swiss
2018
Brand-adaptive Material / Google products / third-party apps
Expanded the components into a system that carries each brand's character through color, shape and type.
theming / coded components / accessibility / brand flexibility
In this dictionary: Broadened the policy from one look to a diverse family sharing common parts.
Related: Flat Design / Vector Minimalism / Modular Type System
2021
The personally adaptive design system / Android / Google products
Took in per-user difference: dynamic color from the wallpaper, greatly variable shape, expressive type and motion.
dynamic color / personalization / expressive shape / adaptive components
In this dictionary: Redefined consistency as rules that absorb change, not an identical look.
Related: Generative Design / Flat Design / Vector Minimalism / Modular Type System
From HTML documents to responsive design and design systems. Each era is recorded as a lineage, not an isolated look.
1991
The web of documents and links / World Wide Web
Connected information with nothing but document structure: headings, text, lists, links.
semantic HTML / hyperlinks / browser defaults / document flow
In this dictionary: Began the web as cross-referable documents, not decorated screens.
Related: Web 1.0 / Minimalism
1993
Images enter the page / Web browsers
Displayed text and images on the same page, moving a research network toward a public visual medium.
inline images / gray browser chrome / blue links / document layout
In this dictionary: The turning point that added the image as web design's main material.
Related: Web 1.0 / Editorial Collage
1996
Separating content from presentation / Web
Separated color, type, spacing and placement from document structure, applying one visual rule to many pages.
style sheets / cascade / reusable rules / separation of concerns
In this dictionary: Turned the website into a medium that can be designed and maintained over time.
Related: Web 1.0 / Modular Type System
2004
Participation and gloss / Web applications
Gradients, reflections and round buttons — alongside services that were posted to, shared and always updating.
glossy controls / rounded tabs / social participation / AJAX
In this dictionary: Changed the web from documents that are read to applications that are constantly operated.
Related: Web 2.0 Gloss / Skeuomorphism
2010
The web that adapts to width / Web
Fluid grids, flexible images and media queries let one page adapt to many screens.
fluid grids / media queries / flexible images / mobile first
In this dictionary: The shift from fixed-width pages to layouts that recompose per environment.
Related: Bento Grid / Modular Type System
2014
UI operated as parts and rules / Web / apps
Shares components, design tokens and accessibility rules to keep large products continuously updated.
components / design tokens / documentation / cross-team governance
In this dictionary: Made the system that keeps producing screens — not the finished screen — the object of design.
Related: Flat Design / Vector Minimalism / Modular Type System