International Typographic Style — v1.0

Swiss
Design
System

Founded
Zürich, 1950
Typeface
Inter / Helvetica Neue
Components
12 Systems
S

La grilla no es una sugerencia.
Es la ley.

01

Tipografía

Escala modular · Proporción áurea · Inter

Display 01 120px / 300
H1 Typographie 76px / 900
H2 Internationale 48px / 700
H3 Grafische Gestaltung 30px / 700
H4 International Typographic Style 23px / 600
H5 Neue Grafik — Basel School of Design 18px / 600
H6 Helvetica Neue — Josef Müller-Brockmann, 1960 14px / 600
Body 14 La grilla es el principio organizador supremo del Swiss Style. El contenido se organiza en módulos rectangulares que ocupan exactamente N columnas × M filas. 14px / 400
Caption Fig. 01 — Ejemplo de composición editorial basada en grilla de 12 columnas. Gutter: 24px. Unidad modular: 8px. 11px / 400
Cita El espacio negativo trabaja tan duro como el contenido. 48px / 200
Etiqueta Categoría — Sistema — Referencia 11px / 600 / UC
Números
01 02 03
96px / 300
02

Color

8 tokens · 90% negro y blanco · Acento puntual

--color-white
#FFFFFF
Fondo principal y espacio negativo dominante
--color-black
#1A1A1A
Tipografía, bordes estructurales
--color-gray-100
#F5F5F5
Fondos de paneles secundarios
--color-gray-300
#CCCCCC
Líneas de grilla, separadores
--color-gray-500
#808080
Texto secundario, captions
--color-gray-700
#404040
Texto de apoyo, subtítulos
--color-accent
#E63329
Rojo suizo — solo énfasis puntual
--color-accent-alt
#0057A8
Azul estructural — variante fría
Negro sobre blanco
✓ Permitido
Combinación base. Máximo contraste y legibilidad.
Rojo de acento
✓ Permitido
Acento rojo solo en un elemento por composición.
Rojo + Azul
✗ Prohibido
Nunca mezclar ambos acentos en la misma composición.
Gradiente
✗ Prohibido
Sin gradientes. Sin sombras decorativas. Sin texturas.
03

Botones

5 variantes · Padding 12×24 · 150ms ease

Primario
bg: --color-black · hover: --color-accent
Secundario
border: 1px --color-black · hover: invertido
Ghost
sin borde · hover: línea inferior en acento
Destructivo
border: --color-accent · hover: fondo acento
Deshabilitado
todo en --color-gray-300 · cursor: not-allowed
04

Inputs y Formularios

Borde inferior único · Focus en acento · Labels en mayúsculas

05

Cards y Paneles

4 variantes · Sin sombra · Sin border-radius

Card básica

Principio de reducción radical

Si un elemento no comunica algo, no existe. El diseño no tiene opinión estética propia — sirve al contenido.

1968
Año de referencia
Neue Grafik — Revista fundacional del estilo internacional
M Fig. 01 — Composición tipográfica

Müller-Brockmann

Maestro de la grilla modular y el cartel de concierto. Basilea, 1914–1996.

12
Columnas de grilla
Gutter de 24px · Unidad modular 8px
Variante azul

Señalética de Nueva York

Massimo Vignelli, 1970. Sistema de señalización del metro de Nueva York, basado en Helvetica y grilla estricta.

06

Navegación

64px altura · Borde inferior 1px · Links en mayúsculas

Activo: línea superior 3px --color-accent · Hover: color cambia a acento

08 — Badges y etiquetas

Nuevo Sistema Versión 1.0 Acento Azul Estructura Neutral Tipografía Grilla
07

Tablas

Borde superior 2px · Header 11px / mayúsculas · Altura fila 48px

Token Propiedad Categoría Valor Uso
--t-11 font-size Tipografía 11px Captions, labels, badges
--t-14 font-size Tipografía 14px Cuerpo de texto base
--t-30 font-size Tipografía 30px H3, subtítulos de sección
--color-accent color Color #E63329 Rojo suizo — énfasis puntual
--s-8 spacing Grilla 8px Unidad modular base
--s-24 spacing Grilla 24px Gutter de columnas
--col-gap gap Grilla 24px Separación entre columnas
Total de tokens documentados 24 variables
09

Alerts y mensajes de estado

Borde izquierdo 4px · Ícono tipográfico · Sin color de fondo

Información del sistema
El borde lateral comunica el estado. No se usa color de fondo — solo el borde izquierdo de 4px.

+
Operación exitosa
Los tokens han sido aplicados correctamente al sistema de diseño. La grilla está en su lugar.

!
Advertencia de uso
Se detectó un valor de espaciado no múltiplo de 8px. Revisar la regla de espaciado modular.

×
Error de composición
Dos acentos de color detectados en la misma composición. Solo se permite uno por sección.
10

Sistema de grilla

12 columnas · Gutter 24px · Unidad base 8px

1
2
3
4
5
6
7
8
9
10
11
12
6 + 6 — Dos columnas iguales
6 cols
6 cols
4 + 8 — Sidebar + contenido
4 cols
8 cols
3 + 9 — Índice + cuerpo editorial
3 cols
9 cols
4 + 4 + 4 — Tres columnas iguales
4 cols
4 cols
4 cols
11

Espaciado

Solo múltiplos de 8px · 8 valores · El espacio tiene peso propio

8px
--s-8
16px
--s-16
24px
--s-24
32px
--s-32
48px
--s-48
64px
--s-64
96px
--s-96
128px
--s-128
12

Composición editorial

Portada de revista · Todos los elementos en sistema

04
FORM follows function — always
Número especial
Grilla & Espacio

Ensayo editorial

El diseñador suizo no busca belleza. La belleza emerge de la coherencia absoluta del sistema. Cuando cada elemento ocupa su lugar matemático en la grilla, cuando el espacio negativo respira con la misma autoridad que el contenido, cuando una sola familia tipográfica expresa toda la jerarquía posible — entonces y solo entonces aparece lo que el diseñador no planeó: la elegancia.

Josef Müller-Brockmann comprendió que el cartel de concierto no necesita ilustración. Necesita ritmo tipográfico, proporción exacta, y el peso silencioso del espacio en blanco. Su serie de carteles para la Tonhalle de Zúrich entre 1950 y 1972 son la prueba más elocuente de este principio.

1950
Año de nacimiento del estilo

12
Columnas · Módulo 8px

Referentes: Müller-Brockmann · Armin Hofmann · Massimo Vignelli · Otl Aicher

Swiss Design System — Vol. I, No. 04 — Zürich, 2026
Principios del sistema
Tweaks
Color de acento
Fondo de página
Peso de secciones