Design System
El sistema de diseño, colores, tipografía y componentes que dan vida a la marca de Javier Yranzo.
Aplicaciones del Logo
Uso correcto del logotipo sobre diferentes fondos.
Principal (Oscuro)
Javier en blanco, Yranzo en celeste.
Sobre Negro Absoluto
Logo en blanco puro.
Sobre Fondo Oscuro
Logo en blanco puro.
Sobre Fondo Claro
Logo en negro puro.
Favicon
Icono utilizado en las pestañas del navegador.
Favicon Principal
Fondo oscuro con iniciales "J" en blanco e "Y" en celeste, reflejando la estructura del logotipo principal.
Colores
Tokens semánticos utilizados en todo el sitio.
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-backgroundpara asegurar el contraste.
Iconografía
Estilo de iconos utilizados en la interfaz (Lucide Icons).
Pautas de uso
- Usar la librería Lucide React para consistencia en todo el sitio.
- Grosor de línea (stroke-width) estándar: 2px.
- Tamaño estándar en botones: w-4 h-4 o w-5 h-5.
- Tamaño estándar en tarjetas o secciones informativas: w-6 h-6 o w-8 h-8.
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)
Inputs de Formulario
Ejemplo de input deshabilitado.
Acordeón (FAQ)
Layouts de Página
Estructuras comunes (wireframes) para construir nuevas secciones y mantener la consistencia.
Hero Centrado
Ideal para el inicio de páginas principales o landing pages.
Split Layout (50/50)
Perfecto para explicar características con una imagen de apoyo o formularios (Gate).
Bento Grid Moderno
Diseño asimétrico para mostrar múltiples beneficios o capacidades (Ej: Santo Funnel).
Cards Grid (3 Columnas)
Ideal para listar servicios, planes de precios o pasos de un proceso.