Design System
Vypo / Arcor
Documentación de tokens, colores, tipografía y componentes del ecosistema mobile + desktop diseñado para Arcor.
— Introducción
Sistema de diseño escalable
Vypo Touch es un ecosistema mobile + desktop pensado para los repositores de Arcor. Su Design System unifica la experiencia visual entre la app de campo y el dashboard de líderes, garantizando que los mismos tokens, colores y componentes se comporten de forma predecible en cualquier dispositivo. Todo está definido como variables en Figma y exportado a un archivo JSON compatible con el estándar W3C Design Tokens.
— Filosofía
Principios que guían cada decisión
Consistencia cross-platform
Los mismos tokens se usan en mobile y desktop, reduciendo la carga cognitiva y acelerando el handoff a desarrollo.
Claridad operativa
La interfaz prioriza la información crítica para repositores y líderes, con estados de encuestas, tareas y sincronización siempre visibles.
Escalabilidad por tokens
La arquitectura de tokens permite cambiar un valor base y propagarlo a alias y componentes sin reescribir estilos.
Accesibilidad
La paleta mantiene contrastes suficientes para uso en campo bajo diferentes condiciones de luz, y la tipografía usa una escala legible.
— Arquitectura
Estructura de tokens
El sistema se organiza en cuatro colecciones que van de lo primitivo a lo semántico: Brand contiene los valores base de color y espaciado; Alias traduce esos valores en significados de interfaz; Mapped aplica los alias a casos concretos de componentes; Typography centraliza familia, pesos, tamaños e interlineado.
Alias
Colores semánticos que abstraen la paleta brand para usar en la interfaz.
Brand
Valores primitivos: paletas de color completas y escala de espaciado de 4px.
Mapped
Tokens aplicados a superficies, textos, íconos y bordes de componentes reales.
Typography
Familia, pesos, tamaños, alturas de línea y espaciado entre letras.
— Colores
Paleta Vypo
Brand
Primary
Blue Vipo 100
#BFCED7
Blue Vipo 200
#809DAF
Blue Vipo 300
#406C87
Blue Vipo 400
#003B5F
Blue Vipo 500
#002C47
Blue Vipo 600
#001D2F
Blue Vipo 700
#000F18
Light Blue Vipo 100
#C8E4F0
Light Blue Vipo 200
#91CAE2
Light Blue Vipo 300
#5AAFD3
Light Blue Vipo 400
#2394C4
Light Blue Vipo 500
#1A6F93
Light Blue Vipo 600
#114A62
Light Blue Vipo 700
#092531
Salmon Vipo 100
#FCD8D8
Salmon Vipo 200
#FBB1B1
Salmon Vipo 300
#F88A8A
Salmon Vipo 400
#F66363
Salmon Vipo 500
#B84A4A
Salmon Vipo 600
#7B3131
Salmon Vipo 700
#3D1919
Secondary
Grey Vipo 50
#F9F9F9
Grey Vipo 100
#EBEBEB
Grey Vipo 200
#D8D8D8
Grey Vipo 300
#C5C5C5
Grey Vipo 400
#B1B1B1
Grey Vipo 500
#858585
Grey Vipo 600
#585858
Grey Vipo 700
#2C2C2C
Green 100
#D8F0D8
Green 200
#B1E1B1
Green 300
#8AD28A
Green 400
#63C363
Green 500
#4A924A
Green 600
#316131
Green 700
#193119
White 100
#FFFFFF
Orange 100
#FCE7D5
Orange 200
#FBD0AD
Orange 300
#F8B783
Orange 400
#F69F5A
Orange 500
#B87743
Orange 600
#7B502D
Orange 700
#3D2816
Alias semánticos
Primary
Fair
#BFCED7
Light
#809DAF
Soft
#406C87
Base
#003B5F
Strong
#002C47
Deep
#001D2F
Dark
#000F18
Secondary
Fair
#C8E4F0
Light
#91CAE2
Soft
#5AAFD3
Base
#2394C4
Strong
#1A6F93
Deep
#114A62
Dark
#092531
Terciary
Fair
#FCD8D8
Light
#FBB1B1
Soft
#F88A8A
Base
#F66363
Strong
#B84A4A
Deep
#7B3131
Dark
#3D1919
Neutral
Fair
#EBEBEB
Light
#D8D8D8
Soft
#C5C5C5
Base
#B1B1B1
Strong
#858585
Deep
#585858
Dark
#2C2C2C
Blush
#F9F9F9
Success
Fair
#D8F0D8
Light
#B1E1B1
Soft
#8AD28A
Base
#63C363
Strong
#4A924A
Deep
#316131
Dark
#193119
Draft
Fair
#FCE7D5
Light
#FBD0AD
Soft
#F8B783
Base
#F69F5A
Strong
#B87743
Deep
#7B502D
Dark
#3D2816
White
Fair
#FFFFFF
— Tipografía
Escala tipográfica
La tipografía del sistema usa Inter para garantizar legibilidad tanto en dispositivos móviles de campo como en monitores de escritorio. La escala cubre anotaciones pequeñas, cuerpos de texto y títulos de sección.
Aa
XS
12px / Medium / 18px
Aa
S
16px / Medium / 24px
Aa
M
20px / Medium / 30px
Aa
L
28px / Medium / 42px
Pesos tipográficos
— Espaciado
Escala de espaciado
1
4px
2
8px
3
12px
4
16px
5
20px
6
24px
7
28px
8
32px
9
36px
10
40px
11
44px
12
48px
13
52px
14
56px
— Tokens mapeados
Semántica de componentes
Los tokens mapeados conectan los alias con componentes concretos. Cada entrada describe un rol de interfaz (Surface.Action, Text.Headings, Icons.Error, Border.Input) y apunta a un alias, lo que permite mantener consistencia y actualizar estilos de forma centralizada.
Surface
| Token | Valor | Referencia |
|---|---|---|
| Action | #002C47 | {alias.Primary.Strong} |
| Action-hover | #003B5F | {alias.Primary.Base} |
| Component | #FFFFFF | {alias.White.Fair} |
| Modal | #FFFFFF | {alias.White.Fair} |
| Suspended | #EBEBEB | {alias.Neutral.Fair} |
| Active | #D8F0D8 | {alias.Success.Fair} |
| Draft | #FCE7D5 | {alias.Draft.Fair} |
| Canceled | #FCD8D8 | {alias.Terciary.Fair} |
| Finished | #C8E4F0 | {alias.Secondary.Fair} |
| Pages | #EBEBEB | {alias.Neutral.Fair} |
| Invert | #FFFFFF | {alias.White.Fair} |
| Selected | #2394C4 | {alias.Secondary.Base} |
| Error | #F66363 | {alias.Terciary.Base} |
| Cards | #F9F9F9 | {alias.Neutral.Blush} |
| Success | #4A924A | {alias.Success.Strong} |
Text
| Token | Valor | Referencia |
|---|---|---|
| Action | #002C47 | {alias.Primary.Strong} |
| Action-hover | #003B5F | {alias.Primary.Base} |
| Invert | #FFFFFF | {alias.White.Fair} |
| Selected | #2394C4 | {alias.Secondary.Base} |
| Disable | #D8D8D8 | {alias.Neutral.Light} |
| Headings | #2C2C2C | {alias.Neutral.Dark} |
| Body | #585858 | {alias.Neutral.Deep} |
| Errors | #F66363 | {alias.Terciary.Base} |
| Suspended | #2C2C2C | {alias.Neutral.Dark} |
| Active | #193119 | {alias.Success.Dark} |
| Draft | #3D2816 | {alias.Draft.Dark} |
| Canceled | #3D1919 | {alias.Terciary.Dark} |
| Finished | #092531 | {alias.Secondary.Dark} |
| Success | #4A924A | {alias.Success.Strong} |
| Input | #B1B1B1 | {alias.Neutral.Base} |
Icons
| Token | Valor | Referencia |
|---|---|---|
| Action | #002C47 | {alias.Primary.Strong} |
| Action-hover | #003B5F | {alias.Primary.Base} |
| Selected | #2394C4 | {alias.Secondary.Base} |
| Disable | #D8D8D8 | {alias.Neutral.Light} |
| Invert | #FFFFFF | {alias.White.Fair} |
| Active | #193119 | {alias.Success.Dark} |
| Errors | #F66363 | {alias.Terciary.Base} |
| Success | #63C363 | {alias.Success.Base} |
| Input | #B1B1B1 | {alias.Neutral.Base} |
| Headings | #2C2C2C | {alias.Neutral.Dark} |
Border
| Token | Valor | Referencia |
|---|---|---|
| Action | #002C47 | {alias.Primary.Strong} |
| Action-hover | #003B5F | {alias.Primary.Base} |
| Disable | #D8D8D8 | {alias.Neutral.Light} |
| Input | #D8D8D8 | {alias.Neutral.Light} |
| Table-line | #EBEBEB | {alias.Neutral.Fair} |
| Errors | #F66363 | {alias.Terciary.Base} |
| Suspended | #2C2C2C | {alias.Neutral.Dark} |
| Active | #193119 | {alias.Success.Dark} |
| Draft | #3D2816 | {alias.Draft.Dark} |
| Canceled | #3D1919 | {alias.Terciary.Dark} |
| Finished | #000F18 | {alias.Primary.Dark} |
| Selected | #2394C4 | {alias.Secondary.Base} |
| Success | #63C363 | {alias.Success.Base} |