Guía de estilo

Esta guía de estilo ofrece una visión general completa del sistema de diseño visual del sitio web de la Fundación contra el Cáncer Testicular, centrándose en los colores y la tipografía.

Paleta de colores

La paleta de colores es un componente fundamental de la identidad de marca, ya que crea una imagen coherente y reconocible. La paleta se compone de colores primarios, secundarios y de acento que se utilizan estratégicamente en todo el sitio web.

Colores primarios

Los colores primarios son los colores más utilizados en el diseño y representan la identidad central de la marca.

Cian primario/Turquesa

HEX #00B4DB
RGB rgb(0, 180, 216)

Color principal de la marca, utilizado para fondos, botones y elementos visuales clave.

Negro

HEX #000000
RGB rgb(0, 0, 0)

Texto del cuerpo, encabezados sobre fondos claros y pie de página del sitio web.

Blanco

HEX #FFFFFF
RGB rgb(255, 255, 255)

Texto del cuerpo sobre fondos oscuros, fondos para secciones de contenido.

Colores secundarios y de acento

Los colores secundarios y de acento se utilizan para complementar los colores primarios y llamar la atención sobre elementos específicos, como botones, enlaces y secciones informativas.

Azul marino oscuro

HEX #0F172A
RGB rgb(15, 23, 42)

Fondos para tarjetas estadísticas y otras secciones destacadas.

Gris pizarra

HEX #64748B
RGB rgb(100, 116, 139)

Botones secundarios y elementos de la interfaz de usuario.

Gris claro

HEX #F1F5F9
RGB rgb(241, 245, 249)

Fondos para tarjetas y módulos de contenido para crear una separación visual.

Gris medio

HEX #C1C1C1
RGB rgb(193, 193, 193)

Bordes y elementos sutiles de la interfaz de usuario.

Blanco roto

HEX #EBEEF0
RGB rgb(235, 238, 240)

Sutiles variaciones en el fondo.

Tipografía

El sitio web emplea una combinación de fuente serif para los encabezados y fuente sans-serif para el cuerpo del texto, creando una jerarquía tipográfica clara y legible.

DM Serif Pantalla

Serif • Encabezados

Aa Bb Cc
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

Inter

Sans-Serif • Texto del cuerpo

Aa Bb Cc
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

Escala tipográfica

Los siguientes ejemplos describen los tamaños y grosores de fuente para diversos elementos de texto del sitio web.

TÍTULO 1 (H1)
Fuente DM Serif Display
Tamaño 62 píxeles
Peso 400

Combatiendo el Cáncer Testicular Mediante la Detección Temprana

TÍTULO 2 (H2)
Fuente DM Serif Display
Tamaño 40 píxeles - 48 píxeles
Peso 400 - 800

Nuestra Misión: Salvar Vidas a Través de la Educación

TÍTULO 3 (H3)
Fuente DM Serif Display
Tamaño 28 píxeles
Peso 400

Aprenda a Realizarse un Autoexamen Testicular

TEXTO DEL CUERPO (P)
Fuente Inter
Tamaño 17,5 píxeles
Peso 400

Fundada en 2009, la Fundación de Cáncer Testicular es una organización sin fines de lucro 501(c)(3) y el único grupo de cáncer testicular con personal a tiempo completo en el país. Somos un equipo de sobrevivientes, cuidadores y defensores apasionados por aumentar la educación y la concienciación.