Design Tokens
Design tokens are the foundational elements of Neo. They are named entities that store design attribute information, and are used instead of hard-coded values (such as hex values for color or pixel values for spacing) to maintain a scalable and consistent visual appearance.
Color
Using the Neo color system will help align your designs with Avaya’s brand guidelines. It also promotes consistency across Avaya’s product range by encouraging standardization.
Base
#FFFFFF
--neo-color-base-0
#F1F1F1
--neo-color-base-100
#DDDDDD
--neo-color-base-150
#C9C9C9
--neo-color-base-200
#939393
--neo-color-base-400
#757474
--neo-color-base-500
#5E5E5E
--neo-color-base-600
#323232
--neo-color-base-800
#2B2B2B
--neo-color-base-850
#242424
--neo-color-base-900
#000000
--neo-color-base-1000
Red
#FDEDED
--neo-color-red-100
#FFC0BE
--neo-color-red-200
#FF9D98
--neo-color-red-300
#FA6156
--neo-color-red-400
#DA291C
--neo-color-red-500
#B51418
--neo-color-red-600
#8A0F13
--neo-color-red-700
#600B0C
--neo-color-red-800
#400708
--neo-color-red-900
Blue
#E7F4FB
--neo-color-blue-100
#ABD8F1
--neo-color-blue-200
#78C1E8
--neo-color-blue-300
#2E9FDB
--neo-color-blue-400
#1B77AF
--neo-color-blue-500
#155E8B
--neo-color-blue-600
#004E6C
--neo-color-blue-700
#003A51
--neo-color-blue-800
#002837
--neo-color-blue-900
Green
#E4F7E4
--neo-color-green-100
#9CD99C
--neo-color-green-200
#6FC86F
--neo-color-green-300
#51A651
--neo-color-green-400
#088A08
--neo-color-green-500
#2B6B2B
--neo-color-green-600
#215321
--neo-color-green-700
#173B17
--neo-color-green-800
#102910
--neo-color-green-900
Orange
#FFF7EB
--neo-color-orange-100
#FFD79B
--neo-color-orange-200
#FFC46C
--neo-color-orange-300
#F38D00
--neo-color-orange-400
#B35C00
--neo-color-orange-500
#8E4900
--neo-color-orange-600
#693700
--neo-color-orange-700
#512A00
--neo-color-orange-800
#341B00
--neo-color-orange-900
Purple
#F7EDFC
--neo-color-purple-100
#E0BBF2
--neo-color-purple-200
#CE94EB
--neo-color-purple-300
#BF73E5
--neo-color-purple-400
#AB3FE0
--neo-color-purple-500
#8832B3
--neo-color-purple-600
#6C288E
--neo-color-purple-700
#4C1D63
--neo-color-purple-800
#371547
--neo-color-purple-900
Gold
#FFFBEA
--neo-color-gold-100
#E4D8AB
--neo-color-gold-200
#C8AC65
--neo-color-gold-300
#B29629
--neo-color-gold-400
#896C15
--neo-color-gold-500
#775D13
--neo-color-gold-600
#5C480F
--neo-color-gold-700
#48380C
--neo-color-gold-800
#322708
--neo-color-gold-900
Teal
#DFF9FC
--neo-color-teal-100
#ABF2F9
--neo-color-teal-200
#50DFED
--neo-color-teal-300
#1CC6D7
--neo-color-teal-400
#0A8E9B
--neo-color-teal-500
#087781
--neo-color-teal-600
#076169
--neo-color-teal-700
#054B51
--neo-color-teal-800
#043539
--neo-color-teal-900
Pink
#FDE6F4
--neo-color-pink-100
#F8AAD9
--neo-color-pink-200
#F476C3
--neo-color-pink-300
#F042AB
--neo-color-pink-400
#D51588
--neo-color-pink-500
#B31272
--neo-color-pink-600
#8B0E59
--neo-color-pink-700
#680A42
--neo-color-pink-800
#46072C
--neo-color-pink-900
Typography
Neo’s typography system provides a consistent look to all Avaya products while creating a consistent hierarchy for your UI designs. The selected font has been tested for readability across different languages, and meets accessibility guidelines.
Global
| Property Name | Value | Description |
|---|---|---|
| font-family | Noto Sans JP | Global font family |
| letter-spacing | 0px | Global letter spacing |
Header
| Token Name | Example | Description |
|---|---|---|
| h1 | H1 | Header 1 font styles |
| h2 | H2 | Header 2 font styles |
| h3 | H3 | Header 3 font styles |
| h4 | H4 | Header 4 font styles |
Large Body Styles
| Token Name | Example | Description |
|---|---|---|
| $typography-web-body-large-font-size | 16px | Large Body font size |
| $typography-web-body-tiny-line-height | 22pxt | Large Body line height |
Regular Body Styles
| Token Name | Example | Description |
|---|---|---|
| $typography-web-body-regular-font-size | 14px | Regular Body font size |
| $typography-web-body-regular-line-height | 19px | Regular Body line height |
Small Body Styles
| Token Name | Example | Description |
|---|---|---|
| $typography-web-body-small-font-size | 12px | Small Body font size |
| $typography-web-body-regular-line-height | 16px | Small Body line height |
Tiny Body Styles
| Token Name | Example | Description |
|---|---|---|
| $typography-web-body-tiny-font-size | 10px | Tiny Body font size |
| $typography-web-body-tiny-line-height | 13px | Regular Body line height |
Font Weights
| Property Name | Example | Description |
|---|---|---|
| $token-web-typography-fontweight-light | 300 | Light Font |
| $token-web-typography-fontweight-regular | 400 | Regular Font |
| $token-web-typography-fontweight-semibold | 600 | Semi-bold Font |
| $token-web-typography-fontweight-bold | 700 | Bold Font |
Text Decoration/Font Style
| Token Name | Example | Description |
|---|---|---|
| $web-body-underline-text-decoration | underline | Underline text |
| $web-body-italic-text-style | italic | Italicize text |
Spacers
Spacers help evenly distribute the content in your UI designs.
| Token Name | Example | Description |
|---|---|---|
| $global-spacer-small | Global spacer small | |
| $global-spacer-regular | Global spacer regular | |
| $global-spacer-large | Global spacer large | |
| $global-spacer-x-large | Global spacer extra large |
Borders
Borders surround fields to help define their limits. There are multiple line, shape and corner styles to choose from.
| Token Name | Example | Description |
|---|---|---|
| $token-border-solid-1-px- | 1px solid border | |
| $token-border-dotted-1-px- | 1px dotted border | |
| $token-border-solid-2-px- | 2px solid border | |
| $token-border-dotted-2-px- | 2px dotted border | |
| $token-border-solid-3-px- | 3px solid border | |
| $token-border-dotted-3-px- | 3px dotted border | |
| $token-border-radius-2-px- | 2px border radius | |
| $token-border-radius-4-px- | 4px border radius | |
| $token-border-radius-16-px- | 16px border radius | |
| $token-border-radius-100- | 100% border radius |
Interactivity
These define animated actions used when hovering the mouse over an object in the UI. Objects can appear and disappear, or slide in and out according to the desired effect.
| Token Name | Example | Description |
|---|---|---|
| $interactivity-motion-fast | Hover Me | Fast |
| $interactivity-motion-medium | Hover Me | Medium |
| $interactivity-motion-slow | Hover Me | Slow |
| $interactivity-motion-ease-in/$interactivity-motion-fast | Hover Me | Ease In Fast |
| $interactivity-motion-ease-in/$interactivity-motion-medium | Hover Me | Ease In Medium |
| $interactivity-motion-ease-in/$interactivity-motion-slow | Hover Me | Ease In Slow |
| $interactivity-motion-ease/$interactivity-motion-fast | Hover Me | Ease Fast |
| $interactivity-motion-ease/$interactivity-motion-medium | Hover Me | Ease Medium |
| $interactivity-motion-ease/$interactivity-motion-slow | Hover Me | Ease Slow |
| $interactivity-motion-ease-out/$interactivity-motion-fast | Hover Me | Ease Out Fast |
| $interactivity-motion-ease-out/$interactivity-motion-medium | Hover Me | Ease Out Medium |
| $interactivity-motion-ease-out/$interactivity-motion-slow | Hover Me | Ease Out Slow |
Elevation
Any field can be further enhanced by the use of drop-shadowing and other highlighting techniques.
| Property Name | Example | Description |
|---|---|---|
| $shadows-elevation-100 | Elevation 100 | |
| $shadows-elevation-200 | Elevation 200 | |
| $shadows-elevation-300 | Elevation 300 | |
| $shadows-elevation-400 | Elevation 400 |