Aquí tienes la traducción del archivo fuente de la guía de diseño al español, buscando que suene lo más natural posible:

El módulo de espacio nos permite definir reglas estrictas para los cálculos de tamaño y espaciado, mientras que la cuadrícula (grid) ayuda a estructurar el contenido en bloques visualmente organizados. Utilizamos una cuadrícula de 12, 8 y 4 columnas que permite dividir el área seleccionada en mitades, tercios y cuartos.

§Estructura de la cuadrícula

Las columnas ➊ definen los límites para la alineación horizontal; los espacios ➋ proporcionan relleno entre las columnas de la cuadrícula; los márgenes exteriores ➌ aseguran el relleno y la alineación centrada del contenedor ➍. El ancho de la columna de la cuadrícula se determina por un valor porcentual, y el espaciado por defecto de las columnas se establece en 20px.

§Contenedor

Un contenedor es un componente fundamental del diseño del sistema que contiene y organiza el contenido dentro de una vista (viewport) dada. Utilizamos dos tipos de contenedores: Fijo (Fixed) con un ancho fijo (lo que significa que su max-width fijo puede cambiar en cada punto de interrupción o breakpoint) y Fluido (Fluid) con un ancho variable, que ocupa el 100% del espacio disponible (excepto para los tamaños S, XS y 2XS).

§Puntos de interrupción (Breakpoints)

Los puntos de interrupción de consulta de medios, o breakpoints, son anchos de vista predefinidos que te permiten gestionar diversas configuraciones de la cuadrícula.

§Zonas de exclusión

En los diseños de UI, los usuarios esperan que ciertos elementos se posicionen en áreas específicas. Nos referimos a estas áreas como "zonas de exclusión" y no las incluimos en nuestro sistema de cuadrícula. Cuando los paneles flexibles o de navegación se expanden, el contenido y la cuadrícula se comprimen para ajustarse al navegador o se extienden más allá de él. Los paneles superpuestos cubren el contenido sin afectar al contenedor principal.