Style combination · Contrasts
Arts × Flat Design
Borrow one engraved border or initial to give a flat interface a crafted, editorial moment against its vector minimalism.
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.
Arts & Crafts Movement Flat Design
- Type from Arts
- Colour from Flat Design
- Form from Flat Design
- Composition from Arts
- Surface from Arts
-
Flat Design avoids paper & letterpress bite: 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 · Flat Design
An interface and illustration language that stripped screens of simulated materials, replacing bevels, gloss and textures with solid fields of colour, clean sans-serif type and reduced pictograms. Formalised in Microsoft's Metro design language (Windows Phone 7, 2010) and made mainstream by Apple's iOS 7 (2013), it applied Swiss modernist reduction to responsive, touch-first screens.
Inter; Flat Design used Segoe UI and Helvetica Neue
03
The colours
The ground and leading colours come from Flat Design, with a counter-accent from Arts. The ink reads on the ground at 4.5:1 or more.
Arts & Crafts Movement Flat Design
-
#ecf0f1ground · 36% -
#2c3e50ink · 14% -
#f1c40faccent · 18% -
#a33224accent · 14% -
#e74c3caccent · 10% -
#c39a4aaccent · 8%
As CSS
:root {
--ground: #ecf0f1;
--ink: #2c3e50;
--accent-1: #f1c40f;
--accent-2: #a33224;
--accent-3: #e74c3c;
--accent-4: #c39a4a;
--font-display: "EB Garamond", serif;
--font-text: "Inter", sans-serif;
}04
The two styles
05
More combinations
With Arts
- Scandinavian Functionalism Pairs well · Keep the craft ethic and natural palette but reduce Morris's foliage to a single repeating motif for warmth without clutter.
- Risograph & Indie Print Culture Pairs well · Frame a two-ink riso print with a Morris-style vine border to give indie publishing an heirloom, hand-made gravity.
- Die Neue Typographie Contrasts · Tschichold's asymmetric, unornamented page was built against this centred, bordered book; set them side by side to argue tradition versus machine age.
- Gothic Blackletter & Fraktur Tradition Pairs well · Morris's Kelmscott Press revived gothic type (Troy and Chaucer) inside dense woodcut borders; join the broken letter to foliate frames and handmade paper for a medieval, hand-made book.
- Renaissance Book Typography Pairs well · Morris's Kelmscott Press revived Jenson's roman; pair a Renaissance text block with dense Arts & Crafts borders for a private-press feel.
- Josef Frank and Svenskt Tenn Botanical Prints Pairs well · The parent tradition: both fill a repeat with plants on linen, but Morris is symmetrical, earthy and dense with dark grounds, Frank is looser, brighter and mostly light. Pair a Morris-style framed book page with Frank-style endpapers.
- Italian Futurism Contrasts · Arts & Crafts handwork is everything Futurism wanted to burn; juxtapose them to stage machine against hand.
- Vorticism & BLAST Typography Contrasts · BLAST refused 'a revival of lost folk art' and blasted the 'years 1837 to 1900'; set its hard black shards against a hand-printed floral page to stage machine against handicraft.
With Flat Design
- Skeuomorphic UI Contrasts · Its direct predecessor and foil: one realistic, textured object on an otherwise flat screen becomes an instant focal point.
- Japanese Postwar Modernism Pairs well · Add the emblematic circles and calm colour fields of Japanese postwar posters to give flat screens a stronger focal image.
- Victorian Letterpress & Wood Type Contrasts · Ornamented wood type and dense rules show everything flat design removed; quote one decorative headline to warm a sterile interface.
- Isotype Pictorial Statistics Pairs well · Borrow Isotype's rows of identical counting pictograms to turn a flat icon set into honest, readable data graphics.
- Indie Pixel Art Revival Contrasts · Resolution-independent vector flatness against a deliberately coarse grid lit with glows and depth.
- WPA Silkscreen Posters Pairs well · Its flat layered shapes translate directly to vector; use the national-park look for warm, civic flat illustration.
- Munich 1972 Olympic Design (Otl Aicher) Pairs well · Flat icon families descend from these round-headed figures; borrow a single stroke width (which, as Holt shows, the 1972 figures only approximate, since a limb built from an orthogonal and a 45-degree segment cannot keep one thickness) and the 0, 45 and 90-degree rule to keep a screen icon set coherent.
- Ligne Claire (Franco-Belgian Clear Line) Pairs well · Flat, unshaded fields translate directly to screen; add ligne claire's even outline and documented settings to flat UI illustration for scenes with more narrative and character, keeping ligne claire's perspective, which flat design avoids.