Design Aesthetic Reference

The Clear Line

Ligne Claire -- French for "clear line" -- is an illustration and visual design aesthetic pioneered by Belgian cartoonist Herge, creator of The Adventures of Tintin. Defined by uniform-weight outlines, flat unmodulated color, and structured visual storytelling.

"The line must prevail over the tint, clarity over virtuosity."
-- Herge

The Philosophy of Clarity

Ligne Claire is defined by uniform-weight outlines, flat unmodulated color, minimal shading, and a balance of cartoonish simplicity in foreground elements against realistically detailed backgrounds. The style prioritizes clarity, readability, and structured visual storytelling above all else.

Clarity and readability take absolute priority over artistic expressiveness. The outline defines everything -- without the clear line, the image loses its identity. Color serves the drawing, never the reverse; tint supports linework rather than overshadowing it.

Apparent simplicity is deceptive -- achieving clean, precise linework and carefully chosen flat color requires significant craftsmanship. Every shade is chosen for readability and narrative function, not for decorative effect.

Core Visual Traits

The defining characteristics that make Ligne Claire instantly recognizable across nearly a century of visual storytelling.

Uniform Lines

Every element defined by clear, distinct black lines of consistent thickness -- no variation in stroke weight

Flat Color

Solid color fills without gradients, blending, or modulation -- each area is a single uniform hue

No Hatching

Shading is eliminated entirely -- depth and form communicated through line and color alone

Clean Separation

Every object and element is distinctly separated by its outline, preventing visual ambiguity

Illuminated Shadows

Cast shadows rendered in lighter or colored tones rather than dark values, preserving brightness

Design Principles

The guiding rules that underpin every decision in the Ligne Claire approach to visual design.

1 Line Defines Everything

The outline is the fundamental building block. Without the clear line, the image loses its identity. Every element, from characters to architecture, is brought into existence by its outline first, color second.

2 Color Serves the Drawing

Tint supports linework rather than overshadowing it. Flat color fields enhance legibility by eliminating tonal noise. Every shade is chosen for readability and narrative function, not for decorative effect.

3 Compositional Depth

Depth is achieved through layered planes -- foreground, midground, and background -- defined by line and color position, not by atmospheric perspective or shading techniques.

4 Deceptive Simplicity

Apparent simplicity is deceptive. Achieving clean, precise linework and carefully chosen flat color requires significant craftsmanship. The reduction to essentials is itself a demanding discipline.

5 Visual Hierarchy

Hierarchy is established through line weight consistency, color contrast, and spatial positioning. The panel-based grid creates order, rhythm, and a deliberate reading flow across the composition.

6 Minimal Embellishment

Ornamentation is stripped away. Every visual element serves the narrative or spatial clarity. Decoration that does not advance comprehension is removed without hesitation.

The Ligne Claire Palette

Strong, saturated primaries and secondaries applied flat, with warm cream backgrounds. Every color is chosen to be instantly readable and narratively functional.

Tintin Blue
#3B7DD8
Signal Red
#D42B2B
Sunshine Yellow
#F5C842
Herge Green
#4AA84E
Warm Orange
#E87D2F
Deep Brown
#6B3A2A
Cream White
#FAF5E8
Ink Black
#1A1A1A
Sky Cerulean
#7AB8E0
Soft Sand
#E8D5A3
Muted Mauve
#9C7BAD
Slate Grey
#7A8B96

Flat Fills Only

No gradients, no textures, no color modulation within a single area

Warm Backgrounds

Never use stark white -- the warm cream evokes the printed album feel

Black for Outlines

Ink color is used exclusively for defining lines, never for large fills

Typography

Clean sans-serif faces that echo the precision and clarity of the linework. Uppercase for display, generous spacing for readability.

Display / Hero
Adventures
in Clarity
Bangers -- 400 weight -- Comic book impact for large headlines
Headings
The Clear Line Defines Everything
Fredoka -- 600 weight -- Rounded terminals echo smooth linework
Body Text
Ligne Claire typography mirrors the aesthetic's core principle: clear, legible, unpretentious. Text in the original comics used hand-lettered capitals; for web applications, this translates to clean sans-serif faces with medium weight and generous spacing.
Nunito -- 400 weight -- Rounded geometric sans-serif for comfortable reading
Captions & Labels
Design Aesthetic Reference -- Pioneered by Herge -- Est. 1929 -- Franco-Belgian Tradition -- Clear Line School
Nunito -- 600 weight -- Uppercase with wide tracking for secondary text

Component Language

Every UI element is defined by its clear outline. No drop shadows, no elevation effects -- the line is everything.

Buttons
Badges
Ligne Claire Herge Tintin Clarity 1929
Form Input
Speech Bubble
Every element must earn its place through clarity!

The Rules

A clear guide to what belongs in the Ligne Claire vocabulary -- and what must be left out.

Design Do's
  • Define every element with a clear, uniform-weight black outline
  • Use flat, solid color fills without any gradients or textures
  • Choose warm off-white or cream backgrounds
  • Organize content in panel-based grid layouts with visible borders
  • Use uppercase, rounded sans-serif typography for headings
  • Maintain moderate contrast -- prefer warm neutrals
  • Keep palettes limited to 3-4 active colors per section
  • Use lighter tints for shadows, never dark values
  • Reference comic-strip conventions: speech bubbles, panels, strips
Design Don'ts
  • Use drop shadows, box shadows, or depth simulation effects
  • Apply gradients, blend modes, or color transitions
  • Use varying line weights for emphasis
  • Employ hatching, cross-hatching, or stippling for shading
  • Use photographic textures or material simulations
  • Choose decorative, serif, or script typefaces
  • Create stark, high-contrast compositions
  • Leave elements undefined without their outline border
  • Use pure black (#000) for large fills -- reserve ink for outlines

Draw Your Own Clear Line

Join a tradition of clarity and precision that spans nearly a century of visual storytelling. The line must prevail over the tint -- clarity over virtuosity.

Begin Creating