Theme: Hello Elementor 3.4.7 | Container: –wp–style–global–content-size (800px) / –wp–style–global–wide-size (1200px)

kitElementos – Design Single Source of Truth

Biblioteca visual para manter consistencia de interface, tipografia, cores, componentes e espacos no Forro.org.

1) Tipografia

h1 | classe: elemento nativo | size aproximado: var(–wp–preset–font-size–x-large: 42px)

Titulo H1 – Escala Principal

h2 | size aproximado: 36px (preset large)

Titulo H2 – Secao

h3 | escala semantica

Titulo H3 – Subsecao

Titulo H4

Titulo H5

Titulo H6

p.has-medium-font-size | 20px

Paragrafo Lead para introducoes e resumos de secao.

p (normal) | line-height herda do tema

Paragrafo normal para leitura continua com foco em conteudo editorial e institucional.

p.has-small-font-size | 13px

Texto pequeno para metadados, notas e legendas.

a (global link style) | text-decoration: underline

Exemplo de link padrao do tema

blockquote | semantico

Design consistente reduz friccao, acelera producao e fortalece a marca.

Forro.org UI Kit

2) Botoes e Estados

Estados demonstrados: Normal, Hover (simulado), Active e Disabled.

.wp-element-button / .wp-block-button__link (base do tema)

Primario – Normal
Primario – Hover
Primario – Active
Primario – Disabled

.kit-btn-secondary (usa var(–wp–preset–color–vivid-cyan-blue))

Secundario – Normal
Secundario – Hover
Secundario – Active
Secundario – Disabled

.wp-block-button.is-style-outline .wp-block-button__link (ghost/cancel)

Ghost / Cancelar

.kit-btn-primary + icone unicode

+Novo Registro
→Avancar

3) Cores e Feedback

var(–wp–preset–color–black)#000000

var(–wp–preset–color–white)#ffffff

var(–wp–preset–color–vivid-cyan-blue)#0693e3

var(–wp–preset–color–vivid-purple)#9b51e0

var(–wp–preset–color–luminous-vivid-orange)#ff6900

var(–wp–preset–color–light-green-cyan)#7bdcb5

Feedback de Sistema

Success

Sucesso: acao concluida corretamente.

Warning

Atencao: revise os dados antes de prosseguir.

Error

Erro: nao foi possivel concluir a solicitacao.

Info

Informacao: atualizacao disponivel para consulta.

4) Grids e Containers

Container padrao: max-width var(–wp–style–global–content-size) | Wide: var(–wp–style–global–wide-size) | Gutter: –wp–style–block-gap (24px)

1/1

Coluna unica (100%)

1/2 + 1/2

50%

1/3 + 1/3 + 1/3

33.3%

5) Formularios

input.kit-field (text)

select.kit-field

textarea.kit-field

checkbox / radio (nativos)

Quero receber novidades

Pesquisador Produtor

6) Sistema de Espacamento

Tokens: –wp–preset–spacing–20/30/40/50/60/70/80

xs | –wp–preset–spacing–20 (0.44rem)

s | –wp–preset–spacing–30 (0.67rem)

m | –wp–preset–spacing–40 (1rem)

l | –wp–preset–spacing–50 (1.5rem)

xl | –wp–preset–spacing–60 (2.25rem)

2xl | –wp–preset–spacing–70 (3.38rem)