Design system | Alameda Marketing

Como usar

Uma fonte só: o código do site.

Os números desta página são lidos de v2.css e v2-paginas.css a cada construção do site (488 regras). Os exemplos usam as mesmas classes das páginas, sem cópia. Se o site mudar, esta página muda junto. A identidade da marca (logo, área de respiro, usos) fica em Marca.

Cores
Temas
Tipografia
Espaço, raio e sombra
Movimento
Botões e links
Formulário
Cartões
Cabeçalho, rodapé e avisos
Seções
Lacunas

Fundamentos

Cores

A paleta veio da primeira cena do site: carvão, verde-escuro, pedra e âmbar. Cada cor tem um nome no código (:root em v2.css). Use sempre o nome, nunca o valor solto.

Fundos escuros

Carvão--carvao#0D1210

Carvão 2--carvao-2#141B18

Verde-escuro--verde#1F3A2E

Verde 2--verde-2#17291F

Fundos claros

Pedra--pedra#E6E1D6

Pedra 2--pedra-2#D8D2C4

Papel--papel#F6F3EC

Destaque

Âmbar--ambar#FFB54A

Âmbar 2--ambar-2#FFC878

Cobre--cobre#9A5210

Cobre para texto--cobre-texto#8F4C0E

Sobre âmbar--sobre-ambar#1B1204

Texto em fundo escuro

Claro--claro#EFEAE0

Claro 2--claro-2rgba(239,234,224,.78)

Claro 3--claro-3rgba(239,234,224,.56)

Estas cores têm transparência. A amostra mostra cada uma sobre --carvao, o fundo em que é usada.

Texto em fundo claro

Escuro--escuro#141B18

Escuro 2--escuro-2rgba(20,27,24,.76)

Escuro 3--escuro-3rgba(20,27,24,.66)

Estas cores têm transparência. A amostra mostra cada uma sobre --pedra, o fundo em que é usada.

Contraste de texto

Conta feita na construção, pela regra WCAG 2.2. Texto normal pede 4,5 ou mais; texto grande (a partir de 24 px, ou 18,66 px em negrito) pede 3 ou mais.

Texto	Fundo	Uso	Contraste	Texto normal	Texto grande
`--claro`	`--carvao`	Texto principal em fundo escuro	15,76	Passa	Passa
`--claro-2`	`--carvao`	Texto de apoio em fundo escuro	9,75	Passa	Passa
`--claro-3`	`--carvao`	Texto discreto em fundo escuro (rodapé, notas)	5,53	Passa	Passa
`--ambar`	`--carvao`	Destaque e rótulos em fundo escuro	10,76	Passa	Passa
`--sobre-ambar`	`--ambar`	Texto do botão principal	10,54	Passa	Passa
`--claro`	`--verde`	Texto principal em fundo verde	10,29	Passa	Passa
`--claro-2`	`--verde`	Texto de apoio em fundo verde	6,91	Passa	Passa
`rgba(239,234,224,.62)`	`--verde`	Texto discreto em fundo verde	4,99	Passa	Passa
`--ambar`	`--verde`	Destaque em fundo verde	7,02	Passa	Passa
`--escuro`	`--pedra`	Texto principal em fundo claro	13,42	Passa	Passa
`--escuro-2`	`--pedra`	Texto de apoio em fundo claro	6,84	Passa	Passa
`--escuro-3`	`--pedra`	Texto discreto em fundo claro	5,05	Passa	Passa
`--cobre`	`--pedra`	Destaque grande em fundo claro (títulos)	4,49	Não passa	Passa
`--cobre-texto`	`--pedra`	Links e marcadores em fundo claro	5,02	Passa	Passa
`--cobre-texto`	`--papel`	Links em cartão claro	5,91	Passa	Passa
`--escuro`	`--papel`	Texto em cartão claro e no formulário	15,80	Passa	Passa
`--escuro-3`	`--papel`	Nota do formulário	5,41	Passa	Passa
`--cobre`	`--papel`	Destaque em cartão claro	5,28	Passa	Passa
`--ambar`	`--pedra`	Âmbar em fundo claro: não usar para texto	1,35	Não passa	Não passa
`#B3261E`	`--papel`	Mensagem de erro do formulário	5,90	Passa	Passa
`#B3261E`	`#fff`	Borda e texto de erro sobre o campo	6,54	Passa	Passa

Âmbar só em fundo escuro. Em fundo claro o destaque é o cobre.
Cobre (--cobre) é a cor da marca em fundo claro: serve para título e destaque grande. Para link e marcador de lista em fundo claro, use --cobre-texto, um tom mais escuro.
Texto discreto (--escuro-3 e --claro-3) é para notas e datas, nunca para o texto principal.

Temas

Uma seção nunca escolhe cor por cor. Ela recebe um tema, e o tema define fundo, texto, linha, destaque e cartão. São três. Dentro de main, sem classe de tema, vale o claro.

.tema-escuro

Título com destaque

Texto principal.

Texto de apoio.

Texto discreto.

Cartão

.tema-verde

Título com destaque

Texto principal.

Texto de apoio.

Texto discreto.

Cartão

.tema-claro

Título com destaque

Texto principal.

Texto de apoio.

Texto discreto.

Cartão

Nome no tema	`.tema-escuro`	`.tema-verde`	`.tema-claro`
`--fundo`	`--carvao`	`--verde`	`--pedra`
`--texto`	`--claro`	`--claro`	`--escuro`
`--texto-2`	`--claro-2`	`--claro-2`	`--escuro-2`
`--texto-3`	`--claro-3`	`rgba(239,234,224,.62)`	`--escuro-3`
`--divisa`	`rgba(239,234,224,.16)`	`rgba(239,234,224,.2)`	`rgba(20,27,24,.18)`
`--realce`	`--ambar`	`--ambar`	`--cobre`
`--cartao`	`--carvao-2`	`--verde-2`	`--papel`

Escuro (.tema-escuro): abertura, cabeça das páginas, prazos, rodapé.
Verde (.tema-verde): uma seção por página, para quebrar o ritmo.
Claro (.tema-claro): o corpo das páginas, depoimentos, pacotes e perguntas.
Dentro de um tema, escreva com --texto, --texto-2 e --realce, não com a cor direta.

Fundamentos

Tipografia

Duas famílias, hospedadas no próprio site. Fraunces nos títulos, com o itálico leve para o destaque. Manrope no texto e nos rótulos. Os tamanhos crescem com a largura da tela, entre um mínimo e um máximo.

Família	Estilo	Pesos	Arquivo
Fraunces	Normal	100 a 900	`fraunces-latin-opsz-normal.woff2`
Fraunces	Itálico	100 a 900	`fraunces-latin-opsz-italic.woff2`
Manrope	Normal	200 a 800	`manrope-latin-wght-normal.woff2`

Alameda

Título da abertura.abertura__tituloFraunces · peso 360Tamanho: clamp(46px,8.9vw,132px) · no celular: 50pxEntrelinha: .96 · espaço entre letras: -.028emSó na primeira tela da home.

Título gigante

Título gigante.titulo-secao--giganteFraunces · peso 380Tamanho: clamp(44px,7.6vw,124px)Entrelinha: .96 · espaço entre letras: -.025emSeção de impacto, uma por página.

Título de página

Título de página.cabeca__tituloFraunces · peso 360Tamanho: clamp(40px,6.4vw,98px) · no celular: clamp(36px,10.4vw,48px)Entrelinha: .98 · espaço entre letras: -.028emH1 das páginas internas.

Título de seção

Título de seção.titulo-secaoFraunces · peso 380Tamanho: clamp(34px,5vw,76px)Entrelinha: 1.02 · espaço entre letras: -.025emH2 de cada seção.

Nome no cartão

Nome no cartão.cartao__nomeFraunces · peso 380Tamanho: clamp(28px,2.9vw,44px)Entrelinha: 1.02 · espaço entre letras: -.022emNome do serviço no cartão grande.

Texto de destaque, para abrir uma seção.

Texto de destaque.destaqueFraunces · peso 380Tamanho: clamp(24px,2.7vw,42px)Entrelinha: 1.2 · espaço entre letras: -.016emParágrafo de abertura de uma seção.

Título de item

Título de item.prazo h3Fraunces · peso 400Tamanho: clamp(22px,2vw,29px)Entrelinha: 1.12 · espaço entre letras: -.015emH3 de prazos, passos e cartões de artigo.

Linha de apoio, logo abaixo do título da página.

Linha de apoio.cabeca__leadManrope · peso 400Tamanho: clamp(17px,1.4vw,21px)Entrelinha: 1,6 (corpo) · espaço entre letras: 0Frase logo abaixo do H1.

Corpo do texto. É a letra de quase tudo o que se lê no site.

CorpobodyManrope · peso 400Tamanho: 17px · no celular: 16pxEntrelinha: 1.6 · espaço entre letras: 0Texto corrido.

Sobretítulo

Sobretítulo.sobretituloManrope · peso 700Tamanho: 12pxEntrelinha: 1,6 (corpo) · espaço entre letras: .2emRótulo curto acima de um título.

InícioTrilha e notas

Trilha e notas.migalhasManrope · peso 600Tamanho: 13pxEntrelinha: 1,6 (corpo) · espaço entre letras: 0Trilha de navegação e textos pequenos.

Um H1 por página, com .cabeca__titulo. Cada seção abre com um H2 em .titulo-secao.
Destaque no título: a parte em <em> fica em itálico leve e na cor de realce do tema. Uma vez por título.
Sobretítulo é rótulo de uma ou duas palavras, nunca frase.
Fraunces não entra em texto corrido nem em botão. Manrope não entra em título de seção.
Não crie tamanho novo. Escolha um dos estilos acima. A menor letra do site tem 12 px.

Fundamentos

Espaço, raio e sombra

Espaço

O que é	Nome no código	Valor
Margem lateral da página	`--pad`	clamp(20px,4.4vw,68px)
Largura máxima do conteúdo	`--larg`	1320px
Altura do cabeçalho	`--topo-h`	84px (68px no celular)
Respiro em cima e embaixo de cada seção	`.secao`	clamp(72px,10vw,150px) 0

Não há uma escala de espaços com nome. Os vãos entre itens que mais se repetem no código:

12px · 11 lugares (.marca, .botao, .sobretitulo, .capitulo__rotulo)

10px · 8 lugares (.link-texto, .pausar, .selo-google, .rodape ul)

14px · 8 lugares (.rolar, .depoimento figcaption, .prazo, .pacote)

20px · 4 lugares (.faq__item summary, .cookies, .caixa-info, .contato__grade)

18px · 4 lugares (.rodape__marca, .nav, .nav ul, .abertura__apoio)

16px · 3 lugares (.link-texto:hover, .abertura__base, .lista-check)

22px · 3 lugares (.problema__texto, .cabeca__texto, .contato__texto)

8px · 3 lugares (.cartao__corpo, .cartao__mais, .chips__opcoes)

O conteúdo fica sempre dentro de .interno, que aplica a margem lateral e a largura máxima.
Para juntar duas seções do mesmo tema, use .secao--junta na segunda.

Raio dos cantos

26px · --raio
cartões, formulário, tabelas

16px · --raio-p
imagens dentro de texto

14px · sem nome
campos do formulário

999px · sem nome
botões, etiquetas, aviso de cookies

Valor	Lugares	Onde
50%	12	.botao__chip, .depoimento__inicial, .faixa__trilho i, .trilha a::after
var(--raio)	8	.depoimento, .cartao__link, .pacote, .cabeca__foto
999px	5	.botao, .pausar, .cookies, .outros-servicos a
20px	2	.travessia.is-presa .trilha, .cookies
4px	1	:focus-visible
10px	1	.pular
16px	1	.cookies
var(--raio-p)	1	.artigo__corpo img
14px	1	.campo input

Sombra

O site usa pouca sombra: ela aparece para levantar um bloco do fundo (formulário, pacote em destaque, aviso de cookies) ou no botão ao passar o mouse. Não há sombra com nome; estas são todas as que existem:

Onde	Valor
`.topo.is-rolado`	0 1px 0 rgba(239,234,224,.08)
`.botao:hover`	0 10px 34px -10px rgba(255,181,74,.6)
`.trilha a.is-atual::after`	0 0 0 6px rgba(255,181,74,.26)
`.pacote--destaque`	0 30px 70px -30px rgba(13,18,16,.6)
`.cookies`	0 24px 60px -24px rgba(0,0,0,.7)
`.cabeca__foto`	0 40px 90px -40px rgba(0,0,0,.8)
`.artigo-card:hover`	0 30px 60px -34px rgba(13,18,16,.55)
`.form`	0 40px 90px -40px rgba(0,0,0,.7)
`.campo input:focus`	0 0 0 3px rgba(154,82,16,.22)

Cartão comum não leva sombra: leva borda fina na cor --divisa.
Sombra sempre para baixo, larga e suave, com a cor do carvão ou do âmbar. Sem sombra cinza dura.

Fundamentos

Movimento

Tudo desacelera no fim, com a mesma curva: --suave = cubic-bezier(.2,.8,.2,1). O conteúdo aparece mesmo sem script e sem vídeo.

Ao entrar na tela

Bloco que sobe e aparece (data-surgir).

A linha se desenha da esquerda para a direita (data-linha).

Ao passar o mouse

Botão com seta Link que abre espaço

Pausa

Animação	Onde
`sobe` e `surge`	Entrada do título e do texto na abertura e na cabeça das páginas
`faixa`	Faixa de palavras em movimento, na home
`rolar`	Linha do aviso "role", na abertura
`cortina-sai` e `cortina-entra`	Troca de página, só no computador

Durações em uso, em segundos: 0 · 0,15 · 0,2 · 0,25 · 0,3 · 0,35 · 0,4 · 0,42 · 0,45 · 0,5 · 0,55 · 0,6 · 0,7 · 0,75 · 0,8 · 0,9 · 1 · 1,1 · 1,2 · 1,3 · 1,4 · 2,6 · 46. As mais comuns ficam entre 0,3 e 0,6 para resposta ao mouse e entre 0,9 e 1,3 para entrada na tela.

Reduzir movimento: com essa opção ligada no aparelho, as animações e as transições não rodam e o vídeo não é baixado.
Pausar: toda página com vídeo ou faixa em movimento traz o botão "Pausar animação".
Sem movimento que esconda conteúdo: o texto e o botão principal aparecem antes de qualquer vídeo.
Movimento novo usa --suave e uma duração que já existe.

Componentes

Botões e links

Botão

Em fundo escuro

Pedir proposta Pedir proposta Botão de contorno

Largura inteira

Em fundo claro

Pedir proposta Pedir proposta

Dentro de um cartão de pacote comum

Pedir proposta

Estado	Como ver	O que muda
Normal	Como está acima	Fundo --ambar, texto --sobre-ambar, canto 999px, 15px em peso 700
Mouse por cima	Passe o mouse	Fundo --ambar-2 e sombra âmbar; a seta anda 4 px
Foco	Ande com a tecla Tab	Contorno de 2px solid --ambar, afastado 3px; em fundo claro o contorno é cobre
Apertado	Clique e segure	Encolhe para 98%
Enviando	Veja em Formulário	Opacidade 0,6 e sem clique, só no botão de enviar do formulário
Desabilitado	Não existe	Lacuna: o site não tem estilo para botão desabilitado

Um botão principal por tela, sempre com o mesmo texto ("Pedir proposta") e o mesmo destino.
Grande (.botao--grande) na abertura, na cabeça das páginas e na chamada final. Normal no cabeçalho e no rodapé.
Contorno (.botao--contorno) só em fundo escuro e só para ação secundária. Hoje aparece no aviso de cookies.
Seta (.botao__chip) só no botão grande.
O texto do botão não quebra em duas linhas. Se não couber, encurte o texto.

Links

Link de texto

Link de texto Link de texto grande

Trilha

Menu do cabeçalho

Link de texto

Link dentro de texto corrido

Em artigo e na política, o link fica sublinhado e em cobre.

Etiquetas de navegação

Link de texto (.link-texto) leva para outra página do site e fica depois de um bloco, nunca no meio da frase.
No meio da frase, o link é sublinhado. Só existe em artigo, na política e no aviso de cookies.
Menu: a página atual fica com a linha âmbar embaixo (aria-current="page").
Etiquetas (.outros-servicos) listam páginas irmãs. Com o mouse por cima, ficam em âmbar.

Componentes

Formulário

O formulário é sempre um bloco claro (.form) sobre fundo escuro. Os exemplos abaixo não enviam nada: servem só para mostrar os estados.

Campos

Seu nome

WhatsApp com DDD

Escreva o WhatsApp com DDD.

Mensagem

O que você precisa (marque um ou mais)

SiteSEOTráfego pagoSocial media

Pacote de interesse

PresençaCrescimentoCompleto

Confira os campos marcados.

Nota do formulário, com link para a política.

Enviando

Depois de enviar

Pedido recebido.

O Robson vai ler e responder pessoalmente pelo contato que você deixou.

Estado do campo	Como ver	O que muda
Normal	Campo "Seu nome"	Altura mínima 52px, borda 1px solid rgba(20,27,24,.24), canto 14px, letra de 16 px
Foco	Clique no campo ou ande com Tab	Borda cobre e anel de 0 0 0 3px rgba(154,82,16,.22)
Erro	Campo "WhatsApp com DDD"	Borda #B3261E e mensagem abaixo, em 14px; o campo recebe `aria-invalid="true"`
Opção marcada	Etiquetas escuras	Fundo carvão e texto claro
Desabilitado	Não existe	Lacuna: não há estilo para campo desabilitado

Rótulo sempre visível, em cima do campo. Não use texto de exemplo dentro do campo no lugar do rótulo.
Obrigatório leva asterisco cobre; opcional traz "(opcional)" no rótulo.
Erro aparece embaixo do campo, diz o que fazer e não usa só a cor.
Letra do campo com 16 px, para o celular não dar zoom ao tocar.
Escolha entre poucas opções vira etiqueta (.chip), não lista suspensa.
O site tem um formulário só, o de proposta. Não crie outro sem necessidade.

Componentes

Cartões

Cartão de serviço

Cartão grande com foto do trabalho, número, nome e uma frase. O cartão inteiro é o link. Sem foto, vira um cartão só de letra, com o ícone ao fundo.

A foto mostra o trabalho em si (um site, um painel de anúncios), não a paisagem da abertura.
Com o mouse por cima, a foto aproxima e a seta âmbar aparece. No celular a seta fica sempre visível.
O texto fica sobre um véu escuro, que garante a leitura.

Cartão de pacote

Três cartões lado a lado; o do meio é o destaque, em carvão e um pouco mais alto. Os dados vêm da lista de pacotes do site.

Presença

a partir de R$ 1.000/mês

Para quem precisa aparecer nas redes com constância.

12 posts (8 artes ou carrosséis e 4 vídeos curtos), calendário do mês, legendas e relatório.

Pedir proposta

Crescimento

a partir de R$ 2.000/mês + verba

Para quem quer gerar pedidos todo mês.

Tudo do Presença com 16 posts (10 artes ou carrosséis e 6 vídeos curtos), anúncios no Google e na Meta e 2 artigos de blog.

Pedir proposta

Completo

a partir de R$ 3.000/mês + verba

Para quem quer o marketing inteiro com um só responsável.

Tudo do Crescimento com 20 posts (12 artes ou carrosséis e 8 vídeos curtos), SEO mensal, 4 artigos, 2 peças de design extra e manutenção do site.

Pedir proposta

Só um cartão em destaque (.pacote--destaque).
O preço usa a letra de título, com "a partir de" em cima e "/mês" ao lado.
Cada cartão termina com o botão principal, em largura inteira.

Depoimento, artigo e itens numerados

Texto de exemplo, no lugar da fala do cliente.

Nome de exemploPapel de exemplo

Conteúdo

Produção de Conteúdo Médico: Como Educar Pacientes e Construir Autoridade

Aprenda a criar conteúdo médico que educa pacientes e constrói autoridade.

16/02/2026

Prazos (.prazos)

01

12 a 20 posts por mês

A quantidade fica no contrato. Todo mês.

02

Mês inteiro de uma vez

Você recebe o calendário completo e aprova numa só conversa.

03

Primeiras peças em até 5 dias úteis

Contados a partir do briefing.

04

Anúncios enviados em até 5 dias úteis

Para aprovação do Google e da Meta, depois do acesso às contas.

Depoimento (.depoimento): só com fala real e autorizada. O exemplo acima usa texto de enchimento de propósito.
Artigo (.artigo-card): categoria, título, resumo e data. O cartão inteiro é o link e sobe um pouco com o mouse.
Itens numerados (.prazos e .passos): quatro por linha no computador, dois no tablet e um no celular.

Lista, caixa de informação e tabela

Lista com marca (.lista-check)

Site institucional, landing page para campanha ou loja virtual.
Rápido no celular, com formulário e botão de contato em todas as páginas.
Estrutura pronta para o Google (SEO técnico básico).

Serviço	Preço
Tráfego pago (só anúncios)	a partir de R$ 1.000/mês + verba
SEO (só SEO)	a partir de R$ 750/mês
Landing page	a partir de R$ 500, uma vez, junto com um pacote

Lista com marca: para o que entra em um serviço. Uma linha por item.
Caixa de informação (.caixa-info): bloco escuro ao lado do texto, com prazo, preço e o botão. No computador ela acompanha a rolagem.
Tabela (.tabela): sempre dentro de .tabela-rolagem, para rolar de lado no celular sem quebrar a página.

Componentes

Cabeçalho, rodapé e avisos

Estes componentes aparecem em todas as páginas. O exemplo vivo é esta própria página: o cabeçalho está no alto e o rodapé no fim.

Componente	Estados	Regra
Cabeçalho `.topo`	No alto da página: transparente. Depois de rolar: fundo carvão com desfoque e altura menor. No celular: menu em tela cheia.	Logo à esquerda, menu e botão principal à direita. O menu tem no máximo 5 itens.
Logo no cabeçalho e no rodapé `.marca`	Cabeçalho: só o símbolo, para fundo escuro. Rodapé: versão em uma linha, para fundo escuro. Altura de 40 px no computador e de 34 px no celular e no tablet em pé.	Sempre o arquivo pronto, nunca o símbolo com o nome redigitado. Respiro de uma perna em volta. As regras da logo estão em Marca.
Cabeça da página `.cabeca`	Com foto de fundo, com foto ao lado (`.cabeca--foto`), compacta (`.cabeca--compacta`) ou em tela cheia (`.cabeca--cheia`).	Trilha, sobretítulo, H1, linha de apoio e o botão principal. A foto de fundo sempre leva véu escuro.
Rodapé `.rodape`	Quatro colunas no computador, duas no tablet, uma no celular.	Marca, serviços, páginas e contato. Fecha com o nome em letra vazada e a linha da empresa.
Barra do celular `.barra-cta`	Aparece no celular depois da primeira tela.	Só o botão principal. Não entra na página de contato.
Aviso de cookies `.cookies`	Fechado, aberto. No computador é uma pílula embaixo, ao centro; no celular, um bloco embaixo.	Dois botões iguais, "Recusar" e "Aceitar". Nenhuma medição carrega antes do "Aceitar".
Cortina `.cortina`	Só no computador, na troca de página.	Fundo carvão com o símbolo ao centro.
Cursor `.cursor`	Só no computador com mouse. Cresce sobre links e mostra "Ver" sobre os cartões de serviço.	Enfeite: nada depende dele.
Pular para o conteúdo `.pular`	Aparece com a primeira tecla Tab.	Primeiro link de toda página.

Ver ao vivo

5,0 no Google · 24 avaliações

Componentes

Seções

Uma página é uma pilha de seções. Cada seção tem um tema, um título e um assunto só.

Seção	Classe	Quando usar
Seção comum	`.secao` + tema	Qualquer bloco de conteúdo. Abre com sobretítulo (opcional) e título.
Abertura	`.abertura`	Só na home: tela cheia, vídeo de fundo, título e botão.
Travessia	`.travessia`	Só na home: quatro capítulos com vídeo, presos à rolagem no computador.
Faixa em movimento	`.faixa`	Separador entre duas seções. Enfeite, fora da leitura por leitor de tela.
Depoimentos	`.prova`	Dois ou três depoimentos, com a nota do Google ao lado do título.
Duas colunas	`.duas-colunas`, `.servico-detalhe`, `.problema__grade`	Título de um lado e texto do outro. No celular vira uma coluna.
Perguntas	`.faq`	Título à esquerda e perguntas à direita. A primeira já vem aberta.
Chamada final	`.cta-final`	Última seção de toda página: tela cheia, uma frase e o botão principal.

Ordem de uma página interna: cabeça, conteúdo, perguntas, chamada final.
Alterne os temas. Duas seções claras seguidas se juntam com .secao--junta.
Toda página termina na chamada final, menos a de contato e a política.

Abaixo, três seções de verdade: a faixa em movimento, as perguntas (com as perguntas da página "Criação de sites") e a chamada final.

Perguntas frequentes

O que é "o material"?

Logo, textos sobre a empresa, fotos e o acesso ao domínio. Se faltar texto, a gente escreve.

Vocês mantêm o meu domínio?

Sim. O endereço continua seu.

E a hospedagem?

É cobrada à parte, por ano: R$ 200 para landing page e site institucional e R$ 500 para loja em WooCommerce. Na Shopify, você paga a plataforma direto.

O que falta

Lacunas

O que o código do site ainda não tem, ou tem sem padrão. Nada disto foi criado nesta página.

Tema	Lacuna	Dado do código
Estados	Não há estilo para botão nem para campo desabilitado. Só existe o estado "enviando" do botão do formulário.	`.form.is-enviando button[type="submit"]`
Cor	Cores escritas direto no código, sem nome: o vermelho de erro, o branco do campo e o tom das estrelas em fundo claro.	#FFF (1), #B3261E (4)
Tipografia	Não há escala de tamanhos com nome. Cada componente define o seu.	52 valores diferentes de tamanho de letra
Espaço	Não há escala de espaços com nome, além da margem lateral e da largura máxima.	`--pad`, `--larg`
Raio	Só dois raios têm nome. Os outros estão escritos direto.	9 valores, 2 com nome
Sombra	Nenhuma sombra tem nome.	9 sombras
Movimento	Só a curva tem nome. As durações estão escritas direto.	23 durações diferentes
Componentes que não existem	Aviso de sucesso ou de erro fora do formulário, janela sobreposta, abas, lista suspensa, paginação, etiqueta de situação e carregamento.	Criar só quando uma página precisar
Ícones	Há 12 ícones de traço, desenhados no próprio site. Não há biblioteca de ícones.	`macros.njk`

As peças que montam o site da Alameda.

Uma fonte só: o código do site.

Cores

Fundos escuros

Fundos claros

Destaque

Texto em fundo escuro

Texto em fundo claro

Contraste de texto

Temas

Tipografia

Título de item

Espaço, raio e sombra

Espaço

Raio dos cantos

Sombra

Movimento

Botões e links

Botão

Links

Formulário

Cartões

Cartão de serviço

Cartão de pacote

Presença

Crescimento

Completo

Depoimento, artigo e itens numerados

Produção de Conteúdo Médico: Como Educar Pacientes e Construir Autoridade

12 a 20 posts por mês

Mês inteiro de uma vez

Primeiras peças em até 5 dias úteis

Anúncios enviados em até 5 dias úteis

Lista, caixa de informação e tabela

Cabeçalho, rodapé e avisos

Seções

Perguntas frequentes

Lacunas

Pronto para o marketing parar de ficar para depois?