Letters
Una cita matinal en una clínica a l'aire lliure: una taula blanca estèril sota un sostre blau suau, plena d'instruments quirúrgics blaus
Letters és una eina d'escriptura de cartes mèdiques que comença amb una capçalera de cel obert amb gradient —una franja blava suau i atmosfèrica que crea una atmosfera tranquil·la i clínica— abans de passar a un espai de treball blanc i net. El sistema està dissenyat en un estil monocrom: un llenç blanc net, text gairebé negre (#070709), crides a l'acció fosques en forma de píndola i targetes arrodonides que suren sobre les ombres més subtils. Un únic blau brillant (#2597d0) es reserva per a la puntuació funcional —icones, microgràfics, reproductors de formes d'ona—, mai utilitzada per a botons o farciments grans. La tipografia utilitza Open Runde, una sans-serif humanista geomètrica amb un espaiat negatiu agressiu entre lletres a mides de pantalla més grans (-0,04em a 80px), que comprimeix les capçaleres en blocs segurs. Els components es senten lleugers, com un instrument mèdic: bisells prims, espaiat generós entre targetes, botons en forma de píndola i un ús discret de l'elevació que permet que la capçalera en forma de cel faci el treball emocional.
Una pàgina d'inici amb un degradat blau cel abasta tota l'amplada de la pàgina, amb un títol i un subtext centrats, i un botó de crida a l'acció a sota. Fa una transició suau cap a una àrea de contingut blanca amb un espai generós entre les seccions (80-120 px). Les seccions destacades utilitzen una quadrícula de dues columnes de targetes grans i arrodonides (radi de 18-32 px) de proporcions iguals. Els encapçalaments de secció sempre estan centrats, en una sola columna, a sobre de la quadrícula de les targetes. La navegació és una barra superior blanca fixa amb un grup d'enllaços centrat i accions d'inici de sessió alineades a la dreta. El ritme general és una única franja principal atmosfèrica, que després alterna seccions blanques i #f5f5f5 amb un espai de respiració vertical consistent. No hi ha barra lateral, ni megamenú, ni dissenys asimètrics: la pàgina sembla una columna tranquil·la i simètrica.
El disseny visual se centra gairebé completament en la interfície d'usuari del producte: sense fotos d'estil de vida, sense renders 3D abstractes. El llenguatge visual es construeix al voltant de targetes de producte que mostren la interfície nativa de l'aplicació: una comparació "Abans" i "Després" de documents, una àrea de càrrega amb una vora puntejada i un reproductor d'àudio en forma d'ona. L'únic element visual atmosfèric és el degradat del cel a la imatge principal. Les icones són icones de línia plana, d'un sol color #2597d0 (sobre, micròfon, marca de verificació) amb gruixos de línia uniformes, sense variacions d'ompliment. L'estil d'il·lustració és moderat: les maquetes de productes es mostren sobre un fons blanc, lleugerament girades per crear profunditat, mai inclinades bruscament. Una font manuscrita (El Doctor) és l'únic element orgànic/artesanal, utilitzat únicament per evocar l'escriptura clínica a la targeta "Abans".
Paleta
Marca
- Surgical Blue
#2597d0— Icones, una icona de micròfon, un reproductor d'ones sonores i petits detalls funcionals creen una única nota cromàtica a tota la interfície.
Neutral
- Obsidian
#070709— El text del cos, els botons de crida a l'acció plens i els elements de la interfície d'usuari foscos: s'ha triat un negre gairebé definit en lloc del #000 pur per suavitzar el contrast amb el fons blanc. - Paper White
#ffffff— El fons de la pàgina, les superfícies de les targetes i el text dels botons són el llenç principal per a totes les seccions que hi ha sota l'element principal. - Cloud Gray
#f5f5f5— Les superfícies de les cartes i els fons de secció addicionals separen els blocs funcionals del llenç principal. - Sky Tint
#d7e6f5— El to del marc de cartró i el to blau, gairebé imperceptible, de la superfície creen una sensació d'atmosfera, més que no pas de grisor. - Charcoal
#60606c— Text principal, text secundari i vores apagades: un color neutre dominant per al contingut que no és l'encapçalament. - Slate
#8b8b8b— Text menor i estats fronterers inactius: s'utilitzen per indicar ubicacions i garantir l'accessibilitat per a persones amb discapacitat.
Tipografia
de 12 a 80px · 8 passos
- sans-serif — reemplaçament: Inter · esquemes 400, 700 · sans-serif: es troba a les dades extretes però no descrit per la IA.
- Open Runde — reemplaçament: Inter Tight · esquemes 400, 500, 600, 700, 900 · La font principal per als encapçalaments i la navegació és una humanista geomètrica, amb un espaiat entre lletres ajustat en mides grans; -0.04em a 80px comprimeix l'encapçalament en un únic bloc segur. Utilitzeu-lo per a tots els encapçalaments, navegació i text gran.
- Inter — reemplaçament: system-ui · esquemes 400, 500 · Cos secundari i text de la interfície d'usuari: s'utilitza per a encapçalaments petits, elements de navegació i enllaços en línia on es desitja un ritme de lectura més neutre. Es combina amb Open Runde per crear un contrast jeràrquic.
Intervals i forma
| Propòsit | Significat |
|---|---|
| Densitat | dens |
| Pas bàsic | 12-16px |
| Radi del botó | 100px |
| Radi de la targeta | 18px |
| Ombres | sense vores en comptes d'ombres |
| Entre seccions | 80-120px |
| Amplada de la pàgina | 1200px |
La IA crearà el vostre lloc web a l'estil Letters i l'omplirà.
- Omple amb productes i publicacions a través de l'enllaç: Instagram, TikTok, Facebook.
- Transfereix contingut del teu lloc web antic; només cal que especifiquis l'adreça.
- Disseny modern en el millor motor: React ( Next.js) amb renderització de servidor i optimització SEO des del primer moment.
- Optimització SEO totalment automatitzada per a resultats de cerca i recomanacions de xarxes neuronals.
Estils similars
- Integrated Biosciences — laboratori de bioluminescència a mitjanit
- Mintlify — Un jardí de núvols sobre una taula de vidre. El cel dibuixat a mà i el documental s'emmarquen junts: l'únic lloc on el color i el concepte xoquen abans que la pàgina s'esvaeixi en un blanc monàstic.
- Gleap — Un espai de treball decorat amb tons crema càlids amb detalls de grafit: un estudi on els punts de tinta negra mat semblen surar per sobre de l'arquitectura de lli.
- Render — El disseny és d'alumini raspallat. La interfície sembla un document d'enginyeria net i geomètric: espai en blanc, línies primes i una sola línia morada que crida l'atenció sobre l'acció.
- Grafbase — dibuix d'enginyeria sobre marbre fred
- Slash — Volta de mitjanit amb llibres majors daurats
- Modal — Un terminal fosforescent en una sala de servidors fosca: l'única font de llum és un color verd brillant.
- Whimsical — Tinta de pruna intensa sobre un fons lavanda: un quadern d'estudi creatiu que també serveix com a pissarra tècnica.
- AgentQL — Aurores boreals sobre la terminal a la nit
- Alveos One — Un refugi acollidor fet de pedres de riu: una sala de meditació tranquil·la i il·luminada amb llum cremosa on un únic objecte de grafit descansa en una suau resplendor ambre.
- GitHub — Un panell de comandament espacial amb punts de control bioluminescents: un espai de treball fosc i atmosfèric on una única resplendor verda indica el camí a seguir.
- Buddy — Un dibuix d'enginyeria sobre paper mil·limetrat. La superfície blanca del dibuix està marcada amb una quadrícula gairebé visible, aplicada amb tinta gairebé negra, amb marques fluorescents de color verd llima i traços de degradat iridescents.