O sistema, uma peça por vez

Tudo aqui nasce do tokens.json: o que você vê é o que o sistema faz. Escolha por onde entrar, e a página mostra só aquilo.

Fundamentos

Logos

as 5 versões oficiais e os pares fundo/tinta

Paleta

6 cores, com contraste medido em cada par

Tipografia

duas famílias, 21 tokens de escala

Iconografia

61 ícones em 8 categorias

Espaçamento

a escala e o layout da tela

Curvatura

a linguagem curva da SSM

Sombras

três níveis, uso comedido

Motion

durações, curvas e ritmo social

As peças

Átomos

as menores unidades: botão, campo, tag

Moléculas

peças montadas de átomos

Organismos

seções inteiras, no canvas e na tela

Templates

os arquétipos de peça pronta

Páginas

o sistema aplicado por inteiro

Direção

Fotografia

a direção da foto e os prompts de IA

Personas

o clima de cada marca

Composição

os limites que separam desenho de ruído

Governança

Arquitetura de marca

as duas marcas e o que cada uma guarda

Decisões

o que mudou, quando e por quê

Design System · linguagem visual

O sistema por trás de cada peça

A linguagem visual executável das duas marcas: cores, tipos, componentes, logos e regras de composição. O porquê estratégico vive no documento irmão, Marca & Voz.

v4.12.0 · 28/07/2026 6 cores · 2 famílias tipográficas · … ícones 1 fonte de verdade: tokens.json

Vou montar um postArquétipos, zonas, checklist Preciso de foto ou promptDireção fotográfica e IA Preciso de uma cor ou fontePaleta, tipografia, pares AA

0Tokens6 cores · 2 famílias · escalas 1Átomos… 2Moléculas… 3Organismos… 4Templates… 5Páginasos posts publicados

Arquitetura de marca

Don Artesano é a mãe: atelier, projetos sob medida, B2B. CubasFarm é a filha: loja online, consumidor final, B2C. Compartilham DNA visual, mas cada uma guarda cores de identidade exclusivas que a outra nunca usa: Ônix na mãe; Dourado e Resina na filha.

Empresa mãe · projetos sob medida · B2B

Público: Arquitetos e construtoras
Tom: Sofisticado, atelier exclusivo
Cor dominante: Titânio Sólido
Destaque: Azul Ônix (exclusivo)
Proibido: Dourado (exclusivo CubasFarm)

Empresa filha · loja online · B2C

Público: Consumidor final
Tom: Aspiracional, acessível, ágil
Cor dominante: Branco Resina
Detalhe: Dourado (máx. 1-2 elementos (casa: Regras de composição))
Proibido: Azul Ônix (exclusivo DA)

Logos

As versões oficiais e os pares fundo/tinta aprovados. Cada logo aqui é o arquivo de Logos/ renderizado, e a proporção ao lado é medida do desenho, não digitada. Passe o mouse numa logo para exportar em SVG ou PNG.

Respiro mínimo: 25% da altura da logo aplicada, em todos os 4 lados
Proibições: Nunca compor a logo na mão (selo + nome digitado ao lado): inventa um lockup que não existe. Use sempre UM arquivo pronto: horizontal, vertical ou selo · Nunca em Dourado (nenhuma marca) · Nunca esticar, comprimir, rotacionar, inclinar · Nunca sombra, contorno, brilho, gradiente · Nunca recolorir fora dos pares fundo/logo oficiais · Logo CubasFarm nunca sobre Titânio Sólido
No Instagram: capa de feed 120px, canto inferior direito · miolo de feed 80px, canto inferior direito · feed de CTA 150px, centralizada acima do CTA · story 120px, canto inferior direito · capa de reel 120px, canto inferior direito (casa: organismo assinatura)

Don Artesano

Não. Selo + nome digitado ao lado inventa um lockup que não existe.

Sim. O arquivo Logos/da-horizontal.svg inteiro, como uma peça só.

Don Artesano · Horizontal

quando usar: cabeçalhos de site, papel timbrado, assinatura de e-mail, rodapés
tinta: claros: Titânio Sólido · escuros: Branco SSM
mínimos: 140px largura digital · 30mm largura impresso
proporção: 3,87:1 medida do arquivo (948×245)
arquivo: Logos/da-horizontal.svg

Don Artesano · Vertical

quando usar: capas, aberturas de vídeo, posts com altura disponível
tinta: claros: Titânio Sólido · escuros: Branco SSM
mínimos: 100px largura digital · 22mm largura impresso
proporção: 2,31:1 medida do arquivo (973×422)
arquivo: Logos/da-vertical.svg

Selo DA

quando usar: favicon, avatar, marca d'água, espaços mínimos; único aprovado em tamanhos extremos (16-32px)
tinta: sobre Ônix e escuros: Branco SSM · sobre claros: Titânio Sólido
mínimos: 24px altura digital · 8mm altura impresso
proporção: 1,25:1 medida do arquivo (858×688)
arquivo: Logos/selo-da.svg

CubasFarm · Horizontal

quando usar: contextos largos no universo CubasFarm
tinta: claros: Titânio Sólido · foto escura com descanso: Branco SSM · nunca sobre Titânio chapado
mínimos: 120px largura digital · 25mm largura impresso
proporção: 2,62:1 medida do arquivo (497×190)
arquivo: Logos/cf-horizontal.svg

CubasFarm · Vertical

quando usar: contextos altos no universo CubasFarm
tinta: claros: Titânio Sólido · foto escura com descanso: Branco SSM · nunca sobre Titânio chapado
mínimos: 90px largura digital · 20mm largura impresso
proporção: 1,56:1 medida do arquivo (413×265)
arquivo: Logos/cf-vertical.svg

Paleta de cores

Principal

Titânio Sólido

Dominante na Don Artesano; uso comedido na CubasFarm.

RGB 50, 54, 67 · CMYK 25 19 0 74

Principal

Cinza Quartzo

Subtítulos, menus, legendas, texto secundário.

RGB 96, 100, 112 · CMYK 14 11 0 56

Principal

Branco SSM

Texto sobre escuro; o branco do produto.

RGB 255, 255, 255 · CMYK 0 0 0 0

Exclusivo DA

Azul Ônix

Heros e fundos escuros de sofisticação.

RGB 27, 33, 45 · CMYK 40 27 0 82

Exclusivo CF

Dourado

Acento, no máximo 1 a 2 elementos por peça.

RGB 209, 159, 71 · CMYK 0 24 66 18

Exclusivo CF

Branco Resina

O claro quente da loja: fundos e grids de produto.

RGB 242, 234, 217 · CMYK 0 3 10 5

Pares de texto aprovados

AaTitânio / Branco SSM12.04:1 · AAA ✓

AaTitânio / Branco Resina10.06:1 · AAA ✓ · só CF

AaBranco SSM / Azul Ônix16.13:1 · AAA ✓ · só DA

AaBranco SSM / Titânio12.04:1 · AAA ✓

AaTitânio / Dourado5.02:1 · AA ✓ · só CF

AaBranco SSM / Dourado2.40:1 · reprova no WCAG · só CF · exceção de marca

AaDourado / Branco SSM2.40:1 · reprova no WCAG · só CF · exceção de marca

Neutros de apoio · não-marca

Canvas

#f8f8f8 · fundo de app/docs

Borda sutil

#ededed · divisor leve

Borda padrão

#d9d9d9 · inputs, cards

Estados semânticos · alertas e feedback

Sucesso

#1f6b3e

Atenção

#9c6a1e · ≠ dourado

Erro

#a8281c

Info

#1f4d8c

Estados são não-brand: aparecem em validações, banners e feedback de UI, nunca como cor de marca em peças. O âmbar de atenção existe justamente para não roubar o papel do Dourado.

COMPRAR

Não. Dourado sobre Ônix mistura as exclusivas das duas marcas numa peça só: não existe peça meio Don, meio CubasFarm.

COMPRAR

Sim. Cada exclusiva na marca dona: o Dourado assina a CubasFarm sobre as cores compartilhadas.

Tipografia

Duas famílias, cada uma com uma função fixa. NUNCA em caixa alta. Cada amostra abaixo é vestida pelo próprio token que ela ilustra: o que você vê é o que o token faz.

As duas famílias

Playfair Display 0123456789 Playfair Display · Títulos editoriais. NUNCA em caixa alta.

Inter 0123456789 Inter · UI, corpo, labels, botões

Escala do canvas · 11 tokens

Tamanhos de arte para 3:4 e 9:16. Amostras grandes aparecem reduzidas na página; o tamanho real está sempre escrito ao lado.

Título editorial H1-titulo-principal Playfair Display · Medium · 80px · entrelinha 1.1
amostra reduzida a 34px

Subtítulo de seção H2-subtitulo Playfair Display · Medium · 56px · entrelinha 1.1
amostra reduzida a 34px

Cabeçalho de seção H3-cabecalho Inter · Bold · 40px · caixa alta · tracking 0.1em · entrelinha 1.1
amostra reduzida a 34px

Corpo de texto: explicação, legenda de post, parágrafo. corpo Inter · Regular · 35px · entrelinha 1.4
amostra reduzida a 17px

Legenda / ficha técnica de produto legenda-spec Inter · Regular · 28px · entrelinha 1.3
amostra reduzida a 17px

Comprar agora cta-botao Inter · Bold · 35px · caixa alta · tracking 0.1em · entrelinha 1.1
amostra reduzida a 17px

Crédito de foto ou projeto credito Inter · Regular · 22px · entrelinha 1.3
amostra reduzida a 17px

Tag · Label tag-de-categoria Inter · Bold · 22px · entrelinha 1.2
amostra reduzida a 17px

Soft display-hero Playfair Display · Medium · 200px · entrelinha 1.1
Canvas social only, raro · amostra reduzida a 34px

Novidade tag-pill Inter · Bold · 28px · entrelinha 1.2
Pill/etiqueta destacada em templates (ex: pill do Arquétipo G). · amostra reduzida a 17px

“ aspas-decorativas Playfair Display · Medium · 280px · entrelinha 1.1
Aspas gigantes do Story B Quote: elemento gráfico decorativo (pode ser Dourado na CF por não ser texto legível). · amostra reduzida a 34px

Escala da tela · 10 tokens

Título editorial h1-desktop Playfair Display · Medium · 48px · entrelinha 1.1
amostra reduzida a 34px

Título editorial h1-mobile Playfair Display · Medium · 28px · entrelinha 1.15

Subtítulo de seção h2-desktop Playfair Display · Medium · 32px · entrelinha 1.2

Subtítulo de seção h2-mobile Playfair Display · Medium · 22px · entrelinha 1.25

Cabeçalho de seção section-title Inter · Bold · 14px · tracking 0.1em · entrelinha 1.3

Corpo de texto: explicação, parágrafo de site. body Inter · Regular · 14px · entrelinha 1.55

Texto de apoio menor body-small Inter · Regular · 12px · entrelinha 1.5

Legenda de imagem caption Inter · Regular · 12px · entrelinha 1.4

R$ 4.290 price Inter · Semi Bold · 18px · entrelinha 1.3
Preço é tabular/funcional, NUNCA Playfair · amostra reduzida a 17px

R$ 4.290 price-large Inter · Bold · 28px · entrelinha 1.3
PDP destaque. Números SEMPRE em Inter (regra inviolável): a versão Playfair foi um erro herdado e morreu aqui. · amostra reduzida a 17px

Em Playfair (display), numerais SEMPRE lining (feature lnum): o conjunto padrão da fonte é oldstyle e a marca não o usa. Números funcionais (preço, quantidade, tabela) são Inter, tabulares quando em coluna. Limites de composição: casa única em Regras de composição.

Feito à mão

Não. NUNCA em caixa alta.: em caixa alta o display perde o desenho das minúsculas e vira gritaria serifada.

Feito à mão

Sim. Playfair 500 em caixa normal: fala baixo e imponente, do jeito da marca.

R$ 4.290

Não. Preço é tabular/funcional, NUNCA Playfair: o número vira enfeite e desalinha em qualquer tabela.

R$ 4.290

Sim. Inter 600 tabular: dígitos que se alinham e se comparam.

Iconografia

61 ícones em 8 categorias (de marca + utilitários de navegação), todos 24x24, stroke 2px, cor herdada do contexto via currentColor. Nunca hardcoded. Cada ícone abaixo é o arquivo de Icones/ renderizado: a página não tem cópia própria. Clique num ícone para exportar em SVG/PNG nas cores da marca ou copiar o nome.

Propriedades técnicas SSM · 7

aparencia-monolitica

porosidade-zero

antibacteriana

termomoldavel

reparavel

resistente-calor

nao-mancha

Produtos CubasFarm · 10

farm-sink

bancada

cuba-oval

cuba-redonda

cuba-retangular

torneira-gourmet

calha-gourmet

banheiro

mesa

piso-ssm

Verticais B2B Don Artesano · 3

residencial

corporativo

hospitalar

Ofício & precisão · 4

atelier

submilimetrico

sob-medida

instalacao

Herança · 4

madeira

pedra

ssm-material

geracoes

Serviço & operacional · 5

garantia

orcamento

entrega

certificacoes

projeto

Funcionalidades de site · 8

filtro

cartao-credito

seguranca

seguranca-aberto

estrela

estrela-filled

frete

cupom

Utilitários de navegação · 20

arrow-right

arrow-left

chevron-down

chevron-right

plus

minus

check

cart

heart

user

play

phone

location

instagram

Medida: 24x24 · stroke 2px
Cor: Herda do contexto via currentColor, nunca hardcoded. Titânio sobre fundos claros, Branco SSM sobre escuros. Na CubasFarm, Dourado é permitido como acento e conta no limite de 1-2 acentos dourados da peça.
Proibições: Dourado em ícones Don Artesano (exclusividade CubasFarm) · Preto puro #000 · Gradientes, sombras, brilhos
Exceções preenchidas: ssm-material (brand mark 64x64) · estrela-filled (par com estrela outline)

Desvios conhecidos e aceitos: nao-mancha, calha-gourmet, instalacao e cupom usam BOOLEAN operations e renderizam visualmente mais 'pesados' que os stroke-only puros: desvio aceito em 2026-04-25. Não retrabalhar.

Espaçamento

Escala de espaçamento em px e o layout web. Os formatos de post (3:4 e 9:16) são padrões externos das redes: as medidas de cada peça vivem em Templates.

space-0

0pxColar sem espaço, quando duas peças viram uma só: a barra de busca na variante junta

space-1

4pxRespiro mínimo dentro de um controle apertado: altura da tag, paginação, preço empilhado

space-2

8pxEntre as partes de uma molécula: rótulo, campo e texto de ajuda; badge na horizontal; tooltip

space-3

12pxPadding vertical de controle: input, textarea, select; e a largura da tag

space-4

16pxPadding horizontal de controle e margem de tela no mobile

space-5

24pxMiolo de card e gutter da grade: é o espaço que separa cartão de cartão

space-6

32pxMiolo de organismo, e a versão mobile dos blocos que no desktop respiram mais

space-7

48pxEntre colunas de um organismo, padding lateral no desktop, e seção compacta

space-8

64pxPadding de bloco editorial grande: newsletter, depoimento

space-9

96pxRitmo entre seções, o padrão da página

space-10

120pxRitmo de seção hero: o respiro máximo do sistema

A filosofia do respiro

O respiro é o separador. Como nada tem borda por padrão, é o espaço que diz onde uma coisa acaba e a outra começa: tirar respiro não deixa a página mais cheia, deixa ilegível.

entre seções: Generoso e constante: a seção padrão respira 96px em cima e embaixo, e o hero 120px. É o que dá o ritmo de leitura da página
dentro da peça: Eficiente: 12 a 24px. Dentro do card o espaço trabalha, não desfila, para a foto e o produto dominarem
mínimo: Nenhuma peça abaixo de 15% de área livre

O que é uma seção

Uma faixa horizontal da página, com um assunto só. Ocupa a largura toda; o conteúdo dentro dela obedece ao container. Partes: abertura (título + linha de apoio, opcional) · conteúdo · respiro de fechamento.

Seção não tem borda nem fundo próprio por padrão: ela se separa da vizinha pelo respiro. Fundo só quando a faixa é deliberadamente outra superfície.

1440

container máx (px)

padding lateral 16 mobile · 48 desktop

12 · 8 · 4

colunas por tela

desktop · tablet · mobile, gutter 24px

48 · 96 · 120

ritmo vertical (px)

seção compacta · padrão · hero

alvo tátil mínimo (px)

botões, inputs e controles

Curvatura & bordas

Curva é a linguagem da SSM: fluidez, sem emendas visíveis. Por padrão nada tem borda; quando existe, é funcional e vem das espessuras abaixo.

none

0px

4px

Chips pequenos, thumbnails de diagrama

8px

Botões, inputs, blocos de mídia

12px

Fichas e painéis médios

16px

Cards (padrão de superfície), swatches

2xl

24px

Superfícies hero / destaque

full

9999px

Pills: tags, badges, chips de filtro

circle

50%

Avatares, dots de cor

Curva é a linguagem da SSM: fluidez, sem emendas visíveis. Valor fora desta escala não existe; miniaturas em escala de canvas usam o valor proporcional.

Não. Borda de repouso desenha caixas: a página inteira vira formulário.

Sim. Superfície branca sobre canvas com sombra sm: separa sem riscar. Borda, só quando é função.

Sombras & elevação

Três níveis de sombra para UI de site. Uso comedido: a marca prefere hierarquia por espaço e cor, não por profundidade. Nos criativos, a regra anti-IA proíbe brilho e sombra artificiais; a única elevação permitida no canvas é a do card de produto, que veste o shadow/md para separar o card branco do fundo claro.

shadow/sm

y 3 · blur 9 · 12%

shadow/md

y 6 · blur 16 · 12%

shadow/lg

y 12 · blur 32 · 18%

canvas · card de produto

veste o shadow/md · única sombra permitida nos criativos

Motion

Durações e easings para o site; regras de movimento para Reels e Stories. Em peças estáticas, movimento zero: sombra e brilho continuam proibidos nos criativos.

Durações

instant · 100ms

fast · 200ms

base · 300ms

slow · 500ms

editorial · 800ms

Curvas de easing

defaultcubic-bezier(0.4, 0, 0.2, 1)

incubic-bezier(0.4, 0, 1, 1)

outcubic-bezier(0, 0, 0.2, 1)

editorialcubic-bezier(0.22, 1, 0.36, 1)

Entrada de texto oficial

Fade + deslize de 24px, 300ms, easing editorial.

Reels & Stories

Entrada de texto: Fade + deslize sutil de baixo para cima (~24px), duração base (300ms), easing editorial. Nunca bounce, nunca typewriter.
Ritmo de corte: Cortes a cada 2-4s em Reels de produto; respiros de 5-6s em cenas de superfície/toque: a sensação soft pede tempo.
Legendas: Sempre dentro das safe zones (topo 250px, base 350px). Tipografia do sistema, nunca a nativa do app em peças produzidas.
Proibido: Zoom pulsante, shake, transições giratórias, stickers/efeitos nativos de app em peças produzidas (coerente com o filtro anti-IA do sistema)

Átomos

As menores peças funcionais, um card por peça. O título é o nome da peça; o chip ao lado é o endereço dela no sistema (.ds-*, um namespace só): na tela é a classe CSS, no canvas endereça a chave das receitas. Botão e companhia renderizados pelo próprio Web/ds-web.css (marca via data-brand; demos na CubasFarm, a loja). Iconografia e Logos são ativos de marca e vivem em Fundamentos, não aqui.

Ação & navegação

O que a pessoa aperta: o par primário/secundário e o link.

botão .ds-botao

Um só botão para as duas marcas: as cores vêm da marca do contexto (data-brand no ancestral). Variantes primary (padrão) e secondary. Estados: hover · active · foco (anel da marca) · disabled · loading. Tamanhos: 32 / 44 (alvo tátil) / 56.

↳ no canvas: CTA [215×41] dos anúncios A/B · radius 20/10

tela · DA

tela · CF

repousodisabledloadingestados reais · hover e foco: interaja

HTML da peça .ds-botao

<button type="button" class="ds-botao">Solicitar projeto</button>
<button type="button" class="ds-botao ds-botao--secundario">Ver catálogo</button>

link .ds-link

Link de texto com sublinhado elegante; variantes standalone (sem sublinhado, underline no hover) e inverse.

↳ só na tela

Conhecer a SSMtela

HTML da peça .ds-link

<a href="#atomos" class="ds-link">Conhecer a SSM</a>

Formulário

A conversa de dados: campos de texto, escolhas e a chave de liga/desliga.

input .ds-input

Campo de texto simples; deve ser embrulhado em FormField (molecule) para label/helper/erro.

↳ só na tela

repousoerro · aria-invaliddisabledtela

HTML da peça .ds-input

<span class="web-estado" style="width:100%;max-width:220px;">
<input class="ds-input" type="email" placeholder="nome@exemplo.com.br" aria-label="E-mail (demo)" style="width:100%;">
<i>repouso</i></span><span class="web-estado" style="width:100%;max-width:220px;">
<input class="ds-input" type="email" value="nome@exemplo" aria-invalid="true" aria-label="E-mail inválido (demo)" style="width:100%;">
<i>erro · aria-invalid</i></span><span class="web-estado" style="width:100%;max-width:220px;">
<input class="ds-input" type="email" value="Indisponível" disabled aria-label="E-mail desabilitado (demo)" style="width:100%;">
<i>disabled</i></span>

textarea .ds-textarea

Área de texto multilinha, herda visual do Input com altura maior e resize vertical.

↳ só na tela

tela

HTML da peça .ds-textarea

<textarea class="ds-textarea" rows="2" placeholder="Conte sobre o seu projeto..." aria-label="Mensagem (demo)" style="width:100%;max-width:220px;">
</textarea>

select .ds-select

Select nativo estilizado com chevron via background-image SVG inline (mantem a11y do browser).

↳ só na tela

tela

HTML da peça .ds-select

<select class="ds-select" aria-label="Linha (demo)">
  <option>Farm Sink</option>
  <option>Bancadas</option>
  <option>Banheiro</option>
</select>

checkbox .ds-checkbox

Checkbox custom (appearance none) acessível com estados checked e indeterminate.

↳ só na tela

Newslettertela

HTML da peça .ds-checkbox

<label class="web-demo-ctl">
  <input type="checkbox" class="ds-checkbox" checked>Newsletter</label>

radio .ds-radio

Radio button custom redondo.

↳ só na tela

Residencial B2Btela

HTML da peça .ds-radio

<label class="web-demo-ctl">
  <input type="radio" class="ds-radio" name="r-atomo" checked>Residencial</label>
<label class="web-demo-ctl">
  <input type="radio" class="ds-radio" name="r-atomo">B2B</label>

toggle .ds-toggle

Switch tipo iOS implementado como checkbox.

↳ só na tela

Avisar quando chegartela

HTML da peça .ds-toggle

<label class="web-demo-ctl">
  <input type="checkbox" class="ds-toggle" checked>Avisar quando chegar</label>

Rótulo & feedback

O sistema falando: etiquetas, avisos, progresso e o esqueleto de carregamento.

tag .ds-tag

Chip pill estática ou removível (com botão de close inline).

↳ no canvas: .ds-tag-de-categoria 22px

FARM SINKtela

HTML da peça .ds-tag

<span class="ds-tag">FARM SINK</span>

badge .ds-badge

Pill compacto estático com 3 variantes: neutro, destaque, sale (+ success e info).

↳ no canvas: .ds-chip-de-cupom

NeutroDestaque-15%Em estoquetela

HTML da peça .ds-badge

<span class="ds-badge">Neutro</span><span class="ds-badge ds-badge--destaque">Destaque</span><span class="ds-badge ds-badge--oferta">-15%</span><span class="ds-badge ds-badge--sucesso">Em estoque</span>

tooltip .ds-tooltip

Hint popover; modo wrapper CSS-only (hover/focus-within) ou standalone controlado por JS.

↳ só na tela

tela

HTML da peça .ds-tooltip

<span class="ds-tooltip-wrap" style="margin-top:44px;">
<a href="#atomos" class="ds-link">o que é SSM?</a>
<span class="ds-tooltip ds-tooltip--shown" role="tooltip">Superfície Sólida Mineral</span></span>

barra de progresso .ds-barra-de-progresso

Barra de progresso determinada (progress nativo) ou indeterminada (animação de slide).

↳ só na tela

tela

HTML da peça .ds-barra-de-progresso

<progress class="ds-barra-de-progresso" max="100" value="60" aria-label="Progresso (demo)" style="max-width:200px;">
</progress>

skeleton .ds-skeleton

Placeholder de loading com shimmer animado; variantes line (default), block, circle.

↳ só na tela

tela

HTML da peça .ds-skeleton

<span class="ds-skeleton ds-skeleton--block" style="width:150px;height:14px;"></span><span class="ds-skeleton ds-skeleton--circle" style="width:28px;height:28px;"></span>

Conteúdo & superfície

Onde o conteúdo se apoia: cartão, ficha, avatar e o divisor.

card .ds-card

Card genérico de superfície: fundo Branco SSM, sem borda de repouso, separa do canvas por superfície e ganha sombra ao virar link. Três densidades, e nada fora delas

↳ só na tela

Card clicável: passe o mousetela

HTML da peça .ds-card

<a href="#atomos" class="ds-card" style="padding:12px 16px;font-size:12px;">
  Card clicável: passe o mouse
</a>

ficha .ds-ficha

Pares rótulo/valor empilhados com separador sutil: informação nunca solta, sempre rotulada.

↳ só na tela

Material: SSM 30% PMMA
Garantia: 5 anos

tela

HTML da peça .ds-ficha

<dl class="ds-ficha ds-ficha--compacta" style="width:100%;">
  <div>
    <dt>Material</dt>
    <dd>SSM 30% PMMA</dd>
  </div>
  <div>
    <dt>Garantia</dt>
    <dd>5 anos</dd>
  </div>
</dl>

avatar .ds-avatar

Container redondo para imagem, iniciais ou ícone, com dot de status opcional.

↳ só na tela

DACFtela

HTML da peça .ds-avatar

<span class="ds-avatar ds-avatar--md">DA</span><span class="ds-avatar ds-avatar--lg">CF</span>

divisor .ds-divisor

Linha separadora sutil horizontal (default) ou vertical.

↳ só na tela

tela

HTML da peça .ds-divisor

<div style="width:100%;">
  <hr class="ds-divisor">
</div>

Fundações com casa própria

Tipografia e iconografia têm seções inteiras; aqui vivem o endereço e a amostra de bolso.

tipografia .ds-display-* · .ds-heading-* · .ds-body-*

Classes CSS puras de tipografia (sem markup próprio); templates aplicam a classe ao elemento HTML semântico.

↳ casa: seção Tipografia (escalas do canvas e da tela)

Feito à mãoCuba Farm 90Superfície contínua, sem emenda à vista.

tela

HTML da peça .ds-display-* · .ds-heading-* · .ds-body-*

<div style="display:flex;flex-direction:column;gap:4px;width:100%;color:var(--text-primary);">
  <span class="ds-display-sm">Feito à mão</span><span class="ds-heading-sm">Cuba Farm 90</span><span class="ds-body-sm" style="color:var(--text-secondary);">Superfície contínua, sem emenda à vista.</span>
</div>

ícone .ds-icone

Ícone SVG de 24×24 consumido por referência (<use>); a cor herda do contexto por currentColor.

↳ casa: seção Iconografia (cor por currentColor)

tela

HTML da peça .ds-icone

<span style="display:inline-flex;gap:12px;color:var(--text-primary);"><svg class="ds-icone" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M12 3l7 3v6c0 4-3 7-7 9-4-2-7-5-7-9V6l7-3Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/></svg><svg class="ds-icone" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M12 3s6 6.5 6 11a6 6 0 0 1-12 0c0-4.5 6-11 6-11Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/></svg><svg class="ds-icone" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M4 14l10-10 6 6L10 20 4 14Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/><path d="M8 10l2 2M11 7l2 2M14 10l1 1" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg></span>

Moléculas

Os menores grupos de átomos com função própria, agrupados pelo trabalho que fazem. Uma peça, uma identidade, dois tamanhos: as etiquetas canvas/tela em cada card mostram a peça nas duas escalas; quando o par da tela é uma peça irmã, o rótulo declara o endereço dela (tela · .ds-tag). Demos de tela na marca CubasFarm (a loja); a DA troca as cores via data-brand.

Produto & preço

A unidade de venda: a etiqueta, o preço e o cupom que a acompanham.

tag de categoria .ds-tag-de-categoria DA CF

BANCADADA BANCADACFcanvas

BANCADAtela · .ds-tag

texto .ds-tag-de-categoria 22px

↳ usada em: .ds-card-de-produto, .ds-faixa-de-hashtags

↳ na tela: .ds-tag

preço .ds-preco

R$ 4.290canvas

R$ 4.990R$ 4.29010x sem juros

tela · .ds-preco

texto Inter semibold (nunca Playfair)

↳ usada em: .ds-card-de-produto (variante pill)

↳ na tela: .ds-preco

chip de cupom .ds-chip-de-cupom

10% OFF · FARM10canvas

10% OFF · FARM10tela · .ds-badge--oferta

badge de desconto + código (ex: 10% OFF · FARM10)

⚠ só tráfego pago

↳ usada em: .ds-bloco-de-oferta

↳ na tela: .ds-badge--oferta

card de catálogo .ds-card-de-catalogo

Card vertical de produto para grids de catalogo: imagem + tag + título + rating + preco + CTA.

↳ no canvas: .ds-card-de-produto (organismo do feed)

Farm Sink

Cuba Farm 70

R$ 4.290

tela

HTML da peça .ds-card-de-catalogo

<article class="ds-card-de-catalogo" style="max-width:190px;">
  <span class="ds-card-de-catalogo__image" style="display:block;aspect-ratio:1;background:#fff url('Imagens/produto-branco.jpg') center/contain no-repeat;border-radius:8px 8px 0 0;"></span>
  <div class="ds-card-de-catalogo__body">
    <p class="ds-card-de-catalogo__category">Farm Sink</p>
    <h3 class="ds-card-de-catalogo__title" style="margin:0;">Cuba Farm 70</h3>
    <div class="ds-preco">
      <span class="ds-preco__current">R$ 4.290</span>
    </div>
    <button type="button" class="ds-botao ds-botao--block">Comprar</button>
  </div>
</article>

Busca & navegação

Achar e se localizar: busca, filtros, trilhas e paginação.

barra de busca .ds-barra-de-busca

Barra de busca: input + botão submit (icon-only).

↳ só na tela

tela

HTML da peça .ds-barra-de-busca

<div class="ds-barra-de-busca ds-barra-de-busca--joined" style="width:100%;max-width:240px;">
  <input class="ds-input" type="search" placeholder="Buscar cubas..." aria-label="Buscar cubas">
  <button type="button" class="ds-botao">Ir</button>
</div>

chip de filtro .ds-chip-de-filtro

Pill selecionavel de filtro com count opcional; selecao via aria-pressed=true.

↳ só na tela

tela

HTML da peça .ds-chip-de-filtro

<button type="button" class="ds-chip-de-filtro" aria-pressed="true">
  Farm Sink <span class="ds-chip-de-filtro__count">9</span>
</button>
<button type="button" class="ds-chip-de-filtro">
  Com calha <span class="ds-chip-de-filtro__count">3</span>
</button>

item de navegação .ds-item-de-navegacao

Link de navegacao com estado current sinalizado por aria-current=page + sublinhado.

↳ só na tela

tela

HTML da peça .ds-item-de-navegacao

<nav style="display:flex;gap:4px;" aria-label="Navegação (demo)">
  <a class="ds-item-de-navegacao" href="#moleculas" aria-current="page">Farm Sinks</a>
  <a class="ds-item-de-navegacao" href="#moleculas">Bancadas</a>
  <a class="ds-item-de-navegacao" href="#moleculas">Banheiro</a>
</nav>

trilha .ds-trilha

Trilha de navegacao em ol/li com separadores; ultimo item aria-current=page.

↳ só na tela

tela

HTML da peça .ds-trilha

<nav aria-label="Trilha (demo)">
  <ol class="ds-trilha">
    <li class="ds-trilha__item">
      <a href="#moleculas" class="ds-link">Cozinha</a>
      <span class="ds-trilha__sep">/</span>
    </li>
    <li class="ds-trilha__item">
      <a href="#moleculas" class="ds-link">Farm Sink</a>
      <span class="ds-trilha__sep">/</span>
    </li>
    <li class="ds-trilha__item" aria-current="page">Cuba Farm 70</li>
  </ol>
</nav>

paginação .ds-paginacao

Navegacao entre páginas com botoes numerados, prev/next e ellipsis.

↳ só na tela

tela

HTML da peça .ds-paginacao

<nav aria-label="Paginação (demo)">
  <ul class="ds-paginacao">
    <li>
      <a href="#moleculas" class="ds-paginacao__page">1</a>
    </li>
    <li>
      <a href="#moleculas" class="ds-paginacao__page" aria-current="page">2</a>
    </li>
    <li>
      <a href="#moleculas" class="ds-paginacao__page">3</a>
    </li>
  </ul>
</nav>

Formulário & checkout

Os passos da compra: campo pronto, quantidade e pagamento salvo.

campo de formulário .ds-campo-de-formulario

Wrapper de campo de formulario: label + control (input/textarea/select) + helper/erro.

↳ só na tela

Seu e-mail

tela

HTML da peça .ds-campo-de-formulario

<div class="ds-campo-de-formulario" style="width:100%;max-width:230px;">
  <label class="ds-campo-de-formulario__label" for="dsi-mol">Seu e-mail</label>
  <input class="ds-input" id="dsi-mol" type="email" placeholder="nome@exemplo.com.br">
</div>

seletor de quantidade .ds-seletor-de-quantidade

Seletor de quantidade: botoes menos/mais + input numerico central, role=group.

↳ só na tela

tela

HTML da peça .ds-seletor-de-quantidade

<div class="ds-seletor-de-quantidade" role="group" aria-label="Quantidade">
  <button type="button" class="ds-seletor-de-quantidade__button" aria-label="Diminuir">−</button>
  <input class="ds-seletor-de-quantidade__input" type="number" value="1" min="1" aria-label="Quantidade">
  <button type="button" class="ds-seletor-de-quantidade__button" aria-label="Aumentar">+</button>
</div>

cartão salvo .ds-cartao-salvo

Cartao salvo no checkout: brand mark + ultimos 4 digitos + validade, selecionavel.

↳ só na tela

tela

HTML da peça .ds-cartao-salvo

<button type="button" class="ds-cartao-salvo" aria-pressed="true" style="width:100%;max-width:220px;">
  <span class="ds-cartao-salvo__brand">VISA</span><span class="ds-cartao-salvo__details"><span class="ds-cartao-salvo__number">•••• 4290</span><span class="ds-cartao-salvo__expiry">12/28</span></span>
</button>

Conteúdo & confiança

O que sustenta a história: fotos, avaliações, créditos e diferenciais.

hashtag .ds-hashtag

#ProjetoAssinadocanvas

texto .ds-tag-de-categoria em Branco SSM sobre foto

↳ usada em: .ds-faixa-de-hashtags

↳ na tela: .ds-tag (sobre foto)

crédito de foto .ds-credito-de-foto

Projeto: Studio Arqui · RJcanvas

texto credito 22px em {color.brand.cinza-quartzo}

↳ usada em: .ds-bloco-de-depoimento, .ds-bloco-editorial

↳ na tela: .ds-card-de-foto__caption

card de foto .ds-card-de-foto

Figure com imagem arredondada + caption; para hero, galerias e ambient shots.

↳ no canvas: .ds-moldura-de-foto (organismo do feed)

Cozinha da Lu · SP

tela

HTML da peça .ds-card-de-foto

<figure class="ds-card-de-foto ds-card-de-foto--square" style="margin:0;width:100%;max-width:190px;">
  <span class="ds-card-de-foto__image" style="background:url('Imagens/foto-quente-cf.jpg') center/cover;"></span>
  <figcaption class="ds-card-de-foto__caption">
    <p style="margin:0;">Cozinha da Lu · SP</p>
  </figcaption>
</figure>

bloco de diferencial .ds-bloco-de-diferencial

Ícone + título + descrição para secoes de diferenciais/como funciona.

↳ só na tela

Não porosa

Não absorve líquidos nem mancha.

tela

HTML da peça .ds-bloco-de-diferencial

<div class="ds-bloco-de-diferencial" style="max-width:250px;">
  <span class="ds-bloco-de-diferencial__icon"><svg class="ds-icone" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M12 3l7 3v6c0 4-3 7-7 9-4-2-7-5-7-9V6l7-3Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/></svg></span>
  <p class="ds-bloco-de-diferencial__title">Não porosa</p>
  <p class="ds-bloco-de-diferencial__description">Não absorve líquidos nem mancha.</p>
</div>

nota em estrelas .ds-nota-em-estrelas

Estrelas + valor numerico + count de avaliacoes, com aria-label descritivo no wrapper.

↳ só na tela

4,9(38 avaliações)

tela

HTML da peça .ds-nota-em-estrelas

<div class="ds-nota-em-estrelas" aria-label="4,9 de 5 estrelas, 38 avaliações">
  <span class="ds-nota-em-estrelas__stars" aria-hidden="true">★★★★★</span><span class="ds-nota-em-estrelas__value">4,9</span><span class="ds-nota-em-estrelas__count">(38 avaliações)</span>
</div>

card de avaliação .ds-card-de-avaliacao

Card de avaliacao: header (avatar + nome + rating) + texto entre aspas + data.

↳ só na tela

Parece uma peça só.

março de 2026

tela

HTML da peça .ds-card-de-avaliacao

<article class="ds-card-de-avaliacao" style="width:100%;max-width:250px;">
  <header class="ds-card-de-avaliacao__header">
    <span class="ds-avatar ds-avatar--md">AC</span>
    <div class="ds-card-de-avaliacao__identity">
      <span class="ds-card-de-avaliacao__name">Ana C.</span>
      <div class="ds-nota-em-estrelas" aria-label="5 de 5 estrelas">
        <span class="ds-nota-em-estrelas__stars" aria-hidden="true">★★★★★</span>
      </div>
    </div>
  </header>
  <p class="ds-card-de-avaliacao__body">Parece uma peça só.</p>
  <span class="ds-card-de-avaliacao__date">março de 2026</span>
</article>

Organismos

Seções completas, compostas das moléculas e átomos abaixo, agrupadas pelo papel que cumprem. No feed, combinam-se sobre a grade única para gerar variedade; na loja, viram seções de página.

Chrome da página

A moldura de toda página: a barra de topo, o menu lateral e o rodapé.

moldura-de-sistema .ds-moldura-de-sistema

A casca de qualquer sistema: a marca emoldura por fora, o conteúdo vive numa superfície clara embutida, e a curva aparece no encontro dos dois. Recebe a barra de topo e o menu lateral; o miolo é o palco

✕ Não usar: Site institucional e loja não usam moldura: ali o conteúdo é a página inteira, sem casca de aplicação

↳ só na tela

Design System JS

O conteúdo vive aqui, no palco.

O divisor cai na linha do palco.

tela

HTML da peça .ds-moldura-de-sistema

<div class="ds-moldura-de-sistema" style="min-height:200px;width:100%;border-radius:8px;overflow:hidden;--moldura-coluna-nav:48px;">
  <header class="ds-moldura-de-sistema__topo" style="min-block-size:44px;padding-block:var(--space-2);">
    <span class="ds-moldura-de-sistema__selo"><svg viewBox="0 0 858 688" style="height:100%;width:auto;fill:currentColor;" aria-hidden="true"><g transform="matrix(1,0,0,1,-111.138895,-196.279343)">
    <rect x="111.139" y="196.279" width="857.722" height="687.441" style="fill:none;"/>
    <g><g transform="matrix(11.038626,0,0,11.038626,-890.79101,-1107.214683)"><g><path d="M109.091,173.54C109.229,172.94 117.636,156.362 118.147,155.339C119.12,153.391 126.911,137.494 127.317,137.149C127.967,138.914 128.63,139.377 129.515,142.471C131.579,149.689 130.175,157.79 125.848,163.578L123.174,166.645C120.696,169.019 118.64,170.547 115.119,171.953C113.557,172.577 110.903,173.401 109.091,173.54ZM135.503,139.012C135.22,138.716 134.695,137.114 134.475,136.618C133.818,135.129 132.934,133.521 132.07,132.205L130.698,130.236L133.828,124.072L141.035,138.583L161.985,180.386L168.48,180.383C168.171,179.573 165.546,174.484 164.929,173.249C164.462,172.315 161.429,166.506 161.412,166.054C161.137,165.803 160.732,164.856 160.564,164.52L137.354,118.149L130.235,118.142L126.412,125.699L125.599,125.049C121.305,121.847 117.456,119.682 111.785,118.677C106.883,117.808 96.386,118.216 90.801,118.145L90.778,164.498L97.439,164.494L97.449,124.816C100.204,124.766 102.969,124.816 105.695,124.813C108.239,124.81 110.549,125.1 112.918,125.803C115.031,126.431 116.996,127.304 118.648,128.32C119.113,128.607 119.492,128.851 119.898,129.132L121.629,130.451C121.883,130.644 121.966,130.771 122.2,130.956C122.644,131.308 122.921,131.492 123.285,132.036L99.48,179.648C101.057,180.402 106.921,180.424 108.818,180.256C115.119,179.698 121.203,177.166 125.877,173.204C127.835,171.544 129.962,169.388 131.404,167.252C135.486,161.208 137.436,155.19 137.103,147.627C136.914,143.331 135.509,139.4 135.503,139.012"/></g></g></g></g></svg></span><span class="ds-moldura-de-sistema__barra" style="padding-inline-end:var(--space-3);"><span class="ds-moldura-de-sistema__divisor"></span><span class="ds-moldura-de-sistema__contexto" style="font-size:11px;">Design System</span><span class="ds-moldura-de-sistema__conta" style="font-size:11px;"><span class="ds-avatar ds-avatar--sm" style="width:20px;height:20px;font-size:9px;">JS</span></span></span>
  </header>
  <nav class="ds-menu-lateral ds-menu-lateral--inverso ds-menu-lateral--rail" style="padding:var(--space-2) 0;gap:var(--space-1);">
    <span class="ds-menu-lateral__item ds-menu-lateral__item--ativo" style="min-block-size:32px;"><svg class="ds-icone" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M4 10.5 12 4l8 6.5V19a1 1 0 0 1-1 1h-4v-6H9v6H5a1 1 0 0 1-1-1v-8.5Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/></svg><span class="ds-menu-lateral__item-rotulo">Início</span></span><span class="ds-menu-lateral__item" style="min-block-size:32px;"><svg class="ds-icone" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M8 6h12M8 12h12M8 18h12M4 6h.01M4 12h.01M4 18h.01" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg><span class="ds-menu-lateral__item-rotulo">Pedidos</span></span><span class="ds-menu-lateral__item" style="min-block-size:32px;"><svg class="ds-icone" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M12 11a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7Z" stroke="currentColor" stroke-width="2"/><path d="M5 20a7 7 0 0 1 14 0" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg><span class="ds-menu-lateral__item-rotulo">Clientes</span></span>
  </nav>
  <div class="ds-moldura-de-sistema__palco" style="padding:var(--space-4);">
    <p class="ds-body-sm" style="margin:0 0 var(--space-2);">O conteúdo vive aqui, no palco.</p>
    <div class="ds-card ds-card--ladrilho" style="max-width:160px;">
      <p class="ds-body-xs" style="margin:0;">O divisor cai na linha do palco.</p>
    </div>
  </div>
</div>

barra de topo .ds-barra-de-topo

Barra de topo UNIVERSAL: o chrome horizontal do topo, com uma variante por contexto. Compõe com o menu-lateral num shell de app, ou vive sozinha.

✕ Não usar: Duas barras de topo empilhadas (promo + navegação como organismos separados): é UMA barra com topbar interno. E nunca a variante e-commerce cheia dentro de um app: no sistema, use --sistema.

↳ no canvas: .ds-assinatura (a marca assina)

Sistema · app / painel

Pedidos

Institucional · site

E-commerce · loja (base, com topbar)

Frete grátis acima de R$ 599Central de ajuda

tela

HTML da peça .ds-barra-de-topo

<div class="tpv-scaler" style="width:744px;max-width:100%;height:322px;" role="button" tabindex="0" aria-label="Ampliar em tamanho real" data-w="1200" data-h="520">
  <span class="tpv-zoom" aria-hidden="true">⤢ ampliar</span>
  <div class="tpv-scaled" style="width:1200px;height:520px;transform:scale(0.62);transform-origin:top left;">
    <div style="display:flex;flex-direction:column;gap:24px;padding:24px;background:#f8f8f8;">
      <div>
        <p style="font-family:'Inter';font-weight:600;font-size:13px;color:#606470;margin:0 0 8px;">
          Sistema · app / painel
        </p>
        <div class="ds-barra-de-topo ds-barra-de-topo--sistema" style="position:static;border-radius:12px;box-shadow:0 3px 9px rgba(0,0,0,0.12);">
          <div class="ds-barra-de-topo__main">
            <button type="button" class="ds-barra-de-topo__toggle" aria-label="Abrir menu">
              <svg class="ds-icone" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M4 7h16M4 12h16M4 17h16" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
            </button>
            <p class="ds-barra-de-topo__titulo">Pedidos</p>
            <span></span>
            <div class="ds-barra-de-topo__actions">
              <button type="button" class="ds-botao ds-botao--secundario ds-botao--sm">Buscar</button>
              <span class="ds-avatar ds-avatar--md">MA</span>
            </div>
          </div>
        </div>
      </div>
      <div>
        <p style="font-family:'Inter';font-weight:600;font-size:13px;color:#606470;margin:0 0 8px;">
          Institucional · site
        </p>
        <div class="ds-barra-de-topo ds-barra-de-topo--institucional" style="position:static;border-radius:12px;box-shadow:0 3px 9px rgba(0,0,0,0.12);">
          <div class="ds-barra-de-topo__main">
            <a class="ds-barra-de-topo__brand" href="#organismos" aria-label="Don Artesano">
              <span class="ds-barra-de-topo__logo"><svg viewBox="0 0 497 190" style="height:30px;width:auto;fill:currentColor;" aria-hidden="true"><g transform="matrix(1,0,0,1,-124.444728,-84.233821)">
              <rect x="124.445" y="84.234" width="496.726" height="189.435" style="fill:none;"/>
              <g><g transform="matrix(0.028346,0,0,0.028346,0.444728,0.233963)"><path d="M6400.4,8919.76C6415.62,8855.37 7338.47,7076.39 7394.56,6966.59C7501.35,6757.54 8356.58,5051.61 8401.17,5014.61C8472.57,5204.06 8545.38,5253.78 8642.49,5585.8C8869.03,6360.31 8714.94,7229.63 8239.89,7850.71L7946.36,8179.81C7674.41,8434.63 7448.63,8598.61 7062.13,8749.46C6890.73,8816.36 6599.35,8904.89 6400.4,8919.76ZM9299.9,5214.57C9268.73,5182.74 9211.1,5010.91 9187.04,4957.66C9114.83,4797.88 9017.87,4625.32 8923.04,4484.13L8772.4,4272.8L9115.91,3611.39L9907.14,5168.47L12206.92,9654.4L12919.96,9654.13C12885.99,9567.12 12597.89,9021.02 12530.12,8888.54C12478.83,8788.27 12145.93,8164.93 12144.03,8116.44C12113.89,8089.46 12069.44,7987.81 12050.97,7951.8L9503.01,2975.77L8721.53,2974.99L8301.9,3785.89L8212.6,3716.16C7741.19,3372.52 7318.76,3140.2 6696.22,3032.39C6158.1,2939.19 5005.71,2982.98 4392.63,2975.34L4390.13,7949.46L5121.34,7949.07L5122.37,3691.23C5424.85,3685.77 5728.39,3691.16 6027.66,3690.85C6306.88,3690.56 6560.52,3721.6 6820.5,3797.1C7052.44,3864.46 7268.18,3958.17 7449.51,4067.23C7500.64,4097.99 7542.23,4124.18 7586.73,4154.37L7776.84,4295.82C7804.69,4316.57 7813.76,4330.25 7839.44,4350.08C7888.28,4387.81 7918.67,4407.59 7958.6,4465.97L5345.39,9575.15C5518.49,9656.13 6162.19,9658.45 6370.43,9640.43C7062.17,9580.59 7730.03,9308.82 8243.1,8883.69C8458.11,8705.53 8691.54,8474.18 8849.92,8244.96C9298.01,7596.44 9512.04,6950.61 9475.53,6139.04C9454.79,5678.04 9300.47,5256.17 9299.9,5214.57Z"/><g><g transform="matrix(1,0,0,1,13912.49,6062.48)"><path d="M1958.34,-492.76C1907.54,-401.32 1848.273,-322.157 1780.54,-255.27C1712.807,-188.383 1640.417,-133.773 1563.37,-91.44C1486.323,-49.107 1407.583,-17.78 1327.15,2.54C1246.717,22.86 1168.4,33.02 1092.2,33.02C960.12,33.02 834.813,8.467 716.28,-40.64C597.747,-89.747 493.607,-157.48 403.86,-243.84C314.113,-330.2 242.57,-432.647 189.23,-551.18C135.89,-669.713 109.22,-798.407 109.22,-937.26C109.22,-1076.113 135.043,-1204.807 186.69,-1323.34C238.337,-1441.873 308.61,-1544.743 397.51,-1631.95C486.41,-1719.157 590.55,-1787.313 709.93,-1836.42C829.31,-1885.527 955.887,-1910.08 1089.66,-1910.08C1209.887,-1910.08 1319.107,-1891.453 1417.32,-1854.2C1515.533,-1816.947 1601.047,-1771.65 1673.86,-1718.31C1746.673,-1664.97 1806.363,-1609.09 1852.93,-1550.67C1899.497,-1492.25 1932.093,-1441.027 1950.72,-1397L1739.9,-1397C1707.329,-1445.856 1671.974,-1488.448 1633.834,-1524.774C1612.488,-1545.105 1590.27,-1563.474 1567.18,-1579.88C1502.833,-1625.6 1440.18,-1660.313 1379.22,-1684.02C1318.26,-1707.727 1261.533,-1722.967 1209.04,-1729.74C1156.547,-1736.513 1115.907,-1739.9 1087.12,-1739.9C977.053,-1739.9 874.183,-1717.463 778.51,-1672.59C682.837,-1627.717 599.44,-1568.027 528.32,-1493.52C457.2,-1419.013 400.897,-1333.5 359.41,-1236.98C317.923,-1140.46 297.18,-1039.707 297.18,-934.72C297.18,-824.653 319.193,-721.36 363.22,-624.84C407.247,-528.32 466.09,-443.653 539.75,-370.84C613.41,-298.027 698.077,-240.877 793.75,-199.39C889.423,-157.903 988.06,-137.16 1089.66,-137.16C1113.367,-137.16 1148.927,-139.7 1196.34,-144.78C1243.753,-149.86 1297.517,-163.83 1357.63,-186.69C1417.743,-209.55 1481.667,-244.687 1549.4,-292.1C1617.133,-339.513 1683.173,-406.4 1747.52,-492.76L1958.34,-492.76Z" style="fill-rule:nonzero;"/><path d="M3439.16,0L3271.52,0L3271.52,-215.9L3266.44,-215.9C3252.893,-190.5 3234.69,-162.983 3211.83,-133.35C3188.97,-103.717 3159.337,-76.623 3122.93,-52.07C3086.523,-27.517 3043.343,-7.197 2993.39,8.89C2943.437,24.977 2886.287,33.02 2821.94,33.02C2752.513,33.02 2691.553,25.823 2639.06,11.43C2586.567,-2.963 2541.27,-20.743 2503.17,-41.91C2465.07,-63.077 2432.897,-85.937 2406.65,-110.49C2380.403,-135.043 2359.66,-156.633 2344.42,-175.26C2295.313,-236.22 2262.717,-307.34 2246.63,-388.62C2230.543,-469.9 2222.5,-547.793 2222.5,-622.3L2222.5,-1389.38L2400.3,-1389.38L2400.3,-624.84C2400.3,-536.787 2409.19,-463.55 2426.97,-405.13C2444.75,-346.71 2468.88,-298.027 2499.36,-259.08C2548.467,-204.893 2602.23,-169.333 2660.65,-152.4C2719.07,-135.467 2772.833,-127 2821.94,-127C2871.047,-127 2921.423,-134.62 2973.07,-149.86C3024.717,-165.1 3072.553,-194.733 3116.58,-238.76C3136.9,-259.08 3155.95,-280.67 3173.73,-303.53C3191.51,-326.39 3206.75,-353.907 3219.45,-386.08C3232.15,-418.253 3242.31,-455.93 3249.93,-499.11C3257.55,-542.29 3261.36,-594.36 3261.36,-655.32L3261.36,-1389.38L3439.16,-1389.38L3439.16,0Z" style="fill-rule:nonzero;"/><path d="M5074.92,-690.88C5074.92,-778.933 5059.68,-858.52 5029.2,-929.64C4998.72,-1000.76 4957.233,-1060.873 4904.74,-1109.98C4852.247,-1159.087 4791.71,-1197.187 4723.13,-1224.28C4654.55,-1251.373 4582.16,-1264.92 4505.96,-1264.92C4426.373,-1264.92 4352.29,-1249.257 4283.71,-1217.93C4215.13,-1186.603 4156.287,-1145.117 4107.18,-1093.47C4058.073,-1041.823 4019.55,-981.287 3991.61,-911.86C3963.67,-842.433 3949.7,-769.62 3949.7,-693.42C3949.7,-612.14 3964.517,-536.787 3994.15,-467.36C4023.783,-397.933 4064,-338.243 4114.8,-288.29C4165.6,-238.337 4224.867,-198.967 4292.6,-170.18C4360.333,-141.393 4431.453,-127 4505.96,-127C4590.627,-127 4668.097,-141.817 4738.37,-171.45C4808.643,-201.083 4868.757,-241.3 4918.71,-292.1C4968.663,-342.9 5007.187,-402.59 5034.28,-471.17C5061.373,-539.75 5074.92,-612.987 5074.92,-690.88ZM3782.06,-1879.6L3959.86,-1879.6L3959.86,-1145.54L3964.94,-1145.54C4003.887,-1201.42 4047.067,-1247.563 4094.48,-1283.97C4141.893,-1320.377 4189.73,-1349.163 4237.99,-1370.33C4286.25,-1391.497 4333.663,-1405.89 4380.23,-1413.51C4426.797,-1421.13 4468.707,-1424.94 4505.96,-1424.94C4619.413,-1424.94 4722.283,-1404.62 4814.57,-1363.98C4906.857,-1323.34 4985.173,-1269.153 5049.52,-1201.42C5113.867,-1133.687 5163.82,-1056.217 5199.38,-969.01C5234.94,-881.803 5252.72,-791.633 5252.72,-698.5C5252.72,-598.593 5234.093,-504.19 5196.84,-415.29C5159.587,-326.39 5107.94,-248.92 5041.9,-182.88C4975.86,-116.84 4897.12,-64.347 4805.68,-25.4C4714.24,13.547 4614.333,33.02 4505.96,33.02C4470.4,33.02 4429.337,29.21 4382.77,21.59C4336.203,13.97 4288.367,0 4239.26,-20.32C4190.153,-40.64 4141.893,-69.003 4094.48,-105.41C4047.067,-141.817 4003.887,-187.96 3964.94,-243.84L3959.86,-243.84L3959.86,0L3782.06,0L3782.06,-1879.6Z" style="fill-rule:nonzero;"/><path d="M5626.1,-690.88C5626.1,-612.987 5639.647,-539.75 5666.74,-471.17C5693.833,-402.59 5732.357,-342.9 5782.31,-292.1C5832.263,-241.3 5892.377,-201.083 5962.65,-171.45C6032.923,-141.817 6110.393,-127 6195.06,-127C6269.567,-127 6340.687,-141.393 6408.42,-170.18C6476.153,-198.967 6535.42,-238.337 6586.22,-288.29C6637.02,-338.243 6677.237,-397.933 6706.87,-467.36C6736.503,-536.787 6751.32,-612.14 6751.32,-693.42C6751.32,-769.62 6737.35,-842.433 6709.41,-911.86C6681.47,-981.287 6642.523,-1041.823 6592.57,-1093.47C6542.617,-1145.117 6483.773,-1186.603 6416.04,-1217.93C6348.307,-1249.257 6274.647,-1264.92 6195.06,-1264.92C6118.86,-1264.92 6046.47,-1251.373 5977.89,-1224.28C5909.31,-1197.187 5848.773,-1159.087 5796.28,-1109.98C5743.787,-1060.873 5702.3,-1000.76 5671.82,-929.64C5641.34,-858.52 5626.1,-778.933 5626.1,-690.88ZM6918.96,0L6741.16,0L6741.16,-243.84L6736.08,-243.84C6697.133,-186.267 6653.953,-139.7 6606.54,-104.14C6559.127,-68.58 6510.867,-40.64 6461.76,-20.32C6412.653,0 6364.817,13.97 6318.25,21.59C6271.683,29.21 6230.62,33.02 6195.06,33.02C6084.993,33.02 5984.24,13.547 5892.8,-25.4C5801.36,-64.347 5722.62,-116.84 5656.58,-182.88C5590.54,-248.92 5539.317,-326.39 5502.91,-415.29C5466.503,-504.19 5448.3,-598.593 5448.3,-698.5C5448.3,-791.633 5466.08,-881.803 5501.64,-969.01C5537.2,-1056.217 5587.153,-1133.687 5651.5,-1201.42C5715.847,-1269.153 5794.163,-1323.34 5886.45,-1363.98C5978.737,-1404.62 6081.607,-1424.94 6195.06,-1424.94C6232.313,-1424.94 6274.647,-1421.13 6322.06,-1413.51C6369.473,-1405.89 6417.733,-1391.92 6466.84,-1371.6C6515.947,-1351.28 6563.783,-1322.917 6610.35,-1286.51C6656.917,-1250.103 6698.827,-1203.113 6736.08,-1145.54L6741.16,-1145.54L6741.16,-1389.38L6918.96,-1389.38L6918.96,0Z" style="fill-rule:nonzero;"/><path d="M7315.2,-411.48C7316.893,-345.44 7327.9,-293.37 7348.22,-255.27C7368.54,-217.17 7391.823,-188.807 7418.07,-170.18C7444.317,-151.553 7471.41,-139.7 7499.35,-134.62C7527.29,-129.54 7548.88,-127 7564.12,-127C7648.787,-127 7713.133,-149.437 7757.16,-194.31C7801.187,-239.183 7823.2,-299.72 7823.2,-375.92C7823.2,-423.333 7813.463,-462.28 7793.99,-492.76C7774.517,-523.24 7750.81,-548.64 7722.87,-568.96C7694.93,-589.28 7664.873,-605.79 7632.7,-618.49C7600.527,-631.19 7571.74,-642.62 7546.34,-652.78C7510.78,-664.633 7471.41,-679.027 7428.23,-695.96C7385.05,-712.893 7345.257,-736.177 7308.85,-765.81C7272.443,-795.443 7241.54,-831.85 7216.14,-875.03C7190.74,-918.21 7178.04,-972.82 7178.04,-1038.86C7178.04,-1087.967 7186.507,-1135.803 7203.44,-1182.37C7220.373,-1228.937 7245.773,-1270 7279.64,-1305.56C7313.507,-1341.12 7354.993,-1369.907 7404.1,-1391.92C7453.207,-1413.933 7509.933,-1424.94 7574.28,-1424.94C7625.08,-1424.94 7673.763,-1415.627 7720.33,-1397C7766.897,-1378.373 7807.113,-1352.55 7840.98,-1319.53C7874.847,-1286.51 7901.94,-1247.14 7922.26,-1201.42C7942.58,-1155.7 7952.74,-1105.747 7952.74,-1051.56L7952.74,-1046.48L7774.94,-1046.48C7771.553,-1088.813 7762.663,-1123.95 7748.27,-1151.89C7733.877,-1179.83 7716.52,-1202.267 7696.2,-1219.2C7675.88,-1236.133 7654.29,-1247.987 7631.43,-1254.76C7608.57,-1261.533 7586.98,-1264.92 7566.66,-1264.92C7531.1,-1264.92 7500.197,-1258.57 7473.95,-1245.87C7447.703,-1233.17 7425.69,-1216.66 7407.91,-1196.34C7390.13,-1176.02 7377.007,-1153.583 7368.54,-1129.03C7360.073,-1104.477 7355.84,-1080.347 7355.84,-1056.64C7355.84,-1019.387 7363.883,-988.06 7379.97,-962.66C7396.057,-937.26 7416.8,-915.67 7442.2,-897.89C7467.6,-880.11 7494.693,-865.717 7523.48,-854.71C7552.267,-843.703 7579.36,-833.967 7604.76,-825.5C7645.4,-811.953 7689.003,-795.443 7735.57,-775.97C7782.137,-756.497 7824.893,-730.673 7863.84,-698.5C7902.787,-666.327 7935.383,-625.687 7961.63,-576.58C7987.877,-527.473 8001,-467.36 8001,-396.24L8001,-391.16C8001,-331.893 7992.11,-276.437 7974.33,-224.79C7956.55,-173.143 7929.457,-128.27 7893.05,-90.17C7856.643,-52.07 7810.923,-22.013 7755.89,0C7700.857,22.013 7636.933,33.02 7564.12,33.02C7516.707,33.02 7467.6,24.977 7416.8,8.89C7366,-7.197 7319.857,-32.597 7278.37,-67.31C7236.883,-102.023 7203.017,-146.473 7176.77,-200.66C7150.523,-254.847 7137.4,-320.04 7137.4,-396.24L7137.4,-411.48L7315.2,-411.48Z" style="fill-rule:nonzero;"/></g><g transform="matrix(1,0,0,1,13912.49,8397.87)"><path d="M177.8,-1879.6L1127.76,-1879.6L1127.76,-1709.42L365.76,-1709.42L365.76,-1028.7L1099.82,-1028.7L1099.82,-858.52L365.76,-858.52L365.76,0L177.8,0L177.8,-1879.6Z" style="fill-rule:nonzero;"/><path d="M1516.38,-690.88C1516.38,-612.987 1529.927,-539.75 1557.02,-471.17C1584.113,-402.59 1622.637,-342.9 1672.59,-292.1C1722.543,-241.3 1782.657,-201.083 1852.93,-171.45C1923.203,-141.817 2000.673,-127 2085.34,-127C2159.847,-127 2230.967,-141.393 2298.7,-170.18C2366.433,-198.967 2425.7,-238.337 2476.5,-288.29C2527.3,-338.243 2567.517,-397.933 2597.15,-467.36C2626.783,-536.787 2641.6,-612.14 2641.6,-693.42C2641.6,-769.62 2627.63,-842.433 2599.69,-911.86C2571.75,-981.287 2532.803,-1041.823 2482.85,-1093.47C2432.897,-1145.117 2374.053,-1186.603 2306.32,-1217.93C2238.587,-1249.257 2164.927,-1264.92 2085.34,-1264.92C2009.14,-1264.92 1936.75,-1251.373 1868.17,-1224.28C1799.59,-1197.187 1739.053,-1159.087 1686.56,-1109.98C1634.067,-1060.873 1592.58,-1000.76 1562.1,-929.64C1531.62,-858.52 1516.38,-778.933 1516.38,-690.88ZM2809.24,0L2631.44,0L2631.44,-243.84L2626.36,-243.84C2587.413,-186.267 2544.233,-139.7 2496.82,-104.14C2449.407,-68.58 2401.147,-40.64 2352.04,-20.32C2302.933,0 2255.097,13.97 2208.53,21.59C2161.963,29.21 2120.9,33.02 2085.34,33.02C1975.273,33.02 1874.52,13.547 1783.08,-25.4C1691.64,-64.347 1612.9,-116.84 1546.86,-182.88C1480.82,-248.92 1429.597,-326.39 1393.19,-415.29C1356.783,-504.19 1338.58,-598.593 1338.58,-698.5C1338.58,-791.633 1356.36,-881.803 1391.92,-969.01C1427.48,-1056.217 1477.433,-1133.687 1541.78,-1201.42C1606.127,-1269.153 1684.443,-1323.34 1776.73,-1363.98C1869.017,-1404.62 1971.887,-1424.94 2085.34,-1424.94C2122.593,-1424.94 2164.927,-1421.13 2212.34,-1413.51C2259.753,-1405.89 2308.013,-1391.92 2357.12,-1371.6C2406.227,-1351.28 2454.063,-1322.917 2500.63,-1286.51C2547.197,-1250.103 2589.107,-1203.113 2626.36,-1145.54L2631.44,-1145.54L2631.44,-1389.38L2809.24,-1389.38L2809.24,0Z" style="fill-rule:nonzero;"/><path d="M3131.82,-1389.38L3309.62,-1389.38L3309.62,-1188.72L3314.7,-1188.72C3335.02,-1237.827 3359.997,-1277.197 3389.63,-1306.83C3419.263,-1336.463 3451.013,-1359.747 3484.88,-1376.68C3518.747,-1393.613 3554.73,-1405.043 3592.83,-1410.97C3630.93,-1416.897 3668.607,-1421.553 3705.86,-1424.94L3705.86,-1236.98C3643.207,-1231.9 3586.057,-1217.93 3534.41,-1195.07C3482.763,-1172.21 3440.007,-1140.46 3406.14,-1099.82C3375.66,-1060.873 3351.953,-1017.27 3335.02,-969.01C3318.087,-920.75 3309.62,-868.68 3309.62,-812.8L3309.62,0L3131.82,0L3131.82,-1389.38Z" style="fill-rule:nonzero;"/><path d="M4147.82,-1229.36C4186.767,-1292.013 4239.26,-1340.273 4305.3,-1374.14C4371.34,-1408.007 4445,-1424.94 4526.28,-1424.94C4627.88,-1424.94 4718.897,-1402.08 4799.33,-1356.36C4879.763,-1310.64 4944.533,-1244.6 4993.64,-1158.24C5103.707,-1336.04 5259.493,-1424.94 5461,-1424.94C5542.28,-1424.94 5617.21,-1410.97 5685.79,-1383.03C5754.37,-1355.09 5813.213,-1315.297 5862.32,-1263.65C5911.427,-1212.003 5949.527,-1149.35 5976.62,-1075.69C6003.713,-1002.03 6017.26,-918.633 6017.26,-825.5L6017.26,0L5839.46,0L5839.46,-805.18C5839.46,-954.193 5806.017,-1068.07 5739.13,-1146.81C5672.243,-1225.55 5579.533,-1264.92 5461,-1264.92C5342.467,-1264.92 5249.757,-1225.55 5182.87,-1146.81C5115.983,-1068.07 5082.54,-954.193 5082.54,-805.18L5082.54,0L4904.74,0L4904.74,-805.18C4904.74,-954.193 4871.297,-1068.07 4804.41,-1146.81C4737.523,-1225.55 4644.813,-1264.92 4526.28,-1264.92C4407.747,-1264.92 4315.037,-1225.55 4248.15,-1146.81C4181.263,-1068.07 4147.82,-954.193 4147.82,-805.18L4147.82,0L3970.02,0L3970.02,-1389.38L4147.82,-1389.38L4147.82,-1229.36Z" style="fill-rule:nonzero;"/></g></g></g></g></g></svg></span>
            </a>
            <nav class="ds-barra-de-topo__nav">
              <a class="ds-item-de-navegacao" href="#organismos">Atelier</a>
              <a class="ds-item-de-navegacao" href="#organismos" aria-current="page">Projetos</a>
              <a class="ds-item-de-navegacao" href="#organismos">SSM</a>
              <a class="ds-item-de-navegacao" href="#organismos">Contato</a>
            </nav>
            <div class="ds-barra-de-topo__actions">
              <button type="button" class="ds-botao ds-botao--sm">Falar com arquiteto</button>
            </div>
          </div>
        </div>
      </div>
      <div>
        <p style="font-family:'Inter';font-weight:600;font-size:13px;color:#606470;margin:0 0 8px;">
          E-commerce · loja (base, com topbar)
        </p>
        <div class="ds-barra-de-topo" style="position:static;border-radius:12px;box-shadow:0 3px 9px rgba(0,0,0,0.12);overflow:hidden;">
          <div class="ds-barra-de-topo__topbar">
            <div class="ds-barra-de-topo__topbar-inner">
              <span>Frete grátis acima de R$ 599</span>
              <a href="#organismos">Central de ajuda</a>
            </div>
          </div>
          <div class="ds-barra-de-topo__main">
            <a class="ds-barra-de-topo__brand" href="#organismos" aria-label="CubasFarm">
              <span class="ds-barra-de-topo__logo"><svg viewBox="0 0 497 190" style="height:30px;width:auto;fill:currentColor;" aria-hidden="true"><g transform="matrix(1,0,0,1,-124.444728,-84.233821)">
              <rect x="124.445" y="84.234" width="496.726" height="189.435" style="fill:none;"/>
              <g><g transform="matrix(0.028346,0,0,0.028346,0.444728,0.233963)"><path d="M6400.4,8919.76C6415.62,8855.37 7338.47,7076.39 7394.56,6966.59C7501.35,6757.54 8356.58,5051.61 8401.17,5014.61C8472.57,5204.06 8545.38,5253.78 8642.49,5585.8C8869.03,6360.31 8714.94,7229.63 8239.89,7850.71L7946.36,8179.81C7674.41,8434.63 7448.63,8598.61 7062.13,8749.46C6890.73,8816.36 6599.35,8904.89 6400.4,8919.76ZM9299.9,5214.57C9268.73,5182.74 9211.1,5010.91 9187.04,4957.66C9114.83,4797.88 9017.87,4625.32 8923.04,4484.13L8772.4,4272.8L9115.91,3611.39L9907.14,5168.47L12206.92,9654.4L12919.96,9654.13C12885.99,9567.12 12597.89,9021.02 12530.12,8888.54C12478.83,8788.27 12145.93,8164.93 12144.03,8116.44C12113.89,8089.46 12069.44,7987.81 12050.97,7951.8L9503.01,2975.77L8721.53,2974.99L8301.9,3785.89L8212.6,3716.16C7741.19,3372.52 7318.76,3140.2 6696.22,3032.39C6158.1,2939.19 5005.71,2982.98 4392.63,2975.34L4390.13,7949.46L5121.34,7949.07L5122.37,3691.23C5424.85,3685.77 5728.39,3691.16 6027.66,3690.85C6306.88,3690.56 6560.52,3721.6 6820.5,3797.1C7052.44,3864.46 7268.18,3958.17 7449.51,4067.23C7500.64,4097.99 7542.23,4124.18 7586.73,4154.37L7776.84,4295.82C7804.69,4316.57 7813.76,4330.25 7839.44,4350.08C7888.28,4387.81 7918.67,4407.59 7958.6,4465.97L5345.39,9575.15C5518.49,9656.13 6162.19,9658.45 6370.43,9640.43C7062.17,9580.59 7730.03,9308.82 8243.1,8883.69C8458.11,8705.53 8691.54,8474.18 8849.92,8244.96C9298.01,7596.44 9512.04,6950.61 9475.53,6139.04C9454.79,5678.04 9300.47,5256.17 9299.9,5214.57Z"/><g><g transform="matrix(1,0,0,1,13912.49,6062.48)"><path d="M1958.34,-492.76C1907.54,-401.32 1848.273,-322.157 1780.54,-255.27C1712.807,-188.383 1640.417,-133.773 1563.37,-91.44C1486.323,-49.107 1407.583,-17.78 1327.15,2.54C1246.717,22.86 1168.4,33.02 1092.2,33.02C960.12,33.02 834.813,8.467 716.28,-40.64C597.747,-89.747 493.607,-157.48 403.86,-243.84C314.113,-330.2 242.57,-432.647 189.23,-551.18C135.89,-669.713 109.22,-798.407 109.22,-937.26C109.22,-1076.113 135.043,-1204.807 186.69,-1323.34C238.337,-1441.873 308.61,-1544.743 397.51,-1631.95C486.41,-1719.157 590.55,-1787.313 709.93,-1836.42C829.31,-1885.527 955.887,-1910.08 1089.66,-1910.08C1209.887,-1910.08 1319.107,-1891.453 1417.32,-1854.2C1515.533,-1816.947 1601.047,-1771.65 1673.86,-1718.31C1746.673,-1664.97 1806.363,-1609.09 1852.93,-1550.67C1899.497,-1492.25 1932.093,-1441.027 1950.72,-1397L1739.9,-1397C1707.329,-1445.856 1671.974,-1488.448 1633.834,-1524.774C1612.488,-1545.105 1590.27,-1563.474 1567.18,-1579.88C1502.833,-1625.6 1440.18,-1660.313 1379.22,-1684.02C1318.26,-1707.727 1261.533,-1722.967 1209.04,-1729.74C1156.547,-1736.513 1115.907,-1739.9 1087.12,-1739.9C977.053,-1739.9 874.183,-1717.463 778.51,-1672.59C682.837,-1627.717 599.44,-1568.027 528.32,-1493.52C457.2,-1419.013 400.897,-1333.5 359.41,-1236.98C317.923,-1140.46 297.18,-1039.707 297.18,-934.72C297.18,-824.653 319.193,-721.36 363.22,-624.84C407.247,-528.32 466.09,-443.653 539.75,-370.84C613.41,-298.027 698.077,-240.877 793.75,-199.39C889.423,-157.903 988.06,-137.16 1089.66,-137.16C1113.367,-137.16 1148.927,-139.7 1196.34,-144.78C1243.753,-149.86 1297.517,-163.83 1357.63,-186.69C1417.743,-209.55 1481.667,-244.687 1549.4,-292.1C1617.133,-339.513 1683.173,-406.4 1747.52,-492.76L1958.34,-492.76Z" style="fill-rule:nonzero;"/><path d="M3439.16,0L3271.52,0L3271.52,-215.9L3266.44,-215.9C3252.893,-190.5 3234.69,-162.983 3211.83,-133.35C3188.97,-103.717 3159.337,-76.623 3122.93,-52.07C3086.523,-27.517 3043.343,-7.197 2993.39,8.89C2943.437,24.977 2886.287,33.02 2821.94,33.02C2752.513,33.02 2691.553,25.823 2639.06,11.43C2586.567,-2.963 2541.27,-20.743 2503.17,-41.91C2465.07,-63.077 2432.897,-85.937 2406.65,-110.49C2380.403,-135.043 2359.66,-156.633 2344.42,-175.26C2295.313,-236.22 2262.717,-307.34 2246.63,-388.62C2230.543,-469.9 2222.5,-547.793 2222.5,-622.3L2222.5,-1389.38L2400.3,-1389.38L2400.3,-624.84C2400.3,-536.787 2409.19,-463.55 2426.97,-405.13C2444.75,-346.71 2468.88,-298.027 2499.36,-259.08C2548.467,-204.893 2602.23,-169.333 2660.65,-152.4C2719.07,-135.467 2772.833,-127 2821.94,-127C2871.047,-127 2921.423,-134.62 2973.07,-149.86C3024.717,-165.1 3072.553,-194.733 3116.58,-238.76C3136.9,-259.08 3155.95,-280.67 3173.73,-303.53C3191.51,-326.39 3206.75,-353.907 3219.45,-386.08C3232.15,-418.253 3242.31,-455.93 3249.93,-499.11C3257.55,-542.29 3261.36,-594.36 3261.36,-655.32L3261.36,-1389.38L3439.16,-1389.38L3439.16,0Z" style="fill-rule:nonzero;"/><path d="M5074.92,-690.88C5074.92,-778.933 5059.68,-858.52 5029.2,-929.64C4998.72,-1000.76 4957.233,-1060.873 4904.74,-1109.98C4852.247,-1159.087 4791.71,-1197.187 4723.13,-1224.28C4654.55,-1251.373 4582.16,-1264.92 4505.96,-1264.92C4426.373,-1264.92 4352.29,-1249.257 4283.71,-1217.93C4215.13,-1186.603 4156.287,-1145.117 4107.18,-1093.47C4058.073,-1041.823 4019.55,-981.287 3991.61,-911.86C3963.67,-842.433 3949.7,-769.62 3949.7,-693.42C3949.7,-612.14 3964.517,-536.787 3994.15,-467.36C4023.783,-397.933 4064,-338.243 4114.8,-288.29C4165.6,-238.337 4224.867,-198.967 4292.6,-170.18C4360.333,-141.393 4431.453,-127 4505.96,-127C4590.627,-127 4668.097,-141.817 4738.37,-171.45C4808.643,-201.083 4868.757,-241.3 4918.71,-292.1C4968.663,-342.9 5007.187,-402.59 5034.28,-471.17C5061.373,-539.75 5074.92,-612.987 5074.92,-690.88ZM3782.06,-1879.6L3959.86,-1879.6L3959.86,-1145.54L3964.94,-1145.54C4003.887,-1201.42 4047.067,-1247.563 4094.48,-1283.97C4141.893,-1320.377 4189.73,-1349.163 4237.99,-1370.33C4286.25,-1391.497 4333.663,-1405.89 4380.23,-1413.51C4426.797,-1421.13 4468.707,-1424.94 4505.96,-1424.94C4619.413,-1424.94 4722.283,-1404.62 4814.57,-1363.98C4906.857,-1323.34 4985.173,-1269.153 5049.52,-1201.42C5113.867,-1133.687 5163.82,-1056.217 5199.38,-969.01C5234.94,-881.803 5252.72,-791.633 5252.72,-698.5C5252.72,-598.593 5234.093,-504.19 5196.84,-415.29C5159.587,-326.39 5107.94,-248.92 5041.9,-182.88C4975.86,-116.84 4897.12,-64.347 4805.68,-25.4C4714.24,13.547 4614.333,33.02 4505.96,33.02C4470.4,33.02 4429.337,29.21 4382.77,21.59C4336.203,13.97 4288.367,0 4239.26,-20.32C4190.153,-40.64 4141.893,-69.003 4094.48,-105.41C4047.067,-141.817 4003.887,-187.96 3964.94,-243.84L3959.86,-243.84L3959.86,0L3782.06,0L3782.06,-1879.6Z" style="fill-rule:nonzero;"/><path d="M5626.1,-690.88C5626.1,-612.987 5639.647,-539.75 5666.74,-471.17C5693.833,-402.59 5732.357,-342.9 5782.31,-292.1C5832.263,-241.3 5892.377,-201.083 5962.65,-171.45C6032.923,-141.817 6110.393,-127 6195.06,-127C6269.567,-127 6340.687,-141.393 6408.42,-170.18C6476.153,-198.967 6535.42,-238.337 6586.22,-288.29C6637.02,-338.243 6677.237,-397.933 6706.87,-467.36C6736.503,-536.787 6751.32,-612.14 6751.32,-693.42C6751.32,-769.62 6737.35,-842.433 6709.41,-911.86C6681.47,-981.287 6642.523,-1041.823 6592.57,-1093.47C6542.617,-1145.117 6483.773,-1186.603 6416.04,-1217.93C6348.307,-1249.257 6274.647,-1264.92 6195.06,-1264.92C6118.86,-1264.92 6046.47,-1251.373 5977.89,-1224.28C5909.31,-1197.187 5848.773,-1159.087 5796.28,-1109.98C5743.787,-1060.873 5702.3,-1000.76 5671.82,-929.64C5641.34,-858.52 5626.1,-778.933 5626.1,-690.88ZM6918.96,0L6741.16,0L6741.16,-243.84L6736.08,-243.84C6697.133,-186.267 6653.953,-139.7 6606.54,-104.14C6559.127,-68.58 6510.867,-40.64 6461.76,-20.32C6412.653,0 6364.817,13.97 6318.25,21.59C6271.683,29.21 6230.62,33.02 6195.06,33.02C6084.993,33.02 5984.24,13.547 5892.8,-25.4C5801.36,-64.347 5722.62,-116.84 5656.58,-182.88C5590.54,-248.92 5539.317,-326.39 5502.91,-415.29C5466.503,-504.19 5448.3,-598.593 5448.3,-698.5C5448.3,-791.633 5466.08,-881.803 5501.64,-969.01C5537.2,-1056.217 5587.153,-1133.687 5651.5,-1201.42C5715.847,-1269.153 5794.163,-1323.34 5886.45,-1363.98C5978.737,-1404.62 6081.607,-1424.94 6195.06,-1424.94C6232.313,-1424.94 6274.647,-1421.13 6322.06,-1413.51C6369.473,-1405.89 6417.733,-1391.92 6466.84,-1371.6C6515.947,-1351.28 6563.783,-1322.917 6610.35,-1286.51C6656.917,-1250.103 6698.827,-1203.113 6736.08,-1145.54L6741.16,-1145.54L6741.16,-1389.38L6918.96,-1389.38L6918.96,0Z" style="fill-rule:nonzero;"/><path d="M7315.2,-411.48C7316.893,-345.44 7327.9,-293.37 7348.22,-255.27C7368.54,-217.17 7391.823,-188.807 7418.07,-170.18C7444.317,-151.553 7471.41,-139.7 7499.35,-134.62C7527.29,-129.54 7548.88,-127 7564.12,-127C7648.787,-127 7713.133,-149.437 7757.16,-194.31C7801.187,-239.183 7823.2,-299.72 7823.2,-375.92C7823.2,-423.333 7813.463,-462.28 7793.99,-492.76C7774.517,-523.24 7750.81,-548.64 7722.87,-568.96C7694.93,-589.28 7664.873,-605.79 7632.7,-618.49C7600.527,-631.19 7571.74,-642.62 7546.34,-652.78C7510.78,-664.633 7471.41,-679.027 7428.23,-695.96C7385.05,-712.893 7345.257,-736.177 7308.85,-765.81C7272.443,-795.443 7241.54,-831.85 7216.14,-875.03C7190.74,-918.21 7178.04,-972.82 7178.04,-1038.86C7178.04,-1087.967 7186.507,-1135.803 7203.44,-1182.37C7220.373,-1228.937 7245.773,-1270 7279.64,-1305.56C7313.507,-1341.12 7354.993,-1369.907 7404.1,-1391.92C7453.207,-1413.933 7509.933,-1424.94 7574.28,-1424.94C7625.08,-1424.94 7673.763,-1415.627 7720.33,-1397C7766.897,-1378.373 7807.113,-1352.55 7840.98,-1319.53C7874.847,-1286.51 7901.94,-1247.14 7922.26,-1201.42C7942.58,-1155.7 7952.74,-1105.747 7952.74,-1051.56L7952.74,-1046.48L7774.94,-1046.48C7771.553,-1088.813 7762.663,-1123.95 7748.27,-1151.89C7733.877,-1179.83 7716.52,-1202.267 7696.2,-1219.2C7675.88,-1236.133 7654.29,-1247.987 7631.43,-1254.76C7608.57,-1261.533 7586.98,-1264.92 7566.66,-1264.92C7531.1,-1264.92 7500.197,-1258.57 7473.95,-1245.87C7447.703,-1233.17 7425.69,-1216.66 7407.91,-1196.34C7390.13,-1176.02 7377.007,-1153.583 7368.54,-1129.03C7360.073,-1104.477 7355.84,-1080.347 7355.84,-1056.64C7355.84,-1019.387 7363.883,-988.06 7379.97,-962.66C7396.057,-937.26 7416.8,-915.67 7442.2,-897.89C7467.6,-880.11 7494.693,-865.717 7523.48,-854.71C7552.267,-843.703 7579.36,-833.967 7604.76,-825.5C7645.4,-811.953 7689.003,-795.443 7735.57,-775.97C7782.137,-756.497 7824.893,-730.673 7863.84,-698.5C7902.787,-666.327 7935.383,-625.687 7961.63,-576.58C7987.877,-527.473 8001,-467.36 8001,-396.24L8001,-391.16C8001,-331.893 7992.11,-276.437 7974.33,-224.79C7956.55,-173.143 7929.457,-128.27 7893.05,-90.17C7856.643,-52.07 7810.923,-22.013 7755.89,0C7700.857,22.013 7636.933,33.02 7564.12,33.02C7516.707,33.02 7467.6,24.977 7416.8,8.89C7366,-7.197 7319.857,-32.597 7278.37,-67.31C7236.883,-102.023 7203.017,-146.473 7176.77,-200.66C7150.523,-254.847 7137.4,-320.04 7137.4,-396.24L7137.4,-411.48L7315.2,-411.48Z" style="fill-rule:nonzero;"/></g><g transform="matrix(1,0,0,1,13912.49,8397.87)"><path d="M177.8,-1879.6L1127.76,-1879.6L1127.76,-1709.42L365.76,-1709.42L365.76,-1028.7L1099.82,-1028.7L1099.82,-858.52L365.76,-858.52L365.76,0L177.8,0L177.8,-1879.6Z" style="fill-rule:nonzero;"/><path d="M1516.38,-690.88C1516.38,-612.987 1529.927,-539.75 1557.02,-471.17C1584.113,-402.59 1622.637,-342.9 1672.59,-292.1C1722.543,-241.3 1782.657,-201.083 1852.93,-171.45C1923.203,-141.817 2000.673,-127 2085.34,-127C2159.847,-127 2230.967,-141.393 2298.7,-170.18C2366.433,-198.967 2425.7,-238.337 2476.5,-288.29C2527.3,-338.243 2567.517,-397.933 2597.15,-467.36C2626.783,-536.787 2641.6,-612.14 2641.6,-693.42C2641.6,-769.62 2627.63,-842.433 2599.69,-911.86C2571.75,-981.287 2532.803,-1041.823 2482.85,-1093.47C2432.897,-1145.117 2374.053,-1186.603 2306.32,-1217.93C2238.587,-1249.257 2164.927,-1264.92 2085.34,-1264.92C2009.14,-1264.92 1936.75,-1251.373 1868.17,-1224.28C1799.59,-1197.187 1739.053,-1159.087 1686.56,-1109.98C1634.067,-1060.873 1592.58,-1000.76 1562.1,-929.64C1531.62,-858.52 1516.38,-778.933 1516.38,-690.88ZM2809.24,0L2631.44,0L2631.44,-243.84L2626.36,-243.84C2587.413,-186.267 2544.233,-139.7 2496.82,-104.14C2449.407,-68.58 2401.147,-40.64 2352.04,-20.32C2302.933,0 2255.097,13.97 2208.53,21.59C2161.963,29.21 2120.9,33.02 2085.34,33.02C1975.273,33.02 1874.52,13.547 1783.08,-25.4C1691.64,-64.347 1612.9,-116.84 1546.86,-182.88C1480.82,-248.92 1429.597,-326.39 1393.19,-415.29C1356.783,-504.19 1338.58,-598.593 1338.58,-698.5C1338.58,-791.633 1356.36,-881.803 1391.92,-969.01C1427.48,-1056.217 1477.433,-1133.687 1541.78,-1201.42C1606.127,-1269.153 1684.443,-1323.34 1776.73,-1363.98C1869.017,-1404.62 1971.887,-1424.94 2085.34,-1424.94C2122.593,-1424.94 2164.927,-1421.13 2212.34,-1413.51C2259.753,-1405.89 2308.013,-1391.92 2357.12,-1371.6C2406.227,-1351.28 2454.063,-1322.917 2500.63,-1286.51C2547.197,-1250.103 2589.107,-1203.113 2626.36,-1145.54L2631.44,-1145.54L2631.44,-1389.38L2809.24,-1389.38L2809.24,0Z" style="fill-rule:nonzero;"/><path d="M3131.82,-1389.38L3309.62,-1389.38L3309.62,-1188.72L3314.7,-1188.72C3335.02,-1237.827 3359.997,-1277.197 3389.63,-1306.83C3419.263,-1336.463 3451.013,-1359.747 3484.88,-1376.68C3518.747,-1393.613 3554.73,-1405.043 3592.83,-1410.97C3630.93,-1416.897 3668.607,-1421.553 3705.86,-1424.94L3705.86,-1236.98C3643.207,-1231.9 3586.057,-1217.93 3534.41,-1195.07C3482.763,-1172.21 3440.007,-1140.46 3406.14,-1099.82C3375.66,-1060.873 3351.953,-1017.27 3335.02,-969.01C3318.087,-920.75 3309.62,-868.68 3309.62,-812.8L3309.62,0L3131.82,0L3131.82,-1389.38Z" style="fill-rule:nonzero;"/><path d="M4147.82,-1229.36C4186.767,-1292.013 4239.26,-1340.273 4305.3,-1374.14C4371.34,-1408.007 4445,-1424.94 4526.28,-1424.94C4627.88,-1424.94 4718.897,-1402.08 4799.33,-1356.36C4879.763,-1310.64 4944.533,-1244.6 4993.64,-1158.24C5103.707,-1336.04 5259.493,-1424.94 5461,-1424.94C5542.28,-1424.94 5617.21,-1410.97 5685.79,-1383.03C5754.37,-1355.09 5813.213,-1315.297 5862.32,-1263.65C5911.427,-1212.003 5949.527,-1149.35 5976.62,-1075.69C6003.713,-1002.03 6017.26,-918.633 6017.26,-825.5L6017.26,0L5839.46,0L5839.46,-805.18C5839.46,-954.193 5806.017,-1068.07 5739.13,-1146.81C5672.243,-1225.55 5579.533,-1264.92 5461,-1264.92C5342.467,-1264.92 5249.757,-1225.55 5182.87,-1146.81C5115.983,-1068.07 5082.54,-954.193 5082.54,-805.18L5082.54,0L4904.74,0L4904.74,-805.18C4904.74,-954.193 4871.297,-1068.07 4804.41,-1146.81C4737.523,-1225.55 4644.813,-1264.92 4526.28,-1264.92C4407.747,-1264.92 4315.037,-1225.55 4248.15,-1146.81C4181.263,-1068.07 4147.82,-954.193 4147.82,-805.18L4147.82,0L3970.02,0L3970.02,-1389.38L4147.82,-1389.38L4147.82,-1229.36Z" style="fill-rule:nonzero;"/></g></g></g></g></g></svg></span>
            </a>
            <nav class="ds-barra-de-topo__nav">
              <a class="ds-item-de-navegacao" href="#organismos">Cozinha</a>
              <a class="ds-item-de-navegacao" href="#organismos" aria-current="page">Farm Sinks</a>
              <a class="ds-item-de-navegacao" href="#organismos">Banheiro</a>
              <a class="ds-item-de-navegacao" href="#organismos">Bancadas</a>
            </nav>
            <div class="ds-barra-de-topo__actions">
              <button type="button" class="ds-botao ds-botao--secundario ds-botao--sm">Buscar</button>
              <button type="button" class="ds-botao ds-botao--sm">Carrinho</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

menu lateral .ds-menu-lateral

Menu lateral UNIVERSAL (side nav / rail): navegação vertical com grupos, itens (ícone + rótulo + contador), estado ativo e rodapé. Serve app, site e loja.

✕ Não usar: Como única navegação de um site institucional simples de 3-4 páginas: ali a barra de topo basta. E nunca com mais de ~7 itens por grupo sem subdividir: vira lista, não menu.

↳ só tela: navegação de app, site e loja

Completo · com grupos e usuário

Rail · só ícones

tela

HTML da peça .ds-menu-lateral

<div class="tpv-scaler" style="width:502px;max-width:100%;height:310px;" role="button" tabindex="0" aria-label="Ampliar em tamanho real" data-w="760" data-h="470">
  <span class="tpv-zoom" aria-hidden="true">⤢ ampliar</span>
  <div class="tpv-scaled" style="width:760px;height:470px;transform:scale(0.66);transform-origin:top left;">
    <div style="display:flex;gap:24px;padding:24px;background:#f8f8f8;align-items:flex-start;">
      <div>
        <p style="font-family:'Inter';font-weight:600;font-size:13px;color:#606470;margin:0 0 8px;">
          Completo · com grupos e usuário
        </p>
        <div class="ds-menu-lateral" style="height:404px;border-radius:12px;box-shadow:var(--shadow-sm);">
          <div class="ds-menu-lateral__topo">
            <span class="ds-menu-lateral__logo"><svg viewBox="0 0 497 190" style="height:22px;width:auto;fill:currentColor;" aria-hidden="true"><g transform="matrix(1,0,0,1,-124.444728,-84.233821)">
            <rect x="124.445" y="84.234" width="496.726" height="189.435" style="fill:none;"/>
            <g><g transform="matrix(0.028346,0,0,0.028346,0.444728,0.233963)"><path d="M6400.4,8919.76C6415.62,8855.37 7338.47,7076.39 7394.56,6966.59C7501.35,6757.54 8356.58,5051.61 8401.17,5014.61C8472.57,5204.06 8545.38,5253.78 8642.49,5585.8C8869.03,6360.31 8714.94,7229.63 8239.89,7850.71L7946.36,8179.81C7674.41,8434.63 7448.63,8598.61 7062.13,8749.46C6890.73,8816.36 6599.35,8904.89 6400.4,8919.76ZM9299.9,5214.57C9268.73,5182.74 9211.1,5010.91 9187.04,4957.66C9114.83,4797.88 9017.87,4625.32 8923.04,4484.13L8772.4,4272.8L9115.91,3611.39L9907.14,5168.47L12206.92,9654.4L12919.96,9654.13C12885.99,9567.12 12597.89,9021.02 12530.12,8888.54C12478.83,8788.27 12145.93,8164.93 12144.03,8116.44C12113.89,8089.46 12069.44,7987.81 12050.97,7951.8L9503.01,2975.77L8721.53,2974.99L8301.9,3785.89L8212.6,3716.16C7741.19,3372.52 7318.76,3140.2 6696.22,3032.39C6158.1,2939.19 5005.71,2982.98 4392.63,2975.34L4390.13,7949.46L5121.34,7949.07L5122.37,3691.23C5424.85,3685.77 5728.39,3691.16 6027.66,3690.85C6306.88,3690.56 6560.52,3721.6 6820.5,3797.1C7052.44,3864.46 7268.18,3958.17 7449.51,4067.23C7500.64,4097.99 7542.23,4124.18 7586.73,4154.37L7776.84,4295.82C7804.69,4316.57 7813.76,4330.25 7839.44,4350.08C7888.28,4387.81 7918.67,4407.59 7958.6,4465.97L5345.39,9575.15C5518.49,9656.13 6162.19,9658.45 6370.43,9640.43C7062.17,9580.59 7730.03,9308.82 8243.1,8883.69C8458.11,8705.53 8691.54,8474.18 8849.92,8244.96C9298.01,7596.44 9512.04,6950.61 9475.53,6139.04C9454.79,5678.04 9300.47,5256.17 9299.9,5214.57Z"/><g><g transform="matrix(1,0,0,1,13912.49,6062.48)"><path d="M1958.34,-492.76C1907.54,-401.32 1848.273,-322.157 1780.54,-255.27C1712.807,-188.383 1640.417,-133.773 1563.37,-91.44C1486.323,-49.107 1407.583,-17.78 1327.15,2.54C1246.717,22.86 1168.4,33.02 1092.2,33.02C960.12,33.02 834.813,8.467 716.28,-40.64C597.747,-89.747 493.607,-157.48 403.86,-243.84C314.113,-330.2 242.57,-432.647 189.23,-551.18C135.89,-669.713 109.22,-798.407 109.22,-937.26C109.22,-1076.113 135.043,-1204.807 186.69,-1323.34C238.337,-1441.873 308.61,-1544.743 397.51,-1631.95C486.41,-1719.157 590.55,-1787.313 709.93,-1836.42C829.31,-1885.527 955.887,-1910.08 1089.66,-1910.08C1209.887,-1910.08 1319.107,-1891.453 1417.32,-1854.2C1515.533,-1816.947 1601.047,-1771.65 1673.86,-1718.31C1746.673,-1664.97 1806.363,-1609.09 1852.93,-1550.67C1899.497,-1492.25 1932.093,-1441.027 1950.72,-1397L1739.9,-1397C1707.329,-1445.856 1671.974,-1488.448 1633.834,-1524.774C1612.488,-1545.105 1590.27,-1563.474 1567.18,-1579.88C1502.833,-1625.6 1440.18,-1660.313 1379.22,-1684.02C1318.26,-1707.727 1261.533,-1722.967 1209.04,-1729.74C1156.547,-1736.513 1115.907,-1739.9 1087.12,-1739.9C977.053,-1739.9 874.183,-1717.463 778.51,-1672.59C682.837,-1627.717 599.44,-1568.027 528.32,-1493.52C457.2,-1419.013 400.897,-1333.5 359.41,-1236.98C317.923,-1140.46 297.18,-1039.707 297.18,-934.72C297.18,-824.653 319.193,-721.36 363.22,-624.84C407.247,-528.32 466.09,-443.653 539.75,-370.84C613.41,-298.027 698.077,-240.877 793.75,-199.39C889.423,-157.903 988.06,-137.16 1089.66,-137.16C1113.367,-137.16 1148.927,-139.7 1196.34,-144.78C1243.753,-149.86 1297.517,-163.83 1357.63,-186.69C1417.743,-209.55 1481.667,-244.687 1549.4,-292.1C1617.133,-339.513 1683.173,-406.4 1747.52,-492.76L1958.34,-492.76Z" style="fill-rule:nonzero;"/><path d="M3439.16,0L3271.52,0L3271.52,-215.9L3266.44,-215.9C3252.893,-190.5 3234.69,-162.983 3211.83,-133.35C3188.97,-103.717 3159.337,-76.623 3122.93,-52.07C3086.523,-27.517 3043.343,-7.197 2993.39,8.89C2943.437,24.977 2886.287,33.02 2821.94,33.02C2752.513,33.02 2691.553,25.823 2639.06,11.43C2586.567,-2.963 2541.27,-20.743 2503.17,-41.91C2465.07,-63.077 2432.897,-85.937 2406.65,-110.49C2380.403,-135.043 2359.66,-156.633 2344.42,-175.26C2295.313,-236.22 2262.717,-307.34 2246.63,-388.62C2230.543,-469.9 2222.5,-547.793 2222.5,-622.3L2222.5,-1389.38L2400.3,-1389.38L2400.3,-624.84C2400.3,-536.787 2409.19,-463.55 2426.97,-405.13C2444.75,-346.71 2468.88,-298.027 2499.36,-259.08C2548.467,-204.893 2602.23,-169.333 2660.65,-152.4C2719.07,-135.467 2772.833,-127 2821.94,-127C2871.047,-127 2921.423,-134.62 2973.07,-149.86C3024.717,-165.1 3072.553,-194.733 3116.58,-238.76C3136.9,-259.08 3155.95,-280.67 3173.73,-303.53C3191.51,-326.39 3206.75,-353.907 3219.45,-386.08C3232.15,-418.253 3242.31,-455.93 3249.93,-499.11C3257.55,-542.29 3261.36,-594.36 3261.36,-655.32L3261.36,-1389.38L3439.16,-1389.38L3439.16,0Z" style="fill-rule:nonzero;"/><path d="M5074.92,-690.88C5074.92,-778.933 5059.68,-858.52 5029.2,-929.64C4998.72,-1000.76 4957.233,-1060.873 4904.74,-1109.98C4852.247,-1159.087 4791.71,-1197.187 4723.13,-1224.28C4654.55,-1251.373 4582.16,-1264.92 4505.96,-1264.92C4426.373,-1264.92 4352.29,-1249.257 4283.71,-1217.93C4215.13,-1186.603 4156.287,-1145.117 4107.18,-1093.47C4058.073,-1041.823 4019.55,-981.287 3991.61,-911.86C3963.67,-842.433 3949.7,-769.62 3949.7,-693.42C3949.7,-612.14 3964.517,-536.787 3994.15,-467.36C4023.783,-397.933 4064,-338.243 4114.8,-288.29C4165.6,-238.337 4224.867,-198.967 4292.6,-170.18C4360.333,-141.393 4431.453,-127 4505.96,-127C4590.627,-127 4668.097,-141.817 4738.37,-171.45C4808.643,-201.083 4868.757,-241.3 4918.71,-292.1C4968.663,-342.9 5007.187,-402.59 5034.28,-471.17C5061.373,-539.75 5074.92,-612.987 5074.92,-690.88ZM3782.06,-1879.6L3959.86,-1879.6L3959.86,-1145.54L3964.94,-1145.54C4003.887,-1201.42 4047.067,-1247.563 4094.48,-1283.97C4141.893,-1320.377 4189.73,-1349.163 4237.99,-1370.33C4286.25,-1391.497 4333.663,-1405.89 4380.23,-1413.51C4426.797,-1421.13 4468.707,-1424.94 4505.96,-1424.94C4619.413,-1424.94 4722.283,-1404.62 4814.57,-1363.98C4906.857,-1323.34 4985.173,-1269.153 5049.52,-1201.42C5113.867,-1133.687 5163.82,-1056.217 5199.38,-969.01C5234.94,-881.803 5252.72,-791.633 5252.72,-698.5C5252.72,-598.593 5234.093,-504.19 5196.84,-415.29C5159.587,-326.39 5107.94,-248.92 5041.9,-182.88C4975.86,-116.84 4897.12,-64.347 4805.68,-25.4C4714.24,13.547 4614.333,33.02 4505.96,33.02C4470.4,33.02 4429.337,29.21 4382.77,21.59C4336.203,13.97 4288.367,0 4239.26,-20.32C4190.153,-40.64 4141.893,-69.003 4094.48,-105.41C4047.067,-141.817 4003.887,-187.96 3964.94,-243.84L3959.86,-243.84L3959.86,0L3782.06,0L3782.06,-1879.6Z" style="fill-rule:nonzero;"/><path d="M5626.1,-690.88C5626.1,-612.987 5639.647,-539.75 5666.74,-471.17C5693.833,-402.59 5732.357,-342.9 5782.31,-292.1C5832.263,-241.3 5892.377,-201.083 5962.65,-171.45C6032.923,-141.817 6110.393,-127 6195.06,-127C6269.567,-127 6340.687,-141.393 6408.42,-170.18C6476.153,-198.967 6535.42,-238.337 6586.22,-288.29C6637.02,-338.243 6677.237,-397.933 6706.87,-467.36C6736.503,-536.787 6751.32,-612.14 6751.32,-693.42C6751.32,-769.62 6737.35,-842.433 6709.41,-911.86C6681.47,-981.287 6642.523,-1041.823 6592.57,-1093.47C6542.617,-1145.117 6483.773,-1186.603 6416.04,-1217.93C6348.307,-1249.257 6274.647,-1264.92 6195.06,-1264.92C6118.86,-1264.92 6046.47,-1251.373 5977.89,-1224.28C5909.31,-1197.187 5848.773,-1159.087 5796.28,-1109.98C5743.787,-1060.873 5702.3,-1000.76 5671.82,-929.64C5641.34,-858.52 5626.1,-778.933 5626.1,-690.88ZM6918.96,0L6741.16,0L6741.16,-243.84L6736.08,-243.84C6697.133,-186.267 6653.953,-139.7 6606.54,-104.14C6559.127,-68.58 6510.867,-40.64 6461.76,-20.32C6412.653,0 6364.817,13.97 6318.25,21.59C6271.683,29.21 6230.62,33.02 6195.06,33.02C6084.993,33.02 5984.24,13.547 5892.8,-25.4C5801.36,-64.347 5722.62,-116.84 5656.58,-182.88C5590.54,-248.92 5539.317,-326.39 5502.91,-415.29C5466.503,-504.19 5448.3,-598.593 5448.3,-698.5C5448.3,-791.633 5466.08,-881.803 5501.64,-969.01C5537.2,-1056.217 5587.153,-1133.687 5651.5,-1201.42C5715.847,-1269.153 5794.163,-1323.34 5886.45,-1363.98C5978.737,-1404.62 6081.607,-1424.94 6195.06,-1424.94C6232.313,-1424.94 6274.647,-1421.13 6322.06,-1413.51C6369.473,-1405.89 6417.733,-1391.92 6466.84,-1371.6C6515.947,-1351.28 6563.783,-1322.917 6610.35,-1286.51C6656.917,-1250.103 6698.827,-1203.113 6736.08,-1145.54L6741.16,-1145.54L6741.16,-1389.38L6918.96,-1389.38L6918.96,0Z" style="fill-rule:nonzero;"/><path d="M7315.2,-411.48C7316.893,-345.44 7327.9,-293.37 7348.22,-255.27C7368.54,-217.17 7391.823,-188.807 7418.07,-170.18C7444.317,-151.553 7471.41,-139.7 7499.35,-134.62C7527.29,-129.54 7548.88,-127 7564.12,-127C7648.787,-127 7713.133,-149.437 7757.16,-194.31C7801.187,-239.183 7823.2,-299.72 7823.2,-375.92C7823.2,-423.333 7813.463,-462.28 7793.99,-492.76C7774.517,-523.24 7750.81,-548.64 7722.87,-568.96C7694.93,-589.28 7664.873,-605.79 7632.7,-618.49C7600.527,-631.19 7571.74,-642.62 7546.34,-652.78C7510.78,-664.633 7471.41,-679.027 7428.23,-695.96C7385.05,-712.893 7345.257,-736.177 7308.85,-765.81C7272.443,-795.443 7241.54,-831.85 7216.14,-875.03C7190.74,-918.21 7178.04,-972.82 7178.04,-1038.86C7178.04,-1087.967 7186.507,-1135.803 7203.44,-1182.37C7220.373,-1228.937 7245.773,-1270 7279.64,-1305.56C7313.507,-1341.12 7354.993,-1369.907 7404.1,-1391.92C7453.207,-1413.933 7509.933,-1424.94 7574.28,-1424.94C7625.08,-1424.94 7673.763,-1415.627 7720.33,-1397C7766.897,-1378.373 7807.113,-1352.55 7840.98,-1319.53C7874.847,-1286.51 7901.94,-1247.14 7922.26,-1201.42C7942.58,-1155.7 7952.74,-1105.747 7952.74,-1051.56L7952.74,-1046.48L7774.94,-1046.48C7771.553,-1088.813 7762.663,-1123.95 7748.27,-1151.89C7733.877,-1179.83 7716.52,-1202.267 7696.2,-1219.2C7675.88,-1236.133 7654.29,-1247.987 7631.43,-1254.76C7608.57,-1261.533 7586.98,-1264.92 7566.66,-1264.92C7531.1,-1264.92 7500.197,-1258.57 7473.95,-1245.87C7447.703,-1233.17 7425.69,-1216.66 7407.91,-1196.34C7390.13,-1176.02 7377.007,-1153.583 7368.54,-1129.03C7360.073,-1104.477 7355.84,-1080.347 7355.84,-1056.64C7355.84,-1019.387 7363.883,-988.06 7379.97,-962.66C7396.057,-937.26 7416.8,-915.67 7442.2,-897.89C7467.6,-880.11 7494.693,-865.717 7523.48,-854.71C7552.267,-843.703 7579.36,-833.967 7604.76,-825.5C7645.4,-811.953 7689.003,-795.443 7735.57,-775.97C7782.137,-756.497 7824.893,-730.673 7863.84,-698.5C7902.787,-666.327 7935.383,-625.687 7961.63,-576.58C7987.877,-527.473 8001,-467.36 8001,-396.24L8001,-391.16C8001,-331.893 7992.11,-276.437 7974.33,-224.79C7956.55,-173.143 7929.457,-128.27 7893.05,-90.17C7856.643,-52.07 7810.923,-22.013 7755.89,0C7700.857,22.013 7636.933,33.02 7564.12,33.02C7516.707,33.02 7467.6,24.977 7416.8,8.89C7366,-7.197 7319.857,-32.597 7278.37,-67.31C7236.883,-102.023 7203.017,-146.473 7176.77,-200.66C7150.523,-254.847 7137.4,-320.04 7137.4,-396.24L7137.4,-411.48L7315.2,-411.48Z" style="fill-rule:nonzero;"/></g><g transform="matrix(1,0,0,1,13912.49,8397.87)"><path d="M177.8,-1879.6L1127.76,-1879.6L1127.76,-1709.42L365.76,-1709.42L365.76,-1028.7L1099.82,-1028.7L1099.82,-858.52L365.76,-858.52L365.76,0L177.8,0L177.8,-1879.6Z" style="fill-rule:nonzero;"/><path d="M1516.38,-690.88C1516.38,-612.987 1529.927,-539.75 1557.02,-471.17C1584.113,-402.59 1622.637,-342.9 1672.59,-292.1C1722.543,-241.3 1782.657,-201.083 1852.93,-171.45C1923.203,-141.817 2000.673,-127 2085.34,-127C2159.847,-127 2230.967,-141.393 2298.7,-170.18C2366.433,-198.967 2425.7,-238.337 2476.5,-288.29C2527.3,-338.243 2567.517,-397.933 2597.15,-467.36C2626.783,-536.787 2641.6,-612.14 2641.6,-693.42C2641.6,-769.62 2627.63,-842.433 2599.69,-911.86C2571.75,-981.287 2532.803,-1041.823 2482.85,-1093.47C2432.897,-1145.117 2374.053,-1186.603 2306.32,-1217.93C2238.587,-1249.257 2164.927,-1264.92 2085.34,-1264.92C2009.14,-1264.92 1936.75,-1251.373 1868.17,-1224.28C1799.59,-1197.187 1739.053,-1159.087 1686.56,-1109.98C1634.067,-1060.873 1592.58,-1000.76 1562.1,-929.64C1531.62,-858.52 1516.38,-778.933 1516.38,-690.88ZM2809.24,0L2631.44,0L2631.44,-243.84L2626.36,-243.84C2587.413,-186.267 2544.233,-139.7 2496.82,-104.14C2449.407,-68.58 2401.147,-40.64 2352.04,-20.32C2302.933,0 2255.097,13.97 2208.53,21.59C2161.963,29.21 2120.9,33.02 2085.34,33.02C1975.273,33.02 1874.52,13.547 1783.08,-25.4C1691.64,-64.347 1612.9,-116.84 1546.86,-182.88C1480.82,-248.92 1429.597,-326.39 1393.19,-415.29C1356.783,-504.19 1338.58,-598.593 1338.58,-698.5C1338.58,-791.633 1356.36,-881.803 1391.92,-969.01C1427.48,-1056.217 1477.433,-1133.687 1541.78,-1201.42C1606.127,-1269.153 1684.443,-1323.34 1776.73,-1363.98C1869.017,-1404.62 1971.887,-1424.94 2085.34,-1424.94C2122.593,-1424.94 2164.927,-1421.13 2212.34,-1413.51C2259.753,-1405.89 2308.013,-1391.92 2357.12,-1371.6C2406.227,-1351.28 2454.063,-1322.917 2500.63,-1286.51C2547.197,-1250.103 2589.107,-1203.113 2626.36,-1145.54L2631.44,-1145.54L2631.44,-1389.38L2809.24,-1389.38L2809.24,0Z" style="fill-rule:nonzero;"/><path d="M3131.82,-1389.38L3309.62,-1389.38L3309.62,-1188.72L3314.7,-1188.72C3335.02,-1237.827 3359.997,-1277.197 3389.63,-1306.83C3419.263,-1336.463 3451.013,-1359.747 3484.88,-1376.68C3518.747,-1393.613 3554.73,-1405.043 3592.83,-1410.97C3630.93,-1416.897 3668.607,-1421.553 3705.86,-1424.94L3705.86,-1236.98C3643.207,-1231.9 3586.057,-1217.93 3534.41,-1195.07C3482.763,-1172.21 3440.007,-1140.46 3406.14,-1099.82C3375.66,-1060.873 3351.953,-1017.27 3335.02,-969.01C3318.087,-920.75 3309.62,-868.68 3309.62,-812.8L3309.62,0L3131.82,0L3131.82,-1389.38Z" style="fill-rule:nonzero;"/><path d="M4147.82,-1229.36C4186.767,-1292.013 4239.26,-1340.273 4305.3,-1374.14C4371.34,-1408.007 4445,-1424.94 4526.28,-1424.94C4627.88,-1424.94 4718.897,-1402.08 4799.33,-1356.36C4879.763,-1310.64 4944.533,-1244.6 4993.64,-1158.24C5103.707,-1336.04 5259.493,-1424.94 5461,-1424.94C5542.28,-1424.94 5617.21,-1410.97 5685.79,-1383.03C5754.37,-1355.09 5813.213,-1315.297 5862.32,-1263.65C5911.427,-1212.003 5949.527,-1149.35 5976.62,-1075.69C6003.713,-1002.03 6017.26,-918.633 6017.26,-825.5L6017.26,0L5839.46,0L5839.46,-805.18C5839.46,-954.193 5806.017,-1068.07 5739.13,-1146.81C5672.243,-1225.55 5579.533,-1264.92 5461,-1264.92C5342.467,-1264.92 5249.757,-1225.55 5182.87,-1146.81C5115.983,-1068.07 5082.54,-954.193 5082.54,-805.18L5082.54,0L4904.74,0L4904.74,-805.18C4904.74,-954.193 4871.297,-1068.07 4804.41,-1146.81C4737.523,-1225.55 4644.813,-1264.92 4526.28,-1264.92C4407.747,-1264.92 4315.037,-1225.55 4248.15,-1146.81C4181.263,-1068.07 4147.82,-954.193 4147.82,-805.18L4147.82,0L3970.02,0L3970.02,-1389.38L4147.82,-1389.38L4147.82,-1229.36Z" style="fill-rule:nonzero;"/></g></g></g></g></g></svg></span>
          </div>
          <div class="ds-menu-lateral__corpo">
            <div class="ds-menu-lateral__grupo">
              <p class="ds-menu-lateral__grupo-titulo">Operação</p>
              <a class="ds-menu-lateral__item ds-menu-lateral__item--ativo" href="#organismos">
                <svg class="ds-icone" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M4 4h6v6H4zM14 4h6v6h-6zM4 14h6v6H4zM14 14h6v6h-6z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/></svg><span class="ds-menu-lateral__item-rotulo">Visão geral</span>
              </a>
              <a class="ds-menu-lateral__item" href="#organismos">
                <svg class="ds-icone" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M12 3l8 4.5v9L12 21l-8-4.5v-9L12 3Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/><path d="M4 7.5l8 4.5 8-4.5" stroke="currentColor" stroke-width="2"/></svg><span class="ds-menu-lateral__item-rotulo">Pedidos</span><span class="ds-menu-lateral__item-contador">12</span>
              </a>
              <a class="ds-menu-lateral__item" href="#organismos">
                <svg class="ds-icone" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M4 4h7l9 9-7 7-9-9V4Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/>
                <circle cx="8.5" cy="8.5" r="1.5" fill="currentColor"/>
                </svg><span class="ds-menu-lateral__item-rotulo">Produtos</span>
              </a>
            </div>
            <div class="ds-menu-lateral__grupo">
              <p class="ds-menu-lateral__grupo-titulo">Relacionamento</p>
              <a class="ds-menu-lateral__item" href="#organismos">
                <svg class="ds-icone" viewBox="0 0 24 24" fill="none" aria-hidden="true">
                <circle cx="9" cy="8" r="3" stroke="currentColor" stroke-width="2"/>
                <path d="M3.5 20c0-3 2.5-5 5.5-5s5.5 2 5.5 5" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg><span class="ds-menu-lateral__item-rotulo">Clientes</span>
              </a>
            </div>
          </div>
          <div class="ds-menu-lateral__rodape">
            <span class="ds-avatar ds-avatar--md">MA</span><span style="font-family:'Inter';font-weight:600;font-size:13px;color:#323643;">Marketing</span>
          </div>
        </div>
      </div>
      <div>
        <p style="font-family:'Inter';font-weight:600;font-size:13px;color:#606470;margin:0 0 8px;">
          Rail · só ícones
        </p>
        <div class="ds-menu-lateral ds-menu-lateral--rail" style="height:404px;border-radius:12px;box-shadow:var(--shadow-sm);">
          <div class="ds-menu-lateral__topo" style="justify-content:center;color:#323643;">
            <svg class="ds-icone" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M4 7h16M4 12h16M4 17h16" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
          </div>
          <div class="ds-menu-lateral__corpo">
            <div class="ds-menu-lateral__grupo">
              <a class="ds-menu-lateral__item ds-menu-lateral__item--ativo" href="#organismos">
                <svg class="ds-icone" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M4 4h6v6H4zM14 4h6v6h-6zM4 14h6v6H4zM14 14h6v6h-6z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/></svg><span class="ds-menu-lateral__item-rotulo">Visão geral</span>
              </a>
              <a class="ds-menu-lateral__item" href="#organismos">
                <svg class="ds-icone" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M12 3l8 4.5v9L12 21l-8-4.5v-9L12 3Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/><path d="M4 7.5l8 4.5 8-4.5" stroke="currentColor" stroke-width="2"/></svg><span class="ds-menu-lateral__item-rotulo">Pedidos</span>
              </a>
              <a class="ds-menu-lateral__item" href="#organismos">
                <svg class="ds-icone" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M4 4h7l9 9-7 7-9-9V4Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/>
                <circle cx="8.5" cy="8.5" r="1.5" fill="currentColor"/>
                </svg><span class="ds-menu-lateral__item-rotulo">Produtos</span>
              </a>
              <a class="ds-menu-lateral__item" href="#organismos">
                <svg class="ds-icone" viewBox="0 0 24 24" fill="none" aria-hidden="true">
                <circle cx="9" cy="8" r="3" stroke="currentColor" stroke-width="2"/>
                <path d="M3.5 20c0-3 2.5-5 5.5-5s5.5 2 5.5 5" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg><span class="ds-menu-lateral__item-rotulo">Clientes</span>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

rodapé .ds-rodape

Chrome do rodape: brand block + colunas de links + social + legal, sobre fundo inverso.

✕ Não usar: Na versão completa dentro de checkout: distração no momento de pagar. Ali, só a legal bar.

↳ no canvas: .ds-assinatura (a marca assina)

tela

HTML da peça .ds-rodape

<div class="tpv-scaler" style="width:792px;max-width:100%;height:255px;" role="button" tabindex="0" aria-label="Ampliar em tamanho real" data-w="1200" data-h="386">
  <span class="tpv-zoom" aria-hidden="true">⤢ ampliar</span>
  <div class="tpv-scaled" style="width:1200px;height:386px;transform:scale(0.66);transform-origin:top left;">
    <footer class="ds-rodape">
      <div class="ds-rodape__top">
        <div class="ds-rodape__brand">
          <span class="ds-rodape__brand-mark" style="display:inline-flex;"><svg viewBox="0 0 497 190" style="height:38px;width:auto;fill:currentColor;" aria-hidden="true"><g transform="matrix(1,0,0,1,-124.444728,-84.233821)">
          <rect x="124.445" y="84.234" width="496.726" height="189.435" style="fill:none;"/>
          <g><g transform="matrix(0.028346,0,0,0.028346,0.444728,0.233963)"><path d="M6400.4,8919.76C6415.62,8855.37 7338.47,7076.39 7394.56,6966.59C7501.35,6757.54 8356.58,5051.61 8401.17,5014.61C8472.57,5204.06 8545.38,5253.78 8642.49,5585.8C8869.03,6360.31 8714.94,7229.63 8239.89,7850.71L7946.36,8179.81C7674.41,8434.63 7448.63,8598.61 7062.13,8749.46C6890.73,8816.36 6599.35,8904.89 6400.4,8919.76ZM9299.9,5214.57C9268.73,5182.74 9211.1,5010.91 9187.04,4957.66C9114.83,4797.88 9017.87,4625.32 8923.04,4484.13L8772.4,4272.8L9115.91,3611.39L9907.14,5168.47L12206.92,9654.4L12919.96,9654.13C12885.99,9567.12 12597.89,9021.02 12530.12,8888.54C12478.83,8788.27 12145.93,8164.93 12144.03,8116.44C12113.89,8089.46 12069.44,7987.81 12050.97,7951.8L9503.01,2975.77L8721.53,2974.99L8301.9,3785.89L8212.6,3716.16C7741.19,3372.52 7318.76,3140.2 6696.22,3032.39C6158.1,2939.19 5005.71,2982.98 4392.63,2975.34L4390.13,7949.46L5121.34,7949.07L5122.37,3691.23C5424.85,3685.77 5728.39,3691.16 6027.66,3690.85C6306.88,3690.56 6560.52,3721.6 6820.5,3797.1C7052.44,3864.46 7268.18,3958.17 7449.51,4067.23C7500.64,4097.99 7542.23,4124.18 7586.73,4154.37L7776.84,4295.82C7804.69,4316.57 7813.76,4330.25 7839.44,4350.08C7888.28,4387.81 7918.67,4407.59 7958.6,4465.97L5345.39,9575.15C5518.49,9656.13 6162.19,9658.45 6370.43,9640.43C7062.17,9580.59 7730.03,9308.82 8243.1,8883.69C8458.11,8705.53 8691.54,8474.18 8849.92,8244.96C9298.01,7596.44 9512.04,6950.61 9475.53,6139.04C9454.79,5678.04 9300.47,5256.17 9299.9,5214.57Z"/><g><g transform="matrix(1,0,0,1,13912.49,6062.48)"><path d="M1958.34,-492.76C1907.54,-401.32 1848.273,-322.157 1780.54,-255.27C1712.807,-188.383 1640.417,-133.773 1563.37,-91.44C1486.323,-49.107 1407.583,-17.78 1327.15,2.54C1246.717,22.86 1168.4,33.02 1092.2,33.02C960.12,33.02 834.813,8.467 716.28,-40.64C597.747,-89.747 493.607,-157.48 403.86,-243.84C314.113,-330.2 242.57,-432.647 189.23,-551.18C135.89,-669.713 109.22,-798.407 109.22,-937.26C109.22,-1076.113 135.043,-1204.807 186.69,-1323.34C238.337,-1441.873 308.61,-1544.743 397.51,-1631.95C486.41,-1719.157 590.55,-1787.313 709.93,-1836.42C829.31,-1885.527 955.887,-1910.08 1089.66,-1910.08C1209.887,-1910.08 1319.107,-1891.453 1417.32,-1854.2C1515.533,-1816.947 1601.047,-1771.65 1673.86,-1718.31C1746.673,-1664.97 1806.363,-1609.09 1852.93,-1550.67C1899.497,-1492.25 1932.093,-1441.027 1950.72,-1397L1739.9,-1397C1707.329,-1445.856 1671.974,-1488.448 1633.834,-1524.774C1612.488,-1545.105 1590.27,-1563.474 1567.18,-1579.88C1502.833,-1625.6 1440.18,-1660.313 1379.22,-1684.02C1318.26,-1707.727 1261.533,-1722.967 1209.04,-1729.74C1156.547,-1736.513 1115.907,-1739.9 1087.12,-1739.9C977.053,-1739.9 874.183,-1717.463 778.51,-1672.59C682.837,-1627.717 599.44,-1568.027 528.32,-1493.52C457.2,-1419.013 400.897,-1333.5 359.41,-1236.98C317.923,-1140.46 297.18,-1039.707 297.18,-934.72C297.18,-824.653 319.193,-721.36 363.22,-624.84C407.247,-528.32 466.09,-443.653 539.75,-370.84C613.41,-298.027 698.077,-240.877 793.75,-199.39C889.423,-157.903 988.06,-137.16 1089.66,-137.16C1113.367,-137.16 1148.927,-139.7 1196.34,-144.78C1243.753,-149.86 1297.517,-163.83 1357.63,-186.69C1417.743,-209.55 1481.667,-244.687 1549.4,-292.1C1617.133,-339.513 1683.173,-406.4 1747.52,-492.76L1958.34,-492.76Z" style="fill-rule:nonzero;"/><path d="M3439.16,0L3271.52,0L3271.52,-215.9L3266.44,-215.9C3252.893,-190.5 3234.69,-162.983 3211.83,-133.35C3188.97,-103.717 3159.337,-76.623 3122.93,-52.07C3086.523,-27.517 3043.343,-7.197 2993.39,8.89C2943.437,24.977 2886.287,33.02 2821.94,33.02C2752.513,33.02 2691.553,25.823 2639.06,11.43C2586.567,-2.963 2541.27,-20.743 2503.17,-41.91C2465.07,-63.077 2432.897,-85.937 2406.65,-110.49C2380.403,-135.043 2359.66,-156.633 2344.42,-175.26C2295.313,-236.22 2262.717,-307.34 2246.63,-388.62C2230.543,-469.9 2222.5,-547.793 2222.5,-622.3L2222.5,-1389.38L2400.3,-1389.38L2400.3,-624.84C2400.3,-536.787 2409.19,-463.55 2426.97,-405.13C2444.75,-346.71 2468.88,-298.027 2499.36,-259.08C2548.467,-204.893 2602.23,-169.333 2660.65,-152.4C2719.07,-135.467 2772.833,-127 2821.94,-127C2871.047,-127 2921.423,-134.62 2973.07,-149.86C3024.717,-165.1 3072.553,-194.733 3116.58,-238.76C3136.9,-259.08 3155.95,-280.67 3173.73,-303.53C3191.51,-326.39 3206.75,-353.907 3219.45,-386.08C3232.15,-418.253 3242.31,-455.93 3249.93,-499.11C3257.55,-542.29 3261.36,-594.36 3261.36,-655.32L3261.36,-1389.38L3439.16,-1389.38L3439.16,0Z" style="fill-rule:nonzero;"/><path d="M5074.92,-690.88C5074.92,-778.933 5059.68,-858.52 5029.2,-929.64C4998.72,-1000.76 4957.233,-1060.873 4904.74,-1109.98C4852.247,-1159.087 4791.71,-1197.187 4723.13,-1224.28C4654.55,-1251.373 4582.16,-1264.92 4505.96,-1264.92C4426.373,-1264.92 4352.29,-1249.257 4283.71,-1217.93C4215.13,-1186.603 4156.287,-1145.117 4107.18,-1093.47C4058.073,-1041.823 4019.55,-981.287 3991.61,-911.86C3963.67,-842.433 3949.7,-769.62 3949.7,-693.42C3949.7,-612.14 3964.517,-536.787 3994.15,-467.36C4023.783,-397.933 4064,-338.243 4114.8,-288.29C4165.6,-238.337 4224.867,-198.967 4292.6,-170.18C4360.333,-141.393 4431.453,-127 4505.96,-127C4590.627,-127 4668.097,-141.817 4738.37,-171.45C4808.643,-201.083 4868.757,-241.3 4918.71,-292.1C4968.663,-342.9 5007.187,-402.59 5034.28,-471.17C5061.373,-539.75 5074.92,-612.987 5074.92,-690.88ZM3782.06,-1879.6L3959.86,-1879.6L3959.86,-1145.54L3964.94,-1145.54C4003.887,-1201.42 4047.067,-1247.563 4094.48,-1283.97C4141.893,-1320.377 4189.73,-1349.163 4237.99,-1370.33C4286.25,-1391.497 4333.663,-1405.89 4380.23,-1413.51C4426.797,-1421.13 4468.707,-1424.94 4505.96,-1424.94C4619.413,-1424.94 4722.283,-1404.62 4814.57,-1363.98C4906.857,-1323.34 4985.173,-1269.153 5049.52,-1201.42C5113.867,-1133.687 5163.82,-1056.217 5199.38,-969.01C5234.94,-881.803 5252.72,-791.633 5252.72,-698.5C5252.72,-598.593 5234.093,-504.19 5196.84,-415.29C5159.587,-326.39 5107.94,-248.92 5041.9,-182.88C4975.86,-116.84 4897.12,-64.347 4805.68,-25.4C4714.24,13.547 4614.333,33.02 4505.96,33.02C4470.4,33.02 4429.337,29.21 4382.77,21.59C4336.203,13.97 4288.367,0 4239.26,-20.32C4190.153,-40.64 4141.893,-69.003 4094.48,-105.41C4047.067,-141.817 4003.887,-187.96 3964.94,-243.84L3959.86,-243.84L3959.86,0L3782.06,0L3782.06,-1879.6Z" style="fill-rule:nonzero;"/><path d="M5626.1,-690.88C5626.1,-612.987 5639.647,-539.75 5666.74,-471.17C5693.833,-402.59 5732.357,-342.9 5782.31,-292.1C5832.263,-241.3 5892.377,-201.083 5962.65,-171.45C6032.923,-141.817 6110.393,-127 6195.06,-127C6269.567,-127 6340.687,-141.393 6408.42,-170.18C6476.153,-198.967 6535.42,-238.337 6586.22,-288.29C6637.02,-338.243 6677.237,-397.933 6706.87,-467.36C6736.503,-536.787 6751.32,-612.14 6751.32,-693.42C6751.32,-769.62 6737.35,-842.433 6709.41,-911.86C6681.47,-981.287 6642.523,-1041.823 6592.57,-1093.47C6542.617,-1145.117 6483.773,-1186.603 6416.04,-1217.93C6348.307,-1249.257 6274.647,-1264.92 6195.06,-1264.92C6118.86,-1264.92 6046.47,-1251.373 5977.89,-1224.28C5909.31,-1197.187 5848.773,-1159.087 5796.28,-1109.98C5743.787,-1060.873 5702.3,-1000.76 5671.82,-929.64C5641.34,-858.52 5626.1,-778.933 5626.1,-690.88ZM6918.96,0L6741.16,0L6741.16,-243.84L6736.08,-243.84C6697.133,-186.267 6653.953,-139.7 6606.54,-104.14C6559.127,-68.58 6510.867,-40.64 6461.76,-20.32C6412.653,0 6364.817,13.97 6318.25,21.59C6271.683,29.21 6230.62,33.02 6195.06,33.02C6084.993,33.02 5984.24,13.547 5892.8,-25.4C5801.36,-64.347 5722.62,-116.84 5656.58,-182.88C5590.54,-248.92 5539.317,-326.39 5502.91,-415.29C5466.503,-504.19 5448.3,-598.593 5448.3,-698.5C5448.3,-791.633 5466.08,-881.803 5501.64,-969.01C5537.2,-1056.217 5587.153,-1133.687 5651.5,-1201.42C5715.847,-1269.153 5794.163,-1323.34 5886.45,-1363.98C5978.737,-1404.62 6081.607,-1424.94 6195.06,-1424.94C6232.313,-1424.94 6274.647,-1421.13 6322.06,-1413.51C6369.473,-1405.89 6417.733,-1391.92 6466.84,-1371.6C6515.947,-1351.28 6563.783,-1322.917 6610.35,-1286.51C6656.917,-1250.103 6698.827,-1203.113 6736.08,-1145.54L6741.16,-1145.54L6741.16,-1389.38L6918.96,-1389.38L6918.96,0Z" style="fill-rule:nonzero;"/><path d="M7315.2,-411.48C7316.893,-345.44 7327.9,-293.37 7348.22,-255.27C7368.54,-217.17 7391.823,-188.807 7418.07,-170.18C7444.317,-151.553 7471.41,-139.7 7499.35,-134.62C7527.29,-129.54 7548.88,-127 7564.12,-127C7648.787,-127 7713.133,-149.437 7757.16,-194.31C7801.187,-239.183 7823.2,-299.72 7823.2,-375.92C7823.2,-423.333 7813.463,-462.28 7793.99,-492.76C7774.517,-523.24 7750.81,-548.64 7722.87,-568.96C7694.93,-589.28 7664.873,-605.79 7632.7,-618.49C7600.527,-631.19 7571.74,-642.62 7546.34,-652.78C7510.78,-664.633 7471.41,-679.027 7428.23,-695.96C7385.05,-712.893 7345.257,-736.177 7308.85,-765.81C7272.443,-795.443 7241.54,-831.85 7216.14,-875.03C7190.74,-918.21 7178.04,-972.82 7178.04,-1038.86C7178.04,-1087.967 7186.507,-1135.803 7203.44,-1182.37C7220.373,-1228.937 7245.773,-1270 7279.64,-1305.56C7313.507,-1341.12 7354.993,-1369.907 7404.1,-1391.92C7453.207,-1413.933 7509.933,-1424.94 7574.28,-1424.94C7625.08,-1424.94 7673.763,-1415.627 7720.33,-1397C7766.897,-1378.373 7807.113,-1352.55 7840.98,-1319.53C7874.847,-1286.51 7901.94,-1247.14 7922.26,-1201.42C7942.58,-1155.7 7952.74,-1105.747 7952.74,-1051.56L7952.74,-1046.48L7774.94,-1046.48C7771.553,-1088.813 7762.663,-1123.95 7748.27,-1151.89C7733.877,-1179.83 7716.52,-1202.267 7696.2,-1219.2C7675.88,-1236.133 7654.29,-1247.987 7631.43,-1254.76C7608.57,-1261.533 7586.98,-1264.92 7566.66,-1264.92C7531.1,-1264.92 7500.197,-1258.57 7473.95,-1245.87C7447.703,-1233.17 7425.69,-1216.66 7407.91,-1196.34C7390.13,-1176.02 7377.007,-1153.583 7368.54,-1129.03C7360.073,-1104.477 7355.84,-1080.347 7355.84,-1056.64C7355.84,-1019.387 7363.883,-988.06 7379.97,-962.66C7396.057,-937.26 7416.8,-915.67 7442.2,-897.89C7467.6,-880.11 7494.693,-865.717 7523.48,-854.71C7552.267,-843.703 7579.36,-833.967 7604.76,-825.5C7645.4,-811.953 7689.003,-795.443 7735.57,-775.97C7782.137,-756.497 7824.893,-730.673 7863.84,-698.5C7902.787,-666.327 7935.383,-625.687 7961.63,-576.58C7987.877,-527.473 8001,-467.36 8001,-396.24L8001,-391.16C8001,-331.893 7992.11,-276.437 7974.33,-224.79C7956.55,-173.143 7929.457,-128.27 7893.05,-90.17C7856.643,-52.07 7810.923,-22.013 7755.89,0C7700.857,22.013 7636.933,33.02 7564.12,33.02C7516.707,33.02 7467.6,24.977 7416.8,8.89C7366,-7.197 7319.857,-32.597 7278.37,-67.31C7236.883,-102.023 7203.017,-146.473 7176.77,-200.66C7150.523,-254.847 7137.4,-320.04 7137.4,-396.24L7137.4,-411.48L7315.2,-411.48Z" style="fill-rule:nonzero;"/></g><g transform="matrix(1,0,0,1,13912.49,8397.87)"><path d="M177.8,-1879.6L1127.76,-1879.6L1127.76,-1709.42L365.76,-1709.42L365.76,-1028.7L1099.82,-1028.7L1099.82,-858.52L365.76,-858.52L365.76,0L177.8,0L177.8,-1879.6Z" style="fill-rule:nonzero;"/><path d="M1516.38,-690.88C1516.38,-612.987 1529.927,-539.75 1557.02,-471.17C1584.113,-402.59 1622.637,-342.9 1672.59,-292.1C1722.543,-241.3 1782.657,-201.083 1852.93,-171.45C1923.203,-141.817 2000.673,-127 2085.34,-127C2159.847,-127 2230.967,-141.393 2298.7,-170.18C2366.433,-198.967 2425.7,-238.337 2476.5,-288.29C2527.3,-338.243 2567.517,-397.933 2597.15,-467.36C2626.783,-536.787 2641.6,-612.14 2641.6,-693.42C2641.6,-769.62 2627.63,-842.433 2599.69,-911.86C2571.75,-981.287 2532.803,-1041.823 2482.85,-1093.47C2432.897,-1145.117 2374.053,-1186.603 2306.32,-1217.93C2238.587,-1249.257 2164.927,-1264.92 2085.34,-1264.92C2009.14,-1264.92 1936.75,-1251.373 1868.17,-1224.28C1799.59,-1197.187 1739.053,-1159.087 1686.56,-1109.98C1634.067,-1060.873 1592.58,-1000.76 1562.1,-929.64C1531.62,-858.52 1516.38,-778.933 1516.38,-690.88ZM2809.24,0L2631.44,0L2631.44,-243.84L2626.36,-243.84C2587.413,-186.267 2544.233,-139.7 2496.82,-104.14C2449.407,-68.58 2401.147,-40.64 2352.04,-20.32C2302.933,0 2255.097,13.97 2208.53,21.59C2161.963,29.21 2120.9,33.02 2085.34,33.02C1975.273,33.02 1874.52,13.547 1783.08,-25.4C1691.64,-64.347 1612.9,-116.84 1546.86,-182.88C1480.82,-248.92 1429.597,-326.39 1393.19,-415.29C1356.783,-504.19 1338.58,-598.593 1338.58,-698.5C1338.58,-791.633 1356.36,-881.803 1391.92,-969.01C1427.48,-1056.217 1477.433,-1133.687 1541.78,-1201.42C1606.127,-1269.153 1684.443,-1323.34 1776.73,-1363.98C1869.017,-1404.62 1971.887,-1424.94 2085.34,-1424.94C2122.593,-1424.94 2164.927,-1421.13 2212.34,-1413.51C2259.753,-1405.89 2308.013,-1391.92 2357.12,-1371.6C2406.227,-1351.28 2454.063,-1322.917 2500.63,-1286.51C2547.197,-1250.103 2589.107,-1203.113 2626.36,-1145.54L2631.44,-1145.54L2631.44,-1389.38L2809.24,-1389.38L2809.24,0Z" style="fill-rule:nonzero;"/><path d="M3131.82,-1389.38L3309.62,-1389.38L3309.62,-1188.72L3314.7,-1188.72C3335.02,-1237.827 3359.997,-1277.197 3389.63,-1306.83C3419.263,-1336.463 3451.013,-1359.747 3484.88,-1376.68C3518.747,-1393.613 3554.73,-1405.043 3592.83,-1410.97C3630.93,-1416.897 3668.607,-1421.553 3705.86,-1424.94L3705.86,-1236.98C3643.207,-1231.9 3586.057,-1217.93 3534.41,-1195.07C3482.763,-1172.21 3440.007,-1140.46 3406.14,-1099.82C3375.66,-1060.873 3351.953,-1017.27 3335.02,-969.01C3318.087,-920.75 3309.62,-868.68 3309.62,-812.8L3309.62,0L3131.82,0L3131.82,-1389.38Z" style="fill-rule:nonzero;"/><path d="M4147.82,-1229.36C4186.767,-1292.013 4239.26,-1340.273 4305.3,-1374.14C4371.34,-1408.007 4445,-1424.94 4526.28,-1424.94C4627.88,-1424.94 4718.897,-1402.08 4799.33,-1356.36C4879.763,-1310.64 4944.533,-1244.6 4993.64,-1158.24C5103.707,-1336.04 5259.493,-1424.94 5461,-1424.94C5542.28,-1424.94 5617.21,-1410.97 5685.79,-1383.03C5754.37,-1355.09 5813.213,-1315.297 5862.32,-1263.65C5911.427,-1212.003 5949.527,-1149.35 5976.62,-1075.69C6003.713,-1002.03 6017.26,-918.633 6017.26,-825.5L6017.26,0L5839.46,0L5839.46,-805.18C5839.46,-954.193 5806.017,-1068.07 5739.13,-1146.81C5672.243,-1225.55 5579.533,-1264.92 5461,-1264.92C5342.467,-1264.92 5249.757,-1225.55 5182.87,-1146.81C5115.983,-1068.07 5082.54,-954.193 5082.54,-805.18L5082.54,0L4904.74,0L4904.74,-805.18C4904.74,-954.193 4871.297,-1068.07 4804.41,-1146.81C4737.523,-1225.55 4644.813,-1264.92 4526.28,-1264.92C4407.747,-1264.92 4315.037,-1225.55 4248.15,-1146.81C4181.263,-1068.07 4147.82,-954.193 4147.82,-805.18L4147.82,0L3970.02,0L3970.02,-1389.38L4147.82,-1389.38L4147.82,-1229.36Z" style="fill-rule:nonzero;"/></g></g></g></g></g></svg></span>
          <p class="ds-rodape__brand-tagline">
            Cubas em superfície sólida mineral, direto do atelier Don Artesano.
          </p>
        </div>
        <div class="ds-rodape__column">
          <p class="ds-rodape__column-title">Loja</p>
          <a href="#organismos">Farm Sinks</a>
          <a href="#organismos">Cubas de banheiro</a>
          <a href="#organismos">Bancadas</a>
        </div>
        <div class="ds-rodape__column">
          <p class="ds-rodape__column-title">Ajuda</p>
          <a href="#organismos">Entrega e prazos</a>
          <a href="#organismos">Trocas</a>
          <a href="#organismos">Cuidados com a SSM</a>
        </div>
      </div>
      <div class="ds-rodape__divider">
      </div>
      <div class="ds-rodape__bottom">
        <p class="ds-rodape__legal">© 2026 CubasFarm · Uma marca Don Artesano</p>
      </div>
    </footer>
  </div>
</div>

Destaque & narrativa

A primeira dobra: onde a atenção nasce, no feed e na loja.

moldura de foto .ds-moldura-de-foto

Como a fotografia entra na peça

foto

full-bleed

foto

split-topo

closeup

closeup-topo

foto

frame-central

↳ usado em: A, B, E, F, G, Story A, Reel A

↳ na tela: .ds-card-de-foto · imagem do .ds-carrossel-hero

bloco editorial .ds-bloco-editorial

A voz da peça: headline + corpo de apoio opcional

dominante

foto

sobre-foto

pós-foto

Soft.

foto

hero-gigante

centrado

H1/H2 Playfair + corpo Inter + .ds-credito-de-foto opcional

↳ usado em: A, B, C, F, G, Stories, Reels

↳ na tela: conteúdo do .ds-carrossel-hero (display + corpo)

carrossel hero .ds-carrossel-hero

Carrossel de hero com slides (imagem bg + overlay + conteúdo), setas e dots; scroll-snap CSS.

✕ Não usar: Com um slide só (vira hero estático com controles mortos) ou em autoplay sem pausa acessível.

↳ no canvas: .ds-moldura-de-foto + .ds-bloco-editorial

Farm Sinks

Sua cozinha, ponto central

Peça única, sem emenda à vista.

tela

HTML da peça .ds-carrossel-hero

<div class="tpv-scaler" style="width:792px;max-width:100%;height:290px;" role="button" tabindex="0" aria-label="Ampliar em tamanho real" data-w="1200" data-h="440">
  <span class="tpv-zoom" aria-hidden="true">⤢ ampliar</span>
  <div class="tpv-scaled" style="width:1200px;height:440px;transform:scale(0.66);transform-origin:top left;">
    <section class="ds-carrossel-hero" role="region" aria-roledescription="carousel" aria-label="Destaques" style="height:440px;">
      <div class="ds-carrossel-hero__track" style="animation:none;">
        <div class="ds-carrossel-hero__slide" style="min-width:100%;">
          <span class="ds-carrossel-hero__image" style="background:url('Imagens/foto-quente-cf.jpg') center/cover;"></span><span class="ds-carrossel-hero__overlay"></span>
          <div class="ds-carrossel-hero__content">
            <p class="ds-carrossel-hero__eyebrow">Farm Sinks</p>
            <h2 class="ds-carrossel-hero__title" style="margin:0;">Sua cozinha, ponto central</h2>
            <p class="ds-carrossel-hero__description">Peça única, sem emenda à vista.</p>
            <div class="ds-carrossel-hero__actions">
              <button type="button" class="ds-botao ds-botao--lg">Comprar agora</button>
            </div>
          </div>
        </div>
      </div>
      <div class="ds-carrossel-hero__dots">
        <button type="button" class="ds-carrossel-hero__dot" aria-current="true" aria-label="Slide 1">
        </button>
        <button type="button" class="ds-carrossel-hero__dot" aria-label="Slide 2">
        </button>
        <button type="button" class="ds-carrossel-hero__dot" aria-label="Slide 3">
        </button>
      </div>
    </section>
  </div>
</div>

Vitrine de produto

O catálogo em cena: grades, herói de produto e atalhos.

card de produto .ds-card-de-produto

O produto apresentado em superfície branca

central

foto

canto-sobre-foto

Farm SinkR$ 4.290

foto

pill

card Branco SSM + .ds-tag-de-categoria + nome (H1/H2) + .ds-preco opcional

↳ usado em: D, E, G, Story A

↳ na tela: .ds-card-de-catalogo

vitrine de produtos .ds-vitrine-de-produtos

Seção de catalogo: header + filter chips + grid de product-cards + CTA Ver todos.

✕ Não usar: Com menos de 3 produtos: grade rala deprecia o catálogo. Use produto em destaque.

↳ só na tela

Farm Sink

Cuba Farm 70

R$ 4.290

Farm Sink

Cuba Farm 90

R$ 4.890

Farm Sink

Tanque Farm 60

R$ 3.590

tela

HTML da peça .ds-vitrine-de-produtos

<div class="tpv-scaler" style="width:744px;max-width:100%;height:495px;" role="button" tabindex="0" aria-label="Ampliar em tamanho real" data-w="1200" data-h="798">
  <span class="tpv-zoom" aria-hidden="true">⤢ ampliar</span>
  <div class="tpv-scaled" style="width:1200px;height:798px;transform:scale(0.62);transform-origin:top left;">
    <section class="ds-vitrine-de-produtos" style="padding:32px 0;">
      <div class="ds-vitrine-de-produtos__inner">
        <div class="ds-vitrine-de-produtos__header">
          <div class="ds-vitrine-de-produtos__title-group">
            <p class="ds-vitrine-de-produtos__eyebrow">Catálogo</p>
            <h2 class="ds-vitrine-de-produtos__title" style="margin:0;">Farm Sinks</h2>
          </div>
          <div class="ds-vitrine-de-produtos__filters">
            <button type="button" class="ds-chip-de-filtro" aria-pressed="true">
              Todas <span class="ds-chip-de-filtro__count">9</span>
            </button>
            <button type="button" class="ds-chip-de-filtro">
              Com calha <span class="ds-chip-de-filtro__count">3</span>
            </button>
          </div>
        </div>
        <div class="ds-vitrine-de-produtos__grid" style="grid-template-columns:repeat(3,1fr);">
          <article class="ds-card-de-catalogo">
            <span class="ds-card-de-catalogo__image" style="display:block;aspect-ratio:1;background:#fff url('Imagens/produto-branco.jpg') center/contain no-repeat;"></span>
            <div class="ds-card-de-catalogo__body">
              <p class="ds-card-de-catalogo__category">Farm Sink</p>
              <h3 class="ds-card-de-catalogo__title" style="margin:0;">Cuba Farm 70</h3>
              <div class="ds-preco">
                <span class="ds-preco__current">R$ 4.290</span>
              </div>
              <button type="button" class="ds-botao ds-botao--block">Comprar</button>
            </div>
          </article>
          <article class="ds-card-de-catalogo">
            <span class="ds-card-de-catalogo__image" style="display:block;aspect-ratio:1;background:#fff url('Imagens/produto-branco.jpg') center/contain no-repeat;"></span>
            <div class="ds-card-de-catalogo__body">
              <p class="ds-card-de-catalogo__category">Farm Sink</p>
              <h3 class="ds-card-de-catalogo__title" style="margin:0;">Cuba Farm 90</h3>
              <div class="ds-preco">
                <span class="ds-preco__current">R$ 4.890</span>
              </div>
              <button type="button" class="ds-botao ds-botao--block">Comprar</button>
            </div>
          </article>
          <article class="ds-card-de-catalogo">
            <span class="ds-card-de-catalogo__image" style="display:block;aspect-ratio:1;background:#fff url('Imagens/produto-branco.jpg') center/contain no-repeat;"></span>
            <div class="ds-card-de-catalogo__body">
              <p class="ds-card-de-catalogo__category">Farm Sink</p>
              <h3 class="ds-card-de-catalogo__title" style="margin:0;">Tanque Farm 60</h3>
              <div class="ds-preco">
                <span class="ds-preco__current">R$ 3.590</span>
              </div>
              <button type="button" class="ds-botao ds-botao--block">Comprar</button>
            </div>
          </article>
        </div>
      </div>
    </section>
  </div>
</div>

produto em destaque .ds-produto-em-destaque

Card de produto grande e horizontal para destaques (home, produtos relacionados); diferente do molecule vertical.

✕ Não usar: Em série: dois heróis seguidos competem e nenhum vence. É peça de UM produto por vez.

↳ no canvas: .ds-card-de-produto

Farm Sink

Cuba Farm 70

4,9

R$ 4.29010x sem juros

Peça única em superfície sólida mineral, sem emenda à vista.

tela

HTML da peça .ds-produto-em-destaque

<div class="tpv-scaler" style="width:340px;max-width:100%;height:204px;" role="button" tabindex="0" aria-label="Ampliar em tamanho real" data-w="1000" data-h="600">
  <span class="tpv-zoom" aria-hidden="true">⤢ ampliar</span>
  <div class="tpv-scaled" style="width:1000px;height:600px;transform:scale(0.34);transform-origin:top left;">
    <article class="ds-produto-em-destaque" style="max-width:960px;">
      <span class="ds-produto-em-destaque__image" style="background:#fff url('Imagens/produto-branco.jpg') center/contain no-repeat;"></span>
      <div class="ds-produto-em-destaque__body">
        <p class="ds-produto-em-destaque__category">Farm Sink</p>
        <h3 class="ds-produto-em-destaque__title" style="margin:0;">Cuba Farm 70</h3>
        <div class="ds-nota-em-estrelas" aria-label="4,9 de 5">
          <span class="ds-nota-em-estrelas__stars" aria-hidden="true">★★★★★</span><span class="ds-nota-em-estrelas__value">4,9</span>
        </div>
        <div class="ds-preco">
          <span class="ds-preco__current">R$ 4.290</span><span class="ds-preco__installments">10x sem juros</span>
        </div>
        <p class="ds-produto-em-destaque__description">
          Peça única em superfície sólida mineral, sem emenda à vista.
        </p>
        <div class="ds-produto-em-destaque__actions">
          <button type="button" class="ds-botao">Comprar agora</button>
          <button type="button" class="ds-botao ds-botao--secundario">Detalhes</button>
        </div>
      </div>
    </article>
  </div>
</div>

atalhos de categoria .ds-atalhos-de-categoria

Row de cards clicáveis com imagem de fundo, título Playfair e seta circular (Figma área-lks-row/tile).

✕ Não usar: Com categoria de item único: atalho que leva a uma página de um produto frustra o clique.

↳ só na tela

Cozinha→ Banheiro→

tela

HTML da peça .ds-atalhos-de-categoria

<div class="tpv-scaler" style="width:720px;max-width:100%;height:515px;" role="button" tabindex="0" aria-label="Ampliar em tamanho real" data-w="1200" data-h="858">
  <span class="tpv-zoom" aria-hidden="true">⤢ ampliar</span>
  <div class="tpv-scaled" style="width:1200px;height:858px;transform:scale(0.6);transform-origin:top left;">
    <section class="ds-atalhos-de-categoria" style="padding:24px 0;">
      <div class="ds-atalhos-de-categoria__inner">
        <div class="ds-atalhos-de-categoria__header">
          <h2 class="ds-atalhos-de-categoria__title" style="margin:0;">Explore por ambiente</h2>
        </div>
        <div class="ds-atalhos-de-categoria__grid" style="grid-template-columns:1fr 1fr;">
          <a class="ds-atalho-de-categoria" href="#organismos">
            <span class="ds-atalho-de-categoria__image" style="background:url('Imagens/foto-quente-cf.jpg') center/cover;"></span><span class="ds-atalho-de-categoria__overlay"></span><span class="ds-atalho-de-categoria__body"><span class="ds-atalho-de-categoria__title">Cozinha</span><span class="ds-atalho-de-categoria__arrow">→</span></span>
          </a>
          <a class="ds-atalho-de-categoria" href="#organismos">
            <span class="ds-atalho-de-categoria__image" style="background:url('Imagens/foto-fria-da.jpg') center/cover;"></span><span class="ds-atalho-de-categoria__overlay"></span><span class="ds-atalho-de-categoria__body"><span class="ds-atalho-de-categoria__title">Banheiro</span><span class="ds-atalho-de-categoria__arrow">→</span></span>
          </a>
        </div>
      </div>
    </section>
  </div>
</div>

Prova social

Quem já comprou fala: avaliações e depoimentos.

bloco de depoimento .ds-bloco-de-depoimento

Prova social e voz de cliente

“ Parece uma peça só. Ana · Projeto Barra aspas Douradas: só CF

Parece uma peça só.

AnaProjeto Barra · cliente CF

tela · .ds-bloco-de-depoimento

aspas-decorativas 280 (podem ser Douradas na CF) + citação H2 + .ds-credito-de-foto

↳ usado em: Story B, quote blocks

↳ na tela: .ds-bloco-de-depoimento

bloco de avaliações .ds-bloco-de-avaliacoes

Seção de social proof: nota agregada (estrelas + média + count) + grid de review-cards.

✕ Não usar: Sem volume real (menos de 3 avaliações): prova social rala desprova.

↳ só na tela

4,9/5

38 avaliações

Parece uma peça só.

2026

Instalação simples, acabamento impecável.

2026

tela

HTML da peça .ds-bloco-de-avaliacoes

<div class="tpv-scaler" style="width:780px;max-width:100%;height:424px;" role="button" tabindex="0" aria-label="Ampliar em tamanho real" data-w="1000" data-h="544">
  <span class="tpv-zoom" aria-hidden="true">⤢ ampliar</span>
  <div class="tpv-scaled" style="width:1000px;height:544px;transform:scale(0.78);transform-origin:top left;">
    <section class="ds-bloco-de-avaliacoes" style="padding:32px 0;">
      <div class="ds-bloco-de-avaliacoes__inner">
        <div class="ds-bloco-de-avaliacoes__header">
          <p class="ds-bloco-de-avaliacoes__eyebrow">Avaliações</p>
          <h2 class="ds-bloco-de-avaliacoes__title" style="margin:0;">Quem já instalou</h2>
        </div>
        <div class="ds-bloco-de-avaliacoes__aggregate">
          <div class="ds-nota-em-estrelas">
            <span class="ds-nota-em-estrelas__stars ds-nota-em-estrelas__stars--lg" aria-hidden="true">★★★★★</span>
          </div>
          <div class="ds-bloco-de-avaliacoes__score">
            <span class="ds-bloco-de-avaliacoes__score-value">4,9</span><span class="ds-bloco-de-avaliacoes__score-max">/5</span>
          </div>
          <span class="ds-bloco-de-avaliacoes__score-meta">38 avaliações</span>
        </div>
        <div class="ds-bloco-de-avaliacoes__reviews" style="grid-template-columns:1fr 1fr;">
          <article class="ds-card-de-avaliacao">
            <header class="ds-card-de-avaliacao__header">
              <span class="ds-avatar ds-avatar--md">AC</span>
              <div class="ds-card-de-avaliacao__identity">
                <span class="ds-card-de-avaliacao__name">Ana C.</span>
                <div class="ds-nota-em-estrelas" aria-label="5 de 5">
                  <span class="ds-nota-em-estrelas__stars" aria-hidden="true">★★★★★</span>
                </div>
              </div>
            </header>
            <p class="ds-card-de-avaliacao__body">Parece uma peça só.</p>
            <span class="ds-card-de-avaliacao__date">2026</span>
          </article>
          <article class="ds-card-de-avaliacao">
            <header class="ds-card-de-avaliacao__header">
              <span class="ds-avatar ds-avatar--md">RM</span>
              <div class="ds-card-de-avaliacao__identity">
                <span class="ds-card-de-avaliacao__name">Rafael M.</span>
                <div class="ds-nota-em-estrelas" aria-label="5 de 5">
                  <span class="ds-nota-em-estrelas__stars" aria-hidden="true">★★★★★</span>
                </div>
              </div>
            </header>
            <p class="ds-card-de-avaliacao__body">Instalação simples, acabamento impecável.</p>
            <span class="ds-card-de-avaliacao__date">2026</span>
          </article>
        </div>
      </div>
    </section>
  </div>
</div>

Argumento & conversão

O empurrão final: diferenciais, oferta e captura de contato.

bloco de oferta .ds-bloco-de-oferta

Conversão: botão + oferta

FALAR COM ARQUITETODA · inverso COMPRE AGORACF · Dourado 10% OFF · FARM10+ .ds-chip-de-cupom

botão CTA [215×41] + .ds-chip-de-cupom opcional

⚠ EXCLUSIVO de tráfego pago (A/B), nunca no feed orgânico

↳ usado em: A, B

↳ na tela: .ds-botao + .ds-badge--oferta

seção de diferenciais .ds-secao-de-diferenciais

Seção de página com header (eyebrow + título + descrição) + grid de feature-boxes.

✕ Não usar: Com mais de 4 itens: vira lista e o argumento perde força. Corte até doer.

↳ só na tela

Não porosa

Não absorve líquidos nem mancha.

Peça única

Sem emendas onde a sujeira se acumula.

Sob medida

Reparável e ajustável ao projeto.

tela

HTML da peça .ds-secao-de-diferenciais

<div class="tpv-scaler" style="width:792px;max-width:100%;height:195px;" role="button" tabindex="0" aria-label="Ampliar em tamanho real" data-w="1200" data-h="296">
  <span class="tpv-zoom" aria-hidden="true">⤢ ampliar</span>
  <div class="tpv-scaled" style="width:1200px;height:296px;transform:scale(0.66);transform-origin:top left;">
    <section class="ds-secao-de-diferenciais" style="padding:48px 0;">
      <div class="ds-secao-de-diferenciais__inner">
        <div class="ds-secao-de-diferenciais__header">
          <p class="ds-secao-de-diferenciais__eyebrow">Por que SSM</p>
          <h2 class="ds-secao-de-diferenciais__title" style="margin:0;">Feita para durar</h2>
        </div>
        <div class="ds-secao-de-diferenciais__grid">
          <div class="ds-bloco-de-diferencial">
            <span class="ds-bloco-de-diferencial__icon"><svg class="ds-icone" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M12 3l7 3v6c0 4-3 7-7 9-4-2-7-5-7-9V6l7-3Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/></svg></span>
            <p class="ds-bloco-de-diferencial__title">Não porosa</p>
            <p class="ds-bloco-de-diferencial__description">Não absorve líquidos nem mancha.</p>
          </div>
          <div class="ds-bloco-de-diferencial">
            <span class="ds-bloco-de-diferencial__icon"><svg class="ds-icone" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M12 3s6 6.5 6 11a6 6 0 0 1-12 0c0-4.5 6-11 6-11Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/></svg></span>
            <p class="ds-bloco-de-diferencial__title">Peça única</p>
            <p class="ds-bloco-de-diferencial__description">Sem emendas onde a sujeira se acumula.</p>
          </div>
          <div class="ds-bloco-de-diferencial">
            <span class="ds-bloco-de-diferencial__icon"><svg class="ds-icone" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M4 14l10-10 6 6L10 20 4 14Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/><path d="M8 10l2 2M11 7l2 2M14 10l1 1" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg></span>
            <p class="ds-bloco-de-diferencial__title">Sob medida</p>
            <p class="ds-bloco-de-diferencial__description">Reparável e ajustável ao projeto.</p>
          </div>
        </div>
      </div>
    </section>
  </div>
</div>

pílula de benefício .ds-pilula-de-beneficio

Destaque horizontal clicável em formato pill: ícone grande + título + descrição + CTA; maior que o feature-box.

✕ Não usar: Para claims longos: pílula é 2-4 palavras. Frase inteira pede bloco de diferencial.

↳ só na tela

Garantia de 5 anosSuperfície reparável, sem troca da peça. Saiba mais tela

HTML da peça .ds-pilula-de-beneficio

<a class="ds-pilula-de-beneficio" href="#organismos" style="width:100%;max-width:300px;">
  <span class="ds-pilula-de-beneficio__icon"><svg class="ds-icone" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M12 3l7 3v6c0 4-3 7-7 9-4-2-7-5-7-9V6l7-3Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/></svg></span><span class="ds-pilula-de-beneficio__body"><span class="ds-pilula-de-beneficio__title">Garantia de 5 anos</span><span class="ds-pilula-de-beneficio__description">Superfície reparável, sem troca da peça.</span></span><span class="ds-pilula-de-beneficio__cta">Saiba mais</span>
</a>

newsletter .ds-newsletter

Form de assinatura de e-mail com status aria-live; 2 colunas em desktop.

✕ Não usar: Dentro do funil de compra (carrinho, checkout): captura ali é fricção, não relacionamento.

↳ só na tela

tela

HTML da peça .ds-newsletter

<div class="ds-newsletter ds-newsletter--inverso" style="border-radius:8px;width:100%;">
  <div class="ds-newsletter__intro">
    <p class="ds-newsletter__eyebrow">Atelier</p>
    <h3 class="ds-newsletter__title" style="margin:0;font-size:18px;">Projetos sob medida</h3>
  </div>
  <form class="ds-newsletter__form" onsubmit="return false;">
    <div class="ds-newsletter__input-row">
      <input class="ds-input" type="email" placeholder="nome@exemplo.com.br" aria-label="E-mail">
      <button type="submit" class="ds-botao">Assinar</button>
    </div>
  </form>
</div>

card de contato .ds-card-de-contato

Bloco de contato: título + descrição + lista de canais (ícone + label + valor).

✕ Não usar: Como CTA primário de venda: é peça de suporte e confiança, não de conversão.

↳ só na tela

WhatsApp(11) 90000-0000
Projetos sob medidaatelier Don Artesano

tela

HTML da peça .ds-card-de-contato

<div class="ds-card-de-contato" style="width:100%;max-width:280px;padding:var(--space-5);">
  <div class="ds-card-de-contato__header">
    <h3 class="ds-card-de-contato__title" style="margin:0;font-size:17px;">Fale com a loja</h3>
    <p class="ds-card-de-contato__description">Resposta no mesmo dia útil.</p>
  </div>
  <ul class="ds-card-de-contato__channels">
    <li>
      <a class="ds-card-de-contato__channel" href="#organismos">
        <span class="ds-card-de-contato__channel-icon"><svg class="ds-icone" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M12 3s6 6.5 6 11a6 6 0 0 1-12 0c0-4.5 6-11 6-11Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/></svg></span><span class="ds-card-de-contato__channel-body"><span class="ds-card-de-contato__channel-label">WhatsApp</span><span class="ds-card-de-contato__channel-value">(11) 90000-0000</span></span>
      </a>
    </li>
    <li>
      <a class="ds-card-de-contato__channel" href="#organismos">
        <span class="ds-card-de-contato__channel-icon"><svg class="ds-icone" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M4 14l10-10 6 6L10 20 4 14Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/><path d="M8 10l2 2M11 7l2 2M14 10l1 1" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg></span><span class="ds-card-de-contato__channel-body"><span class="ds-card-de-contato__channel-label">Projetos sob medida</span><span class="ds-card-de-contato__channel-value">atelier Don Artesano</span></span>
      </a>
    </li>
  </ul>
</div>

Assinatura & peças do feed

A marca assina a peça: selo, hashtags e os formatos próprios do feed.

assinatura .ds-assinatura

A marca assina: obrigatório em toda peça

feed

foto

vertical

vaga

↳ usado em: TODAS as peças

↳ na tela: marca no .ds-barra-de-topo e .ds-rodape

faixa de hashtags .ds-faixa-de-hashtags

Série editorial nomeada

#ProjetoAssinado

foto

topo do feed

hashtag no topo [150,150,780,26]

↳ usado em: E (série com hashtag própria)

↳ na tela: .ds-tag em série

ficha de vaga .ds-ficha-de-vaga

Recrutamento escaneável

ESTAMOS CONTRATANDO

Operador Router CNC

R$ 2.800

1080×1080

eyebrow + cargo Playfair 60 + salario-chip + 2 seções de bullets + obsBox + footer

⚠ só Don Artesano, formato 1080×1080

↳ usado em: Vaga RH

↳ na tela: sem par na tela (peça de RH do feed)

Como nasce um template novo: a variedade é combinatória

Fórmula: 1 fundo (.ds-moldura-de-foto OU cor de marca) + 1-2 organismos de conteúdo + .ds-assinatura (sempre). .ds-bloco-de-oferta apenas em tráfego pago.

Margem 150 · coluna 780 · baseline 1290 (feed) · safe zones 250/350 (vertical) · limites de composição valem sempre.

Caminho de promoção: Combinação nova = EXPERIMENTO no nível de página. Publicou, funcionou (aprovação + engajamento), repetiu 2-3x com consistência: é promovida a arquétipo nomeado no sistema. Curar, não inovar: o sistema absorve o que a prática comprova.

Combinações inéditas legítimas (exemplos)

.ds-moldura-de-foto:closeup-topo + .ds-bloco-de-depoimento = depoimento sobre textura (F+B, não existe como arquétipo)
.ds-moldura-de-foto:split-topo + .ds-card-de-produto:canto-sobre-foto = lançamento com ambiente + ficha (B+E)
.ds-bloco-editorial:hero-gigante sobre Ônix, sem foto = manifesto DA (G+C)

Templates & receitas de montagem

Receitas comprovadas de combinação dos organismos sobre a grade única. Combinações novas são legítimas e, quando vencem na prática, viram arquétipo. Regra de governança: Anúncios A/B só em Meta/Google Ads, nunca no feed orgânico. Na web, os templates de página chegam com a aplicação nos sites.

Grade universal do feed (1080×1440)

Margem lateral 150px Coluna de conteúdo 780px Baseline de assinatura y=1290 (linha tracejada no diagrama) Selo DA 80×80 em [850, 1210]

Feed 1080×1440

Arquétipos: receitas comprovadas

Anúncio A · Foto Full Bleed

SÓ TRÁFEGO PAGO · PROIBIDO NO FEED

Impacto imediato: uma foto de ambiente ocupa tudo, gradiente garante contraste e a promessa entra em uma linha.

fotoFull bleed 1080x1440 + gradiente de contraste na metade inferior (rect y720 h720)

receita.ds-moldura-de-foto:full-bleed+.ds-bloco-editorial:sobre-foto+.ds-bloco-de-oferta+.ds-assinatura:feed

Don Artesano

foto

Feito sob medida

Atendimento direto a arquitetos

FALAR COM ARQUITETO

CubasFarm

foto

Sua nova cozinha

10% off só este mês · FARM10

COMPRE AGORA

medidas

1foto[0, 0, 1080, 1440]
2gradiente[0, 720, 1080, 720]
3headline[150, 1000, 780, 100]
4corpo[150, 1120, 780, 60]
5cta[150, 1211, 215, 41]
6selo[850, 1210, 80, 80]

Medidas completas: zonas [x, y, larg, alt] e estilos de texto

Zonas · [x, y, larg, alt] px

1foto [0, 0, 1080, 1440]
2gradiente [0, 720, 1080, 720]
3headline [150, 1000, 780, 100]
4corpo [150, 1120, 780, 60]
5cta [150, 1211, 215, 41]
6selo [850, 1210, 80, 80]

Textos · estilo e tamanho

headline H1-titulo-principal · 80px · máx 1L DA CF
corpo corpo · 35px · máx 1L DA CF
cta cta-botao · 35px · máx 1L DA CF

Anúncio B · Split (foto + fundo liso)

SÓ TRÁFEGO PAGO · PROIBIDO NO FEED

Metade superior prova (foto), metade inferior argumenta (texto sobre fundo liso da marca).

fotoTopo 1080x720, corte reto na metade

receita.ds-moldura-de-foto:split-topo+.ds-bloco-editorial:pos-foto+.ds-bloco-de-oferta+.ds-assinatura:feed

Don Artesano

foto

Precisão total

SSM: 30% PMMA + 70% ATH

FALAR COM ARQUITETO

CubasFarm

foto

Design europeu

Sem emenda à vista. Só branco.

COMPRE AGORA

medidas

1foto[0, 0, 1080, 720]
2headline[150, 820, 780, 100]
3corpo[150, 950, 780, 120]
4cta[150, 1211, 215, 41]
5selo[850, 1210, 80, 80]

Medidas completas: zonas [x, y, larg, alt] e estilos de texto

Zonas · [x, y, larg, alt] px

1foto [0, 0, 1080, 720]
2headline [150, 820, 780, 100]
3corpo [150, 950, 780, 120]
4cta [150, 1211, 215, 41]
5selo [850, 1210, 80, 80]

Textos · estilo e tamanho

headline H1-titulo-principal · 80px · máx 1L DA CF
corpo corpo · 35px · máx 2L DA CF

Arquetipo C · Tipografia Dominante

FEED ORGÂNICO

Sem foto: a frase é a peça. Herança e convicção ditas em Playfair sobre fundo de marca.

receita.ds-bloco-editorial:dominante+.ds-assinatura:feed

Don Artesano

Precisão não é detalhe.

Três gerações. Uma superfície.

CubasFarm

Perguntam onde comprei.

Superfície contínua, sem emenda à vista.

medidas

1headline[150, 450, 780, 200]
2corpo[150, 780, 780, 180]
3selo[850, 1210, 80, 80]

Medidas completas: zonas [x, y, larg, alt] e estilos de texto

Zonas · [x, y, larg, alt] px

1headline [150, 450, 780, 200]
2corpo [150, 780, 780, 180]
3selo [850, 1210, 80, 80]

Textos · estilo e tamanho

headline H1-titulo-principal · 80px · máx 2L DA CF
corpo corpo · 35px · máx 3L DA CF

Arquetipo D · Produto Branco

FEED ORGÂNICO

Catálogo elegante: produto recortado em card branco central, nome como assinatura editorial.

fotoProduto sobre fundo neutro dentro do card [280,420,520,420]

receita.ds-card-de-produto:central+.ds-assinatura:feed

Don Artesano

FARM SINK

Cuba Farm 90

CubasFarm

FARM SINK

Cuba Farm 90

medidas

1curvaTop[-80, -60, 500, 500]
2curvaBottom[660, 1000, 500, 500]
3cardProduto[280, 420, 520, 420]
4tagCategoria[150, 1000, 780, 30]
5nomeProduto[150, 1050, 780, 100]
6selo[850, 1210, 80, 80]

Medidas completas: zonas [x, y, larg, alt] e estilos de texto

Zonas · [x, y, larg, alt] px

1curvaTop [-80, -60, 500, 500]
2curvaBottom [660, 1000, 500, 500]
3cardProduto [280, 420, 520, 420]
4tagCategoria [150, 1000, 780, 30]
5nomeProduto [150, 1050, 780, 100]
6selo [850, 1210, 80, 80]

Textos · estilo e tamanho

tagCategoria tag-de-categoria · 22px · máx 1L DA CF
nomeProduto H1-titulo-principal · 80px · máx 1L DA CF

Arquetipo E · Foto + Card

FEED ORGÂNICO

Pessoa em cena com card branco de apresentação: humaniza a marca (série com hashtag própria).

fotoFull bleed 1080x1440, pessoa ou cena

receita.ds-moldura-de-foto:full-bleed+.ds-faixa-de-hashtags+.ds-card-de-produto:canto-sobre-foto+.ds-assinatura:feed

Don Artesano

foto

#ProjetoAssinado

BANCADA

Oval Oasis

CubasFarm

foto

#CasaComAlma

BANCADA

Oval Oasis

medidas

1foto[0, 0, 1080, 1440]
2hashtag[150, 150, 780, 26]
3card[150, 990, 500, 300]
4cardTag[190, 1025, 420, 26]
5cardNome[190, 1070, 420, 150]
6selo[850, 1210, 80, 80]

Medidas completas: zonas [x, y, larg, alt] e estilos de texto

Zonas · [x, y, larg, alt] px

1foto [0, 0, 1080, 1440]
2hashtag [150, 150, 780, 26]
3card [150, 990, 500, 300]
4cardTag [190, 1025, 420, 26]
5cardNome [190, 1070, 420, 150]
6selo [850, 1210, 80, 80]

Textos · estilo e tamanho

hashtag tag-de-categoria · 22px · máx 1L DA CF
cardTag tag-de-categoria · 22px · máx 1L DA CF
cardNome H2-subtitulo · 56px · máx 2L DA CF

Arquetipo F · Branco Editorial

FEED ORGÂNICO

Metade close-up, metade respiro branco: argumento técnico dito com calma editorial.

fotoClose-up do produto no topo 1080x720

receita.ds-moldura-de-foto:closeup-topo+.ds-bloco-editorial:pos-foto+.ds-assinatura:feed

Don Artesano

foto

Sem emenda à vista.

A engenharia da SSM, explicada.

CubasFarm

foto

Sem emenda à vista.

Passa a mão. Só continuidade.

medidas

1closeup[0, 0, 1080, 720]
2headline[150, 880, 780, 200]
3corpo[150, 1110, 780, 100]
4selo[850, 1210, 80, 80]

Medidas completas: zonas [x, y, larg, alt] e estilos de texto

Zonas · [x, y, larg, alt] px

1closeup [0, 0, 1080, 720]
2headline [150, 880, 780, 200]
3corpo [150, 1110, 780, 100]
4selo [850, 1210, 80, 80]

Textos · estilo e tamanho

headline H1-titulo-principal · 80px · máx 2L DA CF
corpo corpo · 35px · máx 2L DA CF

Arquetipo G · Hero Ambient

FEED ORGÂNICO

Palavra gigante sobre ambiente + pill de produto com preço: editorial que vende sem parecer anúncio.

fotoAmbiente full bleed, sangra nas bordas

receita.ds-moldura-de-foto:full-bleed+.ds-bloco-editorial:hero-gigante+.ds-card-de-produto:pill+.ds-assinatura:feed

Don Artesano

foto

Sob medida

Bancada Prismasob consulta

CubasFarm

foto

Soft.

Farm SinkR$ 4.290

medidas

1foto[0, 0, 1080, 1440]
2displayHero[90, 80, 900, 460]
3pillCard[290, 1050, 500, 120]
4selo[850, 1210, 80, 80]

Medidas completas: zonas [x, y, larg, alt] e estilos de texto

Zonas · [x, y, larg, alt] px

1foto [0, 0, 1080, 1440]
2displayHero [90, 80, 900, 460]
3pillCard [290, 1050, 500, 120]
4selo [850, 1210, 80, 80]

Textos · estilo e tamanho

displayHero display-hero · 200px · máx 2L DA CF
pillNome tag-pill · 28px · máx 1L DA CF
pillPreco Inter Regular 16 · máx 1L DA CF

Vaga RH (só Don Artesano)

FEED ORGÂNICO

Peça funcional de recrutamento: cargo em destaque, requisitos escaneáveis, contato no rodapé.

receita.ds-ficha-de-vaga+.ds-assinatura:vaga

Don Artesano

ESTAMOS CONTRATANDO

Operador Router CNC

R$ 2.800

rh@donartesano.com.br

medidas

1apronStrip[0, 0, 1080, 6]
2eyebrow[150, 30, 780, 31]
3logoHorizontal[693, 6, 237, 80]
4cargo[150, 122, 780, 149]
5salaryChip[150, 299, 238, 52]
6secao1[150, 379, 780, 240]
7secao2[150, 647, 780, 240]
8obsBox[150, 915, 780, 80]
9rodape[150, 1023, 780, 60]

Medidas completas: zonas [x, y, larg, alt] e estilos de texto

Zonas · [x, y, larg, alt] px

1apronStrip [0, 0, 1080, 6]
2eyebrow [150, 30, 780, 31]
3logoHorizontal [693, 6, 237, 80]
4cargo [150, 122, 780, 149]
5salaryChip [150, 299, 238, 52]
6secao1 [150, 379, 780, 240]
7secao2 [150, 647, 780, 240]
8obsBox [150, 915, 780, 80]
9rodape [150, 1023, 780, 60]

Textos · estilo e tamanho

eyebrow Inter Bold 26 · máx 1L DA CF
cargoNome Playfair Display Medium 60 (fora da escala social) · máx 2L DA CF
salario Inter Bold 20 · máx 1L DA CF

Stories & Reels 1080×1920

Formatos verticais

Faixas hachuradas = UI do Instagram, área proibida para conteúdo.

Reel Capa · A-foto-full-bleed

1080×1920 · SAFE ZONES 250/350

Frame inicial do Reel com gradiente e promessa: espelho vertical do Anúncio A.

receita.ds-moldura-de-foto:full-bleed+.ds-bloco-editorial:sobre-foto+.ds-assinatura:vertical

Don Artesano

foto

Passa a mão.

Só branco. Só contínuo.

CubasFarm

foto

Passa a mão.

Só branco. Só contínuo.

medidas

UI 250px

UI 350px

1headline[150, 1250, 780, 100]
2corpo[150, 1370, 780, 100]
3selo[810, 1450, 120, 120]

Medidas completas: zonas [x, y, larg, alt] e estilos de texto

Zonas · [x, y, larg, alt] px

1headline [150, 1250, 780, 100]
2corpo [150, 1370, 780, 100]
3selo [810, 1450, 120, 120]

Textos · estilo e tamanho

headline H1-titulo-principal · 80px · máx 1L DA CF
corpo corpo · 35px · máx 2L DA CF

Reel Capa · B-tipografia-dominante

1080×1920 · SAFE ZONES 250/350

Capa sem foto: frase centrada verticalmente no fundo da marca.

receita.ds-bloco-editorial:dominante+.ds-assinatura:vertical

Don Artesano

foto

Passa a mão.

Só branco. Só contínuo.

CubasFarm

foto

Passa a mão.

Só branco. Só contínuo.

medidas

UI 250px

UI 350px

1headline[150, 850, 780, 250]
2corpo[150, 1100, 780, 100]
3selo[810, 1450, 120, 120]

Medidas completas: zonas [x, y, larg, alt] e estilos de texto

Zonas · [x, y, larg, alt] px

1headline [150, 850, 780, 250]
2corpo [150, 1100, 780, 100]
3selo [810, 1450, 120, 120]

Textos · estilo e tamanho

headline H1-titulo-principal · 80px · máx 2L DA CF
corpo corpo · 35px · máx 1L DA CF

Story · A-produto-destaque

1080×1920 · SAFE ZONES 250/350

Produto emoldurado num quadrado central com nome e benefício centrados abaixo.

receita.ds-moldura-de-foto:frame-central+.ds-bloco-editorial:centrado+.ds-assinatura:vertical

Don Artesano

foto

Passa a mão.

Só branco. Só contínuo.

CubasFarm

foto

Passa a mão.

Só branco. Só contínuo.

medidas

UI 250px

UI 350px

1frameProduto[150, 400, 780, 780]
2headline[150, 1230, 780, 100]
3corpo[150, 1350, 780, 80]
4selo[810, 1450, 120, 120]

Medidas completas: zonas [x, y, larg, alt] e estilos de texto

Zonas · [x, y, larg, alt] px

1frameProduto [150, 400, 780, 780]
2headline [150, 1230, 780, 100]
3corpo [150, 1350, 780, 80]
4selo [810, 1450, 120, 120]

Textos · estilo e tamanho

headline H1-titulo-principal · 80px · máx 1L DA CF
corpo corpo · 35px · máx 1L DA CF

Story · B-quote

1080×1920 · SAFE ZONES 250/350

Depoimento em Playfair com aspas gigantes: prova social como peça editorial.

receita.ds-bloco-de-depoimento+.ds-assinatura:vertical

Don Artesano

foto

“

“Parece uma peça só.”

Ana · Projeto Barra

CubasFarm

foto

“

“Parece uma peça só.”

Ana · cliente CF

medidas

UI 250px

UI 350px

1quoteBlock[150, 400, 780, 1100]
2aspas[150, 400, 122, 373]
3quote[150, 720, 780, 500]
4credito[150, 1400, 780, 26]
5selo[810, 1450, 120, 120]

Medidas completas: zonas [x, y, larg, alt] e estilos de texto

Zonas · [x, y, larg, alt] px

1quoteBlock [150, 400, 780, 1100]
2aspas [150, 400, 122, 373]
3quote [150, 720, 780, 500]
4credito [150, 1400, 780, 26]
5selo [810, 1450, 120, 120]

Textos · estilo e tamanho

aspas aspas-decorativas · 280px · máx 1L DA CF
quote H1-titulo-principal · 80px · máx 5L DA CF
credito tag-de-categoria · 22px · máx 1L DA CF

Checklist pré-publicação

Arquétipo certo para o objetivo? (anúncio A/B nunca no feed orgânico)
Máx 3 cores · máx 2 pesos de fonte · ≥15% de respiro (casa: Regras de composição)
Dourado só na CubasFarm, máx 1-2 elementos (casa: Regras de composição)
Playfair nunca em caixa alta · preço nunca em Playfair (casa: Tipografia)
Selo na posição do formato (casa: Grade universal e organismo assinatura)
Conteúdo fora das safe zones nos formatos verticais (250 topo / 350 base)
Texto legível no tamanho real do celular
Copy: a Don Artesano / a SSM no feminino · sem travessão · máx 5 hashtags · máx 2 emojis

Páginas

O nível mais alto: os templates preenchidos com conteúdo real. Servem para provar o sistema de ponta a ponta e revelar o que só aparece quando tudo se junta. Aqui, uma peça de cada vertente, com produto, preço e logo reais.

Conteúdo real, não placeholderProduto do catálogo, foto de verdade, preço vigente e a logo real do sistema. O template tem que aguentar nome grande e foto imperfeita.

As duas vertentesUm feed e um story renderizados em fidelidade; uma página de produto montada só com os organismos do sistema web.

A página revela o que faltaCompor de verdade expõe o que os componentes isolados escondem. O que esta instância revelou está anotado ao final.

Social · peças em fidelidade

Web · página de produto (CubasFarm)

cubasfarm.com.br/cuba-farm-70

Frete grátis acima de R$ 599Central de ajuda

Farm Sink · Superfície Sólida Mineral

Cuba Farm 70

4,9(38 avaliações)

R$ 4.990R$ 4.290ou 10x de R$ 429 sem juros

Cuba de bancada em peça única, sem emenda à vista. Superfície não porosa, reparável e contínua, feita sob a mesma engenharia das bancadas Don Artesano.

70 × 40 cm Branco SSM 11% OFF

Não porosa

Não absorve líquidos nem mancha. Higiene sem esforço.

Peça única

Sem emendas, sem juntas onde a sujeira se acumula.

Sob medida

Reparável e ajustável ao seu projeto de bancada.

Você também pode gostar

Farm Sink

Cuba Farm 90

R$ 4.890

Farm Sink

Cuba Farm 70 Dupla

R$ 6.290

Tanque

Tanque Farm 60

R$ 3.590

Banheiro

Cuba Quartzo 50

R$ 2.980

Página de produto completa · role dentro da moldura para ver do cabeçalho ao rodapé

O que esta instância revelou (e já foi corrigido)

Bordas de repouso nos componentes web. Card de produto, avaliação, cartão de contato, cabeçalho e a variante horizontal do card carregavam contorno herdado da versão anterior. Numa página real isso contradiz a fluidez da SSM: agora separam por superfície e sombra, sem borda de repouso.
A marca no cabeçalho vinha em Dourado. O brasão do header usava a cor de destaque, que na CubasFarm é o Dourado: a logo nunca é Dourada. Passou à cor principal, e a página agora usa a logo real do sistema, não um placeholder.
Controles preenchidos, não contornados. Ícones sociais do rodapé e as setas do carrossel trocaram o contorno por preenchimento translúcido, coerente com os campos de formulário.
Safe zones das peças sociais. A primeira montagem pôs o selo no cantinho e o texto perto da borda. Corrigido para a geometria da fonte: margem de 150px, selo de 120px (story) e 80px (feed) recuado 150px da direita, e no story o conteúdo respeita as safe zones do Instagram (topo 250px, base 350px), com o selo apoiado exatamente na linha inferior.

Fotografia & prompts de IA

A foto é a peça. Direção oficial para foto real e imagem gerada, extraída dos anúncios que mais performaram.

Princípio

A foto é a peça. O produto branco em SSM é sempre o ponto de maior luminância e o centro de gravidade da cena: tudo o mais existe para fazê-lo parecer inevitável.

Cuba Farm branca sobre marcenaria azul-escura: o produto é o ponto de maior luminância

Clima sóbrio

princípio: o produto branco é a maior luminância da cena
luz DA: neutra-fria (5000-6000K, manhã) · natural, lateral, difusa

Cuba Farm em cozinha residencial clara com torneira de latão escovado e madeira

Clima residencial habitado

luz CF: quente (3500-4500K, fim de tarde suave) · natural, lateral, difusa
ecos da marca: latão escovado + madeira clara

Fotos reais do catálogo: exemplos vivos da direção.

madeira clara latão escovado cerâmica neutra verde orgânico SSM: a maior luminância amostras fotográficas do mundo físico (fora da paleta por natureza): nunca usar como cor de marca

Cenários

Cozinha residencial sofisticada (principal)
Área gourmet residencial
Banheiro residencial (linhas Athena/Gaia/Selene)
Atelier/produção: SOMENTE Don Artesano B2B, luz fria

CF: sempre ambiente residencial habitado. DA: obra finalizada de projeto ou atelier.

Materiais de cena

Madeira natural clara/média (prateleira, tábua, piso)
Metais em latão/dourado escovado (torneira, puxadores): o eco físico do acento da marca
Cerâmica e pedra em tons neutros
Verde orgânico (ramos, ervas) como único respiro de cor viva

Poucos e intencionais: bowls, livros, sabonete em vidro âmbar, frutas claras. Máx 3 grupos de props por cena.

Luz

Qualidade: Natural, lateral, difusa: janela grande fora de quadro
Temperatura: CF: quente (3500-4500K, fim de tarde suave). DA: neutra-fria (5000-6000K, manhã).
Flash direto, sombras duras, iluminação de estúdio aparente, golden hour saturado

Proibido: Flash direto, sombras duras, iluminação de estúdio aparente, golden hour saturado

Câmera

Altura: Nível da bancada (produto) ou do peito (cena aberta)
Ângulo: Frontal ou 3/4 sutil. Nunca top-down como hero, nunca contra-plongée.
Lente: Equivalente 35-50mm; distorção wide proibida
Foco: Cena majoritariamente nítida; desfoque só em extremos de fundo

Presença humana

Padrão: sem pessoas. Permitido: mãos tocando a superfície (a sensação soft): pele em close, sem rosto. Rosto/corpo inteiro: nunca em peça de produto.

Tratamento

Contraste: Baixo-médio, curvas suaves
Saturação: Contida: a cena quase monocromática deixa o verde e o latão cantarem
Grão: Nenhuma ou finíssima

O branco do SSM nunca estoura: a textura da superfície permanece legível

Nunca na foto

Produto flutuando em fundo infinito
Reflexos duros / brilho artificial
HDR evidente
Cara de banco de imagem (famílias sorrindo, apertos de mão)
Cara de fábrica: paletes, plástico-bolha, galpão
Composição perfeitamente simétrica

Nunca nos materiais

Plástico aparente
Inox frio como protagonista
Clutter
Eletrodomésticos coloridos
Decoração temática

Padrão de prompt para geração de imagem

Preencher os 7 blocos na ordem. Duas execuções do mesmo prompt devem parecer da mesma campanha.

CENA: cenário permitido () + clima da persona da marca
PRODUTO: qual peça SSM, posição dominante, branco como maior luminância
MATERIAIS: 2-3 itens de
LUZ: temperatura + direção conforme a marca ()
CÂMERA: altura + ângulo + lente ()
TRATAMENTO: contraste, saturação, granulação, branco legível
FORMATO: aspect ratio do canvas alvo (3:4 feed, 9:16 vertical)

Exemplo pronto (CF, feed 3:4)

Cozinha residencial sofisticada com bancada clara em tom creme; cuba farm sink branca em superfície sólida mineral com frente canelada, centralizada, o elemento mais luminoso da cena; prateleira de madeira clara com cerâmicas neutras, torneira em latão escovado, ramos verdes em vaso de vidro; luz natural lateral difusa de fim de tarde (~4000K) vinda de janela fora de quadro; câmera à altura da bancada, ângulo frontal, lente 50mm, cena nítida; contraste suave, saturação contida, textura do branco legível; proporção 3:4.

Negative prompt oficial

texto, logotipo, marca d'água, pessoas, rostos, produto flutuando, fundo infinito de estúdio, brilho artificial, HDR, cores saturadas, simetria perfeita, plástico, inox dominante, clutter, cara de banco de imagem, renderização 3D artificial, distorção de lente

Se o resultado parecer gerado por IA, reprova (Todo criativo deve parecer feito por designer humano, nunca gerado por IA). Duas execuções do mesmo prompt devem parecer da mesma campanha.

Personas visuais

A persona define o clima do criativo: o mesmo produto comunicado de formas diferentes conforme quem vê. É o que separa uma peça Don Artesano de uma peça CubasFarm antes de qualquer palavra.

B2B · Arquitetos e construtoras

Don Artesano

Clima: Frio, técnico, austero
Fundo: Azul Ônix / Titânio Sólido
Foto: Ambiente real de projeto, luz natural fria
Tom: Técnico, preciso, sem adjetivos emocionais

B2C · Consumidor final

CubasFarm

Clima: Quente, aspiracional, envolvente
Fundo: Branco Resina / Branco SSM
Foto: Residencial sofisticado, luz quente
Tom: Aspiracional, sensorial, benefício claro

Zero clichê de gênero. A comunicação exalta inteligência e poder de decisão: especialmente das arquitetas e decisoras.

Regras de composição

Todo criativo deve parecer feito por designer humano, nunca gerado por IA

cores máx. por layout

pesos de fonte máx.

15%

espaço em branco mín.

1-2

acentos dourados máx.

Proibido

Gradientes sintéticos ou brilho artificial
Elementos decorativos genéricos sem propósito
Simetria excessiva: parece robótico
Iluminação irreal, cores saturadas em excesso
Clichês de banco de imagens
Padrões geométricos repetitivos

Obrigatório

Assimetria elegante com tensão intencional
Foto de produto em ambiente real ou fundo liso
Hierarquia tipográfica clara
Espaço em branco como elemento de design
Acento dourado com parcimônia: quando aparece, surpreende

Cuba Farm COMPRAR OFERTA

Não. Cinco cores disputando, dois acentos, sem respiro: parece gerado, não desenhado.

Cuba Farm COMPRAR

Sim. Três cores, um acento, respiro generoso: máximo do sistema, mínimo de ruído.

Acessibilidade embutida

Contraste calculado, não prometido: cada par da Paleta exibe a razão medida na hora da geração e o selo real que ela alcança. Onde a marca escolhe um par que reprova, como o Dourado, isso está escrito no próprio par, não escondido.
Alvo tátil de 44px: tamanho mínimo de toque no Espaçamento; o botão médio nasce nele.
Foco sempre visível: todo controle da tela tem anel de foco de 2px na cor da marca (navegue por Tab em qualquer demo).
Estados com semântica, não só cor: erro usa aria-invalid, carregamento usa aria-busy, e os demos dos Átomos servem de gabarito de marcação.
Movimento respeita a pessoa: com prefers-reduced-motion ativo, as transições da tela e a rolagem suave deste documento se desligam.

Decisões & changelog

As decisões que definem o sistema, consolidadas. O diário completo, com data, contexto, racional e os caminhos revistos até cada decisão final, vive em Tokens/DECISOES.md. Nada muda em silêncio.

14/07/2026

Arquitetura O documento virou uma vista: agora ele nasce da fonte, não é a fonte

Este arquivo era a fonte de si mesmo, e por isso apodrecia: mover duas seções custava um commit de 3.593 linhas, e o que estava escrito aqui podia discordar do tokens.json sem ninguém notar. Agora Tipografia, Logos, Iconografia e Fotografia se juntam a Paleta, Medidas, Motion, Direção, Templates e Web: toda seção que deriva de alguma coisa é gerada. Escritas à mão sobram só as que não derivam de nada, como este changelog.

Gerar expôs o que estava escondido. A regra número um do sistema, "a logo não se compõe", não existia no tokens.json: vivia escrita aqui e digitada dentro do gerador. A arte das cinco logos existia só dentro deste HTML, sem arquivo nenhum, enquanto os 61 ícones já tinham pasta própria; agora moram em Logos/, e a proporção de cada uma é medida do desenho, não digitada ao lado dele. A Tipografia mostrava 9 dos 21 tokens de escala. E o documento carregava 12 identificadores repetidos desde sempre, invisíveis porque ninguém montava os ícones a partir dos arquivos.

Entrou também a auditoria de máquina (R22): identificador único, referência de desenho com alvo, texto alternativo em imagem, nome em botão, rótulo em campo e hierarquia de títulos sem salto. Ela pegou o demo da busca ensinando um padrão inacessível, com dica no lugar de rótulo, e pegou duas vezes o CSS que eu mesmo tinha acabado de escrever.

10/07/2026

Arquitetura Iconografia e Logos viraram Fundamentos, e os níveis ficaram simétricos

Uma pergunta insistente destravou a resposta certa: por que ícones e logos têm seção própria e Moléculas e Organismos não têm nada do tipo dentro? Porque ícones e logos não são componentes montados como um botão: são ativos de marca, parentes da cor e da tipografia, não dos átomos. Eu os tinha metido no nível dos componentes. Agora eles vivem no capítulo Fundamentos, ao lado de Paleta, Tipografia e Espaçamento, do jeito que Carbon e Material organizam. Com isso, Átomos, Moléculas e Organismos ficam finalmente simétricos: os três só com cards de peça, nenhum com subseção. O capítulo antes chamado Tokens virou Fundamentos, porque agora abriga também esses ativos, que tokens não são. E dentro de Fundamentos a ordem lidera pela identidade: Logos primeiro (a assinatura da marca), depois Paleta, Tipografia e Iconografia, e por fim os tokens mais mecânicos (Espaçamento, Curvatura, Sombras, Motion).

10/07/2026

Navegação Os subitens do menu agora têm um chevron, e abrem por clique

Faltava a affordance mais básica de um menu em árvore: nada indicava quais categorias tinham subitens, e eles só apareciam ao passar o mouse por cima, o que não se descobre e não existe no toque. Agora cada categoria com subitens mostra um chevron que aponta para o lado quando fechada e gira para baixo quando aberta, e a abertura é por clique, não por hover. As categorias que são link direto não ganham chevron, porque não escondem nada. E para não reincidir, a regra R21 passou a exigir o indicador em toda categoria que expande, testada removendo o chevron e vendo a bateria flagrar.

10/07/2026

Coerência A barra lateral deste manual agora é o organismo, não uma imitação

No lançamento dos organismos de navegação eu disse que a barra lateral do documento passava a "falar a gramática" do menu lateral, mas na prática só o estado ativo tinha mudado; o resto continuava bespoke (títulos de categoria maiores e claros, item com espaçamento próprio). Agora a barra lateral do manual usa os mesmos tokens do .ds-menu-lateral na variante inversa: item com o mesmo tamanho, respiro e raio; título de categoria na mesma caixa alta discreta com tracking; e o último resquício de dourado (o anel de foco da categoria) virou branco. Medido lado a lado: item e título de grupo têm valores idênticos aos do organismo. O documento não imita mais a própria linguagem: ele a usa.

Ver histórico: 34 decisões anteriores

10/07/2026

Correção Fora a barra inventada do item ativo (reprovada, e agora auditada)

O item ativo da navegação levava um filete vertical à esquerda (box-shadow inset) que o dono já havia reprovado uma vez, como ornamento sem base no sistema. Ele voltou por descuido nos organismos novos e na barra lateral deste manual; agora saiu dos dois. O estado ativo separa só pelo que o sistema já tem: superfície afundada, cor primária e peso. E para não reincidir, a bateria do navegador ganhou a regra R20, que reprova qualquer box-shadow inset no item ativo de navegação, testada plantando o ornamento de volta e vendo a regra flagrá-lo.

10/07/2026

Navegação Dois organismos de navegação universais: barra de topo e menu lateral

A navegação virou vocabulário de primeira classe, na escola do UI Shell do IBM Carbon: um topo e uma lateral que compõem um shell de aplicação ou funcionam sozinhos, cada um servindo os três contextos. A barra de topo (.ds-barra-de-topo) tem uma variante por contexto: sistema (menu + título + ações), institucional (logo + páginas + CTA) e e-commerce (topbar + categorias + carrinho): o antigo cabeçalho virou a variante e-commerce dela, sem organismo duplicado. O menu lateral (.ds-menu-lateral) traz grupos, itens com ícone e contador, estado ativo por superfície e peso, rodapé de usuário, além do rail compacto (só ícones) e da superfície inversa. E a própria barra lateral deste manual passou a falar essa gramática. O documento se navega com a própria linguagem que ensina.

10/07/2026

Fontes As duas famílias agora são arquivo local, embutidas na publicação

A causa raiz de "fontes que não são da marca": a Inter vinha do Google Fonts por link, mas o artifact publicado bloqueia rede externa (CSP), então ela nunca carregava lá e o texto caía em Arial. As duas famílias passaram a ser arquivo local (Inter e Playfair variáveis), embutidas como dado na publicação: o artifact é 100% autossuficiente, sem depender de nenhum servidor de fora. De quebra, dois vazamentos antigos: o título para leitor de tela e o botão de voltar ao topo herdavam a fonte do navegador (controles de formulário não herdam família), corrigidos na fonte com a âncora de marca no corpo do documento e a herança dos controles. Guardas novas: o auditor estático barra qualquer fonte externa ou família fora do par, e a bateria do navegador agora varre também os diálogos e os elementos soltos, não só o corpo principal.

10/07/2026

Apresentação Galeria para varrer, ficha para mergulhar

O jeito dos grandes sistemas de apresentar componentes: o índice é leve e o mergulho é fundo. No grid, cada peça agora é um tile de galeria: demo, nome e a missão em duas linhas. Clicar no card abre a ficha da peça, um diálogo com tudo o que o tile guarda: papel completo, o quando NÃO usar, onde é usada, estados, e os demos com ampliar e ‹html› funcionando lá dentro (dica "ficha ↗" aparece no hover). Nada foi removido: os detalhes mudaram de lugar, da parede para a profundidade.

10/07/2026

Organização Átomos por categoria, e toda categoria com missão

O nível 1 era a última grade chapada do documento: 19 cards em fila. Agora os átomos vivem em cinco categorias funcionais (Ação & navegação · Formulário · Rótulo & feedback · Conteúdo & superfície · Fundações com casa própria), na mesma mecânica de Moléculas e Organismos. E toda categoria do documento, nos três níveis, ganhou uma linha de missão embaixo do título dizendo o trabalho daquele grupo ("O que a pessoa aperta"; "A primeira dobra: onde a atenção nasce"). O filtro da navegação já entende os blocos novos e os recolhe quando vazios.

10/07/2026

Uso Quando não usar, e para quem o sistema precisa funcionar

Do GOV.UK veio a metade que faltava do conselho: cada organismo da tela agora diz também quando NÃO usar, em vermelho de estado, ao lado do papel ("carrossel com um slide só vira hero com controles mortos"; "newsletter no checkout é fricção, não relacionamento"). E a Composição ganhou o bloco Acessibilidade embutida: contraste provado nos pares da Paleta, alvo tátil de 44px, foco visível em todo controle, semântica além da cor (aria-invalid, aria-busy) e movimento que respeita prefers-reduced-motion. De passagem, as medidas do cabeçalho nos tokens ainda descreviam a anatomia antiga de marca composta (brand_mark + brand_name): corrigidas para o slot de logo, que recebe o arquivo completo.

10/07/2026

Didática A escola dos grandes sistemas: não-faça/faça, estados reais e HTML de bolso

Rodada guiada pelas referências que definem a categoria. Do Material Design, os pares não-faça/faça agora vivem onde a regra vive: Tipografia (Playfair em caixa alta; preço em Playfair), Paleta (exclusivas das duas marcas misturadas) e Curvatura (borda de repouso versus superfície com sombra), cada erro mostrado de verdade e isento das baterias por escopo cirúrgico (provado nos dois sentidos: com isenção, conforme; sem ela, a R3 flagra na hora). Ainda do Material, o botão e o input mostram estados reais renderizados pelo próprio CSS: repouso, disabled, loading, erro via aria-invalid. Do IBM Carbon, todo demo de tela ganhou o botão ‹html›: um clique copia o markup pronto para colar no projeto. E a fonte única ficou de bolso: tokens.json ↓ na navegação (no artifact, embutido e auto-contido).

10/07/2026

Experiência O documento ficou bom de usar: buscar, achar, copiar

Rodada de excelência na experiência de quem navega: o filtro da navegação agora alcança as peças e receitas (digite "busca" e o documento mostra só o que interessa, com contador; Esc limpa; "/" foca); todo endereço .ds- é copiável no clique, no chip do card e nas receitas, com o mesmo feedback do hex e dos prompts; o marcador de seção ativa na navegação trocou de mecanismo para funcionar em qualquer ambiente; as descrições ganharam largura de leitura confortável (72 caracteres); a rolagem ficou suave (respeitando quem prefere movimento reduzido); e a aba do navegador ganhou o selo DA como favicon, direto do arquivo oficial.

10/07/2026

Varredura Primeira varredura crítica proativa: 6 achados, 6 correções

Sem flagrante do dono, o sistema inteiro foi varrido com olhar crítico. Achados: a página rolava de lado em telas de 1280px (a coluna da grade crescia com os previews em px reais; agora minmax(0,1fr) e a fileira rola por dentro, com a regra R19 de guarda); o feed dizia "4:5" na desc de Espaçamento, nos passos de prompt de IA e no próprio token ratio, sendo que 1080×1440 é 3:4 (o prompt ensinava a gerar foto na proporção errada); a desc de Sombras dizia "nunca em peças sociais" enquanto o card de produto do canvas sempre teve elevação (agora documentado: ele veste o shadow/md, única sombra dos criativos, com linha própria na régua); a chave preco-display dos tokens não tinha classe correspondente (virou preco = .ds-preco); a Papelaria usava um cinza fora da paleta nas assinaturas de e-mail; e o auditor estático ganhou o validador da fonte única (ratio confere com as dimensões, receitas resolvem, referências existem, endereços citados existem, toda peça tem casa na folha), que na estreia flagrou a deriva do preço e um travessão recém-escrito.

10/07/2026

Auditoria O padrão de nomes virou regra auditada (R17 e R18)

Três flagrantes seguidos do mesmo tema provaram que regra fora do auditor não é regra. A bateria dinâmica ganhou a R17 (todo endereço é .ds-<slug do nome>, o chip deriva do título, demos de tela carregam a classe que declaram no rótulo, receitas usam .ds-) e a R18 (peça sem amostra renderizada é violação; nenhum "undefined" vaza). Testadas por injeção: quatro violações plantadas, quatro flagradas. De quebra, os rótulos dos demos de tela nas peças de canvas agora declaram a correspondência (tela · .ds-tag no card da tag de categoria; tela · .ds-badge--oferta no chip de cupom): peça irmã tem endereço próprio, não rótulo mudo.

10/07/2026

Nomes Um namespace só de endereço: .ds-* também no canvas

As peças de tela endereçavam como .ds-newsletter e as do canvas como bloco-de-oferta, seco: dois formatos. Agora o endereço de toda peça é .ds-<nome>, nas duas vertentes: na tela ele é a classe CSS, no canvas ele endereça a chave das receitas. Chips, receitas dos templates (.ds-moldura-de-foto:full-bleed + .ds-bloco-de-oferta + .ds-assinatura:feed) e as linhas de uso cruzado ("usada em", "no canvas:") falam o mesmo formato. A exceção de ontem morreu junto: hashtag e assinatura agora também mostram .ds-hashtag e .ds-assinatura.

10/07/2026

Peças Toda peça se mostra, sem exceção

Os três últimos átomos que eram ficha de texto ganharam amostra renderizada: o tooltip aparece aberto sobre um link, a tipografia mostra as três famílias de escala em uso, e o ícone traz três traços reais da Iconografia. O chip da tipografia parou de prometer uma classe que não existia: o endereço verdadeiro é a família .ds-display-* · .ds-heading-* · .ds-body-*. De quebra, o card do botão exibia "undefined" na linha de uso (resto do renomeio) e foi corrigido.

10/07/2026

Nomes O endereço agora deriva do nome

"Cabeçalho" com endereço .ds-header era nome duplo: duas palavras para a mesma peça. Agora o endereço técnico é o próprio nome codificado (sem acento, espaços viram hífen): o cabeçalho mora em .ds-cabecalho, a barra de busca em .ds-barra-de-busca, a tag de categoria na chave tag-de-categoria. Todas as classes da tela e chaves das receitas foram renomeadas; quando o nome já é o endereço (hashtag, assinatura), o chip nem aparece. Só o vocabulário da plataforma permanece em inglês: atributos do HTML e os grupos internos do motor de tokens.

09/07/2026

Nomes Um padrão de nome para toda peça

Todo card agora tem o nome da peça em português como título e o endereço técnico como chip de código: a classe .ds-* nas peças de tela, a chave das receitas nas peças do canvas. Moléculas e organismos foram agrupados por categoria de função, os cards se adaptam ao porte da peça, e o bloco de depoimento virou um card só com os dois tamanhos (era a mesma peça com dois nomes).

09/07/2026

Diagnóstico Diagnóstico visual resolvido: toda peça agora se mostra

As 17 peças de tela que eram só ficha ganharam amostra renderizada de verdade: as 6 moléculas restantes ao natural, e os 8 organismos de página inteira (cabeçalho, rodapé, carrossel, vitrines) em escala com clique para ampliar em tamanho real, a mesma mecânica dos templates. As personas ganharam a foto de clima de cada marca, os cards da Arquitetura ganharam os wordmarks reais, a Composição ganhou o par visual não faça / faça, a Tipografia ganhou um parágrafo de leitura real, e os divisores internos de Templates ficaram à altura da seção. O card-ponteiro de preço foi fundido à peça única.

08/07/2026

Revisão Revisão de conteúdo do documento

O termo revogado "cor-ponte" saiu da Paleta; as descrições das cores pararam de repetir o papel já dito no selo; o histórico do changelog voltou a colapsar, com as três decisões recentes visíveis; e a folha de estilo do sistema web foi limpa de nomes e termos internos.

08/07/2026

Logo Logo não se compõe: a regra agora é explícita

Montar a logo na mão (o selo ao lado do nome digitado) inventa um lockup que não existe. A seção Logos ganhou a proibição e um exemplo lado a lado (não faça / faça), e o componente de header do sistema web deixou de modelar marca + nome: agora tem um slot que recebe o arquivo de logo completo. Cada situação usa um arquivo pronto: horizontal no header, selo em espaços mínimos, vertical empilhado.

08/07/2026

Templates Anúncio B: texto invisível corrigido e legibilidade auditada

No Anúncio B (Split), a metade inferior do Don Artesano tinha texto branco sobre fundo branco: o fundo sólido da marca estava definido como branco, quando o texto do DA é branco por design (como no arquétipo C, de fundo Titânio). O fundo passou a Titânio, e o texto voltou a aparecer. A varredura não achou outro caso. O auditor ganhou a regra que teria pego isso: nenhum texto pode ter a cor (quase) igual ao fundo sólido atrás dele.

08/07/2026

Templates Arquétipos revisados: elementos em tamanho real e copy que cabe

A migração dos previews para px reais tinha deixado os elementos não-textuais (botão CTA, pill de preço, chip de salário, rodapé, cargo da vaga) nos tamanhos antigos minúsculos, quase invisíveis num canvas de 1080. Todos voltaram aos tamanhos reais dos tokens. Os headlines de exemplo que estouravam a zona foram encurtados para caber (como um designer escreve para o template), o corte rígido do texto saiu, o botão passou a se ajustar ao texto, e os estilos escritos em texto livre passaram a ser lidos (o eyebrow voltou a bold).

07/07/2026

Templates Previews e medidas em px reais, com ampliar 1:1 e numeração

Os previews e os diagramas de medida passaram a ser construídos em resolução real (1080px) e apenas reduzidos por transform para caber. Clicar em qualquer um abre a peça em tamanho real: ajustada à tela ou 1:1 pixel a pixel. As medidas ganharam numeração nas zonas, com legenda numerada embaixo (número, nome e coordenadas) casando com a lista de specs.

07/07/2026

Templates Previews dos templates em tamanho avaliável

Os previews de arquétipos e Stories estavam pequenos demais para julgar a composição. Mais que dobraram (feed 167→346px, story 124→270px), ganharam sombra de peça e passaram a viver numa faixa de rolagem horizontal: no desktop, Don Artesano e CubasFarm aparecem lado a lado; em telas estreitas, desliza sem quebrar a página. O wireframe de medidas ficou compacto ao lado.

07/07/2026

Selo Templates passam a usar o selo DA real

Os previews de arquétipos, Stories e organismos assinavam com um "DA" em texto genérico. Agora usam o símbolo DA real (o mesmo átomo de identidade da seção Logos), lido da fonte e colorido por contexto: Branco sobre foto e fundo escuro, Titânio sobre claro.

07/07/2026

Páginas Nível 5: o sistema montado com conteúdo real

O topo da hierarquia ganhou casa: um feed e um story em fidelidade e uma página de produto da CubasFarm montada só com os organismos do sistema web, tudo com produto e preço reais. Compor de verdade revelou o que os componentes isolados escondiam e já foi corrigido: bordas de repouso nos componentes web viraram superfície e sombra (fluidez da SSM), a marca no cabeçalho saiu do Dourado, ícones sociais e setas passaram a preenchidos, e a escala de sombras (que existia decomposta mas nunca fechava num valor usável) foi composta na fonte.

07/07/2026

Tokens Duas famílias, ponto final; e o leque de tokens completo

A terceira fonte (mono, exceção antiga dos documentos) foi revogada: o sistema tem Playfair Display e Inter, e nada mais. Literais técnicos agora são Inter sobre chip neutro. O leque de tokens ganhou a seção Curvatura & bordas: escala de raios com papéis, espessuras de borda com a política (nada tem borda por padrão), tintas de branco sobre escuro em cinco pontos e os três véus de foto. Véus e tintas agora vivem nos tokens e alimentam os previews.

07/07/2026

Auditoria O manual passa a se auditar: conformidade verificada e corrigida

Auditoria automatizada de conformidade contra as próprias regras, agora permanente em Scripts (varredura estática dos arquivos + varredura dinâmica dos estilos renderizados). Corrigidos: par de texto que combinava exclusivas de marcas diferentes (removido), superfícies do documento que usavam cores exclusivas (agora nas principais), numerais lining aplicados por herança a todo o documento, raios fora da escala, rótulo em Playfair caixa alta e CSS herdado sem uso nos dois documentos.

07/07/2026

Dourado Dourado liberado em ícones na CubasFarm; regra da logo ratificada

A proibição de Dourado em ícones valia só para a Don Artesano na documentação original. O uso foi liberado na CubasFarm como acento, contando no limite de 1-2 por peça. A regra "logo nunca em Dourado" foi ratificada. O exportador de ícones oferece Dourado com a etiqueta "só CubasFarm".

07/07/2026

Web A vertente web descongela: fase 1 da padronização de sites

Nó web no tokens.json, seis átomos essenciais (button, link, tag, input, card, ficha) com marca via data-brand e Web/ds-web.css como entregável real. Especificações herdadas da versão anterior do sistema, atualizadas pelas decisões vigentes. Ver os níveis Átomos, Moléculas e Organismos.

06/07/2026

Composição Organismos sociais: os templates viram receitas combináveis

Os arquétipos foram decompostos em 8 organismos (moldura-de-foto, bloco-editorial, card-de-produto, bloco-de-oferta, bloco-de-depoimento, assinatura, faixa-de-hashtags, ficha-de-vaga) e 5 moléculas sociais. Cada arquétipo agora declara sua receita, e combinações inéditas são legítimas: nascem como experimento e, quando vencem na prática, são promovidas a arquétipo. A variedade do feed é combinatória: as peças são fixas, as combinações não.

06/07/2026

Arquitetura da paleta Azul Ônix é o Destaque exclusivo da Don Artesano; Titânio vira cor-ponte

Quatro pontes (Titânio, Cinza Quartzo, Branco Resina, Branco SSM) e duas exclusivas de destaque: Ônix na DA, Dourado na CF. Com o Titânio como ponte, o texto Titânio na CubasFarm, a logo CF em Titânio e o lockup "by Don Artesano" são uso normal do sistema. Na CF, contexto escuro vem de fotografia, nunca de cor chapada.

06/07/2026

Dourado Dourado pode ser texto; botão CubasFarm é Dourado com texto Branco SSM

Legibilidade validada nas três combinações de fundo. Os ratios WCAG permanecem documentados como nota informativa (2.40:1 sobre brancos, 6.73:1 sobre Ônix): achado técnico informa, não decide. Em corpos pequenos sobre claros, preferir tamanho generoso. Segue proibido em Don Artesano e em ícones.

06/07/2026

Logo Selo unificado: canto inferior direito em todos os formatos

Story passa de 80px no topo esquerdo (que colide com o avatar/nome do perfil na UI do Instagram) para 120px no canto inferior direito, respeitando a safe zone de 350px. Uma regra só para feed, carrossel, story e capa de Reel.

06/07/2026

Expansão Templates, fotografia, prompts de IA, motion e método entram no canônico

Nó templates com os 8 arquétipos de feed + Reels + Stories e geometria completa; direção fotográfica a partir dos anúncios que mais performaram; padrão de prompts de imagem com negative prompt oficial; motion; e método atômico: o método com o status de cada nível. Moléculas e organismos web: congelados até o projeto do site.

06/07/2026

Governança Figma arquivado; sistema vivo = tokens.json + documentos HTML

Após a extração final (templates, ícones, tokens), o Figma passou a fonte histórica de consulta. Quando superfícies divergem, o tokens.json vence: sempre. Documentos separados por natureza: Design System (visual) e Marca & Voz (estratégia e linguagem verbal).

06/07/2026

Dogfooding Estes documentos seguem o próprio sistema

Auditoria interna alinhou a interface dos documentos às regras que eles documentam: só cores da paleta (ou transparências delas), logo em cor aprovada, pesos de fonte do trio oficial e vocabulário do glossário. Exceção documentada: JetBrains Mono para trechos de código, exclusiva destes documentos.

Design System da Don Artesano e CubasFarm: a linguagem visual (paleta, tipografia, botões, logos, ícones e regras de composição)

O sistema, uma peça por vez

O sistema por trás de cada peça

Arquitetura de marca

Logos

Paleta de cores

Tipografia

Iconografia

Espaçamento

Curvatura & bordas

Sombras & elevação

Motion

Átomos

Moléculas

Cuba Farm 70

Organismos

Sua cozinha, ponto central

Farm Sinks

Cuba Farm 70

Cuba Farm 90

Tanque Farm 60

Cuba Farm 70

Explore por ambiente

Quem já instalou

Feita para durar

Projetos sob medida

Fale com a loja

Templates & receitas de montagem

Arquétipos: receitas comprovadas

Formatos verticais

Páginas

Cuba Farm 70

Você também pode gostar

Cuba Farm 90

Cuba Farm 70 Dupla

Tanque Farm 60

Cuba Quartzo 50

Receba lançamentos e ofertas

O que esta instância revelou (e já foi corrigido)

Fotografia & prompts de IA

Nunca na foto

Nunca nos materiais

Padrão de prompt para geração de imagem

Personas visuais

Regras de composição

Proibido

Obrigatório

Decisões & changelog