Letters
Un rendez-vous matinal dans une clinique à ciel ouvert — une table blanche stérile sous un plafond bleu clair, jonchée d'instruments chirurgicaux bleus
Letters est un outil de rédaction de courriers médicaux qui s'ouvre sur un en-tête bleu ciel dégradé – une douce bande bleue atmosphérique créant une ambiance calme et clinique – avant de laisser place à un espace de travail blanc épuré. Le système est conçu dans un style monochrome: une toile blanche immaculée, un texte presque noir (#070709), des boutons d'appel à l'action sombres en forme de pilule et des cartes arrondies flottant dans une ombre subtile. Un bleu vif unique (#2597d0) est réservé à la ponctuation fonctionnelle – icônes, micrographiques, lecteurs de formes d'onde – et n'est jamais utilisé pour les boutons ou les grands aplats de couleur. La typographie utilise Open Runde, une police sans empattement humaniste géométrique avec un espacement négatif important entre les lettres sur les grands écrans (-0,04 em à 80 px), ce qui condense les en-têtes en blocs affirmés. Les composants donnent une impression de légèreté, à l'image d'un instrument médical: bordures fines, espacement généreux entre les cartes, boutons en forme de pilule et une utilisation discrète du relief qui laisse l'en-tête bleu ciel exprimer toute sa puissance émotionnelle.
Une page d'accueil bleu ciel dégradée s'étend sur toute la largeur, avec un titre et un sous-titre centrés, et un bouton d'appel à l'action juste en dessous. Elle se fond harmonieusement dans une zone de contenu blanche, avec un espacement généreux entre les sections (80-120 px). Les sections de présentation utilisent une grille à deux colonnes de grandes cartes arrondies (rayon de 18-32 px) de proportions égales. Les titres de section sont toujours centrés, dans une seule colonne, au-dessus de la grille de cartes. La navigation est assurée par une barre supérieure blanche fixe avec un groupe de liens centré et des boutons de connexion alignés à droite. Le rythme général est une bande principale unique et atmosphérique, puis des sections blanches et #f5f5f5 alternées avec un espacement vertical régulier. Il n'y a pas de barre latérale, pas de méga-menu, pas de mises en page asymétriques: la page donne l'impression d'une colonne symétrique et apaisante.
Le design visuel est presque entièrement axé sur l'interface utilisateur du produit: pas de photos lifestyle, pas de rendus 3D abstraits. Le langage visuel s'articule autour de fiches produits présentant l'interface native de l'application: une comparaison « Avant»/« Après» de documents, une zone de chargement à bordure pointillée et un lecteur audio sous forme de courbe. Le seul élément visuel d'ambiance est le dégradé du ciel dans l'image principale. Les icônes sont des icônes plates, monochromes (#2597d0) (enveloppe, microphone, coche) avec des traits d'épaisseur uniforme, sans variations de remplissage. Le style d'illustration est sobre: les maquettes du produit sont affichées sur fond blanc, légèrement pivotées pour créer de la profondeur, jamais inclinées de façon marquée. Une police manuscrite (The Doctor) est le seul élément organique/artisanal, utilisé uniquement pour évoquer l'écriture clinique de la fiche « Avant».
Palette
Marque
- Surgical Blue
#2597d0— Des icônes, une icône de microphone, un lecteur d'ondes sonores et de petits éléments fonctionnels créent une seule et même note chromatique dans toute l'interface.
Neutre
- Obsidian
#070709— Le texte principal, les boutons d'appel à l'action remplis et les éléments d'interface utilisateur sombres (un noir presque pur a été choisi au lieu du #000 pur pour adoucir le contraste avec le fond blanc) sont présentés dans un style proche du noir. - Paper White
#ffffff— L'arrière-plan de la page, les surfaces des cartes et le texte des boutons constituent le canevas principal pour toutes les sections situées sous l'élément principal. - Cloud Gray
#f5f5f5— Des surfaces de cartes supplémentaires et des arrière-plans de section séparent les blocs fonctionnels de la toile principale. - Sky Tint
#d7e6f5— La teinte du cadre en carton et la nuance de bleu à peine perceptible de la surface créent une atmosphère particulière, plutôt qu'une impression de grisaille. - Charcoal
#60606c— Texte principal, texte secondaire et bordures discrètes: une couleur neutre dominante pour le contenu autre que les titres. - Slate
#8b8b8b— Texte mineur et états frontières inactifs - utilisés pour indiquer les emplacements et garantir l'accessibilité aux personnes handicapées.
Typographie
de 12 à 80 px · 8 étapes
- sans-serif — remplacement: Inter · grandes lignes 400, 700 · sans-serif - trouvé dans les données extraites mais non décrit par l'IA.
- Open Runde — remplacement: Inter Tight · grandes lignes 400, 500, 600, 700, 900 · La police principale pour les titres et la navigation est une police humaniste géométrique, avec un espacement réduit entre les lettres pour les grandes tailles; -0,04 em à 80 px condense le titre en un seul bloc distinct. À utiliser pour tous les titres, la navigation et les textes de grande taille.
- Inter — remplacement: system-ui · grandes lignes 400, 500 · Texte secondaire et texte d'interface utilisateur: utilisé pour les petits titres, les éléments de navigation et les liens intégrés, lorsqu'un rythme de lecture plus neutre est souhaité. À utiliser avec Open Runde pour créer un contraste hiérarchique.
Intervalles et forme
| But | Signification |
|---|---|
| Densité | dense |
| Étape de base | 12-16px |
| Rayon du bouton | 100px |
| Rayon de la carte | 18px |
| Ombres | non - des bordures à la place des ombres |
| Entre les sections | 80-120px |
| Largeur de la page | 1200px |
L'IA construira votre site web dans le style Letters et le remplira.
- Partagez vos produits et publications via le lien - Instagram, TikTok, Facebook.
- Transférez le contenu de votre ancien site: il vous suffit de préciser l’adresse.
- Conception moderne sur le meilleur moteur: React ( Next.js) avec rendu côté serveur et optimisation SEO intégrée.
- Optimisation SEO entièrement automatisée pour les résultats de recherche et recommandations de réseaux neuronaux.
Styles similaires
- Integrated Biosciences — laboratoire de bioluminescence à minuit
- Mintlify — Un jardin de nuages au-dessus d'une table en verre. Le ciel dessiné à la main et le documentaire sont encadrés ensemble – le seul endroit où la couleur et le concept se rencontrent avant que la page ne s'estompe dans un blanc monastique.
- Gleap — Un espace de travail décoré dans des tons crème chauds avec des touches de graphite — un studio où des points d'encre noire mate semblent flotter au-dessus de l'architecture en lin.
- Render — Le design est réalisé sur de l'aluminium brossé. L'interface évoque un document technique épuré et géométrique: espaces blancs, lignes fines et une simple ligne violette qui attire l'attention sur l'action.
- Grafbase — dessin technique sur marbre froid
- Slash — Chambre forte de minuit avec des livres de comptes dorés
- Modal — Un terminal phosphorescent dans une salle serveur plongée dans l'obscurité - la seule source de lumière est d'un vert éclatant
- Whimsical — Encre prune intense sur fond lavande — un carnet de notes pour atelier créatif qui fait également office de tableau technique.
- AgentQL — Aurores boréales au-dessus du terminal la nuit
- Alveos One — Un refuge douillet fait de galets – une salle de méditation calme et éclairée d'une douce lumière ambrée, où repose un unique objet en graphite.
- GitHub — Un panneau de commande spatial doté de points de contrôle bioluminescents — un espace de travail sombre et atmosphérique où une unique lueur verte indique la voie à suivre.
- Buddy — Dessin technique sur papier millimétré. La surface blanche est quadrillée, à peine visible, à l'encre presque noire, avec des marques vert citron fluorescent et des traits aux dégradés irisés.