Design System
Vypo / Arcor
Documentation of tokens, colors, typography and components for the mobile + desktop ecosystem designed for Arcor.
— Introduction
Scalable design system
Vypo Touch is a mobile + desktop ecosystem designed for Arcor merchandisers. Its Design System unifies the visual experience between the field app and the leaders' dashboard, ensuring that the same tokens, colors and components behave predictably on any device. Everything is defined as Figma variables and exported to a JSON file compatible with the W3C Design Tokens standard.
— Philosophy
Principles that guide every decision
Cross-platform consistency
The same tokens are used on mobile and desktop, reducing cognitive load and speeding up developer handoff.
Operational clarity
The interface prioritizes critical information for merchandisers and leaders, with survey, task and sync statuses always visible.
Token scalability
The token architecture lets you change a base value and propagate it through aliases and components without rewriting styles.
Accessibility
The palette maintains sufficient contrast for field use under different lighting conditions, and typography uses a legible scale.
— Architecture
Token structure
The system is organized into four collections that move from primitive to semantic: Brand holds base color and spacing values; Alias translates those values into interface meanings; Mapped applies aliases to concrete component cases; Typography centralizes family, weights, sizes and line heights.
Alias
Semantic colors that abstract the brand palette for use in the interface.
Brand
Primitive values: full color palettes and a 4px spacing scale.
Mapped
Tokens applied to real component surfaces, text, icons and borders.
Typography
Family, weights, sizes, line heights and letter spacing.
— Colors
Vypo palette
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
Semantic aliases
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
— Typography
Type scale
The system uses Inter to ensure readability on both field mobile devices and desktop monitors. The scale covers small annotations, body text and section headings.
Aa
XS
12px / Medium / 18px
Aa
S
16px / Medium / 24px
Aa
M
20px / Medium / 30px
Aa
L
28px / Medium / 42px
Font weights
— Spacing
Spacing scale
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
— Mapped tokens
Component semantics
Mapped tokens connect aliases to concrete components. Each entry describes an interface role (Surface.Action, Text.Headings, Icons.Error, Border.Input) and points to an alias, enabling consistency and centralized style updates.
Surface
| Token | Value | Reference |
|---|---|---|
| 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 | Value | Reference |
|---|---|---|
| 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 | Value | Reference |
|---|---|---|
| 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 | Value | Reference |
|---|---|---|
| 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} |