Lente.
An eye chart turned into a web page: hero in Snellen lines with 20/40 on the side, a red/green duochrome strip, lens reticles and thin-line frames. Clinical and precise, with a sense of humor.
- Type
- Landing page
- Theme
- Light
- Headings
- Gabarito
- Body
- Mulish
ForAdults 25-65 who need an eye exam or new glasses; neighborhood shops and clinics with on-site exams
Page sections01/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.
From DESIGN.md, which is in Portuguese for now.
ForAdults 25-65 who need an eye exam or new glasses; neighborhood shops and clinics with on-site exams
Palette
The four colors that define the design and every variable in tokens.css. Click to copy.
Typography
Gabarito for headings, Mulish for body text.
HeadingsGabarito
Aag!
Lente in one line
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
BodyMulish
The reading font carries long paragraphs without tiring the eye.
Running text, buttons, forms and captions. Headings get the display font; this is the page's everyday voice.
0123456789 · $1,234.56 · Sep 25, 7:30 PM
Who it's for
What the AI compares with your client to pick the design.
- optical shop with on-site exams
- brand that wants to look technical without being cold
- red or green in the brand
- product catalog by frame shape
- luxury/designer optician (use something more editorial)
- clinic that wants a calm, sober tone
- brand in pastel or earthy tones
- business unrelated to vision (the concept loses its meaning)
Tone
What makes it Lente
The signatures from DESIGN.md: what must be there when you apply it.From DESIGN.md, which is in Portuguese for now.
- 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.
House rules
Straight from DESIGN.md.From DESIGN.md, which is in Portuguese for now.
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.
Two files.
One prompt.
Lente becomes your coding agent's design system: it builds any screen with this look, not just the sample landing.
Prompt for the agent Use with AI
Read the DESIGN.md at the project root and follow its rules on every screen. Import sistema.css once at the project's entry point and use its classes and tokens instead of creating new styles. Before every UI change, reread DESIGN.md.
- 01Download the two filesDESIGN.md (the visual rules) and sistema.css (tokens, components and the design's signatures).
- 02Add them to the projectDESIGN.md at the root. sistema.css imported once at the entry point: works with React, Vue, Svelte, HTML or WordPress.
- 03Paste the prompt into your agentIt reads the rules and builds any screen (login, pricing, dashboard) with the design's look.
- 04Make the rule stickPut the prompt in your agent's project rules so every new screen follows the same colors, fonts and spacing.
Similar
Landings that share a tone or niche with Lente.
