Lente.
La tabla del examen de la vista convertida en página: hero en líneas de Snellen con 20/40 al costado, franja duocromo rojo/verde, retículas de lente y monturas en trazo fino. Clínico y preciso, con humor.
- Tipo
- Landing page
- Tema
- Claro
- Títulos
- Gabarito
- Texto
- Mulish
ParaAdultos de 25 a 65 años que necesitan examen o anteojos nuevos; comercios de barrio y clínicas con examen en el local
Secciones de la 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.
Del DESIGN.md, que por ahora está en portugués.
ParaAdultos de 25 a 65 años que necesitan examen o anteojos nuevos; comercios de barrio y clínicas con examen en el local
Paleta
Los cuatro colores que definen el diseño y todas las variables de tokens.css. Haz clic para copiar.
Tipografía
Gabarito en los títulos, Mulish en el texto.
TítulosGabarito
Aag!
Lente en una línea
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TextoMulish
La fuente de lectura sostiene párrafos largos sin cansar.
Texto corrido, botones, formularios y leyendas. Los títulos usan la fuente destacada; esta es la del día a día.
0123456789 · $1.234,56 · 25/09 a las 19:30
Para quién es
Lo que la IA compara con el cliente para elegir el diseño.
- óptica con examen en el local
- marca que quiere parecer técnica sin ser fría
- rojo o verde en la marca
- catálogo de productos por forma
- óptica de lujo o de diseñador (usar algo más editorial)
- clínica que busca un tono sobrio y calmo
- marca en tonos pastel o terrosos
- negocio sin relación con la visión (el concepto pierde sentido)
Tono
Lo que lo hace Lente
Las firmas del DESIGN.md: lo que no puede faltar al aplicarlo.Del DESIGN.md, que por ahora está en portugués.
- 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.
Reglas del juego
Directo del DESIGN.md.Del DESIGN.md, que por ahora está en portugués.
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.
Dos archivos.
Un prompt.
Lente se vuelve el sistema de tu agente de código: arma cualquier pantalla con este estilo, no solo la landing de ejemplo.
Prompt para el agente Usar con IA
Lee el DESIGN.md en la raíz del proyecto y sigue sus reglas en cada pantalla. Importa sistema.css una sola vez en el punto de entrada del proyecto y usa sus clases y tokens en lugar de crear estilos nuevos. Antes de cada cambio de interfaz, vuelve a leer el DESIGN.md.
- 01Descarga los dos archivosDESIGN.md (las reglas visuales) y sistema.css (tokens, componentes y las firmas del diseño).
- 02Ponlos en el proyectoDESIGN.md en la raíz. sistema.css importado una vez en el punto de entrada: funciona en React, Vue, Svelte, HTML o WordPress.
- 03Pega el prompt en tu agenteLee las reglas y arma cualquier pantalla (login, precios, panel) con el estilo del diseño.
- 04Deja la regla fijaPon el prompt en las reglas del proyecto del agente para que cada pantalla nueva siga los mismos colores, fuentes y espaciados.
Similares
Landings con tono o nicho en común con Lente.
