Forma y espacio

Cuatro radios según el tamaño del elemento, sombras por nivel de elevación, alturas de los controles, espaciado en múltiplos de 4px y un margen de página compartido.

Radios y sombra

--maristas-radius-xs 6px · Código, atajos

--maristas-radius-sm 8px · Chips, filtros, ítems de menú

--maristas-radius-md 10px · Botones, campos, menús, avisos

--maristas-radius-lg 16px · Tarjetas, modales

--maristas-shadow-card Tarjetas

--maristas-shadow-sm Sobre imágenes

--maristas-shadow-float Menús, avisos

--maristas-shadow-modal Modales

Escala de espaciado

--maristas-space-1

4px

--maristas-space-2

8px

--maristas-space-3

12px

--maristas-space-4

16px

--maristas-space-5

24px

--maristas-space-6

32px

Tamaño de los controles

Botón, campo y selector del mismo tamaño miden lo mismo y usan la misma letra, para que queden alineados en una barra o formulario.

Tamaño	Alto	Letra	Clases
`sm`	32px	13px	`btn-sm`, `form-control-sm`, `form-select-sm`
normal	40px	14px	`btn`, `form-control`, `form-select`
`lg`	48px	16px	`btn-lg`, `form-control-lg`, `form-select-lg`

Margen de página

El margen lateral de la página es el token --maristas-gutter (clamp(2rem, 7vw, 9rem)): crece con la ventana. El contenido (.mr-page), la barra principal (.mr-topbar-full, sin esquinas redondeadas) y el pie (.mr-footer-full) lo comparten para quedar alineados. Si un sistema necesita otro valor, lo redefine en su :root; no lo reemplaza con un .container de Bootstrap.

<x-maristas::topbar class="mr-topbar-full">…</x-maristas::topbar>
<main class="mr-page">…</main>
<x-maristas::footer class="mr-footer-full">…</x-maristas::footer>

Cuadrícula y puntos de quiebre

Se usa la cuadrícula de 12 columnas de Bootstrap. El contenido se apila en una columna por debajo de 768px.

Prefijo	Ancho mínimo	Uso típico
`(sin prefijo)`	0	Celular
`sm`	576px	Celular grande
`md`	768px	Tableta: las columnas empiezan a separarse
`lg`	992px	Laptop: la bandeja pasa a dos paneles
`xl`	1200px	Escritorio