Style guide (wip)

Colors

  • u-colormain
  • u-colorsecondary
  • u-colortertiary
  • u-colorquaternary
  • u-colorquaternary-dark
  • u-colorblack
  • u-colorwhite
  • u-bg-colormain
  • u-bg-colorsecondary
  • u-bg-colortertiary
  • u-bg-colorquaternary
  • u-bg-colorquaternary-dark
  • u-bg-colorblack
  • u-bg-colorwhite

Typo sizes

Sizes define by Design for Desktop:

txt-size--asass var: $txt-size--a

txt-size--bsass var: $txt-size--b

txt-size--csass var: $txt-size--c

txt-size--dsass var: $txt-size--d

txt-size--esass var: $txt-size--e

txt-size--fsass var: $txt-size--f

txt-size--gsass var: $txt-size--g

txt-size--hsass var: $txt-size--h

txt-size--isass var: $txt-size--i

txt-size--jsass var: $txt-size--j

txt-size--ksass var: $txt-size--k

txt-size--lsass var: $txt-size--l


Weights

var: $mainfont-bold | class: txt-bold

var: $mainfont-semibold | class: txt-semibold

var: $mainfont-medium | class: txt-medium

var: $mainfont-regular | class: txt-regular

var: $mainfont-light | class: txt-light


Spacings

Helper class for margins: u-marg-X

Where X is a one number of this:

  • 0
  • 10
  • 20
  • 30
  • 60
  • 140

.u-marg-X--tb

.u-marg-X--lr

.u-marg-X--top

.u-marg-X--bottom

.u-marg-X--left

.u-marg-X--right

Helper class for paddings: u-pad-X

Where X is a one number of this:

  • 0
  • 10
  • 20
  • 30
  • 60
  • 140

.u-pad--tb

.u-pad--lr

.u-pad--top

.u-pad--bottom

.u-pad--left

.u-pad--right


Utilizamos cookies propias y de terceros para mejorar tu experiencia y nuestros servicios, analizando la navegación en nuestro sitio web. Si continuúas navegando, consideramos que aceptas su uso. Puedes obtener más información en nuestra política de cookies