swiss-ui-design

Diseño UI Suizo

Este skill convierte los principios de la escuela suiza en decisiones concretas de UI. La idea fundacional de la escuela, de Ernst Keller, es que la solución de diseño debe surgir del contenido del problema. Todo lo que sigue se deriva de esto: la cuadrícula es la lógica, la tipografía es la imagen, el color son planos planos y fuertes con funciones claras, el espacio en blanco es estructura y nada es decoración.

El segundo objetivo: el resultado no debe parecer generado por IA. Las interfaces genéricas de IA comparten un mismo aspecto (héroe centrado, degradado púrpura, tarjetas redondeadas con sombras suaves, tres características con iconos, texto vago). El estilo suizo es casi lo opuesto a ese aspecto, por lo que aplicarlo con disciplina resuelve la mayor parte del problema; la Parte 5 se encarga del resto.

El tercer objetivo: el resultado debe tener potencia. Una página ordenada con fondo crema y un bloque naranja es suiza solo en su cuadrícula. Los carteles por los que este estilo es conocido están cubiertos de color: color plano fuerte o negro ocupa el 83–97% de la hoja, o una sola tinta cromática lo lleva todo y un panel tintado llena el resto. Por lo tanto, el Paso 4 elige un Look (fondo, esquema de color, tratamiento de imagen) antes de cualquier diseño. references/looks.md contiene cinco Looks tomados de carteles reales, con CSS probado; scripts/color_power.py mide el resultado.

Cómo está organizado este archivo

1. Flujo de trabajo — los pasos, en orden
2. Cuadrícula, espaciado, tipo y color — tokens, escalas, paletas, recetas de diseño, CSS base
3. Árabe y RTL
4. Componentes
5. No parecer hecho por IA — la lista de verificación
6. Fuente: la escuela suiza en breve (del folleto La Escuela Suiza de Diseño)

También en este skill: references/looks.md (Looks, pares de contraste, mecánica CSS probada) y scripts/color_power.py (verificación de potencia de color para capturas de pantalla).

---

Parte 1 — Flujo de trabajo

1. Comienza desde el contenido

• Escribe la única cosa para la que existe la pantalla (un mensaje, una acción). Se convierte en el elemento dominante.
• Clasifica el resto en al menos 3–4 niveles de jerarquía.
• Si el usuario no proporcionó contenido, escribe contenido real y específico en el idioma de destino: nombres locales realistas, números exactos, fechas, precios, lugares. Nunca lorem ipsum, nunca relleno de marketing ("Desbloquea el poder de…", o su equivalente en árabe "descubre el poder de…"). El contenido específico es la señal más fuerte de que un humano hizo la página. Indica al usuario qué detalles son suposiciones que debe reemplazar.
• Escribe el texto a la manera suiza: objetivo y fáctico, libre de las afirmaciones exageradas de la publicidad y la propaganda (definición de Meggs del estilo). El diseñador actúa como un canal claro para la información, no como un vendedor. Los hechos, números, condiciones y verbos simples persuaden mejor aquí que los adjetivos.
• Decide el idioma y la dirección. Árabe → dir="rtl" y aplica la Parte 3, que cambia la alineación, las fuentes y la altura de línea.

2. Elige una dirección — a propósito

La escuela suiza no es un solo estilo. Elige una de estas direcciones, cada una basada en los principios de un pionero o una escuela (usa los principios; nunca copies sus carteles):

Dirección	Carácter	Adecuado para
Zúrich — Müller-Brockmann	Cuadrícula rigurosa, a veces visible; tono objetivo; tipo pequeño y preciso junto a una foto grande o forma geométrica abstracta; mucho blanco.	Documentación, apps densas, paneles de control, instituciones, finanzas
Basilea — Hofmann	Blanco y negro, alto contraste, figura–fondo, muy pocas formas grandes, tipo como forma.	Cultura, portafolios, eventos, arquitectura
Ballmer	Encabezados construidos sobre la cuadrícula, pesos pesados, rojo + negro, palabras apiladas, estructura visible.	Marcas, campañas, lanzamientos, páginas de aterrizaje con actitud
Keller	Campos de color plano audaces, formas geométricas simples, tipo sobredimensionado recortado por el borde.	Productos de consumo, educación, comunidad, museos
Cartel objeto de Basilea (Sachplakat)	Un objeto (el producto, una herramienta, un plato, un dispositivo) mostrado enorme, en primer plano y fotografiado nítidamente, con casi nada más que un nombre.	Productos físicos, comida, retail, hardware
Fotomontaje (Herbert Matter)	Fotografías combinadas a escalas dramáticamente diferentes, cortadas en la cuadrícula, con tipo bloqueado dentro de ellas.	Turismo, lugares, eventos, medios

Antecedentes que ayudan a la elección: la Biblioteca Nacional Suiza describe dos campos de posguerra, Zúrich = Arte Concreto (construcción matemática, planos geométricos puros; Max Bill construyó la primera cuadrícula de diseño verdadera a finales de los años 30) y Basilea = Nueva Objetividad (el objeto, la fotografía, contraste de forma). El propio Keller no enseñó un estilo fijo: creía que la solución debía surgir del contenido, por lo que su propio trabajo es muy diverso. El skill lo sigue: la dirección proviene del contenido, no del hábito.

Zúrich es la elección "segura" y es fácil caer en ella cada vez; eso hace que cada resultado se parezca. Elige Zúrich cuando el contenido sea denso y funcional. Para páginas de aterrizaje, marcas y campañas, prefiere Ballmer, Keller o Basilea: le dan a la página un momento fuerte (un campo completo de color intenso, una palabra gigante recortada, una forma de alto contraste) que a una página tranquila le falta. Indica al usuario en una línea qué dirección elegiste y por qué. No lo escribas dentro de la interfaz.

Dirección y Look son elecciones separadas. La dirección decide la estructura; el Look (Paso 4) decide el color. Una cuadrícula de Zúrich puede usar el Look Sol, y Ballmer puede usar Negro + espectro.

3. Encuentra el concepto en el contenido

La escuela de Basilea lo expresó así (Kenneth Hiebert, estudiante de Hofmann): una estructura abstracta es el vehículo para la comunicación, y encontrarla te obliga a aislar la esencia del mensaje antes de cualquier estilo superficial. Haz esto por escrito antes de diseñar:

1. Enumera 5–8 hechos concretos del contenido: un número, un lugar, un objeto físico, una hora, un proceso, un nombre, un contraste (antes/después, pequeño/grande).
2. Escribe tres conceptos diferentes, una frase cada uno, cada uno basado en un hecho diferente. Ejemplo para un espacio de coworking: (a) la dirección del edificio y el plano de planta como imagen; (b) las 15 horas del día como una cuadrícula que puedes reservar directamente; (c) los objetos reales — un escritorio, una llave, una silla — mostrados enormes (cartel objeto).
3. Elige el que sea más específico para este producto, el que no podría trasladarse a la página de un competidor cambiando el nombre. Di en una línea cuál elegiste.

El elemento gigante debe provenir del contenido, no de una llamada a la acción. Un verbo imperativo gigante ("Reserva", "Empieza", o sus equivalentes en árabe) es un truco: funciona para cualquier producto y rápidamente se convierte en la nueva plantilla. Usa un sustantivo, número o nombre que solo este producto tenga: el lugar, la cifra clave, el objeto, la fecha.

4. Elige el Look, luego establece el sistema

El Look primero. Antes de cualquier diseño, elige un Look y abre references/looks.md para sus tokens, pares de tipo, composición y CSS probado. El fondo es lo primero: color plano fuerte o tinta cubre al menos el 60% de la primera pantalla. Los dos Looks de fondo de papel son la excepción: una tinta cromática lleva todo el tipo y un panel tintado llena al menos el 30%. Elige según el contenido, nunca uses el mismo Look dos veces seguidas y usa un Look por página (las secciones varían la composición, no la paleta).

Look	Fondo	Paleta	Adecuado para
1 Sol	un tono fuerte y su complemento	amarillo #FFC611 · índigo #3A3A9C · marino #16154A	páginas de aterrizaje, eventos, cultura, educación
2 Tinta violeta	blanco; una tinta cromática para todo el tipo	violeta #4F2A7D · violeta claro #CFDBF1 · orquídea #BD9CBB	editorial, revistas, informes
3 Bandas primarias	3–4 bandas apiladas a sangre	azul #2F7BFF · verde #0FA23A · amarillo #EFB83E · rojo #E6040A · tinta	páginas de aterrizaje basadas en hechos, campañas, instituciones
4 Negro + espectro	negro tinta	6–9 tonos puros, cada uno al menos dos veces	catálogos, reservas, familias de productos, leyendas de paneles
5 Cartel de concierto	crema o negro	tinta + rojo, cian, amarillo, púrpura, con sobreimpresión	eventos, música, comunidad, lanzamientos

Naranja + marino, cobalto + amarillo, rosa + verde oscuro y otros fondos están en el mismo archivo. Si el brief menciona un color de marca, este se convierte en el fondo o un plano, y los compañeros se eligen según el esquema.

Luego los tokens (Parte 2): la línea de cuerpo (tamaño y altura de línea), una cuadrícula derivada de ella (12/8/4 columnas por defecto, u otro número si el contenido lo requiere), unidad base (8px), una familia tipográfica (o una árabe + una latina compañera) con una escala pronunciada, y la paleta del Look con un color de texto por superficie, cada par verificado por contraste.

5. Compón con asimetría

La fuente describe el equilibrio a través de la distribución de fuerzas visuales, no de la simetría.

• No centres el héroe. Coloca un elemento pesado (título enorme, foto grande, campo de color) contra un lado, equilibrado con espacio en blanco y texto pequeño en el otro.
• Usa intervalos de columna desiguales: 5+7, 4+8, 3+9, 2+6+4. Tercios iguales en todas partes es el valor predeterminado de la IA.
• Desplaza a propósito: título en las columnas 1–9, introducción en 7–11 debajo, metadatos en 1–3.
• Dale a cada sección una composición diferente en la misma cuadrícula. Repetir "título centrado + cuadrícula de tarjetas" en cada sección es una fuerte señal de IA.
• Antes de codificar una sección, escribe sus intervalos como un comentario (/* hero: h1 1–10, meta 1–3, lead 6–11 */). Mantiene la cuadrícula honesta.

6. Añade la capa de cartel — lo que lo hace suizo, no solo limpio

Este paso es la diferencia entre un diseño suizo y uno ordenado. La fuente misma señala que los principios suizos se convirtieron en la base de la UI moderna. Eso significa que las reglas funcionales solas (cuadrícula, líneas finas, texto alineado a la izquierda, una lista de índices, una tira de estadísticas, un acento) ahora producen algo que cualquier sistema de diseño ya parece. Es limpio, pero no es nuevo y no es reconociblemente suizo. Lo que hizo distintiva a la escuela suiza fueron sus carteles: tipo usado como imagen, planos de color audaces, geometría, tensión de escala y estructura visible. Lleva ese lenguaje a la interfaz.

Las fuentes dicen lo mismo desde dos lados. Un estudio del diseño plano (Aristova & Vasilieva) rastrea el diseño web plano hasta el Estilo Internacional, y advierte que su propagación uniformiza los sitios web y debilita la identidad de cada sitio e institución. Un libro de texto de historia del diseño señala que una vez que el estilo suizo se volvió universal, su lenguaje visual se volvió menos innovador. La cura no es abandonar los principios. Es usarlos como lo hicieron los diseñadores originales, como un método para encontrar una forma específica para cada pieza de contenido.

Regla: una página de aterrizaje, un sitio de marketing o una página de marca necesita al menos tres movimientos característicos. Uno va en el héroe, y al menos dos más van en otras secciones. Una UI de producto (panel de control, aplicación) se mantiene funcional, pero obtiene un momento de cartel: el encabezado de la página, la pantalla de inicio de sesión, un estado vacío o un divisor de sección.

Movimientos característicos (cada uno proviene de un principio visto en los ejemplos de carteles de la fuente; usa el principio y nunca reproduzcas un cartel):

#	Movimiento	Cómo en UI	CSS
1	Letras como arquitectura (Ballmer)	Una palabra o inicial construida a partir de módulos de cuadrícula: letras enormes divididas por líneas de columna, o letras ensambladas a partir de cuadrados. En árabe, el cúfico cuadrado es el equivalente natural, ya que es una escritura construida sobre una cuadrícula. Úsalo para una marca de palabra o una palabra héroe, dibujada en SVG a partir de cuadrados y mantenida legible.	SVG <rect> en una cuadrícula de módulos; grid de celdas
2	Tipo gigante recortado (Keller)	Título más grande que el viewport, cortado por uno o dos bordes. La identidad de la página es la palabra misma.	font-size: 28vw; line-height: .8; margin-inline-start: -.05em; sección overflow: clip
3	Tipo entrelazado (Hofmann)	Palabras apiladas con interlineado negativo para que se toquen o superpongan, formando un bloque tipográfico.	line-height: .75, márgenes negativos, mix-blend-mode: multiply en un segundo color
4	Plano rotado (Müller-Brockmann)	Un bloque de contenido, una cuadrícula o una dispersión de pequeños cuadrados colocados en un plano girado 45° o 90°, contra la cuadrícula recta.	transform: rotate(-45deg) en un contenedor; mantén el texto interior legible o gíralo 90°
5	Geometría figura–fondo (Hofmann)	Un círculo grande, semicírculo o anillo en tinta o un color fuerte de la paleta, cortado por el borde de la pantalla. El texto se sienta dentro de la forma o la envuelve.	Elemento border-radius: 50% / SVG, clip-path, shape-outside
6	Columna de palabras vertical (Ballmer)	Una columna de color estrecha de altura completa con una palabra colocada verticalmente. Árabe: gira toda la palabra (nunca apiles letras).	writing-mode: vertical-rl, transform: rotate(180deg)
7	Campo de color + bloque de tinta (Keller)	Una sección completa en un color de campo fuerte con un rectángulo negro sólido que contiene el texto, o dos colores fuertes que se encuentran borde a borde.	dos bloques en la cuadrícula, sin sombras
8	Cuadrícula como contenido (Müller-Brockmann)	Líneas de cuadrícula dibujadas a propósito, con datos, números o texto encajados en las celdas. Úsalo para un horario, una cuadrícula de precios o un índice de sección.	bordes en las celdas, o líneas repeating-linear-gradient
9	Tensión de escala en una línea	Una palabra de 200px junto a metadatos de 12px en la misma línea base.	flex con align-items: baseline
10	Sobreimpresión tonal	Dos palabras de exhibición superpuestas, una en gris claro detrás y otra en tinta o papel delante, desplazadas en la cuadrícula.	posicionamiento absoluto dentro de una celda de cuadrícula
11	Héroe objeto (Basilea Sachplakat)	Un objeto real fotografiado en primer plano, más grande que la vida, recortado o cortado ajustadamente, con solo el nombre y un hecho.	object-fit: cover, imagen que abarca 8–12 columnas, recortada por el borde
12	Fotomontaje (Matter)	Dos o tres fotografías a escalas muy diferentes (un detalle enorme, una vista amplia pequeña) cortadas en campos de la cuadrícula, con tipo colocado sobre o entre ellas.	campos de cuadrícula con overflow: clip, imágenes alineadas a los bordes del campo
13	Confrontación (Hofmann)	Dos elementos diferentes se encuentran a propósito: una letra contra una forma geométrica, un bloque de texto denso contra un campo vacío, una forma redonda contra una cuadrícula recta, negro contra blanco.	dos áreas de cuadrícula que comparten un borde o se superponen

---

Parte 2 — Cuadrícula, espaciado, tipo y color

Esta sección proporciona las líneas base para cualquier implementación.

Cuadrícula

• Columna base: 12 columnas para pantallas anchas (>=1024px), 8 para tabletas (>=640px), 4 para móviles.
• Canalón: 16px (2 unidades de línea base).
• Margen: 24px (3 unidades de línea base) a cada lado.
• La cuadrícula es estricta: cada elemento ocupa un número entero de columnas. Los puntos de interrupción se establecen en fracciones de columna: .col-5 ocupa 5 de 12.
• Las líneas de cuadrícula se pueden dibujar como contenido (movimiento n.º 8) con repeating-linear-gradient.

:root {
  --col-count: 12;
  --gutter: 16px;
  --margin: 24px;
}

Espaciado

• Unidad de línea base: 8px. Todos los márgenes, rellenos y alturas son múltiplos de 8.
• Ritmo vertical: margin-bottom: 1lh (o múltiplos) en elementos de bloque.
• Escala de espaciado: 2, 4, 8, 16, 24, 32, 48, 64, 96, 128, 192, 256 (px).

Tipo

• Una familia tipográfica sans-serif (o una árabe + una latina; ver Parte 3). Opciones: Helvetica Neue, Univers, Akzidenz-Grotesk, o equivalentes de código abierto como Inter, Work Sans, Source Sans Pro. Para árabe: Noto Sans Arabic, IBM Plex Arabic, o una fuente cúfica.
• Escala de tipo pronunciada (basada en una proporción de 1.25 o 1.333):

Nivel	Tamaño	Altura de línea	Peso	Uso
-2	12px	1.3	400	Metadatos, notas al pie
-1	14px	1.4	400	Cuerpo pequeño, etiquetas
0	16px	1.5	400	Cuerpo
1	20px	1.3	500	Introducción, subtítulo
2	28px	1.1	600	Encabezado de sección
3	40px	1.0	700	Título de página
4	64px	0.9	800	Título héroe
5	96px	0.8	900	Título gigante (movimiento)
6	28vw	0.8	900	Tipo recortado gigante (movimiento n.º 2)

• Alineación: predeterminado al inicio (izquierda para LTR, derecha para RTL). Sin justificar. Sin centrar excepto para elementos únicos a propósito.
• Sin mayúsculas forzadas, excepto para abreviaturas y marcas.
• Espaciado entre letras: normal, a menos que se use para énfasis (letter-spacing: 0.05em en titulares pequeños).

Color

• El Look (Paso 4) proporciona la paleta. Se proporcionan tokens de color.
• Un color de texto por superficie.
• Relación de contraste: al menos 4.5:1 para texto pequeño, 3:1 para texto grande (WCAG AA).
• Sin sombras, sin degradados, sin texturas. Solo colores planos.
• Sin bordes excepto líneas de cuadrícula (movimiento n.º 8).

---

Parte 3 — Árabe y RTL

Dirección

• dir="rtl" en el elemento html o contenedor.
• Las cuadrículas y flexbox invierten el orden automáticamente (no uses flex-direction: row-reverse a menos que sea necesario).
• Los márgenes y rellenos se invierten con margin-inline-start / margin-inline-end.

Tipo

• Elige una fuente árabe que coincida con el carácter de la dirección: Noto Sans Arabic (neutral), IBM Plex Arabic (moderno), o una fuente cúfica (para letras como arquitectura, movimiento n.º 1).
• Altura de línea: 1.6–1.8 para el cuerpo, debido a los ascendentes y descendentes más largos.
• El tamaño de fuente puede necesitar ser 1–2px más grande para la legibilidad del cuerpo.
• Para el movimiento de palabras verticales (n.º 6), la palabra completa se gira, no se apilan letras.

Diseño

• Las composiciones son imágenes especulares de LTR: el héroe se desplaza a la derecha, el espacio en blanco a la izquierda.
• El flujo de la cuadrícula se invierte: las columnas se numeran de derecha a izquierda.
• La tipografía gigante recortada (movimiento n.º 2) se extiende fuera del borde derecho.
• Revisa todos los movimientos para orientación RTL: la confrontación, la figura–fondo, los planos rotados.

---

Parte 4 — Componentes

(Los componentes son implementados por el skill según sea necesario; a continuación se presentan pautas para algunos comunes)

Navegación

• Sin sombras ni fondos con desplazamiento. Enlace de logotipo (texto) y enlaces de navegación en línea, alineados al inicio.
• Sin mega menús, ni animaciones, ni elementos pegajosos (a menos que el contenido lo requiera).
• Puede estar en una barra de color sólido (Look) o sobre el fondo.

Tarjetas

• Sin bordes redondeados, sin sombras. Borde recto, o línea de cuadrícula como separador.
• Contenido alineado al inicio dentro de la tarjeta.
• Sin iconos excepto los funcionales (por ejemplo, descargar, enlace externo).

Botones

• Rectos, sin bordes redondeados. Color sólido de la paleta, texto en blanco o negro.
• Sin estados de desplazamiento (sin animación). El estado activo es un cambio de color (por ejemplo, invertir).

Formularios

• Etiquetas arriba, campos debajo, alineados al inicio. Sin marcadores de posición (excepto ejemplos).
• Bordes de campo: 1px sólido, color tinta. Sin sombras en el enfoque.

Tablas

• Sin bordes verticales. Líneas horizontales (1px) como separadores. Encabezados en negrita, alineados al contenido.
• Sin alternancia de colores de fondo.

---

Parte 5 — No parecer hecho por IA: la lista de verificación

Antes de que el diseño esté completo, verifica cada elemento contra esta lista:

1. ¿El héroe está centrado? → Mueve el contenido pesado a un lado.
2. ¿Hay un degradado púrpura o azul? → Reemplázalo con un color plano de la paleta del Look.
3. ¿Hay tarjetas redondeadas con sombras? → Hazlas rectas, sin sombras.
4. ¿Hay tres características con iconos? → Reemplázalas con hechos concretos, sin iconos.
5. ¿El texto usa eslóganes de marketing? → Reescribe con lenguaje fáctico.
6. ¿Cada sección tiene la misma composición? → Varía la disposición de la cuadrícula.
7. ¿Hay algún movimiento característico de cartel? → Debe haber al menos tres (uno en el héroe).
8. ¿Los colores son apagados o pastel? → Aumenta la saturación o elige colores de la paleta del Look.
9. ¿El contenido es ficticio (lorem ipsum)? → Reemplázalo con contenido específico del usuario o generado.
10. ¿El diseño se ve como una plantilla de Tailwind/Chakra/ Bootstrap? → Aplica los movimientos y el Look para diferenciarlo.

---

Parte 6 — Fuente: la escuela suiza en breve

Del folleto La Escuela Suiza de Diseño (resumido para contexto):

• Orígenes: Desarrollado en Suiza en las décadas de 1950 y 1960, basado en el trabajo de diseñadores como Ernst Keller, Theo van Doesburg, Max Bill, Josef Müller-Brockmann, Armin Hofmann, Karl Gerstner y Wolfgang Weingart.
• Principios: Claridad, orden, objetividad. Uso de cuadrícula, tipografía sans-serif, fotografía en lugar de ilustración, asimetría, color plano.
• Impacto: Se convirtió en la base de la identidad corporativa y el diseño de interfaces modernas. Conocido como Estilo Internacional Internacional.
• Crítica: Su difusión llevó a la uniformidad; el skill restaura el poder original a través del trabajo con contenido, elección de dirección y movimientos de cartel.

---

Fin del SKILL.md. Consulta references/looks.md y scripts/color_power.py para la implementación.