[ Princípios ]

Cor é função,
não decoração.

Inspirado em Dieter Rams: bom design é o mínimo de design possível. A base é achromática e quente; o acento de sinal aparece sozinho, raramente, só em controles operacionais — a raridade é o que dá força ao sinal.

[ Cor ]

Tokens

Regra do acento

O Signal Red sinaliza ação ou alerta. Aparece isolado, num único ponto por vez — nunca como enfeite. No site, vive no hover dos links; nos carrosséis, marca o que evitar, sempre junto de um ícone.

[ Tipografia ]

Escala Aeonik

Display · 700

Heading · 500

Corpo · 400 — o texto longo do portfólio usa Aeonik Regular com bastante respiro.

Meta · 500 uppercase · tracking 0.14em

[ Grid · Espaço · Motion ]

Estrutura

Animações respeitam prefers-reduced-motion.

[ Componentes ]

Catálogo

Chamada do menu

Menu de navegação

Vamos conversar

Etiqueta

Cases, artigos e datas

UX · AcessibilidadeWebApp · Dev c/ IA

Ficha com sombra sólida

Capas dos artigos e slides dos carrosséis

Creeta Saúde Respiratória

Sitecreeta.com.br
Telefone(48) 3234-9919

Pílula

Pontos do Duplo Diamante e botões das fichas

O problema certoRotas

Barra de progresso

Carrossel dos artigos: mostra quanto falta rolar

Botão em contorno

Download do resumo em PDF

Baixar o resumo em PDF

Bloco de chamada

Fim de cada artigo

Quer um site que trabalhe por você?

WhatsApp (abre em nova aba)Como eu trabalho

Anterior e próximo

Fim de cada artigo

AnteriorTítulo do artigoTemaPróximoTítulo do artigoTema

Link externo

Projeto citado em texto: seta para quem vê, aviso para leitor de tela

leandroboeira.com (abre em nova aba)

Duplo Diamante

Home e página de processo; deitado em tela larga, em pé no celular

O processo no Duplo DiamanteDois diamantes em sequência. No primeiro, entender e analisar, depois decidir o que fazer: vai da sua dor ao problema certo. No segundo, protótipo navegável, depois testar e ajustar: vai do problema certo ao site no ar. Em volta de cada diamante, um contorno tracejado maior mostra o que a IA amplia.DESCOBRIREntendere analisarDEFINIRDecidiro que fazerDESENVOLVERProtótiponavegávelENTREGARTestare ajustarSua dorO problema certoSite no arO processo no Duplo DiamanteDois diamantes em sequência. No primeiro, entender e analisar, depois decidir o que fazer: vai da sua dor ao problema certo. No segundo, protótipo navegável, depois testar e ajustar: vai do problema certo ao site no ar. Em volta de cada diamante, um contorno tracejado maior mostra o que a IA amplia.DESCOBRIREntender e analisarDEFINIRDecidir o que fazerDESENVOLVERProtótipo navegávelENTREGARTestar e ajustarSua dorO problema certoSite no ar

O Duplo Diamante de sempre: abrir, escolher, abrir de novo, entregar.

O que a IA amplia: mais caminhos explorados e testados no mesmo prazo.

[ Conteúdo ]

Kit do artigo

O sistema não para no site. Cada artigo sai com três peças no mesmo desenho, geradas a partir de um arquivo só: o que vai para o Instagram é o mesmo que aparece na página.

Capa animada

1600 × 900 · vídeo em loop de 8 s

A imagem estática é a versão de busca e de compartilhamento; o vídeo entra por cima e não toca com movimento reduzido.

Slide de carrossel

1080 × 1350 · nada abaixo de 24 px

Um assunto por slide. Cada slide tem texto alternativo na página.

PDF

Resumo em PDF

Um slide por página

Texto de verdade, selecionável e marcado para leitor de tela.

[ Acessibilidade ]

Contraste & foco

ParTokensRatioWCAG

Todo elemento focável tem anel de foco visível (Tab para ver).

Em fundo escuro o anel de foco é claro, pra não sumir.