Style combination · Contrasts
Flat Design × Hipster Artisanal Revival
Its contemporary on screen was textureless and many-coloured where this was single-ink and worn; one stamped badge inside a flat interface marks a product as hand-made.
Mix them and make something Flat Design Hipster Artisanal Revival
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.
Flat Design Hipster Artisanal Revival
- Type from Hipster Artisanal Revival
- Colour from Flat Design
-
Hipster Artisanal Revival avoids full polychrome: this is where the two pull against each other, which is the point of the contrast.
- Form from Flat Design
- Composition from Hipster Artisanal Revival
- Surface from Hipster Artisanal Revival
-
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.
Display · Hipster Artisanal Revival
Kin
Jost, standing in for Futura (Paul Renner, Bauer, 1927), as on the Field Notes cover
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 Hipster Artisanal Revival. The ink reads on the ground at 4.5:1 or more.
Flat Design Hipster Artisanal Revival
-
#ecf0f1ground · 36% -
#2c3e50ink · 14% -
#f1c40faccent · 18% -
#8e2f25accent · 14% -
#e74c3caccent · 10% -
#c4a27aaccent · 8%
As CSS
:root {
--ground: #ecf0f1;
--ink: #2c3e50;
--accent-1: #f1c40f;
--accent-2: #8e2f25;
--accent-3: #e74c3c;
--accent-4: #c4a27a;
--font-display: "Jost", sans-serif;
--font-text: "Inter", sans-serif;
}Use it with care
Hipster Artisanal Revival: The hipster fashion and branding of the same years also borrowed pseudo-Native 'tribal' dress: Adrienne Keene's Native Appropriations (2010) answered the fashion for 'hipster headdresses' by noting that eagle feathers 'have to be earned', and in 2012 the Navajo Nation sued Urban Outfitters over goods sold under the 'Navajo' name. Keep to arrows, triangles and trade-mark devices; do not add feathered headdresses, war bonnets or 'tribal' and 'Navajo' patterns as a heritage shorthand.
04
The two styles
05
More combinations
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.
- Arts & Crafts Movement Contrasts · Borrow one engraved border or initial to give a flat interface a crafted, editorial moment against its vector minimalism.
- 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.
With Hipster Artisanal Revival
- DTC 'Blanding' / Millennial Minimalism Contrasts · Where this dressed new firms as old ones, blanding dressed them as frictionless and new, with lowercase geometric sans, pastels and white space; set the two side by side to place a brand between heritage and novelty.
- Victorian Letterpress & Wood Type Pairs well · Go back to the source: swap the stock badge parts for real jobbing type, printers' rules and stock borders to turn pastiche into the trade print it quotes.
- Risograph & Indie Print Culture Pairs well · The same small-batch maker economy; print the badge in one riso ink on uncoated stock to get real ink grain instead of a distress overlay.
- Hand-Painted Signage & Vernacular Lettering Pairs well · Sign painting revived alongside it; paint the badge on the shop window or chalkboard so the lettering is made by hand instead of aged with a texture filter.
- Phototype Expressive Typography (Lubalin & U&lc) Contrasts · Both pair a script with a geometric sans, but the craft badge tracks its capitals wide in a centred one-ink frame, while Lubalin kerns the same pairing until the letters touch and join. Set one against the other to decide whether the letters should breathe or fuse.
- Cottagecore Contrasts · Shares handmade, small-batch values, but swap its black-and-white urban badges for soft colour and florals to get cottagecore.
- European Heraldry Contrasts · The craft badge borrows heraldry's air of lineage with an 'Est.' date and crossed arrows on kraft paper, while a real coat of arms is a granted or inherited, blazoned identity in strong tinctures; set the two side by side to show the difference between quoting heritage and holding it.
- Newtro (Korean New-Retro) Contrasts · Both dress a product in the past, but hipster badges invent a Victorian heritage for a new firm while newtro reissues a real firm's own recent archive.