Style combination · Contrasts
Metro × Skeuomorphic UI
The opposite answer to the same era: material realism against pure typographic flatness.
01
What each style brings
Each part of the design comes from the style with the stronger say in it, and each style gives at least two.
Metro (Microsoft Design Language) Skeuomorphic UI
- Type from Metro
- Colour from Metro
-
Skeuomorphic UI avoids flat fields: this is where the two pull against each other, which is the point of the contrast.
- Form from Skeuomorphic UI
-
Metro avoids rounded & pill: this is where the two pull against each other, which is the point of the contrast.
- Composition from Metro
- Surface from Skeuomorphic UI
-
Metro avoids skeuomorphic material and gloss & highlights: this is where the two pull against each other, which is the point of the contrast.
02
The type
Open fonts standing in for each style’s own type, which is often hand-drawn or commercial.
Text · Metro
An interface language from Microsoft that put typography ahead of chrome: large light sans-serif headings, flat rectangular Live Tiles, lateral panoramic scrolling and bold single accent colours on dark or white grounds. It borrowed from Swiss graphic design and public transport signage, and gave way to Fluent Design from 2017.
Inter; Metro used Segoe UI and Segoe WP
03
The colours
The ground and leading colours come from Metro, with a counter-accent from Skeuomorphic UI. The ink reads on the ground at 4.5:1 or more.
Metro (Microsoft Design Language) Skeuomorphic UI
-
#ffffffground · 36% -
#000000ink · 14% -
#fa6800accent · 18% -
#4a87c9accent · 14% -
#d80073accent · 10% -
#2f6b3aaccent · 8%
As CSS
:root {
--ground: #ffffff;
--ink: #000000;
--accent-1: #fa6800;
--accent-2: #4a87c9;
--accent-3: #d80073;
--accent-4: #2f6b3a;
--font-display: "Inter", sans-serif;
--font-text: "Inter", sans-serif;
}04
The two styles
05
More combinations
With Metro
- International Typographic Style Pairs well · Take back the Swiss grid and flush-left discipline to keep tile layouts rational.
- Glassmorphism Contrasts · Translucent depth against opaque flat colour blocks; use blur sparingly to soften an overly stark tile wall.
- Material Design Contrasts · Layered paper and shadow against Metro's single flat plane; mix elevation into tiles only to signal interaction.
With Skeuomorphic UI
- Bitmap & Pixel Graphics Contrasts · Pairing a 1-bit icon with its photoreal descendant shows that the metaphor, not the rendering, carries the meaning.
- Frutiger Aero Pairs well · Share gloss and depth; combine Aero's glass and nature with skeuomorphic objects for convincing 2000s-nostalgia interfaces.
- Neumorphism Pairs well · Neumorphism keeps the light source and extrusion but drops the textures; borrow one material cue to give soft UI more character.
- Flat Design Contrasts · It is the style flat design was defined against; toggling between them is the clearest way to show an interface's evolution.
- Basel Object Poster (Swiss Sachplakat) Pairs well · Skeuomorphic app icons rendered glass, metal and leather the same way for screens; a Basel-style single product with a soft cast shadow on a dark ground makes a strong hero image for packaging or a product launch.
- Chaekgeori & Minhwa Screen Painting Pairs well · A wooden bookshelf interface is a digital chaekgado; use its compartment grid and trompe-l'oeil objects for a playful library or catalogue UI.
- Media-Player & Desktop Skins (Winamp-Era Skinning) Contrasts · The platform makers' coherent, usable imitation of leather and paper against the fans' oversized fictional machines.
- Bento Feature-Grid Design Contrasts · Place one richly rendered object in a single tile while the rest stay flat, to give the grid a focal point.