El sitio
Manual de marca
El sistema visual del club: qué se usa, dónde y por qué. Escrito para que una pieza nueva se parezca a las que ya existen.
El registro es el de un club náutico clásico europeo: azul marino profundo y latón, ángulos rectos, filetes finos, serif para los títulos y versalitas espaciadas para los rótulos. Sobriedad antes que efectismo.
Los valores de esta página se leen de la misma definición que usa el sitio, y los contrastes están medidos, no transcritos. Si alguien cambia un tono en la hoja de estilos, aquí cambia también.
Identidad
El escudo
La única marca gráfica del club. No se recolorea, no se rota y no se le cambian las proporciones.
Cómo se usa
Sobre fondo marino, que es donde vive en la cabecera y el pie. Sobre fondo claro pierde el contorno.
Se acompaña siempre del nombre en texto —Club de Yates sobre Quintero en versalitas—, nunca del nombre rasterizado dentro de una imagen.
Aire mínimo
Alrededor del escudo se deja al menos la altura de su propia ancla libre de texto y de filetes.
Identidad
El gallardete
La enseña que el club iza en sus embarcaciones. Se representa en horizontal, con la punta hacia la derecha.
Cómo se compone
Triángulo dividido por su eje: azul en la mitad superior y rojo en la inferior, el mismo orden que el escudo. Una estrella blanca de cinco puntas se centra sobre la división.
La franja blanca del borde izquierdo es la vaina por donde pasa la driza. Forma parte de la pieza: no se recorta al reproducirla.
Cómo se reproduce
Dibujado, nunca fotografiado. Así conserva el filo a cualquier tamaño y sus colores son exactamente los del sistema: --nv-700 y --rojo.
No se le agrega texto, ni contorno, ni sombra, ni se altera la proporción del triángulo.
Color
Los tres latones
Es la regla que más se rompe, así que va primero: no son intercambiables. Cada uno existe porque el anterior no llegaba al contraste que hacía falta.
Filetes, bordes e iconos. Nunca texto: como grafismo le basta 3:1, pero no llega al 4,5:1 que exige el texto.
La versión oscurecida, y la única que puede llevar texto sobre fondo claro: rótulos, enlaces en hover, numeración de listas.
Texto y enlaces sobre fondo marino. Sobre blanco desaparece; sobre el azul es el que más respira.
El latón es el acento del club: se usa poco y en piezas pequeñas. Una página con mucho oro deja de parecer un club náutico y empieza a parecer un anuncio.
Color
Azules
Del portón del club y del escudo. Sostienen la cabecera, el pie y los títulos.
Color
Neutros y rojo
El rojo del escudo está reservado: casi nunca aparece en la interfaz.
Texto corrido en --tinta sobre blanco: 17,77:1. Texto secundario en --gris: 6,57:1. Blanco sobre --nv-900: 17,64:1.
Tipografía
Dos familias, ninguna descargada
No hay fuentes externas ni CDN: el sitio usa Georgia y la tipografía de sistema. Nada que cargar, nada que falle.
Aprende a navegar a vela
--font-display · Georgia, «Iowan Old Style», «Times New Roman», serif
Títulos, cifras destacadas y el nombre del club. Nunca para texto corrido largo ni para interfaz.
Elige un día disponible y recibiremos tu solicitud para gestionarla y confirmarte.
--font-ui · system-ui, «Segoe UI», Roboto, «Helvetica Neue», Arial, sans-serif
Botones, formularios, menús, tablas y rótulos. Todo lo que se opera, no lo que se lee.
Gobierno del club
.eyebrow · versalitas espaciadas, en --oro-texto
El rótulo que antecede a cada título de sección. Espaciado amplio y cuerpo pequeño: es señalética, no lectura.
Medida
Espacio y geometría
Escala de base 4. Las barras están dibujadas a tamaño real.
- --s-14px
- --s-28px
- --s-312px
- --s-416px
- --s-524px
- --s-632px
- --s-748px
- --s-864px
- --s-996px
Ángulos rectos
Los radios son de 2 y 3 píxeles (--r-sm, --r-md, --r-lg). Casi nulos, a propósito: la esquina redondeada es lenguaje de aplicación, no de club.
Ancho de lectura
El texto corrido se limita a 68 caracteres (--ancho-texto). El contenedor general llega a 1180 px.
Sombras
Tres niveles, todos muy contenidos. Una sombra marcada delata la plantilla comprada.
Componentes
Piezas de uso corriente
Las que aparecen en casi todas las páginas.
.aviso — la advertencia que el visitante debe leer antes de actuar.
- .ficha
- Datos en pares. Sirve a página completa y en columna estrecha.
- Contenedores
- Usa @container, no @media: vive en anchos distintos.
Reglas
Lo que no se negocia
Contraste AA en todo
4,5:1 para texto normal, 3:1 para grafismo. Un h1 por página, alt en todas las imágenes, foco visible, y aviso para lectores de pantalla en los enlaces que abren pestaña nueva.
Nada de texto dentro de imágenes
El sitio venía de una herramienta que rasterizaba el contenido en PNG. Se recuperó completo y hoy es texto real: se puede buscar, copiar, traducir y leer en voz alta. No se retrocede.
Los datos llevan su fecha
Las cifras y las nóminas se publican fechadas —«Directorio vigente desde agosto de 2026»—. Un dato fechado envejece; uno sin fecha miente.
Ninguna cifra inventada
Si un número no se puede verificar, se omite. Nunca se arrastra el valor del año pasado porque quedaba bien en el hueco.