Referencia de marca

hybridathlete.guide

Todo lo que aparece a continuación se lee desde design/tokens.json en el momento de la compilación. Ese archivo se genera a partir de src/styles/global.css. Si algún valor aquí parece incorrecto, corrige el CSS y vuelve a generarlo: no edites el JSON ni esta página.

Color

Formato de objeto DTCG 2025.10. Cada valor lleva colorSpace y components; el código hexadecimal es una forma práctica, no la fuente de referencia.

bg #ffffff srgb(1, 1, 1) Page background.

ink #0c0c0a srgb(0.0471, 0.0471, 0.0392) Primary text and rules.

soft #f5f3ee srgb(0.9608, 0.9529, 0.9333) Recessed surface behind cards and sections.

muted #6b6b65 srgb(0.4196, 0.4196, 0.3961) Secondary text.

line #e3e1da srgb(0.8902, 0.8824, 0.8549) Hairline and border colour.

accent #047857 srgb(0.0157, 0.4706, 0.3412) Single brand accent. Links, CTAs, active state.

accent-soft #ecfdf5 srgb(0.9255, 0.9922, 0.9608) Tinted accent background.

Tipografía

display Fraunces, serif Headlines and display type.

Hybrid athletes train both ends of the curve. 0123456789

body IBM Plex Sans, sans-serif Body copy and UI.

Hybrid athletes train both ends of the curve. 0123456789

Botones

Tres niveles, y ningún cuarto. Si un control no encaja en ninguno de ellos, la jerarquía es incorrecta, no el conjunto de botones.

One per view. The single action you want taken.

Alternative paths. Never competes with primary.

Tertiary and destructive-adjacent. Text weight only.

Encabezado y pie de página

Ambos son componentes activos, no capturas de pantalla: el encabezado en la parte superior de esta página y el pie de página en la parte inferior son los Nav.astro y Footer.astro representados por el diseño compartido. Un ejemplo que sea una imagen de un componente deja de ser válido en cuanto el componente cambia, por lo que no hay ninguno.