Ui
piano clinico su carta opaca
shadcn/ui è un workshop per la creazione di un sistema di design monocromatico: una tela bianca pulita, superfici grigio caldo e morbide e schede con ampi raggi posizionate su bordi sottilissimi. L'interfaccia è quasi interamente acromatica – testo nero, superfici bianche, tonalità secondarie di grigio – con un unico, acceso colore rosso riservato agli stati di errore e a nient'altro. La tipografia si basa sulla neutralità geometrica di Geist, con un'interlinea ridotta sugli schermi, creando un'atmosfera calma e quasi da codice, più simile a un'infrastruttura di sviluppo che a un prodotto di consumo.
Immagini minimali: il sistema è costituito quasi interamente dall'interfaccia utente. Nessuna foto chiave, illustrazione o grafica decorativa. Le demo del prodotto sono presentate come mockup dei componenti (schede, campi di input, pulsanti) in una griglia, fungendo sia da documentazione che da contenuto visivo. Le icone sono sottili linee geometriche (probabilmente mutuate da Lucide) di 1,5-2 pixel di spessore nei colori #0a0a0a o #737373, utilizzate con parsimonia come indicatori funzionali. Il linguaggio visivo è costituito dai componenti dell'interfaccia utente stessi: la pagina funziona come una guida di stile dinamica, in cui ogni elemento visibile è un elemento di design visibile.
Tavolozza
Neutro
- Canvas
#f5f5f5— Sfondo della pagina, riempimento della superficie tenue, pulsanti aggiuntivi. - Paper
#ffffff— Superfici delle carte, sfondi a comparsa, riempimenti dei pulsanti principali - Surface Alt
#fafafa— Sfondo della barra laterale, opzione scheda discreta, stato di inattività del campo di input. - Ink
#0a0a0a— Testo principale, intestazioni, etichette dei pulsanti, contorni delle icone. - Ink Soft
#171717— Immagini di sfondo dei pulsanti con riempimento, testo aggiuntivo su superfici chiare. - Mid Gray
#737373— Il testo principale, il testo segnaposto, le etichette ausiliarie e il riempimento delle icone a riposo sono tutti attenuati.
Tipografia
da 12 a 48 pixel · 8 passaggi
- Geist — sostituzione: Inter · contorni 400, 500, 600 · Tutto il testo dell'interfaccia: il corpo del testo ha uno spessore di 14px/400, le intestazioni uno spessore di 24–48px/600 e i pulsanti uno spessore di 13–14px/500. Le forme geometriche delle lettere di Geist e lo spessore uniforme delle linee creano un aspetto neutro per gli strumenti di sviluppo; uno spessore di 600 con spaziatura tra le lettere di 48px e -0,05em garantisce intestazioni chiare e autorevoli che appaiono curate piuttosto che modificate.
Intervalli e forma
| Scopo | Senso |
|---|---|
| Densità | denso |
| Passo base | 8px |
| Raggio del pulsante | 18px |
| Raggio della carta | 24px |
| Ombre | no - bordi invece di ombre |
| Tra le sezioni | 48-80px |
| Larghezza del pannello | 1280px |
L'IA creerà il tuo sito web nello stile Ui e lo riempirà
- Pubblica prodotti e contenuti tramite il link: Instagram, TikTok, Facebook.
- Trasferisci i contenuti dal tuo vecchio sito: basta specificare l'indirizzo.
- Design moderno sul miglior motore: React ( Next.js) con rendering lato server e ottimizzazione SEO integrata.
- Ottimizzazione SEO completamente automatizzata per i risultati di ricerca e raccomandazioni basate su reti neurali.
Stili simili
- Ventriloc — Un osservatorio editoriale di dati su carta calda: una singola brace arancione che evidenzia la precisione monocromatica
- Geniestudio — Un quaderno morbido, adatto alla luce del giorno, con ampi margini e un tratto di penna spesso.
- xAI — Labbra color crema calda con pillola nera
- Cal — Praticità monocromatica, un approccio umano. Un sistema che privilegia chiarezza e funzionalità attraverso una rigorosa palette in bianco e nero, ma che la addolcisce con una tipografia accattivante e forme arrotondate.
- Scale — Un laboratorio fotografico di alta qualità, degno di un museo, combinato con un progetto tecnico
- Contractbook — contratti di carta color crema sotto un cielo oltremare
- AutoSend — Un accogliente studio in pietra con un'unica luce viola, dove titoli con grazie e vivaci inviti all'azione indaco convivono in uno spazio tranquillo, quasi bianco.
- Air — scultura "Cielo di mezzanotte attraverso il vetro"
- SpatialChat — pulsazione viola su pergamena bianca
- Squarespace — Galleria cinematografica in bianco e nero
- Giga — Orizzonte di mezzanotte su ossidiana ghiacciata
- Supabase — Un editor di codice a mezzanotte con un punto verde fosforescente: un singolo impulso cromatico su un mare di polvere di carbone