Ui
plan clínico en papel mate
shadcn/ui é un obradoiro para crear un sistema de deseño monocromático: unha lona branca limpa, superficies grises suaves e cálidas e tarxetas de radio grande colocadas nos bordos máis sutís. A interface é case enteiramente acromática (texto negro, superficies brancas, tons secundarios grises) cunha única cor vermella disruptiva reservada para estados de erro e nada máis. A tipografía baséase na neutralidade xeométrica de Geist con alturas de letras axustadas nas pantallas, creando unha sensación tranquila e de código que se asemella máis á infraestrutura dun desenvolvedor que a un produto de consumo.
Imaxes minimalistas: o sistema consiste case na súa totalidade na interface de usuario. Sen fotos clave, ilustracións nin gráficos decorativos. As demostracións de produtos preséntanse como maquetas de compoñentes (tarxetas, campos de entrada, botóns) nunha grella, que serven tanto como documentación como contido visual. As iconas son liñas xeométricas finas (probablemente tomadas de Lucide) de 1,5 a 2 px de grosor en #0a0a0a ou #737373, que se usan con moderación como pistas funcionais. A linguaxe visual son os propios compoñentes da interface de usuario: a páxina funciona como unha guía de estilo viva, onde cada elemento visible é un elemento de deseño visible.
Paleta
Neutro
- Canvas
#f5f5f5— Fondo da páxina, recheo superficial silenciado, botóns adicionais. - Paper
#ffffff— Superficies de tarxetas, fondos emerxentes, recheos de botóns principais - Surface Alt
#fafafa— Fondo da barra lateral, opción de tarxeta discreta, estado inactivo do campo de entrada. - Ink
#0a0a0a— Texto principal, títulos, etiquetas de botóns, contornos de iconas. - Ink Soft
#171717— Imaxes de fondo de botóns con recheo, texto adicional en superficies claras. - Mid Gray
#737373— O texto principal, o texto do marcador de posición, as etiquetas auxiliares e o recheo de iconas en repouso están silenciados.
Tipografía
de 12 a 48 px · 8 pasos
- Geist — substitución: Inter · contornos 400, 500, 600 · Todo o texto da interface: corpo de texto cun grosor de liña de 14 px/400, títulos cun grosor de liña de 24–48 px/600 e botóns cun grosor de liña de 13–14 px/500. As formas xeométricas das letras de Geist e o grosor de liña uniforme crean unha sensación neutral para as ferramentas de desenvolvemento; un grosor de liña de 600 cun espazado entre letras de 48 px e un espazado entre letras de -0,05 em garante títulos claros e seguros que parecen reflexivos en lugar de editados.
Intervalos e forma
| Propósito | Significado |
|---|---|
| Densidade | denso |
| Paso básico | 8px |
| Radio do botón | 18px |
| Radio da tarxeta | 24px |
| Sombras | sen bordos en vez de sombras |
| Entre seccións | 48-80px |
| Largura da páxina | 1280px |
A IA creará o teu sitio web ao estilo de Ui 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
- Ventriloc — Un observatorio editorial de datos en papel quente: unha única brasa laranxa que destaca a precisión monocromática
- Geniestudio — Un caderno suave para a luz do día, do tipo con marxes amplas e un só trazo groso de pluma
- xAI — Crema morna de laboratorio con pílula negra
- Cal — Practicidade monocromática, unha abordaxe humana. Un sistema que prioriza a claridade e a funcionalidade a través dunha estrita paleta de branco e negro, pero que a suaviza cunha tipografía amigable e formas redondeadas.
- Scale — Un laboratorio fotográfico de alta calidade, digno dun museo, combinado cun proxecto técnico
- Contractbook — contratos de papel crema baixo un ceo ultramarino
- AutoSend — Un acolledor estudo de pedra cunha única luz morada, onde titulares con serifas e chamadas á acción en añil brillante conviven nun espazo tranquilo, case branco.
- Air — escultura "Ceo de medianoite a través do vidro"
- SpatialChat — pulso púrpura sobre pergamiño branco
- Squarespace — Galería monocromática cinematográfica
- Giga — Horizonte de medianoite sobre obsidiana xeada
- Supabase — Un editor de código á medianoite cun punto verde fosforescente: un único pulso cromático sobre un mar de po de carbón.