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
Javier en oscuro, Yranzo en celeste.
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). Arranca en el celeste de marca #17AEE0 y termina en cian claro #67E8F9. Es el mismo del podcast. El viejo celeste al 100% → 60% quedó retirado.
¿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="text-gradient">
Texto Resaltado
</span>CSS Nativo (Si no usas Tailwind):
background: linear-gradient(to right, #17AEE0, #67E8F9);
-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
Celeste sólido y glow celeste. El gradiente es solo de titulares, nunca de botones. Un CTA principal por vista.
Colores de canal: solo en el botón que lleva a esa plataforma. Nunca en titulares, chips ni bordes.
Medidas y capas
Los números que hacen que todo se vea del mismo sistema.
Espacio y ancho
Radios
Etiqueta de sección
12px, bold, mayúsculas, espaciado de 0,125em. Siempre dentro de un chip celeste con borde y punto.
Botones
La profundidad es opacidad, no gris
Salvo el fondo, ninguna superficie se pinta con un color fijo: se apoya con transparencia sobre el fondo.
Modo papel (PDF y reportes)
Todo lo que se exporta a PDF va en claro. Las transparencias no viajan al papel: ahí se usan superficies sólidas.
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.