Style combination · Contrasts
Bento Feature-Grid Design × Skeuomorphic UI
Place one richly rendered object in a single tile while the rest stay flat, to give the grid a focal point.
Mix them and make something Bento Feature-Grid Design Skeuomorphic UI
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.
Bento Feature-Grid Design Skeuomorphic UI
- Type from Bento Feature-Grid Design
- Colour from Skeuomorphic UI
- Form from Skeuomorphic UI
- Composition from Bento Feature-Grid Design
- Surface from Skeuomorphic UI
-
Bento Feature-Grid Design avoids skeuomorphic material: 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 · Skeuomorphic UI
Interface design that imitates physical materials and objects (stitched leather, linen, wooden shelves, brushed aluminium, felt, paper and glass) so that digital tools look and behave like their real-world counterparts. Extending the GUI's desktop metaphor into photorealism, it ran from Apple's Aqua and brushed-metal interfaces around 2000 to its peak in iOS 1–6 and Mac OS X Lion, and was abandoned for flat design with iOS 7 in 2013.
Inter; Skeuomorphic UI used Lucida Grande and Helvetica
03
The colours
The ground and leading colours come from Skeuomorphic UI, with a counter-accent from Bento Feature-Grid Design. The ink reads on the ground at 4.5:1 or more.
Bento Feature-Grid Design Skeuomorphic UI
-
#f7e48cground · 36% -
#6b4226ink · 14% -
#4a87c9accent · 18% -
#0071e3accent · 14% -
#2f6b3aaccent · 10% -
#6e6e73accent · 8%
As CSS
:root {
--ground: #f7e48c;
--ink: #6b4226;
--accent-1: #4a87c9;
--accent-2: #0071e3;
--accent-3: #2f6b3a;
--accent-4: #6e6e73;
--font-display: "Inter Tight", sans-serif;
--font-text: "Inter", sans-serif;
}04
The two styles
05
More combinations
With Bento Feature-Grid Design
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.
- Metro (Microsoft Design Language) Contrasts · The opposite answer to the same era: material realism against pure typographic flatness.
- Media-Player & Desktop Skins (Winamp-Era Skinning) Contrasts · The platform makers' coherent, usable imitation of leather and paper against the fans' oversized fictional machines.