A painted brand system
Terra
Garros

Flat color, hand-lettering, and a brushed edge no template can fake. Inspired by the 1980s Roland Garros art posters.

01

The idea

For a decade, Roland Garros handed its annual poster to a different fine artist, who painted it by hand. The result was a look that reads as made, not generated: flat saturated fields, a gestural ink line, real hand-lettering, clay-court orange against the French tricolore, and one hot focal gesture. Terra Garros turns that into a system. The whole thing rests on one move a template cannot copy: every block edge is hand-painted, rough and uneven, never a clean border.

02

Color

No stray hues. Separation comes from value steps of the same families: a light tint to read on, a saturated field for impact, a deep shade for type on white. All pairings below are WCAG checked.

Clay#CF5E2B
Cobalt#1668CC
Rose#C8246E
Vermilion#E63A1E
Ultramarine#1E2E8F
Clay tint#EFDCCA
Cobalt tint#D5DDE1
Rose tint#EED3D3
Chalk#F4F0E4
Paper#FBF8EE
Ink#16130F
Clay deep#7C3C1E

On a field, the text color is decided

Warm field gets dark type, cool field gets light type. Do not swap them.

Ink on clay4.66 : 1 — passes body
Chalk on cobalt4.74 : 1 — passes body
Chalk on rose4.69 : 1 — passes body
Ink on a tint~13 : 1 — AAA reading surface
03

Type

Two families. Caveat is the hand: titles, signatures, pull-quotes. Archivo is the structure: headers, body, UI, and the oversized poster numerals. Never use the hand for body.

Caveat — the hand
Painted, not designed
Archivo Black — numerals
1984
Archivo 300 — body

The reading surface stays calm so the color can be loud. Body copy runs in Archivo light at a comfortable measure, dark ink on a tint or on paper, never set on a saturated field at small sizes.

04

The painted edge

The signature, and the one rule that matters most. Every block is bounded by a brushed, uneven stroke drawn in SVG, with a random seed per shape so no two edges repeat, the way no two brushstrokes do. A CSS border cannot do this, which is exactly why it reads as painted and not as a template.

Content block

The edge does the framing

Here is the court-lines motif doing real work as a content block. Clay ground, chalk lines, and an edge painted by a slightly unsteady hand. The separation from the page is the brushed edge, not a border. Body copy stays legible: ink on clay clears the bar at 4.66 to 1.

05

Marks & motifs

The vocabulary. One motif per surface, never a pile. Every edge is brushed.

Clay FieldThe house ground.
Dot StormTricolore confetti.
The Hot BallOne vermilion sphere.
Black ContourGestural ink line.
Court LinesChalk lines on clay.
Brush StrokeOne painterly mark.
Net MeshRacquet grid.
Tricolore BarsBleu, blanc, rouge.
Paint SplatterThrown blobs.
signed
SignatureEvery piece is signed.
06

Components

Two block patterns. A tint block with ink text for reading. A saturated field with paired text, set large, for impact. Buttons are flat and swap their two colors on hover, like a screenprint flipping plates.

Tint block

The reading surface

Body-heavy content sits on a light tint with ink text, framed by a painted edge. No border, no shadow, no rounded corner. The block itself is the frame.

Field block

For the moments that stop the scroll

Saturated grounds carry short, large statements. Cobalt and rose take chalk text, clay takes ink.

A button
Primary · Clay Secondary · Cobalt Outline · Ink
Cards01

Color head, paper body

Split by one ink keyline. The faded numeral is the only ornament.

Flat02

No shadow, no radius

Depth comes from flat color and the brushed edge, never a blur.

Rare03

One field per section

Rose is the third field. Used sparingly, for accent.

07

Do & don't

The fastest way to lose the look is to reach for the habits of a generic web template. Here is the line.

Do

  • Frame blocks with the painted rough edge.
  • Keep fields flat, one per section.
  • Hand-letter the display, set body in Archivo.
  • Let one vermilion accent be the loudest thing.
  • Use deep shades for type on white.

Don't

  • Add blurred drop-shadows or soft elevation.
  • Round the corners or use gradients on fields.
  • Box everything in a uniform black border (that is neubrutalism, a different look).
  • Set body type on a saturated field at small sizes.
  • Invent new hues instead of using value steps.