Lente.
Le tableau d'optométrie devenu page web : hero en lignes de Snellen avec 20/40 sur le côté, bande duochrome rouge/vert, réticules de lentille et montures au trait fin. Clinique et précis, avec de l'humour.
- Type
- Landing page
- Thème
- Clair
- Titres
- Gabarito
- Texte
- Mulish
PourAdultes de 25 à 65 ans qui ont besoin d'un examen de la vue ou de nouvelles lunettes ; commerces de quartier et cliniques avec examen sur place
Sections de la page01/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.
Extrait du DESIGN.md, en portugais pour l'instant.
PourAdultes de 25 à 65 ans qui ont besoin d'un examen de la vue ou de nouvelles lunettes ; commerces de quartier et cliniques avec examen sur place
Palette
Les quatre couleurs qui définissent le design et toutes les variables de tokens.css. Cliquez pour copier.
Typographie
Gabarito pour les titres, Mulish pour le texte.
TitresGabarito
Aag!
Lente en une ligne
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TexteMulish
La police de lecture porte les longs paragraphes sans fatiguer.
Texte courant, boutons, formulaires et légendes. Les titres prennent la police d'affichage ; celle-ci fait le quotidien de la page.
0123456789 · 1 234,56 € · 25/09 à 19h30
Pour qui
Ce que l'IA compare avec le client pour choisir le design.
- opticien avec examen sur place
- marque qui veut paraître technique sans être froide
- rouge ou vert dans la marque
- catalogue de produits par forme
- opticien de luxe ou de créateur (préférer quelque chose de plus éditorial)
- clinique qui veut un ton sobre et calme
- marque aux tons pastel ou terreux
- activité sans rapport avec la vue (le concept perd son sens)
Ton
Ce qui fait Lente
Les signatures du DESIGN.md : ce qui ne doit pas manquer à l'application.Extrait du DESIGN.md, en portugais pour l'instant.
- 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.
Règles du jeu
Directement du DESIGN.md.Extrait du DESIGN.md, en portugais pour l'instant.
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.
Deux fichiers.
Un prompt.
Lente devient le design system de votre agent de code : il construit n'importe quel écran avec ce style, pas seulement la landing d'exemple.
Prompt pour l'agent Utiliser avec l'IA
Lis le DESIGN.md à la racine du projet et suis ses règles sur chaque écran. Importe sistema.css une seule fois au point d'entrée du projet et utilise ses classes et tokens au lieu de créer de nouveaux styles. Avant chaque changement d'interface, relis le DESIGN.md.
- 01Téléchargez les deux fichiersDESIGN.md (les règles visuelles) et sistema.css (tokens, composants et signatures du design).
- 02Ajoutez-les au projetDESIGN.md à la racine. sistema.css importé une fois au point d'entrée : fonctionne avec React, Vue, Svelte, HTML ou WordPress.
- 03Collez le prompt dans votre agentIl lit les règles et construit n'importe quel écran (connexion, tarifs, dashboard) avec le style du design.
- 04Fixez la règleMettez le prompt dans les règles du projet de l'agent pour que chaque nouvel écran suive les mêmes couleurs, polices et espacements.
Similaires
Des landings qui partagent un ton ou un secteur avec Lente.
