# Tokens

# Cores

Use tokens de color para definir cores de texto, fundo e bordas.

Token	Valor
$token-color-brand-primary-600	#46ab21
$token-color-brand-primary-500	#52c628
$token-color-brand-primary-400	#5fcf35
$token-color-brand-secondary-600	#355dd4
$token-color-brand-secondary-500	#4c78fa
$token-color-brand-secondary-400	#5780fa
$token-color-transparent	rgba(0, 0, 0, 0)
$token-color-white	#ffffff
$token-color-neutral-900	#23282d
$token-color-neutral-800	#3e4851
$token-color-neutral-700	#636f7a
$token-color-neutral-600	#8995a0
$token-color-neutral-500	#b8c2cb
$token-color-neutral-400	#dbe1e5
$token-color-neutral-300	#f1f5f8
$token-color-neutral-200	#f6f8fa
$token-color-neutral-100	#fafcfd
$token-color-grey-900	#030303
$token-color-grey-800	#262626
$token-color-grey-700	#414141
$token-color-grey-600	#575757
$token-color-grey-500	#b5b7b9
$token-color-grey-400	#dddddd
$token-color-grey-300	#ecedee
$token-color-grey-200	#f7f7f7
$token-color-grey-100	#ffffff
$token-color-red-600	#871e1e
$token-color-red-500	#b92828
$token-color-red-400	#fae7e8
$token-color-blue-600	#004570
$token-color-blue-500	#0065a4
$token-color-blue-400	#e2eef6
$token-color-yellow-600	#755c17
$token-color-yellow-500	#ffca34
$token-color-yellow-400	#fff6dd
$token-color-green-600	#005726
$token-color-green-500	#00893c
$token-color-green-400	#e4f2ea
$token-color-facebook-600	#365899
$token-color-facebook-500	#4267b2
$token-color-facebook-400	#476fbf
$token-color-linkedin-600	#006a9c
$token-color-linkedin-500	#067ab1
$token-color-linkedin-400	#007db8
$token-color-twitter-600	#1a90d9
$token-color-twitter-500	#1d9ff0
$token-color-twitter-400	#1fa9ff
$token-color-instagram-600	#a8258c
$token-color-instagram-500	#c32aa3
$token-color-instagram-400	#cc2daa

# Tipografia - Família tipográfica

Use tokens de font-family para alterar família tipográfica.

Token	Valor
$token-font-family-sans	'Source Sans Pro', sans-serif	Aa

# Tipografia - Escala de Tamanho

Use tokens de font-size para alterar tamanho da fonte.

Token	Valor
$token-font-size-2-xs	10px	Aa
$token-font-size-xs	12px	Aa
$token-font-size-sm	14px	Aa
$token-font-size-base	16px	Aa
$token-font-size-lg	18px	Aa
$token-font-size-xl	20px	Aa
$token-font-size-2-xl	24px	Aa
$token-font-size-3-xl	28px	Aa
$token-font-size-4-xl	32px	Aa
$token-font-size-5-xl	36px	Aa
$token-font-size-6-xl	40px	Aa

# Tipografia - Escala de Peso

Use tokens de font-weight para alterar peso da fonte.

Token	Valor
$token-font-weight-black	900	Aa
$token-font-weight-extrabold	800	Aa
$token-font-weight-bold	700	Aa
$token-font-weight-semibold	600	Aa
$token-font-weight-medium	500	Aa
$token-font-weight-normal	400	Aa
$token-font-weight-light	300	Aa
$token-font-weight-thin	200	Aa
$token-font-weight-hairline	100	Aa

# Tipografia - Espaçamento entre Letras

Use tokens de letter-spacing para alterar espaçamento entre letras.

Token	Valor
$token-letter-spacing-sm	-0.05em	Aa
$token-letter-spacing-md	0	Aa
$token-letter-spacing-lg	0.05em	Aa

# Tipografia - Altura de Linha

Use tokens de line-height para alterar altura de linha.

Token	Valor
$token-line-height-2-xs	12px	Aa
$token-line-height-xs	16px	Aa
$token-line-height-sm	20px	Aa
$token-line-height-base	24px	Aa
$token-line-height-lg	28px	Aa
$token-line-height-xl	32px	Aa
$token-line-height-2-xl	36px	Aa
$token-line-height-3-xl	40px	Aa
$token-line-height-4-xl	44px	Aa
$token-line-height-5-xl	48px	Aa
$token-line-height-6-xl	52px	Aa

# Media-query

Use tokens de media-query para definir breakpoints.

Token	Valor
$token-border-radius-none	0
$token-border-radius-sm	2px
$token-border-radius-md	4px
$token-border-radius-lg	8px
$token-border-radius-full	9999px

# Dimensionamento - Margem

Use tokens de margin para definir margem.

Token	Valor
$token-margin-2	2px
$token-margin-4	4px
$token-margin-8	8px
$token-margin-16	16px
$token-margin-24	24px
$token-margin-32	32px
$token-margin-40	40px
$token-margin-48	48px
$token-margin-56	56px
$token-margin-64	64px
$token-margin-72	72px
$token-margin-80	80px
$token-margin-none	0
$token-margin-auto	auto

# Dimensionamento - Paddings

Use tokens de padding para definir preenchimento.

Token	Valor
$token-padding-2	2px
$token-padding-4	4px
$token-padding-8	8px
$token-padding-16	16px
$token-padding-24	24px
$token-padding-32	32px
$token-padding-40	40px
$token-padding-48	48px
$token-padding-56	56px
$token-padding-64	64px
$token-padding-72	72px
$token-padding-80	80px
$token-padding-none	0

# Borda - Cantos arredondados

Use tokens de border-radius para alterar o tamanho do raio da borda.

Token	Valor
$token-border-radius-none	0
$token-border-radius-sm	2px
$token-border-radius-md	4px
$token-border-radius-lg	8px
$token-border-radius-full	9999px

# Borda - Largura

Use tokens de border-width para alterar a espessura da borda.

Token	Valor
$token-border-width-1	1px
$token-border-width-2	2px
$token-border-width-4	4px
$token-border-width-none	0

# Tamanho - Altura

Use tokens de height para definir altura de elementos.

Token	Valor
$token-height-auto	auto
$token-height-none	0
$token-height-full	100%
$token-height-screen	100vh

# Tamanho - Largura

Use tokens de width para definir largura de elementos.

Token	Valor
$token-width-auto	auto
$token-width-none	0
$token-width-1-2	50%
$token-width-1-3	33.33333%
$token-width-2-3	66.66667%
$token-width-1-4	25%
$token-width-3-4	75%
$token-width-1-5	20%
$token-width-2-5	40%
$token-width-3-5	60%
$token-width-4-5	80%
$token-width-1-6	16.66667%
$token-width-5-6	83.33333%
$token-width-1-12	8.33333%
$token-width-full	100%
$token-width-screen	100vw

# Opacidade

Use tokens de opacity para transparência de elementos.

Token	Valor
$token-opacity-0	0
$token-opacity-25	.25
$token-opacity-50	.5
$token-opacity-75	.75
$token-opacity-100	1

# Sombras

Use tokens de box-shadow para definir uma sombra de caixa.

Token	Valor
$token-box-shadow-xs	0 1px 2px 0 rgba(0,0,0,0.10)
$token-box-shadow-sm	0 2px 4px 0 rgba(0,0,0,0.10)
$token-box-shadow-md	0 4px 8px 0 rgba(0,0,0,0.12), 0 2px 4px 0 rgba(0,0,0,0.08)
$token-box-shadow-lg	0 15px 30px 0 rgba(0,0,0,0.11), 0 5px 15px 0 rgba(0,0,0,0.08)
$token-box-shadow-inner	inset 0 2px 4px 0 rgba(0,0,0,0.06)
$token-box-shadow-ouline	0 0 0 3px rgba(52,144,220,0.5)
$token-box-shadow-none	none

# Z-index

Use tokens de z-index para definir o empilhamento dos elementos.

Token	Valor
$token-z-index-0	0
$token-z-index-10	10
$token-z-index-20	20
$token-z-index-30	30
$token-z-index-40	40
$token-z-index-50	50
$token-z-index-auto	auto