1 / 27

From tiles
to systems

Carmen Ansio
The hydraulic tile floor of Casa Santurce, Barcelona

Where in the world
is this?

It’s Barcelona.

And I am completely in love with it.

A whole tradition. Thousands of tiles.

The system didn’t cage anyone.

The craft and the beauty were never decoration on the system. They were the point of it.

La Pedrera · Casa Batlló · Park Güell

The whole city is one tile.

Ruta del Modernisme.

Barcelona didn’t invent it. It made it art.

An early French cement floor tile, carreau de ciment, 19th century
📷 A plain early carreau de ciment / cement tile, or an old French tile-catalogue page assets/history-origin.jpg France · ~1850s
Invented in France · industrial, cheap, made to fake stone
Gaudí's hexagonal hydraulic tile paving the Passeig de Gràcia, Barcelona
📷 Gaudí's hexagonal tile (Casa Batlló, or the Passeig de Gràcia pavement) assets/history-batllo.jpg Barcelona · Escofet
Barcelona made it art · Escofet, Gaudí, Domènech i Montaner

Same cheap, industrial tile as the rest of Europe. Here it became a system.

We’re losing them four hundred workshops, down to one ✎ 400+ workshops across Catalonia faster + cheaper won → one. Mosaics Martí · Manresa the last one standing the hopeful bit ✦ they pulled up the laminate, found these underneath, & remembered they’re beautiful not because they got worse

Modernism.
Casa Santurce.

Madorell i Rius · 1902 Carrer de València 293 Patrimoni
The Modernisme stained-glass bay windows of Casa Santurce, Barcelona
Casa Santurce · Barcelona · drop your own photo into assets/casa-santurce-facade.jpg

I fell for pattern
on this floor.

The original hydraulic tile floor of Casa Santurce, Barcelona
My hallway · swap in assets/casa-santurce-floor.jpg
Cheap
Pricier

It starts with one tile.

Same tile, four times. Click each one to turn it.

Hydraulic tile how one tile is made ✎ 1. one shape R = 20 cm 45° ↗ struck from one corner one quarter-circle 20 × 20 cm 2. the rule 0° 90° 180° 270° position decides the turn → the four arcs meet = the flower the recipe ✦ France · 1850s → Barcelona made it art 20 × 20 cm cement + pigment pressed, no kiln nothing is ever redrawn.

One tile. One rule.

I didn’t lay this floor. I drew one tile and wrote one rule.

Motif
Pigment

Same rule. New tiles.

The flower, in SVG.

And again, in CSS.

Five circles, five <div>s: border-radius and cqw borders. Zero images.

And for real, in three.js.

A real WebGL tile, the flower carved into the stone. Drag to orbit it.

One source of truth. Three surfaces.

The seam a shape that lives between the tiles ✎ one tile its neighbour half a petal ↗ ↖ half a petal the seam nobody drew this one. it only exists where they meet the rule ✦ make your edges match → emergent shapes, free the pattern > the tiles 1 tile = a tidy cross. 16 touching = a whole new vocabulary.

Order out of broken tile.

Click it to smash the tile.

What’s the dragon
made of?

Broken tile. Trencadís. Mini pieces, one rule, easy to change. That’s a design system.

The tile knew four angles.
The grid knows infinity.

Drag, or focus + arrow keys, to move the centre

Design the relationships,
not only the pieces.

The pieces

One motif, drawn once. Never redrawn.

The relationships

Rotation, matching edges, repetition. The seam lives here.

The shift

Constraints don’t limit creativity. They generate it.

The beauty was never on top of the system.
It was the point of it.

Even the chocolate is a tile.

Enric Rovira’s rajoles de xocolata. One for each of you, on the way out.

One tile. One rule.

A whole floor.

Gràcies.

Design the relationships, not the pieces. That’s a Modernist floor, a trencadís dragon, and a design system.

carmenansio.com · full write-up @carmenansio

Speaker notes

Presenter controls

→ Space
Next slide
←
Previous slide
S / N
Toggle inline notes strip
P
Open synced speaker view (new window)
✎
Type the city to pair your phone (hidden)
F
Fullscreen
Home / End
First / last slide
?
This help