Style Guide

El sistema de diseño, colores, tipografía y componentes que dan vida a la marca de Javier Yranzo.

Colores

Tokens semánticos utilizados en todo el sitio.

Background

Foreground

Primary

Secondary

Muted

Accent

Destructive

Card

Popover

Border

Tipografía

Escala tipográfica y jerarquía de texto.

Familias Tipográficas (Para usar en Canva o Diseños)

Títulos y Textos (Fuente Principal):Inter
Esta es la tipografía principal del sitio. Úsala para todos los títulos (H1, H2, H3) y párrafos en tus diseños.
Código o Detalles Técnicos:Monospace / Fira Code
Solo para bloques de código o etiquetas técnicas.

Heading 1

text-5xl font-extrabold tracking-tight

Heading 2

text-4xl font-bold tracking-tight

Heading 3

text-3xl font-semibold tracking-tight

Heading 4

text-2xl font-semibold tracking-tight

Párrafo grande (Large). Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

text-lg leading-relaxed

Párrafo base. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.

text-base leading-7

Texto silenciado (Muted). Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

text-sm text-muted-foreground

Gradiente en Textos

Instrucciones claras para replicar el efecto visual principal de la marca.

¿Dónde implementarlo?

Exclusivamente en títulos (H1, H2, H3). Se utiliza para resaltar una palabra o frase clave dentro del título (por ejemplo, la segunda palabra o la propuesta de valor). Nunca se debe aplicar a párrafos enteros, botones o textos pequeños.

¿Tipo de gradiente?

Es un gradiente lineal horizontal (de izquierda a derecha). Comienza con el color Primario al 100% de opacidad y termina con el color Primario al 60% de opacidad.

¿Cómo funciona?

Técnicamente, se aplica un fondo con gradiente al elemento, y luego se utiliza la propiedad CSS background-clip: text para recortar el fondo a la forma de las letras, haciendo el color del texto transparente.

Implementación (Código)

Ejemplo Visual:

Tu título increíble aquí

Clases de Tailwind CSS:

<span className="bg-gradient-to-r from-primary to-primary/60 bg-clip-text text-transparent">
  Texto Resaltado
</span>

CSS Nativo (Si no usas Tailwind):

background: linear-gradient(to right, hsl(var(--primary)), hsl(var(--primary) / 0.6));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;

Tratamiento de Imágenes y Efectos

Estilos visuales aplicados a fotografías y contenedores para mantener la coherencia de la marca.

Hover: Glitch & Reveal

Las imágenes que representan "el problema" o el estado actual inician en escala de grises con un overlay primario. Al pasar el cursor (hover), recuperan su color original, hacen un ligero zoom y muestran un efecto de distorsión RGB (Glitch).

Glassmorphism (Efecto Cristal)

Utilizado en tarjetas superpuestas sobre imágenes de fondo (como en los Call to Action). Combina un fondo semitransparente, desenfoque (backdrop-blur) y bordes sutiles para asegurar la legibilidad sin ocultar la imagen.

Tarjeta de Cristal

La opacidad combinada con blur permite leer perfectamente el texto mientras el fondo se asoma sutilmente.

Buenas Prácticas Técnicas

Lazy Loading: Todas las imágenes (excepto el Hero principal) deben incluir el atributo loading="lazy" para optimizar la carga.
Sombras y Legibilidad: Al colocar texto sobre imágenes, usar un gradiente inferior como bg-gradient-to-t from-background para asegurar el contraste.

Botones

Variantes y estados de los botones principales.

Variantes

Botones Especiales

Componentes UI

Elementos de interfaz reutilizables.

Ejemplo de Tarjeta

Descripción breve de la tarjeta.

Este es el contenido de la tarjeta. Se utiliza para agrupar información relacionada de manera visual y ordenada.

Badges (Etiquetas)

Default