Oriana Bonato — Portfolio
Design System.
Estado
v1.0 — En curso
Logo
Tipografía
Cuatro familias con un papel cada una. Bricolage Grotesque construye titulares e interfaz, Manrope lleva el cuerpo y las frases editoriales, y Rock Salt y Courier New aparecen solo como highlights puntuales, nunca en párrafos.
Bricolage · Display & UI
Bricolage · Display & UI
Manrope · Cuerpo
Manrope · Cuerpo
Rock Salt · Años
Rock Salt · Años
Courier New · [Código]
Courier New · [Código]
Bricolage Grotesque
Display, titulares y UI · 800 / 700 / 500 / 300
Manrope
Cuerpo y editorial · 400 cuerpo, 500 frases destacadas, 200 subtítulos
Rock Salt
Highlight puntual · años de proyecto
Courier New
Highlight puntual · [Figma] [React], numeración [01], píldoras de stack
Jerarquía
Paleta de color
Bone
#E9E9E9
Fondo de página claro; texto sobre fondo oscuro
Ink
#131E21
Texto, reglas de 1px, secciones oscuras y cabecera fija
Ink 800
#1B282B
Fondo de imágenes, capturas y tarjetas de proyecto
Accent
#756CE5
Punto del logo y de titulares, círculo de flecha, botón de idioma, enlaces inline, cursor
Grey ink
#5A6568
Labels y texto secundario sobre bone
Grey bone
#9AA3A5
Labels y texto secundario sobre ink
Highlight
#D8FD80
Anillo del cursor sobre píxel oscuro, hover de enlaces y bordes en oscuro, numeración [01], «Next project»
Espaciado
Escala base 4px. Grid de 12 columnas, gap 24px, margen lateral clamp(20–56px) idéntico en header, secciones y footer.
Motion
Reveal
.9s cubic-bezier(.16,1,.3,1)
Entrada de bloques al scroll: opacidad 0→1 y +28px.
Line mask
1.05s · delay .15s
Titulares: cada línea sube desde una máscara, escalonada.
Horizontal pin
scroll-linked · 420vh
Work anclado: el scroll vertical traduce la pista en X con barra de progreso.
Cursor lerp
0.14 / frame · rAF
Punto sin retardo, anillo interpolado. Oculto en táctil.
Cursor personalizado
El cursor del sistema se oculta (cursor: none) y se sustituye por dos piezas: un punto de 8px que sigue al puntero sin retardo y un anillo que lo persigue con interpolación lerp 0.14 por frame. El color del anillo se decide leyendo la luminancia del píxel bajo el puntero, así que reacciona igual a fondos, fotos, iconos y botones en estado oscuro. Tres estados, todos con transición 0.35s cubic-bezier(.16,1,.3,1). Se oculta por completo en dispositivos táctiles.
Fondo claro · borde ink
Fondo claro · borde ink
Fondo oscuro · borde #D8FD80
Fondo oscuro · borde #D8FD80
Píxel oscuro de foto · #D8FD80
Píxel oscuro de foto · #D8FD80
Botón · Link 80px
Botón · Link 80px
Tarjeta · View 104px
Tarjeta · View 104px
Default — fondo claro
Anillo 56px borde #131E21 · punto #756CE5
Default — fondo oscuro
El borde cambia a #D8FD80 cuando el píxel bajo el puntero es oscuro: secciones, fotos, iconos y botones en hover
Link — 80px
Relleno accent al 15%, borde #756CE5. Sobre enlaces y botones
View — 104px
Círculo accent sólido con etiqueta VIEW; el punto pasa a #D8FD80. Sobre tarjetas de proyecto
Botones & enlaces
Todas las acciones comparten la misma pieza: texto en mayúsculas + círculo de 44px con flecha diagonal. En hover la flecha gira 45° hasta quedar horizontal y el cursor pasa a estado link (80px). Transición 0.35s / 0.4s cubic-bezier(.16,1,.3,1).
Primario · fondo pasa a ink
Primario · fondo pasa a ink
En oscuro · borde #D8FD80
En oscuro · borde #D8FD80
Inline · #D8FD80 + flecha
Inline · #D8FD80 + flecha
Primario
Download CV, Send message. Reposo: borde ink y círculo accent. Hover: fondo ink, texto y flecha en accent.
Sobre fondo oscuro
Get in touch y el email del footer. Borde bone que pasa a #D8FD80 en hover; el círculo se mantiene accent.
Enlace inline
Repos, Instagram. Texto accent con flecha; en hover pasa a #D8FD80 y la flecha queda horizontal.
Formulario
Budget — chips
Chip seleccionado en ink sólido.
Campos sin caja: solo línea inferior de 1px. Etiqueta siempre visible arriba en mayúsculas; el placeholder es ejemplo, nunca etiqueta.
Tarjeta de proyecto
Anatomía fija: regla superior con índice y categoría, imagen 4:5 sobre #1B282B, nombre en display y año en Rock Salt. En hover la imagen escala a 1.04 y el cursor pasa a VIEW.
Marquee
Banda perfilada con relleno del fondo de página y letras en ink, bucle lineal 30–34s sin pausa.
Marquesina de tools: logos de herramientas en banda ink, mismo bucle lineal sin pausa.
Navegación
Barra fija de 80px con cuatro piezas de izquierda a derecha: logo · iconos de LinkedIn, Behance y GitHub · botón + · badge de idioma. Tiene dos estados según el scroll y un menú desplegable que sustituye a los enlaces en línea.
A · Sobre el hero — transparente, sin logo
B · Pasado el 50% del hero — barra ink con logo
C · Menú desplegable
Estado hero
Fondo transparente, sin logo ni sombra. Iconos de LinkedIn, Behance y GitHub en blanco y badge de idioma solo con borde claro.
Estado scroll
Al pasar el 50% del hero la barra se rellena de #131E21 con sombra al 30%, el logo entra deslizándose y el badge pasa a morado.
Botón +
Círculo de 44px con borde claro. Al abrir gira 135° hasta × y se rellena de morado; en hover el borde pasa a #D8FD80.
Panel
Baja desde la barra con las secciones en Bricolage 800, numeradas en Courier New y escalonadas 0.06s. Cada sección lleva la flecha del enlace inline: en hover texto y flecha pasan a #D8FD80 y la flecha gira a horizontal. A la derecha, CTA y correo.
Iconografía
Trazo 1.6px, extremos redondeados, viewBox 24, siempre en currentColor. La flecha diagonal es el único indicador de acción; no se mezclan iconos rellenos con lineales. Los logos de herramientas viven en una banda marquee aparte.
Estado por pantalla
Portfolio Desktop
✓ Sincronizado
Design System
✓ Sincronizado
Portfolio Mobile
Pendiente de sincronizar
Project Detail Mobile
Pendiente de sincronizar