01 Foundations · 08

Layout

Depth without drama. Surfaces step in tone, borders stay hairline, and every container echoes the icon.

Elevation without shadows

Drop shadows are prohibited. Depth is expressed with surface tone steps plus 1px hairline borders. Overlays may use a functional scrim at 45–60% — the only permitted “shadow”.

Geometry

• Containers: 20px radius — the brand’s inner-corner radius.
• Controls: one radius for every button — 8px, all sizes. The pill is reserved for the search input field only.
• The notch is universal: every container squares exactly one corner — the top-right — against its radius, echoing the isotype. Cards, alerts, modals, chat windows, stat tiles, tooltips. Controls keep uniform 8px: the notch marks containers, not controls.
• An accent square may seat in the notched corner, color-coding the tile’s module. A dashboard reads as a field of isotypes.

The ladder, applied

1. Canvas — the deepest sheet behind everything.
2. Tile — content floats on the canvas in notched containers, one tone-step above. That step is the elevation.
3. Well — interactive or grouped areas sink one step inside a tile: input fields, chat canvases, segmented-control tracks.

A well never sits directly on the canvas. Two adjacent levels never share a tone.

Signature details

• Avatars follow the tile anatomy: rounded square with the top-right corner squared; the status indicator is a square — el punto — seated at that corner, never a circular dot.
• The switch is el punto sliding: a square thumb on an 8px track. Off rests on a well; on slides right into a Bugambilia field. Never a pill track, never a circular knob, never green.
• Progress is Rosa: one bar, a Rosa fill on a well track. The bar never changes color — a failing task says so in text, never by recoloring the bar.

Density and air

Generous whitespace is a brand feature — Barragán calm. Tiles breathe with 20–24px padding; grids use 16px gaps. Between blocks: 24px between variants of the same pattern, 48px between different patterns. Reading text stays in a narrow column. Sections breathe — don’t compress to fit.