Kadeka-SI/web-design-base-v1

¿Qué hace web-design-base-v1?

Estándar. Cada sitio parece dirigido artísticamente para su propio tema, no puede confundirse con una plantilla, es técnicamente correcto en cada detalle y utiliza la tipografía como su herramienta principal.

Método. Lee el tema, nombra una idea visual concreta, construye el sistema, planifica el contenido y luego programa. El sistema existe antes de la primera línea de código, porque las decisiones tomadas mientras se programa tienden a derivar hacia valores predeterminados.

0. Cómo leer este skill

Nivel	Significado
Puerta	Se verifica al final. Una página que falla una puerta no está terminada.
DEBE / NO DEBE	Ley por defecto. Desvía solo cuando el usuario lo solicite; dilo en una frase.
DEBERÍA	Valor predeterminado sólido. Desvía silenciosamente cuando el tema lo requiera.
PUEDE	Permitido cuando sirve al tema.

Prioridad: Puertas 1 y 2 (accesibilidad) → solicitud explícita del usuario → DEBE → DEBERÍA → PUEDE. Si el usuario solicita algo que rompe una puerta, construye la versión más cercana que la pase y di lo que cambiaste. Dentro de un mismo nivel, gana la regla más específica.

Los ejemplos son demostraciones, no plantillas. Cada paleta, combinación de fuentes, horario de ferri y valor de código a continuación muestra el formato de una buena respuesta. Copiar uno sin cambios en un tema no relacionado es el fallo más común de este skill. Si eliges una paleta o combinación listada tal cual, justifícalo en el plan con un hecho sobre el tema.

1. Cinco puertas

1. Primera pintura y sin JS. El titular principal es visible desde el primer fotograma: sin desplazar, sin recortar (incluyendo puntos de diéresis en Ä Ö Ü), nunca animado. Con JavaScript desactivado o movimiento reducido activado, la página está completa.
2. Contraste. Texto del cuerpo ≥ 7:1, texto atenuado y acento como texto ≥ 4.5:1, titulares grandes ≥ 4.5:1, bordes estructurales, anillos de enfoque y partes de la interfaz ≥ 3:1. Calculado para cada par de texto/superficie realmente utilizado, no asumido (§6).
3. Disciplina de paleta. Fondo, tinta, un acento, más tintes de fondo/tinta. Sin degradados, brillo, glassmorphism o sombras coloreadas.
4. Completitud. Cada sección tiene sustancia real (§8), cada enlace va a algún lugar intencionado, cada estado requerido existe.
5. Especificidad. Si la paleta y el tipo pudieran trasladarse a un tema diferente sin cambios, el trabajo no está terminado.

2. Elegir el modo

Modo	Úsalo para	Reglas que aplican
Showcase	landing, portafolio, escaparate de tienda, editorial, evento, corporativo	todo excepto §12
Product UI	dashboard, admin, herramienta, app, flujos con muchos formularios	§1–§6, §10, §11, §12; omitir arquetipos de héroe y el pool de secciones
Docs	documentación, manuales, fichas de modelo	Tipografía y color de Showcase, estructura de Product UI (TOC, código, estados)
Auditar	"revisar/mejorar mi página"	enumerar hallazgos, parchear solo lo que está roto, mantener la identidad existente
Iterar	"cambiar X"	cambiar el token o regla nombrado y sus dependientes directos solamente; sin refactorizaciones silenciosas

Cuando el usuario proporciona una marca (colores, logotipo, fuentes), la marca es la paleta y el tipo. Calcula su contraste. Si el acento de la marca falla 4.5:1 como texto, úsalo solo para elementos grandes o no textuales y añade una variante de texto más oscura del mismo tono.

3. Método para construir

Escribe el plan antes del código: 12–16 líneas en el idioma del usuario (Iterar: un diff de 3 líneas).

3.1 Lee el tema. ¿Qué debe hacer o entender el visitante? ¿Cómo se ve, suena y siente el tema en su lugar real (puerto, fundición, laboratorio, cocina, tribunal, archivo)? ¿Qué única cosa debe recordar?

3.2 Nombra la idea visual. Una frase que nombre un objeto, material o convención concreta del tema. Ejemplo para una línea de ferri: "un horario de salida impreso: numerales condensados y pesados, filas con reglas, el tablero como héroe." Los adjetivos abstractos ("moderno, limpio, audaz") y las listas de colores no son ideas. Prueba de originalidad: nombra tres cosas que un sitio genérico en esta categoría tiene y confirma que este diseño no tiene ninguna de ellas.

3.3 Construye el sistema como una tabla en el plan:

Campo	Valor
Paleta	bg, tinta, acento (hex), el material del que recibe su nombre, ratios calculados por par usado
Tipo	cara display + texto, razón vinculada al tema, palabra más larga y su tamaño móvil
Héroe	arquetipo (§7.1) + justificación de una línea
Diseño	lógica base (§7.2) y cómo las secciones la varían
Movimiento	un patrón de firma + patrón de apoyo opcional
Secciones	ordenadas, cada una con su trabajo y forma
Momento de firma	la única cosa que un visitante recuerda

3.4 Planifica el contenido. Enumera cada sección con hechos concretos, pasos, nombres, cifras, fechas, precios. El contenido inventado está permitido si es internamente consistente y está marcado (§8.3).

4. Fundamentos

4.1 La cabecera es parte del diseño

<!doctype html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Fähre Norddeich: Abfahrten und Frachtraten</title>
  <meta name="description" content="Abfahrtsplan, Frachtraten und Kontakt der Fährlinie Norddeich–Borkum.">
  <meta name="theme-color" content="#F6F1E6">
  <meta property="og:title" content="Fähre Norddeich: Abfahrten und Frachtraten">
  <meta property="og:description" content="Abfahrtsplan, Frachtraten und Kontakt.">
  <meta property="og:locale" content="es_ES">
  <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' fill='%23C0430B'/%3E%3C/svg%3E">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@700;800&family=Public+Sans:wght@400;500;600&display=swap">
  <script>
    /* Puerta de movimiento: los estados iniciales ocultos solo existen si se establece esta clase (§9) */
    if (!matchMedia("(prefers-reduced-motion: reduce)").matches && "IntersectionObserver" in window)
      document.documentElement.classList.add("js-motion");
  </script>
  <style>/* §4.2 base, §4.3 tokens, luego componentes */</style>
</head>

• DEBE: lang coincide con el texto, title y description son específicos, la URL de la fuente coincide con las familias elegidas en §5 y termina en display=swap, un favicon está presente (evita un 404 y se ve terminado).
• NO DEBE: cabecera vacía, lang="en" en texto en español, fuentes sin display=swap.
• Privacidad (UE/ES). Google Fonts cargadas desde los servidores de Google transmite las IPs de los visitantes; los tribunales alemanes han tratado esto como un problema de GDPR. Para un prototipo es aceptable. Para producción, di en el informe que las fuentes deben estar autoalojadas (archivos woff2, @font-face). Si el entorno bloquea fuentes externas, las pilas de respaldo (§4.5) deben seguir viéndose diseñadas.

4.2 CSS base

Comienza cada página con esta base. Evita la tipografía desplazada, recortada y rota por herencia.

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; scroll-padding-top: var(--header-h, 0px); }
body {
  background: var(--bg); color: var(--ink);
  font-family: var(--font-text); font-size: 1.0625rem; line-height: 1.6;
  font-synthesis: none;              /* sin negrita/cursiva falsa si un peso no está cargado */
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure, blockquote, table, form { margin: 0; }
ul, ol { padding-inline-start: 1.25em; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
img, svg, video, canvas { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration-thickness: 0.08em; text-underline-offset: 0.2em; }  /* los enlaces siguen siendo reconocibles */
nav a, .btn { text-decoration: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
[id] { scroll-margin-top: var(--header-h, 0px); }
table { border-collapse: collapse; }
h1, h2, h3 { text-wrap: balance; }
p, li { text-wrap: pretty; }
::selection { background: var(--accent); color: var(--on-accent); }
.container { width: 100%; max-width: 90rem; margin-inline: auto; padding-inline: var(--gutter); }
.measure { max-width: var(--measure); }
.skip-link { position: absolute; inset-inline-start: -9999px; }
.skip-link:focus { inset-inline-start: var(--gutter); inset-block-start: 0.75rem; z-index: 20;
  background: var(--accent); color: var(--on-accent); padding: 0.75rem 1rem; }

• NO DEBE: 100vw para contenido, overflow: hidden para recortar tipo, márgenes negativos o transform en el titular principal. Acepta el lado natural de la fuente en lugar de corregirlo ópticamente.
• DEBE poner todo el texto dentro de .container. El titular principal comparte el borde izquierdo del texto del cuerpo a menos que se nombre un diseño compensado en el plan.
• DEBE dimensionar los héroes de altura completa con min-height: 100vh; min-height: 100svh; (la línea svh gana donde sea compatible, por lo que las barras del navegador móvil no cortan el héroe).
• El texto del cuerpo usa rem, nunca px fijos, para que la configuración de fuente del navegador del visitante siga funcionando.

4.3 Tokens

Cada valor de color, fuente, tamaño y espaciado vive en un bloque. Reemplaza los valores de ejemplo con tu propia paleta (§6).

:root {
  color-scheme: light;                     /* "dark" para paletas oscuras: los controles de formulario y barras de desplazamiento siguen */
  --bg: #F6F1E6;  --bg-soft: #ECE3D3;
  --ink: #1C1A17; --ink-muted: #635A4C;    /* muted: solo etiquetas y leyendas */
  --accent: #C0430B; --on-accent: #F6F1E6; /* texto sobre rellenos de acento */
  --line: #857A66;                         /* reglas estructurales: ≥ 3:1 sobre bg y bg-soft */
  --line-soft: #C9BEA8;                    /* solo líneas decorativas finas */
  --focus: var(--accent);                  /* reasignado dentro de bandas invertidas */
  --font-display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --font-text: "Public Sans", "Segoe UI", sans-serif;
  --step-hero: clamp(3.25rem, 1rem + 11vw, 13rem);
  --step-h2:   clamp(2.25rem, 1rem + 5vw, 6rem);
  --step-label: 0.8125rem;
  --space-xs: 0.5rem;  --space-s: 1rem;
  --space-m: clamp(1.5rem, 1rem + 2vw, 3rem);
  --space-l: clamp(3rem, 2rem + 4vw, 6.5rem);
  --space-xl: clamp(5rem, 3rem + 8vw, 11rem);
  --gutter: clamp(1.25rem, 0.5rem + 3vw, 4rem);
  --measure: 66ch;
  --header-h: 0px;                         /* establecido a la altura del encabezado fijo, si no 0 */
  --rule: 1px solid var(--line);
}

DEBE: cada valor en las reglas proviene de estos tokens. NO DEBE: hex en línea en las reglas, o paletas predeterminadas de framework (gray-500, slate-200). Los tamaños fluidos mezclan rem y vw para que el zoom del navegador y la configuración de fuente sigan escalándolos (el vw puro ignora el zoom).

4.4 Idioma y configuración regional

• El texto está en el idioma de la solicitud. lang coincide. El tratamiento de tú/usted se mantiene consistente.
• Español: hyphens: auto en columnas estrechas (necesita lang correcto); el subconjunto de fuente DEBE cubrir caracteres acentuados y especiales como áéíóúüñ¿¡. Comillas tipográficas («…»), sin palabras de marketing en inglés en una página en español,   entre número y unidad (12 kg, 9:30 h), fechas como 1 de noviembre de 2026.
• Los sitios en español para negocios necesitan enlaces de Aviso Legal y Política de Privacidad en el pie de página (las secciones demo en página son válidas para un prototipo). Desde 2025, el BFSG hace que la accesibilidad sea un deber legal para muchos servicios de comercio electrónico orientados al consumidor; WCAG 2.1 AA es el mínimo, y las puertas de este skill ya lo superan.

4.5 Fuentes que sobreviven una falla de red

Elige respaldos de la misma clase (condensado → "Arial Narrow"; serifa → Georgia; grotesk → system-ui). Los dos respaldos DEBEN permanecer visiblemente distintos, para que la página mantenga su jerarquía cuando las fuentes fallen. Carga solo los pesos que uses. Los pesos utilizados para display DEBEN existir en la familia cargada (ver §5).

4.6 Puntos de interrupción y 375 px

Mobile-first. Puntos de interrupción: 480, 760, 1024, 1320 px. A 375 px: sin desplazamiento horizontal, titular principal ≤ 5 líneas, la palabra más larga cabe, objetivos táctiles ≥ 44 × 44 px, encabezados fijos no cubren anclas (--header-h), cada diseño de dos columnas tiene una forma móvil diseñada.

Regla de la palabra más larga. Ancho disponible ≈ 375 − 2 × 19 ≈ 335 px. Tamaño máximo del héroe en px ≈ 335 ÷ (letras en la palabra más larga × factor de anchura). Factores de anchura: condensado 0.42, serifa 0.52, grotesk 0.58, expandido 0.68. Establece el mínimo clamp() a ese valor. "Frachtabfertigung" (17 letras) en una cara condensada permite ≈ 47 px, por lo que el mínimo de 52 px anterior se desbordaría: baja el mínimo o añade guiones suaves (Fracht­abfertigung). Nunca dejes que un compuesto alemán largo fuerce overflow-wrap: anywhere en el héroe.

5. Tipografía: la herramienta principal

Usa exactamente dos familias: una display, una texto.

Display	Texto	Encaja
Big Shoulders Display	Public Sans	horarios, logística, flete, deporte
Barlow Condensed	Barlow	transporte, señalización, clubes, eventos
Fraunces	Karla	comida, artesanía, impresión, hostelería
Instrument Serif (solo 400)	Work Sans	editorial, moda, arquitectura
Newsreader	Libre Franklin	legal, institucional, investigación
Familjen Grotesk	Source Serif 4	revistas, cultura, ONGs
IBM Plex Mono (display)	IBM Plex Sans	laboratorios, herramientas, datos, documentación
Archivo (eje de ancho 112–125)	Spline Sans	puertos, industria, fichas de producto
Anton (solo 400)	Barlow	campañas, lugares, carteles
Bodoni Moda	Karla	bienes de lujo, galerías, subastas

Estos son puntos de partida. Elige por tema; aterrizar en la fila 1 para un tema no logístico significa que elegiste por posición, no por tema. Verifica los ejes y pesos reales de la fuente: Instrument Serif y Anton tienen un solo peso, por lo que "pesado" no está disponible y font-synthesis: none evita que el navegador lo falsifique; Archivo necesita wdth en la URL (Archivo:wdth,[email protected],700..900) y font-stretch en CSS.

NO DEBE usar Inter, Roboto, Arial, Poppins, Playfair Display, Lora o Merriweather como par de identidad. NO DEBE usar una sola familia para todo. Monospace como display en...