Fundação Americana do Fígado

Guia de Estilo

Esta página descreve os estilos e padrões atuais para o Fundação Americana do Fígado .

Cores

Uma visão geral das cores da marca deste site.

Cores e Sombras

Transparências

primário

Primário

Ultra Light

Claro

Médio

Escuro

Ultra escuro

Comp

secundário

Secundário

Ultra Light

Claro

Médio

Escuro

Ultra escuro

Comp

acento

Sotaque

Ultra Light

Claro

Médio

Escuro

Ultra escuro

Comp

base

Fundo

Ultra Light

Claro

Médio

Escuro

Ultra escuro

Comp

Sombra

Sombra

Ultra Light

Claro

Médio

Escuro

Ultra escuro

primário

Transsexual 10

Transsexual 20

Transsexual 40

Transsexual 60

Transsexual 80

Transsexual 90

secundário

Transsexual 10

Transsexual 20

Transsexual 40

Transsexual 60

Transsexual 80

Transsexual 90

acento

Transsexual 10

Transsexual 20

Transsexual 40

Transsexual 60

Transsexual 80

Transsexual 90

base

Transsexual 10

Transsexual 20

Transsexual 40

Transsexual 60

Transsexual 80

Transsexual 90

Sombra

Transsexual 10

Transsexual 20

Transsexual 40

Transsexual 60

Transsexual 80

Transsexual 90

Tipografia

Abaixo está uma visão geral dos tamanhos e pesos de tipografia responsiva para este site. Estes são calculados a partir de um tamanho base e uma escala matemática.

Headings

H1 (--xxl)

Título 1 Ordinário

Título 1 Médio

Título 1 Negrito

H2 (--xl)

Título 2 Ordinário

Título 2 Médio

Título 2 Negrito

H3 (--l)

Título 3 Ordinário

Cabeçalho Médio

Título 3 Negrito

H4 (--m)

Título 4 Ordinário

Título 4 Médio

Título 4 Negrito

H5 (--s)

Título 5 Ordinário

Cabeçalho Médio

Título 5 Negrito

H6 (--xs)

Título 6 Ordinário

Título 6 Médio

Título 6 Negrito

Texto de corpo

CORPO DO TEXTO (--m)

Texto m Regular

Texto m Médio

Texto m Negrito

TEXTO PEQUENO (--s)

Texto é Regular

Meio de Texto

Texto em Negrito

TEXTO EXTRA PEQUENO (--xs)

Texto x Regular

Texto xs Médio

Texto X Negrito

Exemplos

Título 1 (H1)

Este é um texto grande. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea comodo consequat.

Título 2 (H2)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed não eiusmod tempor ut incididunt labore et dolore magna aliqua. Ut enim ad minim veniam, Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Título 3 (H3)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed não eiusmod tempor ut incididunt labore et dolore magna aliqua. Ut enim ad minim veniam, Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Título 4 (H4)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed não eiusmod tempor ut incididunt labore et dolore magna aliqua. Ut enim ad minim veniam, Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Título 5 (H5)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed não eiusmod tempor ut incididunt labore et dolore magna aliqua. Ut enim ad minim veniam, Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Título 6 (H6)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed não eiusmod tempor ut incididunt labore et dolore magna aliqua. Ut enim ad minim veniam, Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

botões

Botões sólidos e de contorno estão disponíveis em todos os conjuntos de cores, incluindo preto e branco.

BOTÕES EM FUNDO CLARO

Primário
Contorno Primário
Secundário Esboço Secundário
Sotaque
Contorno de acento Fundo
Contorno básico

BOTÕES EM FUNDO ESCURO

Primário
Contorno Primário
Secundário Esboço Secundário
Sotaque
Contorno de acento Branco
Contorno Branco

BOTÃO DE ESCALA

btn--primário / btn--xs

btn--primário / btn--xs

btn--primário / btn--m

btn--primário / btn--l

btn--primário / btn--xl

btn--primário / btn--xxl

larguras

Existem seis valores que você pode usar para controlar a largura do elemento. Eles respondem automaticamente.

--largura-xs

--largura-s

--largura-m

--largura-l

--largura-xl

--largura-xxl

Preenchimento de seção

O preenchimento de seções é responsivo e baseado em um multiplicador do sistema de espaçamento central.

nenhum

XS

S

M

L

XL

XXL

Espaçamento

Existem seis níveis de espaçamento responsivo calculados a partir de um tamanho base e uma escala matemática. Isso garante que a margem, o preenchimento e as lacunas correspondam perfeitamente.

--espaço-xs

--espaço-s

--espaço-m

--espaço-l

--espaço-xl

--espaço-xxl

Preenchimento do elemento

Aqui estão os seis níveis de espaçamento visualizados como preenchimento.

Card

Este é um cartão com preenchimento XS. Seu conteúdo é bem próximo das bordas.

Card

Este é um cartão com preenchimento S. Tem um enchimento um pouco mais apertado.

Card

Este é um cartão com preenchimento M. Possui espaço para respiração padrão.

Card

Este é um cartão com preenchimento em L. Tem espaço extra para respirar.

Card

Este é um cartão com preenchimento XL. Tem espaço para respirar significativo.

Card

Este é um cartão com preenchimento XXL. Evite usá-lo em um espaço confinado.

Sombras

Existem três sombras de caixa multicamadas para escolher.

Sombra caixa M

Sombra caixa L

Sombra de caixa XL

Raio de fronteira

Existem seis valores de raio de borda calculados a partir de um tamanho base e uma escala matemática.

XS arredondado

S arredondado

M arredondado

Arredondado L

GG arredondado

XXL arredondado