Fundamentos

A identidade combina uma voz editorial orgânica com controles diretos e utilitários. Literata conduz conteúdo e títulos serifados; Special Gothic organiza interface, navegação e destaques.

Literata · editorial

Alimentos cheios de vida.

Texto corrido, H1–H4 e H6 · eixos ópticos 7 e 12

Special Gothic · interface

Da fazenda para a mesa.

H5, menu, botões e metadados · eixos wdth e wght

TT Berlinerins · accent

Sta. Julieta Bio

Fonte de acento · uso pontual e expressivo

Cores

A paleta usa raízes escuras para texto e superfícies, contrastes intermediários e destaques luminosos. Prefira sempre as variáveis em vez de valores hexadecimais soltos.

Raiz Espinafre #0D3400
--sjb-color-raiz-espinafre

Contra Quiabo #566400
--sjb-color-contra-quiabo

Destaque Acelga #B3F393
--sjb-color-dest-acelga

Claro 0 #FBFAE9
--sjb-color-claro-0

Claro 1 #FFFABF
--sjb-color-claro-1

Destaque Cenoura #FFA154
--sjb-color-dest-cenoura

Raiz Café #3F0800
--sjb-color-raiz-cafe

Contra Caramelo #834D21
--sjb-color-contra-caramelo

Destaque Rosa #F2C2EC
--sjb-color-dest-rosa

Raiz Beringela #45003D
--sjb-color-raiz-beringela

Destaque Céu #9BD7D1
--sjb-color-dest-ceu

Raiz Brim #1F1A69
--sjb-color-raiz-brim

Contra Batata-doce #691096
--sjb-color-contra-batatadoce

Contra Goiabada #A8332A
--sjb-color-contra-goiabada

Tipografia

As amostras abaixo são elementos reais do tema. Redimensione a janela para conferir a mudança no breakpoint mobile de 749px.

H1

Da fazenda para a mesa

Literata · 54px desktop / 48px mobile · 420 · opsz 12 · line-height 1.1 · 0.01em

H2

Alimentos cheios de vida

Literata · 54px desktop / 48px mobile · 420 · opsz 12 · line-height 1.1 · 0.01em

H3

Conheça nossas cestas

Special Gothic · 40px desktop / 36px mobile · 600 · wdth 80 · line-height 1.1

H4

Colhido no mesmo dia

Special Gothic · 24px desktop / 32px mobile · 700 · wdth 115 · line-height 1.2 · 0.02em

H5

Produtos da estação

Special Gothic · 23px desktop / 21px mobile · 405 · wdth 115 · line-height 1.3 · 0.03em

H6

Uma relação mais próxima com a comida

Literata · 23px desktop / 21px mobile · 500 · opsz 9 · line-height 1.3

P

Cada cesta acompanha o ritmo da fazenda. O que chega à mesa foi colhido no ponto, com cuidado e respeito pelo tempo da terra.

Literata · 18px desktop / 17px mobile · 450 · opsz 9 · line-height 1.5 · -0.01em

Caption

Colhido hoje · entrega na sua região

Special Gothic · 17px desktop / mobile · 450 · wdth 88 · line-height 1.25 · 0.01em

Nível	Desktop	Mobile	Família	Peso / eixo
H1	54 / 1.1	48 / 1.1	Literata	420 · opsz 12 · 0.01em
H2	54 / 1.1	48 / 1.1	Literata	420 · opsz 12 · 0.01em
H3	40 / 1.1	36 / 1.1	Special Gothic	600 · wdth 80
H4	24 / 1.2	32 / 1.2	Special Gothic	700 · wdth 115 · 0.02em
H5	23 / 1.3	21 / 1.3	Special Gothic	405 · wdth 115 · 0.03em
H6	23 / 1.3	21 / 1.3	Literata	500 · opsz 9
P	18 / 1.5	17 / 1.5	Literata	450 · opsz 9 · -0.01em
Caption	17 / 1.25	17 / 1.25	Special Gothic	450 · wdth 88 · 0.01em

Componentes

Elementos recorrentes da loja em combinações aprovadas de contraste. Cards usam raio máximo de 6px nesta referência; pills são reservadas para badges e estados.

Botões

Badges e metadados

Orgânico Da estação Novidade 12 DE JUNHO DE 2026

Cesta da semana

Uma seleção do que a fazenda colheu no ponto certo.

Plantio dedicado

Previsibilidade e produção planejada para cada parceiro.

Direto da terra

Menos distância entre quem planta e quem come.

Formulários

Campos usam Special Gothic para interface, altura mínima confortável, texto em quiabo e superfície sem contorno.

Nome

Região

Mensagem

Layout

O padrão editorial usa container máximo de 1200px com margens responsivas do tema. Seções podem ser full-width, mas o conteúdo deve reencontrar esse eixo.

Container editorial

Escala de espaçamento

8

16

24

32

48

64

Raios

0 · 4px · 8px. Pills somente para badges, filtros e estados.

Design system Sta. Julieta Bio