Regras de Design

Esta página define as regras gerais de design do Website Marco Ferreira Agente Imobiliário de forma a garantir a coerência da Marca em todas as páginas e elementos do website.
Cores
Espaçamentos
Tipografia
Classes
Elementos

Palete de Cores

A palete de cores do website

Cores lisas

As cores lisas do website
Vermelho KW
#b40101
Cinza KW
#58585a
Cinza
Secundário KW
#939598
Preto KW
#191515
Cinza
Claro KW
#eae5e5

Gradientes

Os gradientes do website
Fundo com Gradiente Principal
.bg-gradient
Fundo com Gradiente Secundário
.bg-gradient-2
Fundo com Gradiente de destaque
.bg-gradient-3

Espaçamentos

As regras de espaçamentos para o website

Incrementos

8px
Para elementos que estão relacionados.
16px
Para elementos que estão relacionados mas não tanto.
32px
Para elementos que não estão relacionados.
64px
Espaçamento para secções e para elementos que não devem estar perto de outros elementos.
128px
Para espaçamentos maiores.

Classes de Padding (espaçamento interior)

.padding-giant
128px
.padding-big
64px
.padding-medium
32px
.padding-small
16px
.padding-mini
8px

Classes de margem inferior (em relação ao elemento seguinte)

.margin-bottom-mini
8px
.margin-bottom-small
16px
.margin-bottom-medium
32px
.margin-bottom-big
64px

Tipografia

As classes utilitárias ajudam a manter a unidade gráfica ao longo do website.

Tipo de Letra para Títulos - Roboto

h1 - clamp(32px, 4vw, 46px) - weight 700

h2 - clamp(28px, 3.5vw, 42px) - weight 700

h3 - clamp(24px, 3vw, 38px) - weight 700

h4 - clamp(32px, 4vw, 46px) - weight 700

h5 - clamp(32px, 4vw, 46px) - weight 700
h6 - clamp(32px, 4vw, 46px) - weight 700

Tipo de Letra para Parágrafos - Playfair Display

Tamanho do Tipo de Letra de Parágrafo - clamp(16px, 18px, 20px)

Classes utilitárias

As classes utilitárias ajudam a manter a unidade gráfica ao longo do website.

Classes para Sombras

Estas classes controlam os tipos de sombras disponíveis.
Sombra
.shadow
Sombra Suave
.shadow-light

Classes para Cantos Redondos

Estas classes controlam o tipo de cantos redondos disponíveis.
Cantos Redondos Principal
.rounded-corners
16px
Cantos Redondos Secundário
.rounded-corners-2
15px

Classe para Efeitos de Transição

Estas classes controlam o tipo de cantos redondos disponíveis.
Passa com o rato por cima desta caixa para ver o efeito
.transition

Outros Elementos de Design

Alguns elementos de design para o website.

Separador Horizontal

Separador de conteúdo horizontal.
.horizontal-divider

Botões

Estas classes controlam o estilo dos botões. Temos botões Grandes e pequenos, ambos em 3 versões diferentes.