Style combination · Contrasts
Corporate Memphis × Brutalist Web Design
Corporate Memphis is the friendly corporate gloss brutalism rejects; quote it ironically to sharpen a critique.
Brutalism's raw honesty is the opposite of this friendly gloss; reach for it when a brand needs credibility over cheer.
Mix them and make something Corporate Memphis Brutalist Web Design
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.
Corporate Memphis Brutalist Web Design
- Type from Brutalist Web Design
- Colour from Corporate Memphis
- Form from Corporate Memphis
- Composition from Corporate Memphis
- Surface from Brutalist Web Design
02
The type
Open fonts standing in for each style’s own type, which is often hand-drawn or commercial.
Display · Brutalist Web Design
Kin
Newsreader; Brutalist Web Design used Times New Roman and Courier New and system monospace
Text · Corporate Memphis
The flat vector illustration style that became the default visual voice of big tech in the late 2010s: faceless, ethnically non-specific figures with elongated limbs and tiny heads, drawn in bright flat colour among blobs, leaves and confetti. Codified in Buck's Alegria system for Facebook (2017) and spread by open libraries such as unDraw and Humaaans, it was later named, half-mockingly, after the Memphis Group.
Hanken Grotesk; Corporate Memphis used Circular and Airbnb Cereal
03
The colours
The ground and leading colours come from Corporate Memphis, with a counter-accent from Brutalist Web Design. The ink reads on the ground at 4.5:1 or more.
Corporate Memphis Brutalist Web Design
-
#ffffffground · 36% -
#2f2e41ink · 14% -
#ffc857accent · 18% -
#ff0000accent · 14% -
#6c63ffaccent · 10% -
#0000eeaccent · 8%
As CSS
:root {
--ground: #ffffff;
--ink: #2f2e41;
--accent-1: #ffc857;
--accent-2: #ff0000;
--accent-3: #6c63ff;
--accent-4: #0000ee;
--font-display: "Newsreader", serif;
--font-text: "Hanken Grotesk", sans-serif;
}04
The two styles
05
More combinations
With Corporate Memphis
- Polish Poster School Contrasts · Polish poster metaphor and painterly ambiguity show how much illustration can say once it stops being generic.
- Risograph & Indie Print Culture Pairs well · Add riso grain and two spot inks to the figures to escape the over-familiar SaaS sheen and give them printed warmth.
- DTC 'Blanding' / Millennial Minimalism Pairs well · Its photo-led start-up sibling: pair Corporate Memphis figures with blanding's pastel ground and geometric sans when a brand needs both people and product.
- Memphis Design Contrasts · The original's real colour clash, irony and Sottsass or Du Pasquier patterns are the foil to generic confetti blobs; borrow one genuine Memphis pattern to give the illustration an edge.
- Rubber-Hose Revival (Cartoon Mascot Graphics) Contrasts · Both draw stretched figures in flat colour, but the revival gives each brand its own outlined, nostalgic mascot where Corporate Memphis uses interchangeable faceless people.
- CalArts Style (Rounded Cartoon Character Design) Pairs well · Both use flat fills and simplified figures; borrow its pastel UI-illustration palette, but keep faces and expressions, which Corporate Memphis drops.
- Data Humanism Contrasts · Both aim to feel warm and human, but Corporate Memphis draws generic faceless figures for mood, while data humanism draws the specific data of specific people. Replace stock warmth with a drawing of real data when a brand needs sincerity.
- Corporate Identity Modernism Contrasts · Its successor trades abstract authority for rubbery friendliness; compare the two to decide how institutional or human a brand should feel.
With Brutalist Web Design
- International Typographic Style Pairs well · Pair raw HTML with a strict Swiss grid and one grotesque so brutalism reads as intentional rather than broken.
- Glassmorphism Contrasts · Glass's layered translucency is everything brutalism strips away; use the contrast to decide how much polish a product really needs.
- Punk & DIY Zine Pairs well · Borrow zine cut-and-paste attitude: collide screenshots, default fonts and scrawled notes on one page.
- Frutiger Aero Contrasts · Raw HTML against bubbly gloss is a sharp foil for ironic or nostalgic web projects.
- Glitch Art & Datamosh Graphics Pairs well · Both put the machinery on show; set corrupted images on a raw-HTML page of default fonts so the code and the broken pictures make one argument about the medium.
- Internet Ugly & Meme Vernacular Pairs well · Put MS Paint drawings and image macros on a raw-HTML page of default fonts and blue links; both treat software defaults as honesty rather than lack of taste.
- Flash-Era Web Design (Flash Portfolio Sites) Contrasts · Raw, static HTML defaults against the fully art-directed animated stage.
- Material Design Contrasts · Where Material hides structure behind polished components, brutalism exposes it; one raw, default-styled element signals 'under the hood' in a polished product.