Design
System
Una guía visual de los tokens, componentes y patrones que definen el portfolio. Esta página renderiza los tokens reales del sitio: cualquier cambio en el código se refleja aquí automáticamente.
Úsalo como referencia al añadir secciones nuevas, modificar componentes o validar la coherencia visual. Si necesitas un nuevo token, edítalo en su origen (Tailwind, global.css o el componente correspondiente) y revisa cómo se ve aquí antes de publicar.
Última actualización · 28 de abril, 2026
Color
Paleta minimalista construida sobre un fondo crema con un único acento rosa que actúa como firma visual. Los grises se usan en escala progresiva para crear jerarquía sin recurrir a más colores.
Base
Fondo principal
#F9F8F3
bg-[#F9F8F3] Body, header (con blur), footer
Acento primario
#E0A4B0
bg-[#E0A4B0] Estrella, hovers, links activos, filtro activo
Tinta principal
#111827
bg-gray-900 Texto principal, títulos sobre fondo claro
Blanco
#FFFFFF
bg-white Fondo de cards, texto sobre covers oscuros
Negro puro
#000000
bg-black Cover SalonTattoo, selección de texto
Escala de grises
Gray 300
#D1D5DB
bg-gray-300 Bordes de tags, separadores
Gray 400
#9CA3AF
bg-gray-400 Labels muted, captions
Gray 500
#6B7280
bg-gray-500 Texto labels, placeholders
Gray 600
#4B5563
bg-gray-600 Body principal
Gray 800
#1F2937
bg-gray-800 Texto oscuro secundario
Gray 900
#111827
bg-gray-900 Títulos, énfasis
Estados y bordes
Status verde
#22C55E
bg-green-500 Punto "disponible" con animate-ping
Emerald (contacto)
#10B981
bg-emerald-500 Pill "disponible para freelance"
Borde sutil
#000000 @ 5%
border-black/5 Header bottom, divisores de sección
Borde medio
#000000 @ 10%
border-black/10 Separador del language toggle
Gradientes de portada
Salonomi
Salonomi
radial-gradient(ellipse at 30% 20%, #9D6FFF 0%, #6B2DE6 60%, #4A1FA8 100%)
El Noi del Pa
Branding · Social Media
El Noi del Pa
linear-gradient(160deg, #9C6F4F 0%, #7A4F35 60%, #5A3823 100%)
By Jeka
Fine Line Tattoo
By Jeka (Tattoo)
Negro puro #000 + patrón de puntos blancos al 6% de opacidad.
Tipografía
Dos familias en contraste claro: Cormorant Garamond (serif editorial, italic predominante) para el lenguaje cálido y narrativo, e Inter (sans neutra) para todo lo funcional — UI, labels, captions y body técnico.
Aa
Cormorant Garamond
--font-serif
ABCDEFGHIJKLMNÑOPQRSTUVWXYZ
abcdefghijklmnñopqrstuvwxyz
0123456789 &.,!?¿—
Pesos: 300, 400, 500, 600, 700 · regular e italic
Uso: H1, H2, citas, body editorial. Casi siempre italic.
Aa
Inter
--font-inter
ABCDEFGHIJKLMNÑOPQRSTUVWXYZ
abcdefghijklmnñopqrstuvwxyz
0123456789 &.,!?¿—
Pesos: 300, 400, 500, 600, 700
Uso: body, nav, botones, labels, captions, project meta.
Jerarquía
Trabajemos
H1 Hero
font-serif italic font-medium text-6xl md:text-8xl leading-[0.95] ¡Qué bueno verte por aquí!
H1 About
font-serif italic text-4xl md:text-5xl leading-tight Featured project
H2 Destacado
text-3xl md:text-5xl italic font-serif Proyecto destacado
Eyebrow / Tag
text-[11px] font-bold uppercase tracking-[0.25em] ¡Hola! Soy Jessica — pero todos me llaman Jeka. Diseño experiencias que conecten con las personas.
Body editorial
text-xl italic font-serif font-light leading-relaxed Body técnico para descripciones de proyecto, copys cortos en footer y bloques que requieren legibilidad neutra.
Body principal
text-base text-gray-600 leading-relaxed © 2026 Jessica Duran
Caption / micro
text-[10px] uppercase tracking-widest text-gray-400 Pesos disponibles
The quick brown fox
font-weight: 300
Light
The quick brown fox
font-weight: 400
Regular
The quick brown fox
font-weight: 500
Medium
The quick brown fox
font-weight: 600
Semibold
The quick brown fox
font-weight: 700
Bold
Letter spacing personalizado
JESSICA DURAN
tracking-[0.15em] Servicios (badges), nav items
JESSICA DURAN
tracking-[0.2em] CTA principales, navegación
JESSICA DURAN
tracking-[0.25em] Featured project tags
JESSICA DURAN
tracking-[0.3em] Captions pequeñas (10–11px)
JESSICA DURAN
tracking-[0.4em] Subtítulos en covers
Reglas de uso
Usa serif italic cuando…
- • Es un H1 o H2 (siempre
italic). - • El tono es cálido, narrativo o personal.
- • Es body editorial largo (about, contact intro).
- • Acompañas con la estrella de 4 puntas.
Usa sans uppercase cuando…
- • Es un eyebrow, tag, label o caption.
- • Necesitas tracking amplio (≥0.15em).
- • Es navegación, filtros o CTAs.
- • El tono es funcional / técnico.
Componentes
Cada bloque está renderizado en vivo con el mismo markup que se usa en producción. Pasa el cursor por encima para ver los estados hover.
Botón CTA · Pill
border-2 border-white px-10 py-5 rounded-full hover:bg-[#E0A4B0] hover:border-[#E0A4B0] Hero principal. Sobre fondo oscuro. Hover transiciona a rosa en 500ms.
Filter chips · Categorías
text-[11px] font-bold uppercase tracking-[0.2em] border-b-2 Estado activo: text-[#E0A4B0] border-[#E0A4B0]. Inactivo: text-gray-400 border-transparent.
Service badge · Pill bordeado
px-3 py-1 rounded-full text-[11px] border border-gray-300/70 hover:bg-[#E0A4B0] Para listas de servicios o tags estáticos. No clicables.
Status indicator · Disponibilidad
Variante header (izquierda) sin contenedor. Variante contacto (derecha) en pill bordeado.
Project card
Salonomi
Salonomi
Web App
El Noi del Pa
Branding · Social Media
El Noi del Pa
Branding
By Jeka
Fine Line Tattoo
By Jeka
Fine Line Tattoo
Card de proyecto: imagen aspect-[4/5] con scale 1.03 al hover, título serif italic con cambio de color a rosa, type en sans uppercase.
Featured project · Bloque hero
Salonomi
Salonomi
Web App
Plataforma SaaS para salones de belleza con gestión de citas, inventario y comunicación con clientes.
Ver caso completo →Copy button
inline-flex items-center gap-2 text-xs uppercase tracking-[0.2em] Cambia label a "¡Copiado!" durante 2s tras el click.
Header · Anatomía
- Proyectos
- Sobre mí
- Contacto
h-20 · contenedor max-w-7xl · fondo bg-[#F9F8F3]/80 backdrop-blur-md · fixed top con z-50 Cover components · Tamaño size="sm"
Salonomi
SalonomiCover
covers/SalonomiCover.astro Props: title, size
El Noi del Pa
Branding · Social Media
ElNoiCover
covers/ElNoiCover.astro Props: title, subtitle, size
By Jeka
Fine Line Tattoo
SalonTattooCover
covers/SalonTattooCover.astro Props: title, subtitle, size
Espaciado y layout
La unidad base de Tailwind es 0.25rem (4px). El portfolio usa una escala consistente y respira con generosidad — secciones grandes con py-24 md:py-32.
Escala de espacio
p-1 4px p-2 8px p-3 12px p-4 16px p-6 24px p-8 32px p-12 48px p-16 64px p-20 80px p-24 96px p-32 128px Container widths
max-w-sm 384px Texto del footer max-w-md 448px Descripción about max-w-xl 576px Descripción featured project max-w-6xl 1152px Artículo de proyecto max-w-7xl 1280px Contenedor principal del sitio Anchos representados a 50% para caber en pantalla.
Border radius
rounded-sm Imágenes de proyecto, snippets de código
rounded-[8px] Imagen interna del ProjectCard
rounded-[12px] ProjectCard contenedor
rounded-full Botones CTA, badges, status dots
Grid de proyectos
grid-cols-2 md:grid-cols-3 gap-6 md:gap-10 aspect-[4/5] Breakpoints
base < 768px Mobile (default mobile-first) md: ≥ 768px Tablet y desktop pequeño lg: ≥ 1024px Desktop grande (status indicator del header solo aparece aquí) Esqueleto de página
<BaseLayout title="...">
<section class="max-w-7xl mx-auto px-6 py-24 md:py-32">
<div class="grid grid-cols-1 md:grid-cols-2 gap-16 md:gap-24">
...
</div>
</section>
</BaseLayout>Patrón estándar para páginas de contenido (about, contact). Home y proyectos amplían con secciones full-width.
Iconografía
El sitio no usa librería de iconos. Todos los SVGs son inline y minimalistas. La estrella de 4 puntas es el icono signature.
Sparkle · El icono signature
w-4 h-4 w-7 h-7 w-12 h-12 w-20 h-20 w-32 h-32 ViewBox: 0 0 32 32 · fill currentColor
Aparece en: hero marquee, H1 about, H1 contact, featured project tag, los 3 covers (Salonomi, ElNoi, SalonTattoo) y el cursor personalizado.
Ver path SVG
<svg viewBox="0 0 32 32" fill="currentColor">
<path d="M16 1.5 C16.6 11.2 20.8 15.4 30.5 16 C20.8 16.6 16.6 20.8 16 30.5 C15.4 20.8 11.2 16.6 1.5 16 C11.2 15.4 15.4 11.2 16 1.5 Z"/>
</svg>Clipboard
Botón "Copiar email" en página de contacto. Stroke de 2.
Flecha unicode
Carácter → con animación group-hover:translate-x-1
Punto pulsante
Status indicator. animate-ping + dot estático superpuesto.
Regla: al añadir un icono nuevo, mantén el criterio: SVG inline (no librería), stroke fino o fill plano, y siempre currentColor para que herede el color del contexto.
Animación
Transiciones discretas y largas (500–700ms ease-out) que refuerzan la calma editorial. Sin bouncing, sin overshoot.
Hover scale en card
duration-700 ease-out group-hover:scale-[1.03] Slide right (entrada)
animate-slide-right · 0.8s ease-out Definido en global.css. Variante -delayed con 0.2s delay.
Tabla de duraciones
duration-300 300ms Estados rápidos: filtros, color, opacidad duration-500 500ms Hovers de CTA, transiciones de color en H duration-700 700ms Scale de imágenes en project cards marquee 80s linear infinite Hero marquee horizontal del nombre Easing: casi todo es ease-out. Linear se reserva para animaciones infinitas (marquee, ping). No usar bezier custom.
Brand assets
Activos identitarios y reglas de tono visual.
Logo · Header size
Archivo: /public/logo-byjeka.png
Tamaño en header: h-10 w-auto (40px alto)
Clear-space sugerido: mínimo el alto del logo a cada lado.
Selección de texto
Selecciona este párrafo para ver el estilo de selección global. El fondo se vuelve negro y el texto blanco — coherente con el tono editorial minimalista.
selection:bg-black selection:text-white Aplicado globalmente en <body> de BaseLayout.
Tono visual
Cálido / narrativo
Cormorant italic + body editorial
"¡Qué bueno verte por aquí!"
FUNCIONAL / TÉCNICO
Inter uppercase tracked
"PORTFOLIO SELECCIONADO"
— Jeka
Firma personal · acento rosa
Cierre de copy en contacto