Design Tokens
Conceito
Design tokens são todas as opções de estilo que utilizamos para construir os nossos componentes. São variáveis semânticas de estilos, iguais entre design e tecnologia.
$font-size-lg -> 36px
$brand-color-primary-pure -> #000000
$brand-color-secondary-pure -> #ACD094
Global tokens
Os Global Tokens, são aqueles que se replicam dentro das marcas da VERT sem que ocorram mudanças em seus estilos.
Font size
Border radius
Border width
Opacity
Shadow
Spacing
Font size
Aa
$font-size-xxxs
XXXS
12px
Aa
$font-size-xxs
XXS
14px
Aa
$font-size-xs
XS
16px
Aa
$font-size-sm
SM
12px
Aa
$font-size-md
MD
24px
Aa
$font-size-lg
LG
32px
Aa
$font-size-xl
XL
40px
Aa
$font-size-xxl
XXL
48px
Aa
$font-size-xxxl
XXXL
48px
Aa
$font-size-display
display
48px
Aa
$font-size-giant
giant
48px
Border radius
$border-radius-none
None
0px
$border-radius-sm
sm
4px
$border-radius-md
md
8px
$border-radius-lg
lg
16px
$border-radius-pill
pill
> 500px
$border-radius-cricular
cricular
50%
Border width
$border--none
None
0px
$border--hairline
hairline
1px
$border--thin
thin
2px
$border--thick
thick
4px
$border--heavy
heavy
8px
Opacity levels
$opacity-level-semiopaque
Semi Opaque
0.80
$opacity-level-intense
intense
0.64
$opacity-level-mediun
mediun
0.32
$opacity-level-light
light
0.16
$opacity-level-semitransparent
Semi Transparent
0.08
Shadow
$shadow-level-1
Level 1
- X: 0px
- Y: 4px
- B: 8px
$shadow-level-2
Level 2
- X: 0px
- Y: 8px
- B: 24px
$shadow-level-3
Level 3
- X: 0px
- Y: 16px
- B: 32px
$shadow-level-4
Level 4
- X: 0px
- Y: 16px
- B: 48px
Spacing
| Token | rem | px | Example |
|---|---|---|---|
| spacing-01 | 0.125 | 2 | |
| spacing-02 | 0.25 | 4 | |
| spacing-03 | 0.5 | 8 | |
| spacing-04 | 0.75 | 12 | |
| spacing-05 | 1 | 16 | |
| spacing-06 | 1.5 | 24 | |
| spacing-07 | 2 | 32 | |
| spacing-08 | 2.5 | 40 | |
| spacing-09 | 3 | 48 | |
| spacing-10 | 4 | 64 | |
| spacing-11 | 5 | 80 | |
| spacing-12 | 6 | 96 | |
| spacing-13 | 10 | 160 |
Brand tokens
Brand tokens são todos os Design tokens que variam entre as marcas da VERT.
VERT-C OPS
Aa
Font family
AA
Font weight
Brand color
Neutral color low
Neutral color high
Feedback color warning
Feedback color helper
Feedback color success
Feedback color default
VERT Institucional
Aa
Font family
AA
Font weight
Brand color
highlight color
Neutral color low
Neutral color high
Feedback color warning
Feedback color helper
Feedback color success
Feedback color default
Brand colors
Cores utilizadas nas marcas da VERT.
VERT-C OPS
Primary colors
$brand-color-primary-pure
Primary Pure
#00747A
$brand-color-primary-light
Primary Light
#E6F1F2
$brand-color-primary-medium
Primary Medium
#004649
$brand-color-primary-dark
Primary Dark
#123229
Neutral colors
$neutral-color-low-pure
Low Pure
#171919
$neutral-color-low-light
Low Light
#C9C9C9
$neutral-color-low-medium
Low Medium
#AAAAAA
$neutral-color-low-dark
Low Dark
#4A4A4A
$neutral-color-hight-pure
Hight Pure
#FFFFFF
$neutral-color-hight-light
Hight Light
#F4F4F4
$neutral-color-hight-medium
Hight Medium
#EEEEEE
$neutral-color-hight-dark
Hight Dark
#E0E0E0
Feedback colors
$feedback-color-helper-pure
Helper Pure
#F07363
$feedback-color-helper-light
Helper Light
#F8D7DA
$feedback-color-helper-medium
Helper Medium
#C05C4F
$feedback-color-helper-dark
Helper Dark
#783931
$feedback-color-warning-pure
Warning Pure
#E6CF42
$feedback-color-warning-light
Warning Light
#FFF9DB
$feedback-color-warning-medium
Warning Medium
#B8A635
$feedback-color-warning-dark
Warning Dark
#736721
$feedback-color-success-pure
Success Pure
#41D394
$feedback-color-success-light
Success Light
#D4EDDA
$feedback-color-success-medium
Success Medium
#34A976
$feedback-color-success-dark
Success Dark
#206A4A
$feedback-color-default-pure
Default Pure
#00747A
$feedback-color-default-light
Default Light
#E6F1F2
$feedback-color-default-medium
Default Medium
#004649
$feedback-color-default-dark
Default Dark
#004649
VERT Institucional
Primary colors
$brand-color-primary-pure
Primary Pure
#00747A
$brand-color-primary-light
Primary Light
#E6F1F2
$brand-color-primary-medium
Primary Medium
#004649
$brand-color-primary-dark
Primary Dark
#123229
Highlight colors
$brand-color-highlight-pure
Highlight Pure
#F4A053
$brand-color-highlight-light
Highlight Light
#FCE7D4
$brand-color-highlight-medium
Highlight Medium
#C38042
$brand-color-highlight-dark
Highlight Dark
#7A5029
Neutral colors
$neutral-color-low-pure
Low Pure
#171919
$neutral-color-low-light
Low Light
#C9C9C9
$neutral-color-low-medium
Low Medium
#AAAAAA
$neutral-color-low-dark
Low Dark
#4A4A4A
$neutral-color-hight-pure
Hight Pure
#FFFFFF
$neutral-color-hight-light
Hight Light
#F4F4F4
$neutral-color-hight-medium
Hight Medium
#EEEEEE
$neutral-color-hight-dark
Hight Dark
#E0E0E0
Feedback colors
$feedback-color-helper-pure
Helper Pure
#F07363
$feedback-color-helper-light
Helper Light
#F8D7DA
$feedback-color-helper-medium
Helper Medium
#C05C4F
$feedback-color-helper-dark
Helper Dark
#783931
$feedback-color-warning-pure
Warning Pure
#E6CF42
$feedback-color-warning-light
Warning Light
#FFF9DB
$feedback-color-warning-medium
Warning Medium
#B8A635
$feedback-color-warning-dark
Warning Dark
#736721
$feedback-color-success-pure
Success Pure
#41D394
$feedback-color-success-light
Success Light
#D4EDDA
$feedback-color-success-medium
Success Medium
#34A976
$feedback-color-success-dark
Success Dark
#206A4A
$feedback-color-default-pure
Default Pure
#00747A
$feedback-color-default-light
Default Light
#E6F1F2
$feedback-color-default-medium
Default Medium
#004649
$feedback-color-default-dark
Default Dark
#004649
Font Family
Font Weight
VERT-C OPS
$font-family-base
Aa - Base
Lato
$font-weight-black
Black
900
$font-weight-bold
Bold
700
$font-weight-semibold
Aa - Base
600
$font-weight-regular
Aa - Base
400
$font-weight-light
Light
300
VERT Institucional
$font-family-base
Aa - Base
Lato
$font-weight-black
Black
900
$font-weight-bold
Bold
700
$font-weight-semibold
Aa - Base
600
$font-weight-regular
Aa - Base
400
$font-weight-light
Light
300
$font-family-highlight
Aa - Highlight
Abril Fatface
$font-weight-regular
Regular
400