kennedys0/taste-style-swiss-editorial

Usa este skill solo después de que un usuario elija explícitamente o una configuración de proyecto confirmada lo especifique. Para solicitudes de UI nuevas no explicadas, usa un selector de estilo como en lugar de decidir el gusto del usuario aquí. Las marcas existentes, la accesibilidad y las anulaciones del usuario prevalecen sobre todos los ejemplos siguientes. La siguiente guía de estilo no es un permiso para comenzar a codificar la UI antes de la selección de estilo.

Paquete de estilo: Suizo / Editorial

ID: swiss-editorial
Firma: Jerarquía tipográfica rigurosa basada en cuadrícula, contraste de escala marcado, líneas divisorias estructurales finas, índices numerados y espacio negativo intencional.

Esto es un paquete de estilo, no un valor predeterminado obligatorio. Cárgalo solo después de una selección explícita o una confirmación del estilo aplicable del proyecto. Las instrucciones del proyecto pueden anular elecciones individuales. Preserva la accesibilidad, la utilidad y las restricciones de la marca. Las fuentes son sugerencias, no dependencias requeridas. Una página simple con texto sans-serif negro no califica como Suizo Editorial.

Buen ajuste / compensaciones

• Funciona bien para: Agencias de diseño de alta gama, publicaciones arquitectónicas, portafolios editoriales, revistas culturales, informes anuales y narrativas de productos de lujo.
• Ten cuidado con: Herramientas operativas transaccionales de ritmo rápido donde la tipografía de visualización masiva ralentiza la entrada de datos repetitiva.
• Direcciones de referencia:
  • Estilo Internacional Clásico de Zúrich: Fondo blanco nítido papel (#FFFFFF o #F7F7F7), tipografía negra intensa (#111111), reglas divisorias estructurales de 1px, índices numerados (01, 02) y un solo toque de Rojo Suizo (#E3000F).
  • Azul Klein Editorial Moderno: Lienzo monocromático ultralimpio con Azul Klein Internacional (#002FA7) como acento focal de alta precisión en navegación y acciones principales.

Puerta de fidelidad suizo editorial — obligatoria

Antes de declarar completa una página swiss-editorial, el viewport de apertura debe leerse visiblemente como un trabajo editorial tipográfico riguroso y alineado a la cuadrícula. Si un usuario eligió este estilo, una página minimalista genérica que carece de contraste de escala dramática y reglas estructurales es un FRACASO.

Una implementación exitosa de swiss-editorial demuestra todos los siguientes aspectos:

1. Contraste Extremo de Escala Tipográfica: Un contraste decisivo e incomprometido entre titulares grotescos masivos (48–72px escritorio / 32–44px móvil, tracking ajustado) y cuerpo de texto disciplinado (16px, altura de línea 1.55), con etiquetas de sección en mayúsculas con tracking (letter-spacing: 0.08em).
2. Líneas Divisorias Finas Horizontales Estructurales: Las secciones de contenido, los límites de columna y los encabezados de metadatos están demarcados por reglas limpias de 1px sólidas (border-top: 1px solid #111111), estableciendo estantes visuales claros.
3. Jerarquía de Sección Numerada: Numeración de índice editorial distintiva (01, 02, 03) colocada arriba o al lado de los bloques de artículo principales, creando anclas visuales escaneables.
4. Alineación Rigurosa de Cuadrícula Multicolumna: El diseño se adhiere estrictamente a una cuadrícula de escritorio de 12 columnas con canalizaciones y márgenes asimétricos generosos. El contenido nunca flota libremente sin anclaje a la cuadrícula.
5. Base Monocromática + 1 Acento de Señal de Alto Impacto: El diseño permanece estrictamente monocromático (negro, blanco roto, gris papel) con exactamente un acento de señal deliberado (Rojo Suizo #E3000F o Azul Klein #002FA7) aplicado con moderación a enlaces activos, etiquetas de índice o CTA primarios.

Prueba de primer viewport: En una captura de pantalla de escritorio, identifica la escala masiva del titular, las reglas divisorias estructurales de 1px, los marcadores de sección numerados y la cuadrícula asimétrica deliberada sin leer el título de la página. Si parece una plantilla de blog estándar, eleva la escala tipográfica y las reglas de cuadrícula.

Excepción tipográfica explícita swiss editorial — se requiere escala dramática

Anulación específica de swiss-editorial: La precaución universal anti-slop contra tamaños de fuente excesivos o espacio vacío NO DEBE interpretarse como una prohibición de titulares grandes de visualización (48–72px) o espacios en blanco generosos aquí. En la Tipografía Suiza (Josef Müller-Brockmann, Max Bill), el espacio negativo activo y el contraste de escala audaz son los materiales estructurales principales, reemplazando gráficos decorativos o sombras.

• Tratamientos tipográficos permitidos: Escala de visualización masiva (hasta 72px), tipografía de índice numerada, bordes estructurales finos, metadatos en mayúsculas con tracking y enlaces de acento único de alto impacto.
• Límite anti-slop: No pegues citas destacadas flotantes aleatorias sin contexto editorial, números de emisión de publicación falsos o titulares sobredimensionados que desplazan el contenido legible real.
• Interpretación anti-slop: Evalúa los diseños suizos por disciplina de cuadrícula, ritmo tipográfico y claridad de la información, no por tratar de llenar cada centímetro cuadrado con tarjetas. El espacio en blanco que dirige el enfoque es diseño auténtico.

Tipografía y escritura

Grotesk sans-serif objetiva: Helvetica Neue, Neue Haas Grotesk, Arial, Inter o system sans. Titulares: 48–72 px escritorio (peso 700–800, letter-spacing: -0.03em); subtítulos: 24–32 px; cuerpo: 16–18 px (altura de línea 1.55–1.65); números de índice y leyendas: 12–14 px mayúsculas (letter-spacing: 0.08em).

Dirección de color

• Modo Claro (Papel Blanco Nítido de Galería):
  • Base del Lienzo: Blanco papel (#FFFFFF o blanco cálido de galería #FBFBFA).
  • Tinta / Tipografía: Negro obsidiana profundo (#111111).
  • Reglas Divisorias: Trazo fino sólido (#111111 o #D1D5DB).
  • Gris Secundario: Neutral editorial (#6B7280).
• Modo Oscuro (Monolito Oscuro Dramático):
  • Base del Lienzo: Lienzo obsidiana oscuro (#0D0D0D).
  • Tinta / Tipografía: Tipografía de visualización blanco hueso (#F5F5F5).
  • Reglas Divisorias: Regla fina blanca translúcida (rgba(255, 255, 255, 0.20) o #2A2A2A).
  • Gris Secundario: Gris piedra (#9CA3AF).
• Acento de Señal Singular: Rojo Suizo (#E3000F claro / #EF4444 oscuro) o Azul Klein Internacional (#002FA7 claro / #3B82F6 oscuro).
• Regla de Inversión de Tema: En editorial suizo, el modo oscuro/claro es una inversión de polaridad tipográfica autoritaria. En modo oscuro, el lienzo es #0D0D0D y la tipografía es #F5F5F5. Los botones primarios se invierten limpiamente (modo claro: bloque negro sólido con texto blanco; modo oscuro: bloque blanco sólido con texto negro). El texto negro sobre lienzo oscuro o texto blanco sobre lienzo blanco está estrictamente prohibido.

Diseño y geometría

Las esquinas son afiladas como navajas (0px radio de borde por defecto, hasta 2px máximo); márgenes exteriores generosos; alineación estricta a la cuadrícula de 12 columnas. Reglas horizontales estructurales de 1px enmarcan los bloques de contenido.

Superficies, profundidad, textura

Las superficies son completamente planas, sin ornamentos y nítidas como tinta. Cero sombras paralelas, cero degradados de fondo, cero desenfoque. La profundidad se comunica puramente a través de la escala tipográfica, el peso y la yuxtaposición espacial.

Anatomía de componentes e interacción

• CTA Primario Editorial: Bloque negro sólido nítido con tipografía blanca, o enlace de texto subrayado limpio con desplazamiento de trazo de 2px.
• Etiqueta de Índice Numerada: Etiqueta pequeña en mayúsculas: [ 01 / ARQUITECTURA ].
• Regla Divisoria: border-top: 1px solid #111111; padding-top: 1.5rem; margin-top: 2rem;.
• Metadatos Tabulares: Pares clave-valor de dos columnas separados por divisores finos.

Movimiento

Transiciones lineales mínimas, instantáneas o de 120–160 ms limpias. Sin rebote elástico, sin paralaje flotante. Enfócate en cambios de estado nítidos.

Receta opcional de Anime.js v4

• Decisión de movimiento: Desvanecimiento de opacidad de texto limpio o expansión de regla horizontal al hacer scroll.
• Duración inicial: 140 ms (0 = inmediato); ajusta según la tarea y la preferencia del usuario.
• Evitar: Movimiento elástico, rotaciones 3D, bamboleos juguetones.
• Dependencia: CSS/nativo por defecto. Usa Anime.js v4 solo si la interacción solicitada lo justifica. Sigue las references/motion-engine.md del Taste Engine cuando esté disponible; el skill independiente sigue los principios de movimiento reducido y sin bucle decorativo anteriores.

Redacción de UI y microcopy

Culta, concisa y articulada. Ejemplos: “Selected Works 2026”, “Index”, “Read Documentation”, “01 / Overview”. Evita jerga coloquial o entusiasmo exagerado de ventas.

Tokens iniciales (sugerencias, no un tema completo)

Token	Valor predeterminado modo claro	Valor predeterminado modo oscuro
--taste-swiss-bg	#ffffff	#0d0d0d
--taste-swiss-ink	#111111	#f5f5f5
--taste-swiss-accent	#e3000f	#ef4444
--taste-swiss-muted	#6b7280	#9ca3af
--taste-swiss-rule	1px solid #111111	1px solid rgba(255, 255, 255, 0.20)
--taste-swiss-radius	0px	0px
--taste-swiss-font-heading	'Helvetica Neue', Inter, system-ui, sans-serif	'Helvetica Neue', Inter, system-ui, sans-serif
--taste-swiss-font-body	'Helvetica Neue', Inter, system-ui, sans-serif	'Helvetica Neue', Inter, system-ui, sans-serif
--taste-swiss-motion-duration	120ms	120ms

Los tokens representan una dirección y no están garantizados para copiar y pegar en cada paleta/plataforma. Define --taste-swiss-* a nivel de proyecto, asegura el contraste de color y adapta mediante tokens de tema en lugar de dispersar valores literales.

Composición del héroe (primer viewport completo)

Cuando un portafolio/landing/página de inicio pública tiene un héroe: usa una composición de encabezado+héroe de una pantalla visible. La altura base es min-height: 100svh con respaldo de 100vh, restando el encabezado real solo cuando está en flujo normal; deja que el héroe se expanda para accesibilidad y pantallas móviles cortas. No apliques esto a paneles privados u otras pantallas de tarea; las anulaciones directas del usuario ganan. Dirección específica del estilo: Ancla la pantalla de apertura con un título de visualización masivo autoritario, numeración de sección clara y una división asimétrica de cuadrícula entre la narrativa del héroe y la navegación clave. El espacio en blanco debe sentirse deliberado y compuesto, no vacío. Consulta references/hero-layout.md del enrutador cuando esté presente. El uso independiente sigue los mismos principios de capacidad de respuesta y anti-slop.

Puerta de calidad específica del estilo

• Hacer: Verificar la alineación estricta de la cuadrícula de 12 columnas; mantener una proporción dramática de escala entre titular y cuerpo; asegurar que las reglas finas de 1px separen limpiamente las secciones; mantener el color de acento estrictamente singular; verificar el cambio de modo oscuro/claro para que la tipografía, el lienzo, las reglas finas y las acciones primarias se inviertan limpiamente sin colisiones de color (contraste mínimo 4.5:1).
• No hacer: No agregues sombras paralelas, burbujas redondeadas o degradados decorativos; no satures el espacio en blanco con chips de insignia sin sentido; evita texto gris de bajo contraste en etiquetas pequeñas; no dejes tipografía negra sobre lienzo obsidiana oscuro.
• Confirma consistencia en escritorio y móvil; foco de teclado visible (:focus-visible); estados de carga, vacío, deshabilitado, error y éxito; comportamiento de movimiento reducido (prefers-reduced-motion).
• No inyectes suposiciones específicas de estilo en proyectos no relacionados. Al combinar estilos, nombra explícitamente el estilo principal y las características tomadas prestadas.

Puerta anti-slop universal (autocontenida)

Cada elemento debe ganarse su lugar. Contenido antes que decoración. No decore la incertidumbre. No inventes balances, métricas, testimonios, usuarios, logotipos, aprobación, estado verificado/en vivo/en línea, actividad falsa o confirmaciones de éxito; usa estados vacíos/de carga/error honestos en su lugar. Los datos demo son aceptables solo si se solicitan y están etiquetados visiblemente.

No agregues capas decorativas de tarjeta dentro de tarjeta: una superficie anidada debe representar una interacción o un límite de información distinto. Evita cuadrículas de 3 características generadas automáticamente, paneles de 4 estadísticas, afirmaciones falsas de héroe, gráficos sin propósito, spam de insignias/chips/iconos, arte decorativo no relacionado y bucles aleatorios solo para llenar el viewport. Prefiere agrupar con tipografía, espaciado, alineación y divisores. Los pares iguales necesitan un equilibrio visual intencional.

Redacción anti-slop: sin afirmaciones genéricas como "Desbloquea tu potencial", "Experimenta el futuro", "Potencia tu flujo de trabajo", "sin problemas" o equivalentes traducidos. Los encabezados deben comunicar contenido real, los CTA deben nombrar la acción y el texto vacío/error/éxito debe describir estados reales y próximos pasos. Evita urgencia falsa, cifras inventadas, exageraciones vagas de IA, emojis gratuitos y muros de mayúsculas inaccesibles. Adapta el redactado a este estilo y al idioma del usuario sin cambiar la verdad.

Integridad de contraste de tema y modo: Cuando un usuario solicita modo oscuro o modo claro (o construye un selector de tema), los colores de fondo y primer plano DEBEN invertirse en pares sincronizados en todas las superficies, texto, bordes, entradas e insignias semánticas. Nunca dejes texto negro sobre fondo oscuro, texto blanco sobre fondo blanco o píldoras de estado de bajo contraste ilegibles. Todos los estados deben cumplir con el contraste WCAG AA (mínimo 4.5:1 para texto normal/cuerpo, 3:1 para titulares grandes y límites interactivos).

Responsive y movimiento: compón para móvil deliberadamente, verifica etiquetas largas, estados de foco y contraste accesible; sin recorte de texto para ajustarse a un diseño moderno. Estático por defecto; usa movimiento para interacciones significativas, respeta las preferencias de movimiento reducido, evita decoraciones de rebote/flotante/pulsante sin un estado real.

Bloqueo de finalización de hallazgos críticos/altos: estado/datos fabricados, acciones rotas, controles inaccesibles/recortados, copy engañoso, colisiones de contraste de tema o fallo móvil significativo deben corregirse. Informa lo que realmente se verificó; no afirmes pruebas que no se ejecutaron.

No es un veto estético: colores expresivos, sombras, degradados, diseños de tarjetas o tratamientos decorativos son legítimos cuando son partes intencionales de la estética seleccionada y pasan las comprobaciones de usabilidad. No impongas silenciosamente el minimalismo.

Anti-slop: específico del estilo

Autoridad tipográfica, no minimalismo genérico.

• Rechazar: Titulares débiles, envoltorios de tarjeta decorativos alrededor del texto, múltiples colores de acento en competencia, leyendas pequeñas de bajo contraste y colisiones de tema (como tipografía negra que permanece en un lienzo editorial oscuro).
• En su lugar: Confía en el contraste de escala, la alineación precisa de columnas, la señal de acento singular y la inversión de polaridad oscuro/claro sincronizada.
• Verificación de copy: El texto debe leerse como una publicación editorial—articulado, estructurado e intencional.
• Auditar: Ejecutar propósito anti-slop universal, verdad, superficie anidada, redacción,

…

[truncado para traducción]