AB Studio DesignDocumentação visualVersão 1.0Novembro 2026

DesignSystem

A fonte visual do portfólio de Alan Bruno. Cores, tipografia, componentes e regras para construir uma landing page que coloca os trabalhos em primeiro plano e leva o visitante ao contato.

Azul-marinho#0B3C5D

Azul#328CC1

Amarelo#D9B310

Grafite#1D2731

Branco frio#F4F7F9

Visão geral e princípios

Um sistema discreto, para que o trabalho fale primeiro.

Este documento define a linguagem visual da landing page de portfólio do AB Studio Design. Cada decisão aqui tem um objetivo: apresentar quem é Alan Bruno, mostrar projetos com clareza e tornar o contato fácil de encontrar em qualquer tela.

Princípio 1

O trabalho em primeiro plano

A interface recua para que as imagens dos projetos avancem. Superfícies claras, molduras mínimas e muito espaço em volta de cada peça.

Princípio 2

Clareza editorial

Hierarquia por contraste de peso (Thin contra Black), não por excesso de cor. Textos curtos, frases diretas, uma ideia por bloco.

Princípio 3

Cor com intenção

Azul-marinho estrutura, azul conduz a interação, amarelo aponta. O amarelo aparece em detalhes, nunca como fundo de texto longo.

Princípio 4

Precisão no detalhe

Medidas em múltiplos de 4px, foco visível em todos os elementos, áreas de toque de 44px. O acabamento também é parte do portfólio.

Como usar este documento

Comece pelos tokens (cores, tipografia, espaço). Os componentes do capítulo 07 são montados apenas com eles; se um valor não existe aqui, ele não deve existir na página.

O motivo da diagonal

A haste do “A” na marca corre a 63° da horizontal. Essa inclinação vira o único recurso gráfico do sistema: marcadores, faixas de destaque e recortes de imagem usam o mesmo ângulo.

Conteúdo provisório

Textos e imagens que precisam ser substituídos aparecem com a etiqueta Substituir. Nenhuma informação biográfica, cliente ou resultado foi inventado.

Sobre a influência do Claude. O portfólio vai mostrar trabalhos feitos com o Claude, então o sistema toma emprestado o espírito da linguagem, não a aparência: leitura editorial, poucos elementos por tela e interação sem atrito. Paleta, tipografia, forma e marca são exclusivas do AB Studio Design.

Marca e regras de aplicação

A marca é fixa. O sistema se adapta a ela.

O monograma AB com a assinatura “STUDIO DESIGN” é usado exatamente como no arquivo original: mesmo desenho, mesmas proporções, cor preta. Esta seção define onde e como ele aparece.

Versão oficial#030404

Área de proteção

Proporção

1,28 : 1 (largura : altura). Sempre redimensionar proporcionalmente, travando a razão.

Área de proteção (x)

x = espessura do traço do “B” (≈ 12% da altura da marca). Manter no mínimo 1x livre em todos os lados; 2x quando a marca está isolada (capa, rodapé).

Arquivo-fonte

Vetor extraído de Alan Bruno Marca.pdf. Usar SVG na web; nunca redesenhar ou converter o texto em outra fonte.

Versões de cor

O arquivo fornecido define a marca em preto. As variações abaixo mantêm o desenho e apenas trocam o preenchimento sólido para garantir leitura sobre fundos escuros. Versões negativas aprovadas em novembro de 2026.

OriginalPreto #030404 sobre branco ou branco frio. Versão preferencial.

NegativoBranco frio #F4F7F9 sobre azul-marinho. Para rodapé, menu mobile e chamadas escuras.

Negativo em grafiteMesmo preenchimento branco frio sobre grafite #1D2731.

Variações de cor da marca

Todas as combinações possíveis com as cinco cores da paleta. O desenho nunca muda: só o preenchimento sólido e o fundo. Todas as oito versões foram aprovadas em novembro de 2026. Respeite a classificação de contraste de cada uma.

Livrecontraste ≥ 4,5:1 · qualquer tamanho a partir do mínimo ≥ 120pxcontraste entre 3 e 4,5:1 · só em tamanho grande, onde a frase “Studio Design” continua legível Não usarcontraste < 3:1, ou amarelo como fundo (regra da paleta)

Tamanhos mínimos

A assinatura “STUDIO DESIGN” ocupa cerca de 5% da altura da marca. Abaixo de 120px de altura ela deixa de ser lida e passa a funcionar como textura.

140px

Leitura completa · ≥ 120px de altura

Capa, seção Sobre, rodapé, materiais de apresentação.

48px40px

Uso reduzido · 40–56px

Cabeçalho. Nesse tamanho a marca vem acompanhada do nome “Alan Bruno” em texto, que garante a identificação.

32px

Limite absoluto · 32px

Ícone de aba, avatar em redes. Abaixo disso, não aplicar.

Usos incorretos

Qualquer alteração no desenho conta como redesenho da marca.

DistorcerNão esticar nem comprimir.

RotacionarA diagonal já está no desenho; não inclinar o conjunto.

RecolorirSem cores fora das versões aprovadas.

Aplicar efeitosSem sombra, brilho, contorno ou gradiente.

Baixo contrastePreto sobre tons médios perde leitura.

Fundo poluídoSobre imagens, usar uma área calma ou não aplicar.

Paleta e tokens de cor

Cinco cores, cinco papéis.

A paleta anexada é a base de tudo. As escalas tonais derivam dessas cinco cores e servem só para estados de interação, fundos sutis e texto acessível. Clique em qualquer código para copiar.

Primária

Azul-marinho

color.primary

Marca, navegação, botão principal, títulos de destaque e fundos de seção de impacto.

Secundária

Azul

color.secondary

Interação: anel de foco, estados ativos, ícones e grafismos. Para texto de link, usar blue.700.

Acento

Amarelo

color.accent

Pontual: diagonal-marcador, CTA de contato sobre fundo escuro, números do processo. Até 5% da tela.

Texto

Grafite

text.default · surface.ink

Texto principal sobre claros; fundo da chamada final e do rodapé.

Superfície

Branco frio

surface.default · text.inverse

Fundo da página e texto sobre fundos escuros. Cartões usam branco puro por cima.

Proporção de uso

Quanto de cada cor aparece numa tela típica da landing page.

60% · Branco frio + brancoFundos e respiro25% · Azul-marinhoEstrutura e ações10% · GrafiteTexto e rodapé5% · Azul + amareloInteração e acento

Escalas tonais

50–400 clareiam com branco; 600–900 escurecem. O ponto marca o valor original da paleta.

Tokens semânticos

Use sempre o token semântico no código. Os valores tonais ficam por trás dele.

Token	Valor	Uso
`color.primary`	#0B3C5D	Botão primário, marca, navegação ativa
`color.primary.hover`	#0A3350 · navy.600	Hover do primário
`color.primary.pressed`	#082A42 · navy.700	Clique / pressionado
`color.secondary`	#328CC1	Ícones interativos, indicadores, grafismos
`color.link`	#246187 · blue.700	Texto de link sobre fundos claros (contraste AA)
`color.link.visited`	#466B84 · navy.400	Link visitado (sublinhado pontilhado)
`color.accent`	#D9B310	CTA de contato, diagonal, números
`color.accent.hover`	#E2C549 · yellow.400	Hover do botão de acento
`text.default`	#1D2731	Títulos e corpo
`text.muted`	#56626E · neutral.500	Descrições, legendas, metadados
`text.inverse`	#F4F7F9	Texto sobre azul-marinho e grafite
`text.inverse.muted`	#A9BCCB	Texto secundário sobre fundos escuros
`surface.default`	#F4F7F9	Fundo da página
`surface.raised`	#FFFFFF	Hero, cartões, campos de formulário
`surface.sunken`	#E8EDF1 · neutral.100	Áreas recuadas, fundo de imagem carregando
`surface.brand`	#0B3C5D	Seção Processo, menu mobile
`surface.ink`	#1D2731	Chamada final, rodapé
`border.default`	#D5DDE3 · neutral.200	Divisores, contorno de cartões
`border.input`	#B3BEC7 · neutral.300	Borda de campos em repouso
`focus.ring`	#328CC1	Anel de foco em fundos claros
`focus.ring.inverse`	#D9B310	Anel de foco em fundos escuros

Cores de feedback

Derivadas para conviver com a paleta: tons frios e fechados, sem competir com o amarelo de acento. Sempre acompanhadas de ícone e texto.

Sucesso

Mensagem enviada, campo válido.

feedback.success #2F7D5B · bg #E6F2EC

Aviso

Informação que pede atenção, sem bloquear.

feedback.warning #94600E · bg #FBF1DF

Erro

Campo inválido, falha no envio.

feedback.error #B83A3A · bg #F9E7E6

Informação

Dicas e notas neutras.

feedback.info #2B76A4 · bg #EFF6FA

Regras do amarelo

É a cor que chama atenção. Por isso aparece pouco.

UseBotão de acento sobre grafite ou azul-marinho, com texto grafite.

UseDetalhes gráficos: a diagonal, sublinhado de hover, números do processo.

Lorem de bloco de texto pequeno em cima de um grande fundo amarelo, que cansa a leitura e rouba atenção dos projetos.

EviteAmarelo como fundo de blocos grandes com texto pequeno.

Texto amarelo no claro

EviteAmarelo como cor de texto sobre fundo claro (contraste 1,9:1).

Tipografia e hierarquia

Roboto, do Thin ao Black.

Uma família só, usada nos extremos. Títulos combinam Light com uma palavra em Black, ecoando o contraste entre a haste fina e os bojos pesados da marca. O corpo fica em Regular, com entrelinha generosa.

100

Thin — números e capítulos

Roboto-Thin

300

Light — títulos e textos de abertura

Roboto-Light

400

Regular — corpo de texto

Roboto-Regular

500

Medium — botões, rótulos, títulos de cartão

Roboto-Medium

700

Bold — ênfase pontual em texto

Roboto-Bold

900

Black — palavra-chave do título

Roboto-Black

Escala tipográfica

Valores para desktop / mobile. Entre os dois, o tamanho escala com clamp(). Tracking em em.

text.display

Título do hero. Uma vez por página.

Design que comunica

Tamanho: 88 / 44px
Peso: 300 + 900
Altura: 1.0 (100%)
Tracking: −0.035

text.h2

Títulos de seção.

Projetos selecionados

Tamanho: 56 / 32px
Peso: 300 + 900
Altura: 1.08
Tracking: −0.025

text.h3

Subtítulos, título de bloco.

Como eu trabalho

Tamanho: 32 / 26px
Peso: 400
Altura: 1.2
Tracking: −0.015

text.h4

Título de cartão e serviço.

Key visual de campanha

Tamanho: 22 / 20px
Peso: 500
Altura: 1.3
Tracking: −0.005

text.lead

Texto de abertura de seção e do hero.

Identidades, campanhas e interfaces pensadas do conceito ao último detalhe.

Tamanho: 20 / 18px
Peso: 300
Altura: 1.55
Largura: ≤ 48ch

text.body

Corpo de texto.

O texto corrido usa Regular com entrelinha de 1.65 e no máximo 65 caracteres por linha, para que a leitura seja confortável inclusive no celular.

Tamanho: 17 / 16px
Peso: 400
Altura: 1.65
Largura: ≤ 65ch

text.small

Descrição de cartão, rodapé.

Descrição curta do projeto em até duas linhas.

Tamanho: 15 / 15px
Peso: 400
Altura: 1.6
Cor: text.muted

text.caption

Legendas e metadados.

Legenda da imagem · formato 4:5

Tamanho: 13 / 13px
Peso: 400
Altura: 1.45
Cor: text.muted

text.overline

Sobretítulos e categorias.

Key visual · Social media

Tamanho: 12 / 12px
Peso: 500 · caixa alta
Altura: 1.4
Tracking: +0.14

text.number

Etapas do processo, capítulos.

01 02 03

Tamanho: 64 / 44px
Peso: 100
Altura: 1.0
Tracking: −0.04

text.button · text.nav

Botões e navegação.

Ver projetosProjetosMenu mobile

Botão: 15px · 500 · 1.0
Nav: 15px · 400
Menu mob.: 28px · 300
Tracking: +0.01

Fonte principal: Roboto

Arquivos fornecidos em /Fontes (Thin a Black, com itálicos). Na web, servir em WOFF2 com font-display: swap. Pilha: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif.

Inter como secundária Recomendação: não usar

Inter e Roboto são grotescas muito próximas; misturá-las não traz contraste visível, só peso extra de carregamento. A hierarquia já é resolvida pelos pesos extremos da Roboto. Se um dia for preciso um rótulo tabular, usar font-variant-numeric: tabular-nums na própria Roboto.

Legibilidade no celular

Corpo nunca abaixo de 16px. Títulos em Light só a partir de 28px; abaixo disso, subir para Regular. Thin apenas em números grandes (≥ 44px).

Grid, espaçamento e layout responsivo

Tudo cabe numa grade de 4px.

Uma unidade, três grids, quatro pontos de quebra. Espaços grandes entre seções, espaços curtos dentro dos componentes.

Escala de espaço

Unidade base 4px.

Grid responsivo

Conteúdo máximo de 1200px.

Mobile · 0–599px4 col · gap 16 · margem 20

Uma coluna de conteúdo. Cartões ocupam as 4 colunas.

Tablet · 600–1023px8 col · gap 20 · margem 32

Grade de projetos em 2 colunas; hero empilhado.

Desktop · 1024–1439px12 col · gap 24 · margem 64

Hero 7 + 5 colunas, grade de 3 projetos.

Wide · ≥ 1440px12 col · conteúdo 1200 centralizado

As margens crescem; o conteúdo para em 1200px.

Ritmo vertical

Espaços padrão entre blocos da landing page.

Token	Desktop	Mobile	Onde
`space.section`	112px · space.28	64px · space.16	Entre seções
`space.section-head`	56px · space.14	40px · space.10	Título da seção → conteúdo
`space.grid-row`	56px	40px	Entre linhas de cartões
`space.card`	16px · space.4	16px	Imagem → texto dentro do cartão
`space.stack`	24px · space.6	20px	Título → parágrafo → ações

Raios de borda

Os bojos do “B” inspiram curvas suaves e o botão em pílula. Imagens e cartões ficam discretos.

radius.xs · 2Anel de foco, marcadores

radius.sm · 4Etiquetas de código

radius.md · 8Campos, miniaturas

radius.card · 12Cartões e imagens de projeto

radius.pillBotões, chips, navegação

Bordas e sombras

Prefira borda a sombra. Sombras são tingidas de azul-marinho e reservadas a elementos que flutuam.

border.default · 1pxDivisores e cartões em repouso

shadow.smToggle, abas ativas

shadow.mdCabeçalho ao rolar, menus

shadow.lgMockups de dispositivo, modais

Imagens e proporções

Proporções pensadas para os tipos de trabalho do portfólio: key visuals, posts, motions e páginas.

16:9 · media.wideDestaque em largura total, motion, páginas web

4:3 · media.cardPadrão da grade de projetos

1:1 · media.squarePosts de redes sociais, miniaturas

4:5 · media.portraitHero, retrato, posts verticais

9:16 · media.storyStories e motions verticais

Recorte

object-fit: cover com ponto focal definido por projeto (object-position). Peças com texto (KVs, posts) usam contain sobre surface.sunken para não cortar a tipografia.

Arquivos

Menu, fechar, redes sociais. 44 × 44px, ícone de 20px, sempre com aria-label.

Padrão

Hover

Pressionado

Foco

Desabilitado

Tamanhos

Anatomia

Rótulo + ícone opcional à direita (setas) com gap de 10px. Padding horizontal 18 / 22 / 28px.

Tipografia

text.button: Roboto Medium 14–16px, tracking +0.01em, sem caixa alta.

Movimento

Cor em 200ms; seta desloca 3px no hover; 1px para baixo ao pressionar. Desligado com prefers-reduced-motion.

Mobile

Tamanho médio no mínimo. Em pilhas de CTA, o primário pode ocupar 100% da largura.

Links

Sempre sublinhados no texto corrido; a cor sozinha não basta para indicar um link.

Sobre fundo claro

PadrãoVer o processo

HoverVer o processo

FocoVer o processo

VisitadoVer o processo

Sobre azul-marinho

PadrãoVer o processo

HoverVer o processo

FocoVer o processo

VisitadoVer o processo

Padrão

color.link #246187, sublinhado 1px com 45% de opacidade, offset 3px.

Hover

Texto vai para azul-marinho; sublinhado engrossa para 2px em amarelo.

Foco

Anel de 2px focus.ring com 3px de afastamento.

Visitado

navy.400 #466B84 com sublinhado pontilhado (cor + forma).

Ícones

Traço de linha, desenhados para este sistema. Pontas retas, como os cortes da marca.

Grade: 24 × 24px, área útil de 20px (2px de respiro).
Traço: 1,75px, pontas retas (linecap: square), sem preenchimento.
Tamanhos: 16px em texto, 20px em botões, 24px em serviços.
Cor: herda currentColor. Ícone isolado sempre com rótulo acessível.
Redes sociais: versões simplificadas; para publicação final, conferir com as diretrizes de marca de cada rede.

Ícones de ferramentas

Indicam com que ferramentas cada trabalho foi feito. Desenho próprio do sistema: moldura com o corte diagonal de 63° da marca e a abreviação usada no mercado. Não são os logotipos oficiais.

Photoshop

Imagem e retoque

icon.tool.photoshop

Illustrator

Vetor e identidade

icon.tool.illustrator

After Effects

Motion e animação

icon.tool.aftereffects

Premiere Pro

Edição de vídeo

icon.tool.premiere

Claude

IA · ideação e código

icon.tool.claude

InDesign Confirmar uso

Diagramação

icon.tool.indesign

Lightroom Confirmar uso

Tratamento de foto

icon.tool.lightroom

Figma Confirmar uso

Interface e protótipo

icon.tool.figma

Selo · 64px

Fundo color.primary, letras text.inverse em Roboto Bold, corte com cunha color.accent. Para a seção de serviços e a página “Sobre”.

Linha · 16–24px

PhotoshopIllustratorAfter EffectsClaude

Chip com ícone de 16px + nome visível. Uso nos metadados do card de projeto.

Sobre fundo escuro

PhotoshopIllustratorAfter EffectsClaude

Borda em branco frio a 28%, ícone e texto em branco frio.

Grade: Mesma grade dos ícones de linha: 24 × 24px, traço 1,75px. Moldura de 18px com canto superior direito cortado a 63°.
Abreviação: Roboto Bold 9,6px no ícone de 24px; 23px no selo. Claude usa o brilho i-sparkle, o mesmo do selo “Criado com Claude”.
Acessibilidade: Sempre com o nome escrito ao lado ou aria-label com o nome completo (“Adobe Photoshop”). A abreviação sozinha não basta.
Logotipos oficiais: Se uma página precisar do logotipo oficial de um fabricante, usar o arquivo do kit de marca dele, sem redesenhar nem recolorir, e seguir as regras de uso de cada marca.
Lista: Photoshop, Illustrator, After Effects, Premiere Pro e Claude vêm do seu pedido. InDesign, Lightroom e Figma são sugestões; remova as que não usa.

Componentes da landing page

Peças prontas para montar a página.

Cada componente traz prévia ao vivo, anatomia, espaçamento, cores, tipografia, comportamento responsivo e estados. Os componentes reagem à largura do próprio container: a mesma peça aparece em versão desktop e mobile.

7.1

Cabeçalho

Marca, navegação e contato sempre à mão. Fixo no topo ao rolar.

Mobile · 375px

Anatomia: Marca (48px) + nome “Alan Bruno / Designer” · navegação com 4 âncoras · botão primário pequeno “Contato”. No mobile: marca + botão-ícone de menu.
Espaçamento: Altura 80px desktop / 64px mobile. Links com padding 10 × 14px e gap 4px. Margens laterais do grid.
Cores: surface.raised a 94% com desfoque; borda inferior border.subtle. Item ativo com traço amarelo de 2px.
Tipografia: text.nav 15px Regular; item ativo Medium em azul-marinho.
Responsivo: Navegação e botão aparecem a partir de 900px; abaixo disso, menu mobile (7.2).
Estados: Link: hover com fundo navy.50; ativo com aria-current. Ao rolar > 8px, ganha shadow.md.

7.2

Menu mobile

Painel em azul-marinho que desce sob o cabeçalho. Teste o botão no exemplo à direita.

Alan BrunoDesigner

Alan Bruno · Designer

[Título do hero] em destaque

Texto de abertura em até duas linhas.

Fechado

Alan BrunoDesigner

Alan Bruno · Designer

[Título do hero] em destaque

Aberto · toque no × para alternar

Anatomia: Lista de 4 links grandes com seta amarela · CTA de acento em largura total · linha de redes sociais.
Espaçamento: Padding 28 / 20 / 32px; links com 12px verticais (área ≥ 56px); gap de 28px entre grupos.
Cores: surface.brand, texto text.inverse, divisores border.inverse (16%).
Tipografia: Links em 28px Light; rótulo “Redes” em text.overline.
Comportamento: Botão alterna ☰ / × e aria-expanded. Abre em 240ms deslizando 8px; Esc fecha e devolve o foco ao botão; foco preso dentro do painel; rolagem da página travada.
Estados: Fechado (só cabeçalho) e aberto (painel). Link ativo com o texto em amarelo.

7.3

Hero

A primeira impressão: quem é, o que faz e o trabalho de maior destaque.

Anatomia: Sobretítulo com diagonal · título display (Light + Black) · texto de abertura · CTA primário + textual · imagem 4:5 do trabalho em destaque com legenda.
Espaçamento: Padding vertical 96/104px desktop, 48/56px mobile. Título → texto 24px; texto → ações 32px. Grid 7 + 5 colunas, gap 56px.
Cores: Fundo surface.raised; título grafite com palavra-chave em azul-marinho Black.
Tipografia: text.display 88→40px; text.lead 20→17px; legenda text.caption.
Responsivo: Abaixo de 900px empilha: texto primeiro, imagem depois. A altura segue o conteúdo, sem 100vh.
Conteúdo: Título e texto são provisórios. Substituir pela proposta de valor real e pela imagem do projeto escolhido.

7.4

Cartão de projeto

Imagem primeiro, texto curto depois. O cartão inteiro é o link.

Padrão

Imagem do projeto · 4:3

Key visual[Ano]

[Nome do projeto]

[Descrição curta do projeto em até duas linhas — substituir.]

Ver projeto

Com etiqueta “Criado com Claude”

Imagem do projeto · 4:3

Modelos de páginas[Ano]Criado com Claude

[Nome do projeto]

[Descrição curta do projeto em até duas linhas — substituir.]

Ver projeto

Anatomia: Imagem (media.card 4:3) · metadados (categoria · ano · etiqueta opcional) · título · descrição (máx. 2 linhas) · “Ver projeto ↗”.
Espaçamento: Gap interno 16px. Sem padding nem fundo: o cartão é a própria imagem com texto alinhado à borda dela.
Cores: Título grafite → azul-marinho no hover; descrição text.muted; chip padrão navy.50; chip IA em grafite com ícone amarelo.
Tipografia: Meta text.overline; título text.h4; descrição text.small; link 15px Medium.
Estados: Hover: imagem amplia 3% em 500ms, título muda de cor, seta sobe 2px. Foco: anel ao redor da imagem. Carregando: fundo surface.sunken.
Etiqueta IA: “Criado com Claude” só em projetos em que o Claude fez parte do processo. Ajuda o visitante a filtrar esse tipo de trabalho.

7.5

Grade de projetos

Quatro variações para diferentes quantidades e proporções de imagem. Todas usam o mesmo cartão.

A · Destaque + grade (home)

B · Grade uniforme 4:3

C · Proporções mistas (posts, stories, KVs)

D · Lista (arquivo completo)

A · Destaque: Primeiro projeto ocupa 2 × 2 colunas; todos em 4:3 (16:9 no tablet). Use 6 projetos na home para fechar as linhas.
B · Uniforme: 3 / 2 / 1 colunas. Todas as imagens em 4:3 recortadas com ponto focal.
C · Mistas: Colunas de alvenaria (CSS columns) que respeitam a proporção original: 1:1, 4:5, 9:16, 16:9. Para social media e motion.
D · Lista: Miniatura 1:1 + título + descrição + seta. Para mais de 12 projetos ou página de arquivo.
Espaçamento: Gap 56 × 32px desktop, 40 × 24px tablet/mobile.
Filtros (opcional): Chips de categoria acima da grade, com aria-pressed. Categorias sugeridas a partir das pastas: Key visual, Social media, Motion, Páginas.

7.6

Sobre

Espaço para a apresentação pessoal. Todo o conteúdo aqui é provisório.

Anatomia: Retrato 4:5 com faixa diagonal · sobretítulo · título H2 · texto de abertura · 1–2 parágrafos · fatos rápidos (3 itens) · link para currículo ou contato.
Espaçamento: Grid 5 + 7 colunas, gap 80px. Gap vertical do texto 20px.
Cores: Fundo surface.default; fundo do retrato navy.100 enquanto não há foto.
Responsivo: Mobile: retrato em cima, largura total. Fatos em 1–3 colunas automáticas.

7.7

Serviços e especialidades

Lista curta do que o estúdio entrega. Os itens abaixo partem dos tipos de trabalho presentes nas pastas do projeto e devem ser confirmados.

Anatomia: Ícone em quadro de 48px · título text.h4 20px · descrição de 1–2 linhas.
Espaçamento: Itens com padding 28 / 32px e divisor inferior; 3 / 2 / 1 colunas com gap de 48 / 32px.
Cores: Quadro do ícone em navy.50 com ícone azul-marinho. Sem cartões com sombra: a lista é editorial.
Estados: Estático. Se virar link, aplicar hover do cartão (título em azul-marinho + seta).

7.8

Etapas do processo

Sequência real de trabalho, por isso numerada. Nomes e descrições das etapas são provisórios.

Anatomia: Número Thin em amarelo · traço de 32px · título · descrição. 3 a 5 etapas.
Cores: Seção em surface.brand. Números em amarelo (5,7:1 sobre o azul-marinho).
Tipografia: Número text.number 64→44px; título 20px Medium; texto 14.5px.
Responsivo: Desktop: 5 colunas lado a lado. Mobile: lista vertical com número à esquerda (64px).

7.9

Depoimentos e resultados

Componente pronto, mas sem conteúdo: só entra na página quando houver depoimentos reais e autorizados.

Modelo de depoimento

[Depoimento real de cliente, com autorização para publicação. Até 3 linhas.]

Regras

Não publicar depoimentos, métricas ou logos de clientes sem autorização por escrito.
Sem conteúdo real, a seção sai da página. Não usar texto genérico.
Resultados numéricos só com fonte verificável (ex.: dado fornecido pelo cliente).
Máximo de 3 depoimentos; em mobile viram rolagem horizontal com scroll-snap.

Aguardando conteúdo

Tipografia: Citação 28→20px Light; aspas em Black amarelo 64px; autor 14px.
Cores: Cartão surface.raised. A borda tracejada só existe no modelo; na página final é sólida border.default.

7.10

Chamada final para contato

O último bloco antes do rodapé. Momento de maior contraste da página.

Anatomia: Título H2 grande (Light + Black amarelo) · frase curta · botão de acento · e-mail exibido como texto selecionável.
Cores: Fundo surface.ink com faixa diagonal em azul-marinho e fio amarelo a 63°. Único lugar com o botão de acento fora do menu.
Espaçamento: Padding vertical 120px desktop / 72px mobile.
Responsivo: Empilha abaixo de 900px; a faixa diagonal fica atrás do texto sem tocar nele.

7.11

Formulário de contato

Três campos, validação no envio e mensagem clara de sucesso.

Estados do campo

Vazio

Nome

Foco

Nome

Preenchido

Nome

Erro

E-mail

Digite um e-mail completo, como nome@empresa.com.

Válido

E-mail

Sucesso no envio

Mensagem enviada

Obrigado! Respondo em breve pelo e-mail informado.

Ao vivo · teste a validação

Anatomia: Rótulo visível (nunca só placeholder) · campo · ícone de estado · mensagem de ajuda/erro. Campos: Nome, E-mail, Mensagem; botão primário “Enviar mensagem”.
Medidas: Campo 52px de altura, padding 16px, raio 8px, borda 1,5px. Textarea mín. 132px. Gap entre campos 20px.
Cores: Repouso neutral.300; hover neutral.400; foco borda blue.500 + halo de 4px a 20%; erro feedback.error; válido feedback.success.
Tipografia: Rótulo 14px Medium; valor 16px Regular (evita zoom no iOS); ajuda 13px.
Validação: No envio e ao sair do campo depois do primeiro erro. Erro com ícone + texto + aria-invalid + aria-describedby. Foco vai para o primeiro campo inválido.
Envio: Botão mostra “Enviando…” e fica desabilitado; depois, o formulário é substituído pela mensagem de sucesso com role="status". Integração de envio a definir.

7.12

Rodapé

Marca, navegação repetida, redes e direitos.

Anatomia: Marca em negativo (branco frio) + frase curta · coluna Navegação · coluna Contato · ícones sociais · linha de direitos.
Cores: surface.ink; links text.inverse.muted → branco frio no hover; foco em amarelo.
Espaçamento: Padding 56 / 32px; colunas com gap 40px; links com 6px verticais (área ≥ 44px com o gap).
Responsivo: 4 colunas a partir de 800px; abaixo disso, empilhado na ordem marca → navegação → contato → redes.

Estados de interação e acessibilidade

Bonito também é fácil de usar.

Meta: WCAG 2.2 nível AA. Os contrastes abaixo são calculados ao vivo a partir dos valores dos tokens.

Contraste das combinações do sistema

AA exige 4,5:1 para texto normal e 3:1 para texto grande (≥ 24px, ou ≥ 19px em negrito) e elementos gráficos.

Combinação	Uso	Razão	Resultado

Foco visível

Sempre :focus-visible; nunca remover o contorno sem substituí-lo.

LinkAnel 2px focus.ring #328CC1, afastamento 3px. Use Tab para testar.

LinkAnel 2px focus.ring.inverse #D9B310 em fundos escuros.

Áreas de toque

Mínimo de 44 × 44px para tudo que é clicável. Espaço de 8px entre alvos vizinhos.

44 · mínimo

48 · botão médio

56 · link do menu mobile

Matriz de estados

Como cada estado aparece em todos os componentes interativos.

Estado	Sinal visual	Duração	Requisito
Padrão	Cor do token base	—	Parecer clicável sem hover (sublinhado, borda ou fundo)
Hover	Tom 600 / fundo 50 / sublinhado amarelo	200ms	Só reforço; nada essencial depende do hover
Foco	Anel 2px + 3px de afastamento	Imediato	Visível em claro e escuro; ordem segue a leitura
Pressionado	Tom 700 + desloca 1px	100ms	—
Visitado	navy.400 + pontilhado	—	Só links de texto
Desabilitado	Fundo neutral.100, texto neutral.400	—	Atributo `disabled`; explicar o motivo perto
Erro	Borda + ícone + texto em feedback.error	—	Nunca só cor; `aria-invalid` e mensagem ligada
Sucesso	Ícone + texto em feedback.success	—	`role="status"` para leitores de tela

Composição da página · desktop e mobile

A landing page, montada.

Proposta de layout usando somente os componentes documentados. A mesma marcação se adapta ao desktop (1440px, reduzido para caber) e ao celular (375px, role dentro do aparelho).

Mostrar grid de colunas Textos e imagens provisórios

alanbruno · portfólio

Desktop · 1440px

Mobile · 375px · role dentro do aparelho

Ordem das seções

Cabeçalhofixo, com contato sempre visível
Heroproposta + trabalho em destaque
Projetos selecionadosgrade A, 6 projetos
Serviçosaté 6 especialidades
Processofaixa azul-marinho
Sobreretrato + apresentação
Contatochamada final + formulário
Rodapé

Caminhos até o contato

Quatro pontos de acesso: botão no cabeçalho, CTA secundário do hero, chamada final e e-mail no rodapé. Em nenhum momento o visitante precisa rolar de volta para encontrar como falar com Alan.

Ritmo de cor

Claro → claro → branco → azul-marinho → claro → grafite. Os dois blocos escuros marcam o “como” (processo) e o “agora” (contato), e quebram a leitura em capítulos.

Mobile primeiro

No celular, o hero cabe numa tela com o CTA visível; os projetos aparecem já na segunda rolagem. Menu de 4 itens + CTA, nada escondido em submenus.

Tokens para implementação

Copie e comece.

Os mesmos valores deste documento, prontos para colar no projeto como variáveis CSS ou JSON (formato compatível com Style Dictionary e Figma Tokens).

tokens.css

DesignSystem

Um sistema discreto, para que o trabalho fale primeiro.

O trabalho em primeiro plano

Clareza editorial

Cor com intenção

Precisão no detalhe

Como usar este documento

O motivo da diagonal

Conteúdo provisório

A marca é fixa. O sistema se adapta a ela.

Versões de cor

Variações de cor da marca

Tamanhos mínimos

Leitura completa · ≥ 120px de altura

Uso reduzido · 40–56px

Limite absoluto · 32px

Usos incorretos

Cinco cores, cinco papéis.

Azul-marinho

Azul

Amarelo

Grafite

Branco frio

Proporção de uso

Escalas tonais

Tokens semânticos

Cores de feedback

Regras do amarelo

Roboto, do Thin ao Black.

Escala tipográfica

Fonte principal: Roboto

Inter como secundária Recomendação: não usar

Legibilidade no celular

Tudo cabe numa grade de 4px.

Escala de espaço

Grid responsivo

Ritmo vertical

Raios de borda

Bordas e sombras

Imagens e proporções

Ações com peso certo.

Primário

Acento

Secundário

Textual

Ícone

Links

Ícones

Ícones de ferramentas

Photoshop

Illustrator

After Effects

Premiere Pro

Claude

InDesign Confirmar uso

Lightroom Confirmar uso

Figma Confirmar uso

Peças prontas para montar a página.

[Nome do projeto]

[Nome do projeto]

Bonito também é fácil de usar.

Contraste das combinações do sistema

Foco visível

Áreas de toque

Matriz de estados

Teclado

Leitores de tela

Movimento

Leitura

A landing page, montada.

Ordem das seções

Caminhos até o contato

Ritmo de cor

Mobile primeiro

Copie e comece.

Design que transforma ideias em marcas memoráveis.

Projetos selecionados

[Nome do projeto]

[Nome do projeto]

[Nome do projeto]