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.

BOTÕES NO FUNDO CLARO

Primário
Primário contorno
Secundário Secundário contorno
Destaque
Destaque contorno Base
Base contorno

BOTÕES NO FUNDO ESCURO

Primário
Primário contorno
Secundário Secundário contorno
Destaque
Destaque contorno Branco
Branco contorno

ESCALA DE BOTÕES

btn--primary / btn--xs

btn--primary / btn--xs

btn--primary / btn--m

btn--primary / btn--l

btn--primary / btn--xl

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.

Criação de plataforma de ensino Criação de sites profissionais Criação de funis de venda Criação de e-commerce Marketing digital

Fique por dentro das novidades

Copyright © 2025 FernandoArbex.com