Ui
Plan clínico en papel mate
shadcn/ui es un taller para crear un sistema de diseño monocromático: un lienzo blanco impoluto, superficies grises cálidas y suaves, y tarjetas de gran radio ubicadas en los bordes más sutiles. La interfaz es casi completamente acromática (texto negro, superficies blancas, tonos grises secundarios), con un único y llamativo color rojo reservado para los estados de error y nada más. La tipografía se basa en la neutralidad geométrica de Geist, con una altura de letra ajustada en las pantallas, creando una sensación de calma, similar a la de un código, que se asemeja más a una infraestructura de desarrollo que a un producto de consumo.
Imágenes mínimas: el sistema se compone casi exclusivamente de la interfaz de usuario. No hay fotos clave, ilustraciones ni gráficos decorativos. Las demostraciones del producto se presentan como maquetas de componentes (tarjetas, campos de entrada, botones) en una cuadrícula, que sirven tanto de documentación como de contenido visual. Los iconos son líneas geométricas finas (probablemente tomadas de Lucide) de 1,5 a 2 píxeles de grosor en #0a0a0a o #737373, utilizadas con moderación como indicadores funcionales. El lenguaje visual son los propios componentes de la interfaz de usuario: la página funciona como una guía de estilo dinámica, donde cada elemento visible es un elemento de diseño visible.
Paleta
Neutral
- Canvas
#f5f5f5— Fondo de página, relleno de superficie atenuado, botones adicionales. - Paper
#ffffff— Superficies de tarjetas, fondos emergentes, rellenos de botones principales - Surface Alt
#fafafa— Fondo de la barra lateral, opción de tarjeta discreta, estado inactivo del campo de entrada. - Ink
#0a0a0a— Texto principal, encabezados, etiquetas de botones, contornos de iconos. - Ink Soft
#171717— Imágenes de fondo de botones con relleno, texto adicional sobre superficies claras. - Mid Gray
#737373— El texto principal, el texto de marcador de posición, las etiquetas auxiliares y el relleno de iconos en reposo están atenuados.
Tipografía
De 12 a 48 píxeles · 8 pasos
- Geist — reemplazo: Inter · esquemas 400, 500, 600 · Todo el texto de la interfaz (texto principal con un grosor de línea de 14 px/400, encabezados con un grosor de línea de 24–48 px/600 y botones con un grosor de línea de 13–14 px/500). Las formas geométricas de las letras de Geist y el grosor de línea uniforme crean una sensación neutral para las herramientas de desarrollo; un grosor de línea de 600 con un espaciado entre letras de 48 px y un espaciado entre letras de -0,05 em garantiza encabezados claros y seguros que parecen bien pensados en lugar de editados.
Intervalos y forma
| Objetivo | Significado |
|---|---|
| Densidad | denso |
| Paso básico | 8px |
| Radio del botón | 18px |
| Radio de la tarjeta | 24px |
| Oscuridad | no - bordes en lugar de sombras |
| Entre secciones | 48-80px |
| Ancho de página | 1280px |
La IA construirá tu sitio web al estilo de Ui y lo rellenará.
- Rellena con productos y publicaciones a través del enlace - Instagram, TikTok, Facebook.
- Transfiere el contenido de tu antiguo sitio web; solo tienes que especificar la dirección.
- Diseño moderno sobre el mejor motor: React ( Next.js) con renderizado del lado del servidor y optimización SEO integrada.
- Optimización SEO totalmente automatizada para resultados de búsqueda y recomendaciones mediante redes neuronales.
Estilos similares
- Ventriloc — Un observatorio editorial de datos sobre papel tibio: una sola brasa naranja que resalta la precisión monocromática.
- Geniestudio — Un cuaderno de luz diurna suave, de esos con márgenes amplios y un trazo grueso de pluma.
- xAI — Laboratorio de crema tibia con pastilla negra
- Cal — Practicidad monocromática, un enfoque humano. Un sistema que prioriza la claridad y la funcionalidad mediante una estricta paleta en blanco y negro, pero que la suaviza con una tipografía amigable y formas redondeadas.
- Scale — Un laboratorio fotográfico de alta calidad, digno de un museo, combinado con un proyecto técnico.
- Contractbook — contratos de papel crema bajo un cielo ultramar
- AutoSend — Un acogedor estudio de piedra con una sola luz violeta, donde titulares con serifa y brillantes llamadas a la acción de color índigo coexisten en un espacio tranquilo, casi blanco.
- Air — Escultura "Cielo de medianoche a través del cristal"
- SpatialChat — Pulso púrpura sobre pergamino blanco
- Squarespace — Galería Cinematográfica Monocromática
- Giga — Horizonte de medianoche sobre obsidiana escarchada
- Supabase — Un editor de código a medianoche con un punto verde fosforescente: un único pulso cromático sobre un mar de polvo de carbón.