Ui
pla clínic en paper mat
shadcn/ui és un taller per crear un sistema de disseny monocrom: un llenç blanc net, superfícies grises suaus i càlides i targetes de radi gran posicionades a les vores més subtils. La interfície és gairebé completament acromàtica (text negre, superfícies blanques, tons secundaris grisos) amb un únic color vermell disruptiu reservat per als estats d'error i res més. La tipografia es basa en la neutralitat geomètrica de Geist amb una alçada de lletra ajustada a les pantalles, creant una sensació tranquil·la i semblant a un codi que s'assembla més a una infraestructura de desenvolupador que a un producte de consum.
Imatges minimalistes: el sistema consisteix gairebé completament en la interfície d'usuari. No hi ha fotos clau, il·lustracions ni gràfics decoratius. Les demostracions de productes es presenten com a maquetes de components (targetes, camps d'entrada, botons) en una quadrícula, que serveixen tant com a documentació com a contingut visual. Les icones són línies geomètriques primes (probablement manllevades de Lucide) d'1,5 a 2 px de gruix en #0a0a0a o #737373, que s'utilitzen amb moderació com a indicacions funcionals. El llenguatge visual són els components de la interfície d'usuari: la pàgina funciona com una guia d'estil viva, on cada element visible és un element de disseny visible.
Paleta
Neutral
- Canvas
#f5f5f5— Fons de pàgina, farciment superficial apagat, botons addicionals. - Paper
#ffffff— Superfícies de targetes, fons emergents, farciments de botons principals - Surface Alt
#fafafa— Fons de la barra lateral, opció de targeta discreta, estat inactiu del camp d'entrada. - Ink
#0a0a0a— Text principal, encapçalaments, etiquetes de botons, contorns d'icones. - Ink Soft
#171717— Imatges de fons de botons amb farciment, text addicional sobre superfícies clares. - Mid Gray
#737373— El text principal, el text del marcador de posició, les etiquetes auxiliars i l'emplenament d'icones en repòs estan silenciats.
Tipografia
de 12 a 48 px · 8 passos
- Geist — reemplaçament: Inter · esquemes 400, 500, 600 · Tot el text de la interfície: text del cos amb un gruix de línia de 14px/400, encapçalaments amb un gruix de línia de 24–48px/600 i botons amb un gruix de línia de 13–14px/500. Les formes de lletra geomètriques i el gruix de línia uniforme de Geist creen una sensació neutral per a les eines de desenvolupament; un gruix de línia de 600 amb un espaiat de lletra de 48px i un espaiat de lletra de -0.05em garanteix encapçalaments clars i segurs que semblen pensats en lloc d'editats.
Intervals i forma
| Propòsit | Significat |
|---|---|
| Densitat | dens |
| Pas bàsic | 8px |
| Radi del botó | 18px |
| Radi de la targeta | 24px |
| Ombres | sense vores en comptes d'ombres |
| Entre seccions | 48-80px |
| Amplada de la pàgina | 1280px |
La IA crearà el vostre lloc web a l'estil Ui 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
- Ventriloc — Un observatori editorial de dades sobre paper calent: una única brasa taronja que destaca la precisió monocromàtica
- Geniestudio — Un quadern suau per a la llum del dia, del tipus amb marges amples i un sol traç gruixut de ploma
- xAI — Crema calenta de laboratori amb píndola negra
- Cal — Practicitat monocroma, un enfocament humà. Un sistema que prioritza la claredat i la funcionalitat a través d'una paleta estricta en blanc i negre, però que la suavitza amb una tipografia amable i formes arrodonides.
- Scale — Un laboratori fotogràfic d'alta qualitat amb qualitat museística combinat amb un projecte tècnic
- Contractbook — contractes de paper crema sota un cel ultramarí
- AutoSend — Un acollidor estudi de pedra amb una única llum morada, on titulars amb serifes i crides a l'acció amb anyil brillant coexisteixen en un espai tranquil, gairebé blanc.
- Air — escultura "Cel de mitjanit a través del vidre"
- SpatialChat — pols porpra sobre pergamí blanc
- Squarespace — Galeria monocromàtica cinematogràfica
- Giga — Horitzó de mitjanit sobre obsidiana glaçada
- Supabase — Un editor de codi a mitjanit amb un punt verd fosforescent: un únic pols cromàtic sobre un mar de pols de carbó