---
titulo: Mosaico
resumen: Rectángulo de color de marca con una ilustración centrada. Acompaña a
  pasos y bloques de la landing.
estado: obsoleto
funcion: contenido
nivel: atomo
creado: 2026-10-11
actualizado: 2026-10-13
relacionados:
  - patrones/como-funciona
  - fundamentos/color
  - fundamentos/ilustracion
plataformas:
  web:
    estado: obsoleto
id: componentes/mosaico
url: /designloop/componentes/mosaico
sync: null
---

# Mosaico

Rectángulo de color de marca con una ilustración centrada. Acompaña a pasos y bloques de la landing.

> **Obsoleto.** Desapareció con el rediseño de la landing (octubre de 2026). Su lugar lo ocupan la [placa](/designloop/componentes/placa) y la [hoja](/designloop/componentes/placa#hoja).

## Colores

Las ilustraciones animadas de producción se omiten en este ejemplo; el mosaico solo define el fondo, la proporción y el radio.

```html
<div style="flex:1 1 100%;display:grid;grid-template-columns:repeat(3,1fr);gap:16px">
  <div class="tile tile-sand"></div>
  <div class="tile tile-sky"></div>
  <div class="tile tile-night"></div>
  <div class="tile tile-sage"></div>
  <div class="tile tile-clay"></div>
  <div class="tile tile-lilac"></div>
</div>
```

## Piezas

| Clase | Qué hace |
| --- | --- |
| `.tile` | Proporción 16:11, radio `--radius-lg` (24 px), recorta el contenido y lo centra. |
| `.tile-sand`, `.tile-sky`, `.tile-sage`, `.tile-clay`, `.tile-lilac` | Fondo con el token `--tile-*` del mismo nombre. |
| `.tile-night` | Fondo `--night`. |

## Reglas

| Regla | Cómo se comprueba |
| --- | --- |
| Siempre con una ilustración dentro; nunca con texto. | En `index.html` cada `.tile` contiene un `svg.ink`. |
| La ilustración es decorativa. | El `svg` lleva `aria-hidden="true"` y `focusable="false"`. |
| Mosaicos vecinos, colores distintos. | Los tres pasos usan `sand`, `sky` y `night`. |

## Diferencias observadas

- `tile-clay` y `tile-lilac` existen en el CSS de la landing pero ninguna sección los usa hoy. El portal sí usa esos colores en las [insignias](/designloop/componentes/insignia).