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