Style combination · Pairs well
Flat Design × Ligne Claire
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.
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 Ligne Claire (Franco-Belgian Clear Line)
- Type from Ligne Claire
- Colour from Flat Design
- Form from Flat Design
- Composition from Ligne Claire
- Surface from Flat Design
02
The type
Open fonts standing in for each style’s own type, which is often hand-drawn or commercial.
Display · Ligne Claire
Form
Londrina Solid, standing in for Bold hand-drawn capitals for titles (album titles under a small header naming the author and series: black on a coloured ground, THE BLUE LOTUS on red; yellow on a night sky, EXPLORERS ON THE MOON)
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 Ligne Claire. The ink reads on the ground at 4.5:1 or more.
Flat Design Ligne Claire (Franco-Belgian Clear Line)
-
#ecf0f1ground · 36% -
#2c3e50ink · 14% -
#f1c40faccent · 18% -
#e74c3caccent · 14% -
#3498dbaccent · 10% -
#1abc9caccent · 8%
As CSS
:root {
--ground: #ecf0f1;
--ink: #2c3e50;
--accent-1: #f1c40f;
--accent-2: #e74c3c;
--accent-3: #3498db;
--accent-4: #1abc9c;
--font-display: "Londrina Solid", cursive;
--font-text: "Inter", sans-serif;
}Use it with care
Ligne Claire (Franco-Belgian Clear Line): Tintin and his companions and Blake and Mortimer are copyrighted characters whose rights are actively enforced (Hergé's by Tintinimaginatio, called Moulinsart until 2022), and Swarte, Floc'h and Meulen are working artists: draw your own characters, settings and lettering in the shared idiom, never ask an image model for these artists or characters by name, and never present a generated picture as theirs. The style's clarity does not neutralise its early content: Tintin in the Congo caricatures Congolese people as childlike in a colonial frame, and The Shooting Star, serialised in the German-controlled Le Soir in 1941–42, made its villain an antisemitic caricature of a Jewish financier (renamed in 1954). Simplify every character with the same economy as the lead, and never use exaggerated lips, noses, skin colour or dress as ethnic markers.
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 Ligne Claire
- Lianhuanhua Picture-Story Books Contrasts · Both tell stories in outlined drawings; lianhuanhua gives each pocket-sized page one framed black-ink picture with a caption and keeps colour for the cover, ligne claire fills tiered multi-panel pages with balloons and flat, bright colour, caricatural figures in realistic settings.
- Push Pin Style Contrasts · Push Pin also draws in outline and flat colour, but mixes revived Victorian and Art Nouveau display faces, ornament and distortion; switch to ligne claire for one disciplined line, no ornament and evenly legible scenes.
- Googie & Atomic Age Pairs well · The 1980s revival's 'atomic style' (Swarte's 1977 name for the 1950s Marcinelle school of Spirou, above all Jijé's early work, which Ever Meulen and Yves Chaland remade, with Franquin among Chaland's models; its figures rounder and more dynamic than Hergé's static, schematic line) drew on the optimism and futurism of the 1950s; Googie's boomerangs, starbursts, atoms and roadside signs suit a clear-line street scene or poster, drawn with ligne claire's even contour.
- Pop Art Graphics Contrasts · Hergé admired Roy Lichtenstein, but pop art blows single comic panels up, with enlarged Ben-Day dots and irony; choose ligne claire when the picture should tell a story legibly across a page, in flat, dot-free colour, rather than comment on mass media.
- City Pop Illustration Pairs well · Eizin Suzuki drew his city-pop sleeves and FM Station covers in a ligne-claire manner likened to Hergé's, rendering gradation in solid lines; pair them for a sunlit resort or street scene drawn in clear line under a deep blue sky, keeping ligne claire's unshaded colour.
- Korean Webtoon Graphics Contrasts · Both tell stories in outlined character art; webtoon scrolls one vertical strip on a phone with painterly gradients and brushwork, ligne claire tiers framed panels on a printed page in flat, unshaded colour.
- Ukiyo-e Woodblock Prints Pairs well · Hergé absorbed Chinese and Japanese woodcuts while researching The Blue Lotus, some of his seascapes recall Hokusai and Hiroshige, and the style was also influenced by Japan's shin-hanga prints; borrow ukiyo-e's waves, skies and outlined flat colour for a clear-line landscape.
- Mixteca-Puebla Codex Painting Pairs well · Both keep a sequential story readable with an even, unmodulated contour and flat colour, without hatching or modelling; borrow the codex's red-guideline reading path for a clear-line page, as a formal analogy rather than a lineage.