01 — Identidad Visual
Paletas
de Color
Cuatro direcciones cromáticas para explorar. Seleccioná una paleta para ver cómo transforma todo el sistema.
Paleta activa
Graduaciones · 100–1000
Cada color expandido en 10 tonos, del más claro (100) al más oscuro (1000). El paso 500 marca el color base.
Preview — Home
ProyectosSobre míContacto
Vanesa
Vasquez
UX / UI Designer
Ver Proyectos
Life Seguros
Design System · UX Research
Little Planet
Branding · UI Design
E-Commerce
UX · Prototyping
02 — Tipografía
Chillax
Una sola familia tipográfica, dramática y protagonista. Variable de 200 a 700, diseñada para impactar.
Display XL
120px / 700 / -0.04em
Vanesa
Display
96px / 700 / -0.03em
Vasquez
H1
72px / 700 / -0.02em
Build Better
H2
56px / 600 / -0.02em
Stay Strong
H3
40px / 600 / -0.01em
Design Systems
H4
32px / 500
UX Research
H5
24px / 500
Prototyping
H6
20px / 500
Visual Design
Subtitle
18px / 500
Creando experiencias digitales memorables
Body Large
18px / 400
Diseñadora UX/UI con pasión por crear interfaces que conectan con las personas.
Body
16px / 400
Cada proyecto es una oportunidad para resolver problemas reales con diseño centrado en el usuario.
Body Small
14px / 400
Investigación, prototipado, testing y entrega de diseño con alto nivel de detalle.
Caption
12px / 300
Última actualización: Marzo 2026
Overline
11px / 600 / 0.1em / CAPS
Sección destacada
Pesos tipográficos
Extralight — 200
Chillax
Light — 300
Chillax
Regular — 400
Chillax
Medium — 500
Chillax
Semibold — 600
Chillax
Bold — 700
Chillax
03 — Espaciado
Fibonacci
Spacing
Secuencia de Fibonacci × 4px como unidad base. Proporciones armónicas naturales para ritmo visual orgánico.
2xs
4px · fib(1)
xs
8px · fib(2)
sm
12px · fib(3)
md
20px · fib(5)
lg
32px · fib(8)
xl
52px · fib(13)
2xl
84px · fib(21)
3xl
136px · fib(34)
4xl
220px · fib(55)
Border Radius
sm · 4px
md · 8px
lg · 12px
xl · 20px
full · 9999px
Sombras
shadow-sm
shadow-md
shadow-lg
shadow-xl
04 — Grilla
12 Columnas
Sistema de grilla flexible tipo Bootstrap, preparado para React vanilla. Gap basado en Fibonacci spacing.
12 columnas iguales
1
1
1
1
1
1
1
1
1
1
1
1
6 + 6
col-6
col-6
4 + 4 + 4
col-4
col-4
col-4
3 + 6 + 3
col-3
col-6
col-3
4 + 8 (sidebar + contenido)
col-4
col-8
3 + 3 + 3 + 3
col-3
col-3
col-3
col-3
05 — Componentes UI
Componentes
Elementos reutilizables construidos con los tokens del sistema. Listos para implementar en React.
Botones
Cards
Life Seguros
Rediseño del sistema de gestión de pólizas con investigación de usuarios.
UXDesign System
Little Planet
Branding completo y diseño de interfaz para marca infantil.
BrandingUI
E-Commerce App
Diseño de experiencia para plataforma de comercio electrónico.
MobilePrototype
Inputs
Badges (Display)
Status
✕ Error ⚠ Warning ✓ Success i Info
Neutral
New 8 Updated
Tags / Chips (Interactive)
Dismissible
Design UX Tech
Links
Design → UX Research →
Filter
📦 ¿Como exportar a Figma?
Estos tokens se pueden llevar a Figma de varias formas:
1. Plugin html.to.design — importa esta página directamente a Figma como componentes.
2. Plugin Tokens Studio — exportá los tokens como JSON y sincronizalos con Figma.