Referencia para diseño y desarrollo de todo el sitio, actualizada con el
Home v3 aprobado por CYDSA. Medidas en px a 1x.
Tokens: cydsa-tokens.json
7.7:1
profundo
nav activo
todo el sitio
Reglas de contraste: ámbar #F5A623 sobre azul #1347C4 o marino solo en texto de 24 px o más (3.8:1), como las cifras. Sobre blanco el ámbar no se lee (1.9:1): las cifras van dentro de una
tarjeta azul o en ámbar oscuro #C77F0A (3:1, solo tamaño grande). El gris #6A7A99 no alcanza 4.5:1 en texto pequeño; usar #5B6B8C.
Google Fonts, gratuita y disponible en Figma. Pesos: 300 · 400 · 500 · 600 · 700 · 800.
Display · hero del Home
104 / 100 · Bold 700 · −4%
Móvil 52 / 54
H1 · título de subpágina
64 / 66 · Bold 700 · −3%
Móvil 40 / 42
H2 · título de sección
48 / 52 · Bold 700 · −2.5%
Móvil 32 / 36
H3 · subsección
40 / 44 · Bold 700 · −2%
Móvil 28 / 32
H4 · título de tarjeta
22 / 28 · Bold 700
18 / 24 · Bold 700
Overline · etiqueta de sección
13 / 16 · SemiBold 600 · +12% ·
MAYÚS
Hero: +14%, ámbar, línea de 32 px
Lead · intro de hero
19 / 30 · Light 300
Móvil 17 / 26
Acceso al portal, documentos y canales para hacer negocios con
CYDSA.
Statement · párrafo destacado
34 / 46 · Regular 400 · −1%
Énfasis en Bold 700 · Móvil 24 / 34
con nuestros proveedores.
Body L · párrafo de sección
17 / 28 · Regular 400
Móvil 16 / 26
En CYDSA trabajamos para establecer vínculos sólidos con nuestros
proveedores, basados en el respeto y la colaboración.
15 / 24 · Regular 400
Small / Caption
14 / 22 · 13 / 18 · Regular 400
Cifras grandes
60 / 60 · SemiBold 600 · −3%
Precio de la acción 80 / 80 · 600
Ámbar sobre azul · móvil 44
SemiBold en lugar de Bold: tiene
presencia sin verse pesado. Sobre
blanco, ámbar oscuro.
Botón / Nav
Botón 15 / 20 · Bold 700
Nav 13 / 16 · SemiBold 600
12 columnas · gutter 24
Contenedor máx. 1280 · margen 40
Área de contenido 1200 (columna 78)
Margen 32
Tarjetas en 2 columnas
4 columnas · gutter 16
Margen 16
Todo apila a 1 columna
≥1280 · 1024 · 768 · <768
Padding vertical de sección
128 desktop · 80 tablet · 56 móvil
24 (16 en tarjetas pequeñas)
Hero y etiquetas
Hero: 88 arriba / 120–168 abajo · Columna de
etiqueta “01 —”: 200 de ancho, gap 64
Usa solo estos valores en padding, gap y márgenes (auto layout de Figma).
fotos internas
del tiempo
ancho
Líneas
Divisor 1px #DCE4F2 · sobre azul #3E6CDA
Botón outline 1.5px · tarjeta destacada 1.5px #1347C4
Elevación 1
Y 24 · Blur 60 · #0E2552 al 14%
Tarjeta de negocios que monta sobre el hero
Elevación 2 · Y 20 · Blur 50 · al 8%
Tarjetas blancas sobre el fondo de triángulos
Pill (radio 999) en todo el sitio · padding 16 × 26 en hero, 14
× 22 en secciones · enlaces externos con ↗ · hover: marino
#0A1C40 / ámbar −8% de luz
Chip: 10 × 16, 14 Bold · página activa en el menú: texto bold
con subrayado ámbar de 2 px
Fondo #F2F5FA (o blanco sobre gris) · radio 24 · padding
28 / 32 abajo · 3 por fila (min. 320)
Azul #1347C4 · radio 24 · padding 40 × 12 · cifras 60
SemiBold ámbar alineadas a la izquierda · etiqueta 14
#DCE6FB · divisores blancos al 28%
Electricidad y Vapor
C.V.
Siempre nombre largo + razón social · línea superior de 4
px: azul claro #7FA2F0 para Químicas, ámbar para
Energéticos · 5 por fila dentro de la tarjeta blanca que
sube sobre el hero
Fondo marino al 72% con borde blanco al 14% ·
separadores verticales · chevron ámbar en menús
desplegables · ↗ para sitios externos · “Únete al equipo”
en ámbar como acción destacada
impulsa
industrias
Video a pantalla completa, sin sonido, con capa marino →
azul · H1 abajo a la izquierda · botón de pausa obligatorio
(accesibilidad) · alto mínimo 860 · espacio inferior 236
para la tarjeta de negocios
Banda a todo el ancho · triángulos facetados en blanco, #F4F7FB, #EEF2F8, #E3E9F3 y #DCE4F2 con aristas blancas de 1.5 px · dos facetas en azul al 5–7% y brillo azul suave arriba a la derecha · sin
acentos ámbar · exportar como SVG o WebP
Fotografía
Plantas, operación y colaboradores reales de CYDSA.
Evitar fotos de stock genéricas. Luz natural, tonos fríos
que conversen con el azul.
Proporciones
Hero 560 × 380 (chevron) · Tarjeta 16:9 aprox. (alto 200) ·
Miniatura 96 × 72 · Galería 4:5 · Exportar a 2x en WebP.
Íconos
Lineales, trazo 1.8–2 px, retícula 24, color #1347C4
(ámbar sobre marino). Sugerido: Lucide (plugin gratuito
en Figma). Sin emojis.
El movimiento confirma que algo es interactivo y responde a la persona. Solo se mueven enlaces y
botones; los bloques informativos quedan quietos. Todo se desactiva con «Reducir movimiento» del
sistema operativo.
Color de enlaces, foco de campos.
Base · 260 ms
Hover de botones y tarjetas, flechas,
subrayado del menú.
Lento · 700 ms
Entrada del hero (escalonada cada 80
ms) y tarjeta superpuesta.
cubic-bezier(.2, .7, .2, 1): sale rápido y
se asienta suave.
Botones pill: suben 2 px y ganan sombra; al presionar regresan.
Tarjetas enlace: suben 4 px, sombra suave y borde azul; la flecha avanza 4 px.
Tarjetas de negocio sobre navy: se invierten a blanco (Divisiones Operativas).
Menú principal: subrayado ámbar que crece de izquierda a derecha.
Foco con teclado: contorno ámbar de 3 px en todo elemento interactivo.
Para desarrollo: aparición suave de secciones al hacer scroll (IntersectionObserver, una sola vez, 24 px / 700 ms).
Marino profundo #0E2552 como base. Texto
principal, héroes, bloques oscuros. Footer en
#0A1C40.
Botones pill. Primario ámbar con texto marino;
secundario marino; enlaces subrayados.
Secciones numeradas. Etiqueta “01 — Nombre” en
columna izquierda de 200 px.
Cifras en SemiBold 600 y ámbar. Dentro de tarjeta
azul; sobre blanco, ámbar oscuro #C77F0A.
Estructura común. Barra superior BMV, menú en
pastilla y footer como mapa de sitio. El Home abre
con video; las páginas internas usan pantalla dividida
(imagen + información), como Inversionistas.
Logo oficial. Versión blanca en SVG, 40 px de alto en
el menú y 56 px en el footer. Falta la versión a color
para fondos claros.