ARTIGOS
CONTATO
E-learning, E-commerce, Mentoria, Criação de sites

Guia de estilo

Esta página descreve os estilos e padrões atuais deste site.

Cores

Uma visão geral das cores da marca deste site.
Cores & Tons
Transparências
Primária
Primária
Muito claro
Claro
Médio
Escuro
Muito escuro
Comp
secundária
Secundária
Muito claro
Claro
Médio
Escuro
Muito escuro
Comp
destaque
Destaque
Muito claro
Claro
Médio
Escuro
Muito escuro
Comp
base
Base
Muito claro
Claro
Médio
Escuro
Muito escuro
Comp
Sombra
Sombra
Muito claro
Claro
Médio
Escuro
Muito escuro
primária
Trans 10
Trans 20
Trans 40
Trans 60
Trans 80
Trans 90
secundária
Trans 10
Trans 20
Trans 40
Trans 60
Trans 80
Trans 90
destaque
Trans 10
Trans 20
Trans 40
Trans 60
Trans 80
Trans 90
base
Trans 10
Trans 20
Trans 40
Trans 60
Trans 80
Trans 90
sombra
Trans 10
Trans 20
Trans 40
Trans 60
Trans 80
Trans 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.
Cabeçalhos
H1 (--xxl)

Heading 1 Regular

Heading 1 Medium

Heading 1 Bold

H2 (--xl)

Heading 2 Regular

Heading 2 Medium

Heading 2 Bold

H3 (--l)

Heading 3 Regular

Heading  Medium

Heading 3 Bold

H4 (--m)

Heading 4 Regular

Heading 4 Medium

Heading 4 Bold

H5 (--s)
Heading 5 Regular
Heading  Medium
Heading 5 Bold
H6 (--xs)
Heading 6 Regular
Heading 6 Medium
Heading 6 Bold
Corpo do texto
BODY TEXT (--m)
Text m Regular
Text m Medium
Text m Bold
SMALL TEXT (--s)
Text s Regular
Text s Medium
Text s Bold
XTRA SMALL TEXT (--xs)
Text xs Regular
Text xs Medium
Text xs Bold
Exemplos

Heading 1 (H1)

This is large text. 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 commodo consequat.

Heading 2 (H2)

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 commodo consequat.

Heading 3 (H3)

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 commodo consequat.

Heading 4 (H4)

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 commodo consequat.
Heading 5 (H5)
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 commodo consequat.
Heading 6 (H6)
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 commodo consequat.

Botões

Os botões sólidos e de contorno estão disponíveis em todos os conjuntos de cores, incluindo preto e branco.
ESCALA DE BOTÕES
Button XS
btn--primary / btn--xs
Button S
btn--primary / btn--xs
Button M
btn--primary / btn--m
Button L
btn--primary / btn--l
Button XL
btn--primary / btn--xl
Button XXL
btn--primary / btn--xxl

Larguras

Existem seis valores que você pode usar para controlar a largura do elemento. Eles são automaticamente responsivos.
--width-xs
--width-s
--width-m
--width-l
--width-xl
--width-xxl

Espaçamento da seção

O preenchimento para seções é responsivo e baseado em um multiplicador do sistema de espaçamento do núcleo.
None
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.
--space-xs
--space-s
--space-m
--space-l
--space-xl
--space-xxl

Espacaçamento 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 está bem próximo das bordas.

Card

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

Card

Este é um cartão com preenchimento M. Tem espaço para respirar padrão.

Card

Este é um cartão com preenchimento 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 de várias camadas para escolher.
Box shadow M
Box shadow L
Box shadow XL

Raio da borda

Existem seis valores de raio de borda calculados a partir de um tamanho base e uma escala matemática.
Rounded XS
Rounded S
Rounded M
Rounded L
Rounded XL
Rounded XXL
Especialista em construção de plataforma de ensino online (e-learning) com rede social própria, interativa e dinamica para infoprodutores, pequenos e grandes negócios.

Fique por dentro das novidades

Copyright © 2022 FernandoArbex.com
envelopegraduation-hat