Lente.
Tabela de exame de vista virou página: hero em linhas de Snellen com 20/40 na lateral, faixa duocromo vermelho/verde, retículas de lente e armações em traço fino. Clínico e preciso, com humor.
- Tipo
- Landing page
- Tema
- Claro
- Títulos
- Gabarito
- Texto
- Mulish
ParaAdultos 25-65 que precisam de exame ou óculos novos; comércio de bairro e clínicas com exame no local
Seções da página01/09nav
A tabela de exame de vista (Snellen) virou página. Clínico e preciso como um consultório, mas com humor: a última linha da tabela é uma piada. Não é clínica fria nem ótica de grife.
ParaAdultos 25-65 que precisam de exame ou óculos novos; comércio de bairro e clínicas com exame no local
Paleta
As quatro cores que definem o design e todas as variáveis do tokens.css. Clique para copiar.
Tipografia
Gabarito nos títulos, Mulish no texto.
TítulosGabarito
Aag!
Lente em uma linha
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TextoMulish
A fonte de leitura carrega parágrafos longos sem cansar.
Texto corrido, botões, formulários e legendas. Os títulos ficam com a fonte de destaque; aqui é o dia a dia da página.
0123456789 · R$ 1.234,56 · 25/09 às 19h30
Para quem serve
O que a skill /escolher-design compara com o cliente.
- ótica com exame no local
- marca que quer parecer técnica sem ser fria
- vermelho ou verde na marca
- catálogo de produtos por formato
- ótica de luxo/grife (usar algo mais editorial)
- clínica que quer tom sóbrio e calmo
- marca em tons pastel ou terrosos
- negócio sem relação com visão (o conceito perde o sentido)
Tom
O que faz ser Lente
As assinaturas do DESIGN.md: o que não pode faltar ao aplicar.
- 01
Hero tabela de Snellen: a mensagem em linhas que diminuem, número da linha à esquerda e fração (20/200 … 20/20) à direita; linha vermelha abaixo de 20/40 e verde abaixo de 20/20. As linhas de baixo ficam borradas e entram em foco no hover/toque (
lente-borra); ao carregar, o foco "ajusta" uma vez. A caixa tem sombra dura preta deslocada. - 02
Faixa duocromo: metade vermelha, metade verde, letra preta, com uma mira no encontro.
- 03
Retículas e círculos concêntricos (
Mira) na marca, no hero e na chamada final. - 04
Armações em SVG de traço fino (redonda, gatinho, quadrada, aviador) com marcas de corte nos cantos do cartão; o vidro acende em vermelho no hover. Cada uma aponta o formato de rosto.
- 05
Diagramas de lente numerados como figura (
fig. 3.1), no mesmo círculo. - 06
Foco/desfoque só com CSS:
lente-foco(hover),lente-foca(entra em foco ao rolar) e frações do "como funciona" que ficam nítidas de 20/60 para 20/20. - 07
Rótulo de seção: mira pequena + número + traço + texto mono em caixa alta.
- 08
Dúvidas com um "E" de optotipo que gira 90° ao abrir.
Regras do jogo
Direto do DESIGN.md.
Identidade
- Fundo branco quase puro
#fcfcfa; cartões em branco#ffffff; blocos alternados em#f1f1ec. - Texto preto-tinta
#0e0e13; secundário#5b5b66. - Primária vermelho do duocromo
#d6212b: botões, linha 20/40, ponto central da mira. - Destaque verde do duocromo
#0f7f43: linha 20/20, ícones de rosto, marcadores "indicado para". - Metades do duocromo (
--lente-verm #e5484d,--lente-verde #3fb36b): só em faixas com letra preta. - Fontes: Gabarito extra-negrito para títulos e letras de optotipo (caixa alta,
tracking-[0.18em]); Mulish para texto; JetBrains Mono para numeração, frações e códigos.
Regras
- Grid rigoroso de 12 colunas (as guias aparecem de leve no hero), largura
max-w-6xl, muito respiro. - Cantos quase retos nos cartões (
rounded-d-lg= 0,5rem); botões em pílula (lente). - Vermelho e verde nunca juntos em texto: juntos só como as duas metades do duocromo.
- Borrão só como piada visual ou efeito de foco; texto essencial (preço, telefone, aviso) sempre nítido.
- Animações próprias param em
prefers-reduced-motion. - Máximo de 2 botões por bloco; verbos de ação ("Marcar exame").
Adaptar à marca do cliente
- Marca com vermelho: troque
--d-primarypelo vermelho dela. Com verde: troque--d-accent. - Marca azul ou de outra cor: use como
--d-primarye mantenha as metades do duocromo como estão (são o teste, não a marca). - Relojoaria ou marca de armações sem exame: troque a faixa de serviços por coleções e a tabela por um bordão da marca; retire rodapé de responsável técnico.
Dois arquivos.
Um prompt.
O Lente vira o sistema do seu agente de código: ele monta qualquer tela com esta cara, não só a landing de exemplo.
Prompt para o agente
Leia o DESIGN.md na raiz do projeto e siga as regras dele em toda tela. Importe o sistema.css uma única vez no ponto de entrada do projeto e use as classes e tokens dele em vez de criar estilos novos. Antes de cada mudança de interface, releia o DESIGN.md.
- 01Baixe os dois arquivosDESIGN.md (as regras visuais) e sistema.css (tokens, componentes e as assinaturas do design).
- 02Coloque no projetoDESIGN.md na raiz. O sistema.css importado uma vez no ponto de entrada: funciona em React, Vue, Svelte, HTML ou WordPress.
- 03Cole o prompt no seu agenteEle lê as regras e passa a montar qualquer tela (login, preços, painel) com a cara do design.
- 04Deixe a regra fixaColoque o prompt nas regras do projeto do agente para toda tela nova seguir as mesmas cores, fontes e espaçamentos.
Parecidos
Landings com tom ou nicho em comum com Lente.