Letters
Unha cita matinal nunha clínica ao aire libre: unha mesa branca estéril baixo un teito azul suave, chea de instrumentos cirúrxicos azuis
Letters é unha ferramenta de escritura de cartas médicas que comeza cunha cabeceira de ceo aberto en gradiente (unha franxa azul suave e atmosférica que crea unha atmosfera tranquila e clínica) antes de pasar a un espazo de traballo branco e limpo. O sistema está deseñado nun estilo monocromático: un lenzo branco limpo, texto case negro (#070709), chamadas á acción escuras en forma de pílula e tarxetas redondeadas que flotan sobre as sombras máis sutís. Un único azul brillante (#2597d0) está reservado para a puntuación funcional (iconas, micrográficos, reprodutores de formas de onda), nunca se usa para botóns ou recheos grandes. A tipografía usa Open Runde, unha sans-serif humanista xeométrica cun espazado negativo agresivo entre letras en tamaños de pantalla máis grandes (-0,04 em a 80 px), que comprime as cabeceiras en bloques seguros. Os compoñentes parecen lixeiros, como un instrumento médico: biseles finos, espazado xeneroso entre tarxetas, botóns en forma de pílula e un uso discreto da elevación que permite que a cabeceira en forma de ceo faga o traballo emocional.
Unha páxina de inicio en gradiente azul ceo abrangue todo o ancho da páxina, cun título e subtexto centrados e un botón de chamada á acción na parte inferior. Fai unha transición suave a unha área de contido branca con espazo xeneroso entre as seccións (80-120 px). As seccións destacadas usan unha grella de dúas columnas con tarxetas grandes e redondeadas (de radio de 18-32 px) de proporcións iguais. Os títulos das seccións sempre están centrados, nunha soa columna, enriba da grella das tarxetas. A navegación é unha barra superior branca fixa cun grupo centrado de ligazóns e accións de inicio de sesión aliñadas á dereita. O ritmo xeral é unha única franxa principal atmosférica, que logo alterna seccións brancas e #f5f5f5 cun espazo de respiración vertical consistente. Non hai barra lateral, nin megamenú, nin deseños asimétricos: a páxina parece unha columna tranquila e simétrica.
O deseño visual céntrase case por completo na interface de usuario do produto: sen fotos de estilo de vida nin renderizacións 3D abstractas. A linguaxe visual baséase en tarxetas de produto que mostran a interface nativa da aplicación: unha comparación de documentos entre un "Antes" e un "Despois", unha área de carga cun bordo punteado e un reprodutor de audio en forma de onda. O único elemento visual atmosférico é o degradado do ceo na imaxe principal. As iconas son iconas de liña planas e dunha soa cor #2597d0 (sobre, micrófono, marca de verificación) con grosores de liña uniformes, sen variacións de recheo. O estilo de ilustración é contido: as maquetas dos produtos móstranse sobre un fondo branco, lixeiramente xiradas para crear profundidade, nunca inclinadas bruscamente. Unha fonte manuscrita (O Doutor) é o único elemento orgánico/artesanal, usado unicamente para evocar a escritura clínica na tarxeta do "Antes".
Paleta
Marca
- Surgical Blue
#2597d0— As iconas, unha icona de micrófono, un reprodutor de ondas sonoras e pequenos detalles funcionais crean unha única nota cromática en toda a interface.
Neutro
- Obsidian
#070709— O corpo do texto, os botóns de chamada á acción cheos e os elementos escuros da interface de usuario (escóllese case negro en lugar do #000 puro) para suavizar o contraste co fondo branco. - Paper White
#ffffff— O fondo da páxina, as superficies das tarxetas e o texto dos botóns son o lenzo principal para todas as seccións debaixo do elemento principal. - Cloud Gray
#f5f5f5— As superficies de cartas adicionais e os fondos de sección separan os bloques funcionais do lenzo principal. - Sky Tint
#d7e6f5— A sombra do marco de cartón e o ton azul apenas perceptible da superficie crean unha sensación de atmosfera, en lugar de grisura. - Charcoal
#60606c— Texto principal, texto secundario e bordos apagados: unha cor neutra dominante para o contido que non sexa o título. - Slate
#8b8b8b— Texto menor e estados fronteirizos inactivos: utilízanse para indicar localizacións e garantir a accesibilidade para persoas con discapacidade.
Tipografía
de 12 a 80 px · 8 pasos
- sans-serif — substitución: Inter · contornos 400, 700 · sans-serif: atópase nos datos extraídos pero non está descrita pola IA.
- Open Runde — substitución: Inter Tight · contornos 400, 500, 600, 700, 900 · A fonte principal para os títulos e a navegación é unha humanista xeométrica, con espazado entre letras axustado en tamaños grandes; -0,04 em a 80 px comprime o título nun único bloque seguro. Úsase para todos os títulos, a navegación e o texto grande.
- Inter — substitución: system-ui · contornos 400, 500 · Corpo secundario e texto da IU: úsase para títulos pequenos, elementos de navegación e ligazóns en liña onde se desexa un ritmo de lectura máis neutro. Combínase con Open Runde para crear un contraste xerárquico.
Intervalos e forma
| Propósito | Significado |
|---|---|
| Densidade | denso |
| Paso básico | 12-16px |
| Radio do botón | 100px |
| Radio da tarxeta | 18px |
| Sombras | sen bordos en vez de sombras |
| Entre seccións | 80-120px |
| Largura da páxina | 1200px |
A IA creará o teu sitio web ao estilo de Letters e o encherá
- Enche con produtos e publicacións a través da ligazón: Instagram, TikTok, Facebook.
- Transfire contido do teu sitio antigo: só tes que especificar o enderezo.
- Deseño moderno no mellor motor: React ( Next.js) con renderización de servidor e optimización SEO listas para usar.
- Optimización SEO totalmente automatizada para resultados de busca e recomendacións de redes neuronais.
Estilos semellantes
- Integrated Biosciences — laboratorio de bioluminescencia á medianoite
- Mintlify — Un xardín de nubes sobre unha mesa de cristal. O ceo debuxado a man e o documental están enmarcados xuntos: o único lugar onde a cor e o concepto chocan antes de que a páxina se esvaeza nun branco monástico.
- Gleap — Un espazo de traballo decorado en tons crema cálidos con detalles en grafito: un estudo onde os puntos de tinta negra mate parecen flotar sobre a arquitectura de liño.
- Render — O deseño é de aluminio escovado. A interface semella un documento de enxeñaría xeométrica e limpo: espazo en branco, liñas finas e unha única liña morada que chama a atención sobre a acción.
- Grafbase — debuxo de enxeñaría sobre mármore frío
- Slash — Bóveda de medianoite con libros maiores dourados
- Modal — Un terminal fosforescente nunha sala de servidores escura: a única fonte de luz é unha cor verde brillante.
- Whimsical — Tinta de ameixa intensa sobre un fondo lavanda: un caderno de estudio creativo que tamén serve como pizarra técnica.
- AgentQL — Auroras boreais sobre a terminal pola noite
- Alveos One — Un refuxio acolledor feito de pedras de río: unha sala de meditación tranquila e iluminada cunha luz cremosa onde un único obxecto de grafito repousa nun suave brillo ámbar.
- GitHub — Un panel de mando espacial con puntos de control bioluminescentes: un espazo de traballo escuro e atmosférico onde un único brillo verde sinala o camiño a seguir.
- Buddy — Un debuxo de enxeñaría en papel milimetrado. A superficie branca do debuxo está marcada cunha cuadrícula apenas visible, aplicada con tinta case negra, con marcas fluorescentes de cor verde lima e trazos degradados iridiscentes.