Style combination · Pairs well
Generative × International Typographic Style
Use a Swiss modular grid as the fixed frame so generated variants stay coherent across the whole system.
Mix them and make something Generative International Typographic Style
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.
Generative & Dynamic Identities International Typographic Style
- Type from International Typographic Style
- Colour from International Typographic Style
- Form from Generative
- Composition from International Typographic Style
- Surface from Generative
02
The type
Open fonts standing in for each style’s own type, which is often hand-drawn or commercial.
Text · Generative
Identity systems designed as rules rather than fixed marks: logos and graphics generated by code, data or parameters so that they vary endlessly while staying recognisable. Anticipated by Karl Gerstner's Designing Programmes (1964) and launched by projects such as Sagmeister's Casa da Música (2007) and TheGreenEyl's MIT Media Lab identity (2011), the approach now spans responsive, data-driven and AI-assisted brands.
Inter; Generative used Neue Haas Grotesk and Variable fonts
03
The colours
The ground and leading colours come from International Typographic Style, with a counter-accent from Generative. The ink reads on the ground at 4.5:1 or more.
Generative & Dynamic Identities International Typographic Style
-
#f2f0e9ground · 36% -
#111111ink · 14% -
#e1251baccent · 18% -
#0091ffaccent · 14% -
#1f4e9caccent · 10% -
#ffd400accent · 8%
As CSS
:root {
--ground: #f2f0e9;
--ink: #111111;
--accent-1: #e1251b;
--accent-2: #0091ff;
--accent-3: #1f4e9c;
--accent-4: #ffd400;
--font-display: "Inter Tight", sans-serif;
--font-text: "Inter", sans-serif;
}04
The two styles
05
More combinations
With Generative
- Hand-Painted Signage & Vernacular Lettering Contrasts · Hand-painted lettering's one-off irregularity is the human counterpart to algorithmic variation; mix the two only with clear intent.
- Op Art Graphics Pairs well · Op Art's line modulation and moiré are ready-made rules for patterns that respond to data or motion.
- Corporate Identity Modernism Pairs well · Keep one invariant element from corporate modernism, such as a fixed wordmark or colour, so the variable identity stays recognisable.
- Dark Tech Minimalism Pairs well · Run a generative shader or particle field behind the hero to replace stock imagery with live, on-brand texture.
- Kinetic Typography & Variable Type Pairs well · Drive the variable axes with data or sound so the type responds to input rather than merely looping.
- Generative-AI Image Aesthetic Contrasts · Rule-based generative identity designs the system and accepts abstract variation; AI imagery averages toward realism, so decide which kind of 'generative' a brief needs.
- Milanese Industrial Modernism (Olivetti, Pirelli, Studio Boggeri) Pairs well · Pintori's cascades of numerals and dots are proto-generative; code them as rules to drive a contemporary variable identity.
- Data Humanism Pairs well · Let a generative system draw personal data portraits from people's own answers, as What Counts did, but give the code a hand-drawn grammar and a legend so the output reads as made by people.
With International Typographic Style
- Art Nouveau Contrasts · Ornamental curves against an orthogonal grid make a strong deliberate tension.
- Brutalist Web Design Pairs well · Strip the grid to raw HTML defaults to get a rawer, contemporary take on Swiss honesty.
- Psychedelic Poster Contrasts · Its exact opposite on legibility; borrow one swirling element to break a too-cold Swiss layout.
- Japanese Postwar Modernism Pairs well · Add Japanese restraint and emblematic colour fields to the grid for warmth without losing order.
- American Traditional Tattoo Flash Contrasts · Rational grid and sans-serif against sentimental, hand-lettered emblems: one flash motif on a Swiss layout makes a sharp contrast.
- Graffiti & Hip-Hop Graphics Contrasts · Put a single tag or throw-up over a strict Swiss grid to stage the clash between institutional order and a street voice.
- Pop Art Graphics Contrasts · Set one loud appropriated Pop image inside a strict grid with a neutral grotesque so the irony reads as deliberate rather than chaotic.
- Italian Painted Film Poster (Rome Studios) Contrasts · Grid, restraint and photographic objectivity are the opposite of a crowded painted montage.