DESIGN SYSTEM
Guía de estilos
Documentación de los tokens visuales y componentes usados en el portfolio: color, tipografía, botones, tags, tarjetas, navegación e iconografía. Sirve de referencia para mantener consistencia al agregar nuevas secciones.
Colores
Paleta completa organizada por función. El texto usa 3 niveles — Black para headlines, Body Text para párrafos, Tertiary para texto de apoyo — más Muted para meta y labels. Cada color referencia su equivalente en Tailwind (familia neutral).
Texto
Fondos
Bordes
Acentos
Overlays sobre fondo oscuro
Blanco con alpha, para el footer y las testimonial cards. No son colores planos: dependen del fondo sobre el que se apoyan.
Estados
Tipografía
Inter en todos los pesos (400/500/600/700), incluyendo labels y microcopy técnico.
Familia
Escala por breakpoint
Valores computados reales medidos a 1440px, 768px y 375px. Headline 1 y 2 usan clamp(),
así que escalan de forma fluida entre esos anchos; el resto de la escala es fija.
El line-height se declara en em y el px entre paréntesis es lo que computa.
Los que dicen heredado no declaran uno propio: toman el 1.4em de body,
que resuelve a 22.4px fijos y se hereda como ese px, no como proporción.
line-h1.25em (90px)
weight700
track-0.025em
line-h1.25em (57.6px)
weight700
track-0.025em
line-h1.25em (47.5px)
weight700
track-0.025em
line-h1.2em (45.6px)
weight700
track-0.02em
line-h1.2em (36.86px)
weight700
track-0.02em
line-h1.2em (31.2px)
weight700
track-0.02em
line-h1.2em (38.4px)
weight500
track-0.04em
line-h1.2em (38.4px)
weight500
track-0.04em
line-h1.2em (38.4px)
weight500
track-0.04em
line-hheredado (22.4px)
weight600
tracknormal
line-hheredado (22.4px)
weight600
tracknormal
line-hheredado (22.4px)
weight600
tracknormal
line-h1.2em (57.6px)
weight700
tracknormal
line-h1.2em (57.6px)
weight700
tracknormal
line-h1.2em (57.6px)
weight700
tracknormal
line-h1.4em (25.2px)
weight400
max-w640px
line-h1.4em (25.2px)
weight400
max-w640px
line-h1.4em (25.2px)
weight400
max-w640px
line-h1.65em (26.4px)
weight400
tracknormal
line-h1.65em (26.4px)
weight400
tracknormal
line-h1.65em (26.4px)
weight400
tracknormal
line-hheredado (22.4px)
weight400
tracknormal
line-hheredado (22.4px)
weight400
tracknormal
line-hheredado (22.4px)
weight400
tracknormal
line-hheredado (22.4px)
weight600
track0.06em
line-hheredado (22.4px)
weight600
track0.06em
line-hheredado (22.4px)
weight600
track0.06em
Botones
2 estilos (primary / outline) × 2 tamaños (sm / lg). Todos comparten radio 100px (pill) y una micro-animación de dos líneas apiladas en hover.
Primary — fondo claro
Outline — fondo claro
Outline — fondo oscuro
Text — fondo claro
Outline con icono — "Próximo proyecto"
El icono va dentro de .btn-top y .btn-bot, después del texto. El gap: 8px de esas capas lo separa, y con stroke="currentColor" toma el color del botón. Se usa al pie de cada case study.
| Clase | Tipo | Estilo |
|---|---|---|
| .btn-primary | Estilo | fondo negro, texto blanco |
| .btn-outline | Estilo | borde 1.5px negro, texto negro (fondo claro) |
| .btn-outline-white | Estilo | borde 1.5px blanco 28%, texto blanco (fondo oscuro) |
| .btn-text | Estilo | sin borde, solo texto — fondo gris sutil en hover (--gray-bg) |
| icono | Variante | SVG 14×14 con stroke="currentColor" dentro de .btn-top / .btn-bot |
| font-weight | Todos | 500 · Consistente para todos los botones |
| .btn-sm | Tamaño | padding 14px 20px · font-size 16px · height 44px — CTA de nav |
| .btn-lg | Tamaño | padding 13px 28px · font-size 16px — CTAs de sección |
Tags & Pills
Badge neutro (Mis skills, Testimonios) y metadata de proyectos.
Project Card
Usada en la grilla de proyectos de home y en /proyectos. Cover 16:9, nombre y tags separados por punto medio.
| Clase | Uso |
|---|---|
| .projects-grid | Grilla de 2 columnas que contiene las cards (1 columna en mobile) |
| .project-card | Contenedor <a>: sin fondo ni borde propio, el texto queda "afuera" de la imagen |
| .project-cover-frame | Envoltorio de la imagen: radio 20px + overflow hidden, recorta el zoom del hover |
| .project-cover | Imagen de portada, aspect-ratio 16:9. En hover del card, escala a 1.06 (transición 0.6s) |
| .project-info | Padding superior mínimo debajo del cover, sin fondo |
| .project-name | Título del proyecto — Headline 4, 18px / 600 |
| .project-tags | Fila flex de tags + separadores |
| .project-tag | Cliente o disciplina, 16px, color body text |
| .project-sep | Punto medio "·" entre tags, color body text |
Testimonial Card
Usada en la sección de testimonios de home, sobre fondo oscuro.
Cita o testimonio de un colega describiendo la colaboración...
Case study
Estructura de una página de proyecto completa (ej. /proyectos/ypf): eyebrow, meta, secciones de contenido y navegación prev/next.
Logo del cliente (antes del título)
Eyebrow de texto (fallback sin logo disponible)
YPF
Meta (Cliente / Año / Scope)
Sección de contenido + lista
Desafío
- Era fácil perder el progreso o cometer errores.
- No existía una forma confiable de manejar la conectividad deficiente o nula.
Próximo proyecto
Va al pie de cada case study, dentro de .case-nav (alineado a la derecha). Es el .btn-outline del sistema con una flecha a la derecha; hereda la animación de hover de dos capas. No hay botón "anterior". El último proyecto vuelve al primero, y el link siempre apunta al mismo idioma de la página.
| Clase | Uso |
|---|---|
| .case-logo | Logo del cliente arriba del título — height 28px, ancho auto (/images/logos) |
| .case-eyebrow | Nombre del cliente en texto — fallback cuando no hay logo |
| .case-hero / .case-subtitle | Título del caso + bajada descriptiva |
| .case-meta | Fila Cliente / Año / Scope con borde inferior |
| .case-section | Cada bloque de contenido (Contexto, Desafío, Enfoque, etc.) |
| .case-subhead | Subtítulo dentro de una sección (ej. "Metodología", "Componentes clave") |
| .case-list | Lista con bullet circular gris |
| .case-img / .case-img-grid | Imagen de soporte a ancho completo, o grilla de 2 |
| .case-nav | Contenedor del botón "Próximo proyecto" al pie — un solo .btn-outline con flecha, alineado a la derecha |
| .case-caption | Texto gris chico centrado debajo de una imagen |
| .case-quote | Cita destacada con borde izquierdo, para una frase clave |
| .case-stat | Métrica destacada (número grande + label) |
| .case-callout | Bloque destacado con fondo gris para un mensaje final |
Iconografía
SVG lineales, stroke 1.5px, sin relleno. Contenedor de 38×38px con esquinas de 11px para skills.
Espaciado & radios
Contenedor centrado a 1040px. Radios consistentes por tipo de elemento.
Border radius
Contenedor
| Token | Valor | Uso |
|---|---|---|
| --max-w | 1040px | Ancho máximo de todas las secciones del sitio (imágenes, grillas) |
| --case-text-w | 880px | Ancho máximo para secciones de texto en case studies (más estrecho que imágenes) |
| padding lateral | 24px | Padding horizontal consistente en mobile/desktop |
| padding vertical (sección) | 88px | Separación entre bloques grandes (Projects, Skills, Testimonials) |
| gap grid | 16px | Separación entre cards en grillas |
Responsive
Cómo se adaptan los estilos tipográficos y espaciados en diferentes resoluciones.
Headline 1 (título principal)
| Mobile 375px | Tablet 768px | Desktop 1440px | |
|---|---|---|---|
| font-size | 38px | 46.08px | 72px |
| font-weight | 700 | ||
| line-height | 1.25em | ||
| letter-spacing | -0.025em | ||
| declaración | clamp(38px, 6vw, 72px) | ||
Headline 2
| Mobile 375px | Tablet 768px | Desktop 1440px | |
|---|---|---|---|
| font-size | 26px | 30.72px | 38px |
| font-weight | 700 | ||
| line-height | 1.2em | ||
| letter-spacing | -0.02em | ||
| declaración | clamp(26px, 4vw, 38px) | ||
Body Text
| Mobile (max 720px) | Tablet/Desktop | |
|---|---|---|
| font-size | 16px | 16px |
| line-height | 1.65em | |
| color | var(--text-body) · #525252 | |
Botones
| Mobile (max 720px) | Desktop | |
|---|---|---|
| .btn-sm | padding: 10px 16px · font-size: 14px | padding: 14px 20px · font-size: 16px |
| .btn-lg | padding: 13px 28px · font-size: 14.5px | |
| border-radius | 100px (pill) | |
Espaciado de secciones
| Mobile | Desktop | |
|---|---|---|
| padding vertical (sección) | 48px | 88px |
| padding horizontal | 24px (ambos) | |
| gap grid (cards) | 16px (1 columna mobile) | 16px (2 columnas) |
Breakpoints
| Nombre | Tamaño máximo | Cambios principales |
|---|---|---|
| Mobile | max-width: 720px | font-size reducidos, padding, 1 columna grillas |
| Tablet | 720px - 1024px | sizing intermedio, 2 columnas |
| Desktop | 1024px+ | tamaños completos, max-width 1040px |
Stat Counter
Componente de número animado que crece desde 0 cuando entra en viewport.
Ejemplo
| Atributo | Tipo | Descripción |
|---|---|---|
| data-value | número | Valor final al que animar (ej: 15, 30, 95) |
| data-unit | string | Unidad a mostrar después del número (ej: +, %, años) |
| .stat-value | elemento | Contenedor para el número que se anima |
| .stat-unit | elemento | Contenedor para la unidad |
Comportamiento
- El contador detecta cuando entra en viewport usando IntersectionObserver
- Anima el número desde 0 hasta el valor especificado en ~1.5 segundos
- Solo anima una vez por sesión
- Compatible con valores enteros y decimales