Sistema de diseño — Portfolio Nicolás Rasilla
Saltar al contenidoSkip to content

Nicolás Rasilla Sr. Product Designer

Referencia interna · v1 · 2026

Sistema de diseño del portfolio

Dos fuentes, una paleta rosada con tres acentos y un puñado de decisiones repetidas en las cinco páginas. Todo lo que está acá ya está en producción: no es una propuesta, es el inventario.

01 — Fuentes

Dos familias

TítulosGoogle Sans Flex

Aa Bb Gg

Diseño de productos digitales end-to-end

Pesos
600 en todos los niveles
Tracking
−0,03em en display · −0,02em en h2/h3
Uso
h1 a h4, nombre en el header, cifras de métricas

Cuerpo y rótulosInconsolata

Aa Bb Gg

Logística, fintech, salud y suscripciones en producción.

Pesos
400 cuerpo · 500-600 rótulos
Tracking
0,06em a 0,1em en versalitas
Uso
párrafos, nav, rótulos de sección, metadatos, botones

02 — Escala

Fluida con clamp()

  • {{ row.sample }} {{ row.spec }}

03 — Paleta base

Rosa + tres acentos

El fondo rosa pálido y la tinta ciruela cargan todo el peso. El magenta marca lo accionable y la numeración; el petróleo y el amarillo aparecen en dosis chicas: degradés, halos y la píldora de disponibilidad.

{{ c.name }} {{ c.hex }} {{ c.use }}

04 — Pares de contraste

WCAG 2.2 AA

  • {{ p.ratio }} {{ p.label }} {{ p.note }}

05 — Acentos por caso

Sólo dentro del caso

Cada proyecto conserva el color de su producto real en capturas, diagramas y prototipos. No se mezclan con el shell del portfolio: viven adentro de la sección del caso.

  • {{ c.name }} {{ c.use }}

06 — Forma, borde y elevación

Escala de cinco

16px — contenedores Tarjetas, figuras, capturas, tableros de mockups, paneles del nav.
10px — controles Botones, chips de skills, anillo de foco, píldoras de progreso.
Elevación única 0 18px 34px −24px rgba(58,42,51,0.42). Sólo en hover de tarjeta y paneles flotantes.
Degradé de marca Petróleo → magenta → amarillo. Filetes, halos radiales y acentos de hero.
999px — píldoras Chips de estado, indicadores del carrusel, botón de zoom. Sólo cuando el alto define la forma.
50% — circulares Avatares, viñetas, puntos de color y controles redondos.
56 / 47px — biseles Excepción física: marco de iPhone y su pantalla. No aplica a ningún otro elemento.

Regla. Cinco valores y ninguno más: 16px para todo lo que contiene, 10px para todo lo que se acciona, 999px cuando el alto define la forma, 50% para lo circular. Un contenedor nunca lleva radio de control ni al revés.

Excepciones. Los biseles de dispositivo (56/47px) son geometría física, no estilo. Y las recreaciones de producto dentro de los mockups conservan el radio del producto original: son evidencia del caso, no interfaz del portfolio.

07 — Componentes

Los que se repiten

Botones · 52px de alto

Primario Secundario

Uno primario por vista. El secundario invierte a tinta plena en hover.

Rótulo de sección

03 — Perfil Nota a la derecha

Filete de 1px, número, título y nota. Abre todas las secciones del sitio.

Tarjeta de métrica

−30% relativo Churn involuntario

Cifra, unidad y KPI. Sin explicación: el detalle va en el cuerpo del caso.

Chips y metadatos

{{ chip }}

Los metadatos de cada caso usan la misma versalita de 12px sobre valor de 15px.

08 — Reglas que no se rompen

Ocho

  • {{ r }}

09 — Tokens

Las mismas variables, listas para pegar en cualquier hoja de estilos.

{{ tokens }}

ContactoContact

nico.rasilla@gmail.com

+54 9 11 2388-2900

LinkedIn Abre en una pestaña nuevaOpens in a new tab Descargar CV (PDF)Download CV (PDF)