Maquetación
Primero el móvil, una columna, contenido centrado mientras el margen se adapta. Tres columnas fijas cubren teléfono, tableta y escritorio. La escala de espaciado de abajo se lee de la hoja de estilos.
Columnas
La página es una única columna centrada con un ancho máximo fijo por banda. Por debajo de ese ancho, lo único que cede es el margen, así que la medida de lectura se mantiene cómoda en lugar de estirarse de borde a borde en una pantalla ancha. Los artículos se estrechan aún más, hasta una columna de lectura de 720 píxeles; solo los bloques a sangre completa, como el código, se salen de ella.
| Banda | Columna | Margen | Barra superior |
|---|---|---|---|
| Móvil | 430px | 20px | 56px |
| Tableta | 960px | 24px | 60px |
| Escritorio | 1100px | 24px | 64px |
Puntos de ruptura
Tres bandas, expresadas tal como son de verdad. La banda de tableta llega hasta los 1279 píxeles, así que una ventana de 1024 píxeles recibe el dimensionado de tableta, no el de escritorio. El dock de pestañas es un recurso de teléfono y tableta; la navegación de escritorio toma el relevo a los 1280.
| Móvil | ≤ 699px |
| Tableta | 700–1279px |
| Escritorio | ≥ 1280px |
Espaciado
El espacio se construye sobre una base de cuatro píxeles. Los tokens de abajo fijan el ritmo entre secciones y encabezados; como el relleno de sección es de un solo lado, dos secciones contiguas quedan separadas el doble del token.
| Token | Escritorio | Tableta | Móvil | Fija |
|---|---|---|---|---|
--sp-section | 28px | 22px | 22px | Relleno de una sección (dos apiladas suman el doble). |
--sp-band | 56px | 32px | 24px | Relleno dentro de una banda tintada. |
--sp-heading | 24px | 18px | 14px | Espacio entre un encabezado de sección y su contenido. |
El ritmo, anotado
Las bandas rayadas son el propio espacio medido, no un dibujo de él: su altura la marcan los tokens en vivo, así que se reducen por banda exactamente como el sitio. Las etiquetas se leen escritorio / tableta / móvil.
El ritmo se anida: sección, luego tarjeta, luego grupo, luego elemento, cada uno con menos aire que el que lo rodea.
Áreas táctiles
Los controles táctiles primarios mantienen un mínimo de 44 píxeles: las pestañas del dock, los controles de la barra de lectura, los iconos del pie en el móvil. El glifo interior se queda en 15 a 20 píxeles; el padding hace el resto. Los controles compactos pensados para puntero (las flechas de estanterías y series, la búsqueda de la barra superior) se quedan en 38 a 42 píxeles con espacio libre alrededor.
Logo en un círculo
La marca se sitúa en un marco circular y ocupa unos dos tercios de él, con un anillo fino en el borde. Aparece a 48 píxeles junto a un rol, a 96 en una tarjeta y a 120 como ancla de la cronología.