logomarca Pro Beleza Web

Framework

Guia de estilos da interface do projeto.

Todas as informações visuais do projeto. O Guia de estilos é o que garante a identidade visual do projeto, definindo as diretrizes do projeto para que ele tenha uma consistência e uniformidade visual

01. Paleta de cores

Nesta parte do guia de estilo, definimos cada cor nas configurações de fundo, bordas, gradientes e fontes empregadas nas páginas do projeto. Usar os códigos das cores para seguir um padrão uniforme na criação de novos layouts de página

Paleta principal do brabding da marca

#f7d584

#ff6a88

#944595

#68528e

Paleta de apoio

#ffffff

#2b2b2b

#faaca8

#ddd6f3

Gradientes de cores

Gradiente box categorias:

– Cabelos;

– Cuidados para a pele;

#68528e

#ff6a88

Gradiente seções:

– 1° dobra

– Rodapé

#68528e

#944595

Gradiente box categoria:

– Perfumes

– Corpo & Banho

#944595

#fbda61

Gradiente box categoria:

– Maquiagem

– Dermocosméticos

#faaca8

#ddd6f3

02. Tipografia

Definições de organização dos textos na construção estética de design geral.

Cabeçalho 1

Playfair Display 60px

Cabeçalho 2

Playfair Display 42px

Cabeçalho 3

Playfair Display 32px

Cabeçalho 4

Playfair Display 22px

Corpo 16px

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.

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.

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.

Lista 16px

  • Lorum Ipsum
  • Lorum Ipsum
  • Lorum Ipsum
  • Lorum Ipsum
  • Lorum Ipsum
  • Lorum Ipsum
  1. Lorum Ipsum
  2. Lorum Ipsum
  3. Lorum Ipsum

03. Módulos

Nesta parte do guia de estilo tratamos de alguns dos módulos mais usados nas páginas do site. Aqui iremos adicionar criações de módulos novas desenvolvidas na criação das demais páginas e conteúdos 

Botões

Saber mais
Saber mais
Saber mais
Saber mais
Saber mais

Formatação de Data

Caracteres de formato DIA

d = 05 (Dia do mês, 2 dígitos com zeros à esquerda)
D = qui (Uma representação textual de um dia, três letras)
l = quinta-feira (Uma representação textual completa do dia da semana)
N = 4 (Representação numérica ISO-8601 do dia da semana; 1 para segunda-feira e 7 para domingo)
S = th (sufixo para o dia do mês; use com j)
w = 4 (Representação numérica do dia da semana; 0 para dom e 6 para sáb.)
z = 339 (The day of th(O dia do ano, começando em 0; ou seja, "este é o 173º dia do ano")e year, starting from 0; ie. "this is the 173rd day of the year")

Caracteres de formato da SEMANA

W = 49 (número da semana do ano, semanas começando na segunda-feira, ou seja, "esta é a 26ª semana do ano")

Caracteres de formato do MÊS

F = dezembro (A full textual representation of a month, such as January or March)
m = 12 (Mês numérico, com zeros à esquerda)
M = dez (Curto mês textual, três letras)
n = 12 (Mês numérico, sem zeros à esquerda)
t = 31 (Número de dias em determinado mês)

Caracteres de formato do ANO

Y = 2024 (Ano numérico de 4 dígitos; ou seja, "2020")
y = 24 (Ano numérico de 2 dígitos; ou seja, "20")

Exemplos

l, F jS, Y = quinta-feira, dezembro 5th, 2024
m · d · y = 12 · 05 · 24

Formatação de TEMPO

Caracteres de formação de tempo

a = pm (am minúsculo ou pm)
A = PM (maiúsculas AM ou PM)
g = 1 (Hora, 12 horas, sem zeros à esquerda; "1-12")
h = 01 (Hora, 12 horas, com zeros à esquerda; "01-12")
G = 13 (Hora, 24 horas, com (Hora, 24 horas, sem zeros à esquerda; "0-23") fora dos zeros à esquerda; "0-23")
H = 13 (Hora, 24 horas, com zeros à esquerda; "00-23")
i = 49 (Minutes, with le(Minutos, com zeros à esquerda; "00-59")ading zeros; "00-59")
s = 54 (Seconds, with lead(Segundos, com zeros à esquerda; "00-59")ing zeros; "00-59")
T = -03 (Fuso horário)

Exemplos

g:i a = 1:49 pm
g:i:s a = 1:49:55 pm

Exemplos de formatação de DATA + HORA

Y/m/d g:i:s A = 2024/12/05 1:49:55 PM
M j, Y @ G:i = dez 5, 2024 @ 13:49

Escapando com “” Exemplos

D \a\t ga = qui at 1pm
\T\h\e dS \d\a\y \o\f F = The 05th day of dezembro

Masculino

  • Cabelo
  • Barba
  • Corpo
  • Pés
  • Mãos

Equipamentos

  • Cabelo
  • Barba
  • Rosto
  • Corpo
  • Pés
  • Mãos