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
21px
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
64px
Aa
$font-size-display
Display
80px
Aa
$font-size-giant
Giant
96px
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-circular
Circular
50%
BORDER WIDTH
$border-width-none
None
0px
$border-width-hairline
Hairline
1px
$border-width-thin
Thin
2px
$border-width-thick
Thick
4px
$border-width-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
- S: 2px
$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 colors
Cores utilizadas nos sistemas e sites das marcas da VERT.
PRIMARY COLORS
$brand-color-primary-pure
Primary Pure
#00747A
$brand-color-primary-extra-light
Primary Extra Light
#E6F1F2
$brand-color-primary-light
Primary Light
#3DA5A5
$brand-color-primary-medium
Primary Medium
#245859
$brand-color-primary-dark
Primary Dark
#033E3F
NEUTRAL COLORS
$neutral-color-low-pure
Low Pure
#171919
$neutral-color-low-extra-light
Low Extra Light
#E3E3E3
$neutral-color-low-light
Low Light
#C9C9C9
$neutral-color-low-medium
Low Medium
#AAAAAA
$neutral-color-low-dark
Low Dark
#4A4A4A
$neutral-color-high-pure
High Pure
#FFFFFF
$neutral-color-high-extra-light
High Extra Light
#F4F4F4
$neutral-color-high-light
High Light
#EEEEEE
$neutral-color-high-medium
High Medium
#E0E0E0
$neutral-color-high-dark
High Dark
#C7C7C7
FEEDBACK COLORS
$feedback-color-helper-pure
Helper Pure
#F07363
$feedback-color-helper-extra-light
Helper Extra Light
#F8D7DA
$feedback-color-helper-light
Helper Light
#D98479
$feedback-color-helper-medium
Helper Medium
#C05C4F
$feedback-color-helper-dark
Helper Dark
#783931
$feedback-color-warning-pure
Warning Pure
#E6CF42
$feedback-color-warning-extra-light
Warning Extra Light
#FFF9DB
$feedback-color-warning-light
Warning Light
#EBD96A
$feedback-color-warning-medium
Warning Medium
#B8A635
$feedback-color-warning-dark
Warning Dark
#736721
$feedback-color-success-pure
Success Pure
#41D394
$feedback-color-success-extra-light
Success Extra Light
#D4EDDA
$feedback-color-success-light
Success Light
#76C2A1
$feedback-color-success-medium
Success Medium
#34A976
$feedback-color-success-dark
Success Dark
#206A4A
$feedback-color-default-pure
Default Pure
#00747A
$feedback-color-default-extra-light
Default Extra Light
#E6F1F2
$feedback-color-default-light
Default Light
#3DA5A5
$feedback-color-default-medium
Default Medium
#245859
$feedback-color-default-dark
Default Dark
#033E3F
Font Family
Font Weight
VERT-C OPS
$font-family-base
Aa - Base
Lato
$font-weight-bold
Bold
700
$font-weight-regular
Regular
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-regular
Regular
400
$font-weight-light
Light
300