Token di designDesign Token
Un Design Token dà un nome a una singola scelta di design. Alcuni esempi sono un colore, uno spazio, un carattere o la velocità di un'animazione.
Apri guidaStili di design UI spiegati con esempi
Vedi come appare ogni stile, quando aiuta e quando intralcia.
VarianteVariant
Una variante è una versione approvata di un componente per una dimensione, un peso o un'impostazione diversa.
Apri guidaGerarchia VisivaVisual Hierarchy
La Gerarchia Visiva guida ciò che le persone notano prima, dopo e per ultimo attraverso dimensione, contrasto, posizione e spazio.
Apri guidaContrasto dei coloriColor Contrast
Il contrasto dei colori è la differenza di luminanza misurata tra il contenuto e lo sfondo vicino. Mostra se il testo chiave e i bordi sono facili da vedere.
Apri guidaTipografiaTypography
La tipografia è come vengono scelti e disposti gli stili del testo per rendere le parole leggibili, ordinate e in linea con il brand.
Apri guidaDigita ScalaType Scale
Una Type Scale è un piccolo set pianificato di dimensioni del testo e altezze delle righe.
Apri guidaTavolozza dei coloriColor Palette
Una Tavolozza di Colori è un set di colori programmato. Ogni colore ha un ruolo, uno stato o una superficie chiara.
Apri guidaScala dello spazioSpacing Scale
Una Spacing Scale è un piccolo set di dimensioni per gli spazi. Mostra i gruppi e mantiene un ritmo visivo costante.
Apri guidaIconografiaIconography
L'iconografia è un insieme di simboli condivisi con aspetti corrispondenti e significati chiari per azioni e idee.
Apri guidaModalità scuraDark Mode
La modalità scura cambia superfici, testo, bordi, media e stati per un ambiente scuro.
Apri guidaDesign ResponsiveResponsive Design
Il Design Responsive permette a layout, contenuti e controlli di cambiare per adattarsi allo spazio e al dispositivo disponibile.
Apri guidaReticoloScrim
Una sovrapposizione oscura e trasparente sta dietro a un overlay. Separa l'overlay e fa capire che la pagina sotto è bloccata.
Apri guidaSpaziaturaSpacing
Lo spazio è uno spazio vuoto messo apposta. Raggruppa elementi correlati, separa idee e dà ritmo alla pagina.
Apri guidaMargineMargin
Il margine è lo spazio al di fuori del bordo di un elemento. Mantiene quell'elemento lontano dagli altri elementi vicini nel layout.
Apri guidaRiempimentoPadding
Il padding è lo spazio all'interno del bordo di un elemento, tra il suo contenuto e il suo bordo.
Apri guidaSpazioGap
Lo spazio è lo spazio che un contenitore mette tra i suoi figli Flexbox o Grid. La stessa regola si applica a ogni coppia.
Apri guidaColonna centrataCentered Column
Una colonna centrata ha una larghezza massima leggibile e uno spazio uguale su entrambi i lati.
Apri guidaGriglia BentoBento Grid
Una griglia bento impacchetta riquadri di dimensioni diverse in un solo layout. Le campate più grandi mostrano quali contenuti contano di più.
Apri guidaTroncamento del testoText Truncation
Il troncamento del testo taglia il testo per risparmiare spazio. Un'ellissi mostra che una o più righe mancano.
Apri guidaRapporto d'aspettoAspect Ratio
Il rapporto d'aspetto indica quanto è largo un elemento rispetto a quanto è alto.
Apri guidaSfocatura dello sfondoBackdrop Blur
La sfocatura dello sfondo ammorbidisce ciò che si trova dietro una superficie trasparente. Non sfoca il contenuto della superficie stessa.
Apri guidaGlassmorphismGlassmorphism
Il Glassmorphism è uno stile visivo con superfici stratificate trasparenti. Utilizza sfocatura, bordi luminosi e un piccolo senso di profondità.
Apri guidaVetro LiquidoLiquid Glass
Il Vetro Liquido è uno stile di materiale chiaro e in movimento. Usa piegature simili a lenti, riflessi e forme che sembrano unirsi o flettersi.
Apri guidaScheumorfismoSkeuomorphism
Lo scheumorfismo copia oggetti reali familiari per spiegare un controllo digitale. Può anche copiarne i materiali.
Apri guidaNeumorfismoNeumorphism
Il Neumorfismo è uno stile morbido a basso contrasto. Ombre chiare e scure fanno sembrare i controlli sollevati o incassati in una superficie di colore unico.
Apri guidaNeobrutalismoNeobrutalism
Il Neobrutalismo è uno stile digitale audace e ad alto contrasto. Usa forme semplici, bordi spessi, colori diretti e un layout meccanico chiaro.
Apri guidaMinimalismoMinimalism
Il minimalismo rimuove ciò che un design non necessita. Mantiene comunque il prodotto chiaro, utile e distinto.
Apri guidaDesign piattoFlat Design
Il design piatto utilizza forme semplici, colori solidi e aree piatte chiare, con poca profondità finta.
Apri guidaClaymorphismClaymorphism
Claymorphism è uno stile giocoso con forme soffici e angoli arrotondati. Ombre morbide e superfici pastello lo fanno sembrare argilla.
Apri guidaEstetica digitale Y2KY2K Digital Aesthetic
Questa estetica digitale è uno stile retro-futuro della cultura digitale tra la fine degli anni '90 e i primi anni 2000. Spesso utilizza chrome, pixel, gradienti brillanti e dettagli informatici giocosi.
Apri guidaFrutiger AeroFrutiger Aero
Frutiger Aero è uno stile speranzoso degli anni 2000. Mescola interfacce lucide con cieli azzurri, acqua, piante verdi, bolle e tecnologia dall'aspetto amichevole.
Apri guidaBrutalismo WebWeb Brutalism
Il brutalismo web è uno stile web grezzo. Mostra la struttura, le impostazioni predefinite del browser, il tipo semplice e la ruvidezza pianificata invece della consueta lucidatura.
Apri guidaWeb vernacolareVernacular Web
Il web vernacolare copia i siti quotidiani che le comunità creano. Differisce dai sistemi raffinati creati da grandi gruppi.
Apri guidaAquaAqua
Aqua è uno stile di interfaccia luminoso legato ai primi macOS. Usa controlli brillanti, profondità gelatinosa, strisce sottili e dettagli blu acceso.
Apri guidaWindows AeroWindows Aero
Windows Aero è uno stile desktop della fine degli anni 2000. Usa cornici delle finestre trasparenti, vetro sfocato, bagliore morbido e bordi stratificati.
Apri guidaStile svizzeroSwiss Style
Lo stile svizzero utilizza griglie chiare e layout irregolari ma bilanciati. Usa anche caratteri sans-serif, fotografie e un ordine visivo rigoroso.
Apri guidaDesign editorialeEditorial Design
Il design editoriale organizza una storia attraverso il ritmo di lettura, il tipo, le immagini, le didascalie e i modelli di pagina che si ripetono.
Apri guidaMaterial DesignMaterial Design
Material Design è un sistema per componenti e interazioni. Usa superfici stratificate, movimenti con uno scopo, layout flessibili e token di design condivisi.
Apri guidaGradienteGradient
Un gradient è un passaggio fluido tra colori o trasparenze. Può seguire una linea, un cerchio, un angolo o una mesh.
Apri guidaOmbra & ElevazioneShadow & Elevation
Un'ombra è un effetto visivo. L'elevazione è la relazione di profondità che l'ombra può spiegare tra le superfici.
Apri guidaBorder Radius & Squircle — Pacchetto di apprendimentoBorder Radius & Squircle — Learning Bundle
Questa guida separa tre idee. Sono il border-radius standard CSS, la forma dell'angolo in bozza: squircle, e altre forme simili allo squircle o maschere di piattaforma. Il pacchetto non è un termine di design standard unico.
Apri guidaOpacitàOpacity
L'opacità indica quanto un elemento e i suoi figli sembrano solidi. Può variare da trasparente a solido.
Apri guidaLinee guida sull'interfaccia umana di AppleApple Human Interface Guidelines
Le linee guida sull'interfaccia umana di Apple spiegano il design per le piattaforme Apple. Coprono azioni, elementi visivi, controlli, input, accessibilità e differenze tra piattaforme.
Apri guidaSpazio di lavoro in stile NotionNotion-style Workspace
Un Workspace in stile Notion usa un aspetto dei documenti calmo. Preferisce testo leggibile, blocchi di contenuto, controlli silenziosi e spazio aperto.
Apri guidaSito Marketing SaaSSaaS Marketing Site
Un Sito di Marketing SaaS spiega un problema e un servizio software a un pubblico. Aiuta i visitatori a capire se fa al caso loro e a scegliere il passo successivo.
Apri guidaSito aziendale B2BB2B Corporate Site
Un Sito Aziendale B2B aiuta i gruppi aziendali a controllare le competenze, le regole, l'affidabilità e la compatibilità di un'azienda. Supporta anche gli acquisti o le partnership.
Apri guidaE-commerce diretto al consumatoreDTC E-commerce
Il commercio elettronico DTC consente a un marchio di vendere direttamente ai consumatori. Copre scoperta, scelta dei prodotti, pagamento, consegna e assistenza post-vendita.
Apri guidaIllustrazione giocosaPlayful Illustration
L'illustrazione giocosa utilizza personaggi, forme, colori e battute visive vivaci. Può aggiungere calore, significato o carattere al marchio.
Apri guidaDesign OrganicoOrganic Design
Il Design Organico segue le forme presenti in natura. Utilizza curve irregolari, texture tattili, colori naturali e layout meno meccanici.
Apri guidaStile MemphisMemphis Style
Lo Stile Memphis è un aspetto audace e postmoderno. Utilizza forme forti, colori contrastanti, motivi, bilanciamento irregolare ed energia giocosa.
Apri guidaEstetica del terminaleTerminal Aesthetic
L'estetica del Terminal prende in prestito dagli schermi a linea di comando. Usa testo monospaziato, gerarchia stretta, segni di prompt, pochi colori e stato chiaro.
Apri guidaWabi-sabiWabi-sabi
Wabi-sabi è una visione giapponese della bellezza. Valuta i limiti, il cambiamento, la forma irregolare, l'età e i materiali autentici rispetto alla lucidatura perfetta.
Apri guidaProprietà Logiche CSSCSS Logical Properties
Le proprietà logiche CSS descrivono i lati secondo il flusso di scrittura, come blocco e inline. Sostituiscono direzioni fisse come alto, destra, basso e sinistra. Questo aiuta i layout a seguire la direzione di scrittura della lingua.
Apri guidaSubgridSubgrid
Una subgrid è una griglia all'interno di un'altra griglia che condivide le dimensioni delle righe o delle colonne del genitore. Può condividere una direzione o entrambe.
Apri guidadimensionamento intrinsecoIntrinsic Sizing
Il dimensionamento intrinseco permette al contenuto di un elemento di contribuire a determinare la sua dimensione invece di usare solo una dimensione fissa esterna.
Apri guidamin-contenutomin-content
`min-content` è la dimensione più piccola che il contenuto può usare dopo essersi interrotto in ogni punto di interruzione consentito.
Apri guidacontenuto-massimomax-content
`max-content` è la dimensione che il contenuto vorrebbe avere se non si interrompesse ai punti di interruzione normali.
Apri guidaminmax()minmax()
`minmax()` è una funzione di CSS Grid che conferisce a una riga o colonna sia una dimensione minima sia una dimensione massima.
Apri guidaclamp()clamp()
`clamp()` sceglie un valore CSS preferito ma lo mantiene tra un minimo e un massimo.
Apri guidaobject-fitobject-fit
`object-fit` controlla come un'immagine, un video o un elemento simile si adatta all'interno della sua casella.
Apri guidaUnità di viewportViewport Units
Le unità di viewport sono lunghezze CSS basate sull'area visibile del browser. Le versioni piccola, grande e dinamica gestiscono le barre del browser che appaiono o scompaiono.
Apri guidaPseudo-classePseudo-class
Una pseudo-classe fa parte di un selettore CSS. Trova un elemento attraverso una condizione, come stato, luogo, lingua o azione dell'utente.
Apri guidaPseudo-elementoPseudo-element
Un pseudo-elemento permette al CSS di stilizzare una parte o una casella senza un elemento normale nel HTML sorgente. Esempi includono la prima lettera e la decorazione generata.
Apri guidaBordo Radius CSSCSS Border Radius
Il border-radius CSS crea gli angoli delle scatole a partire da quarti di ellisse usando raggi orizzontali e verticali. Modifica la pittura e il clipping, ma non la dimensione del layout della scatola, e non crea uno squircle matematico.
Apri guidaAngolo CSS a squircleCSS Squircle Corner
Nel draft CSS Borders Level 4, squircle è un valore di forma per angoli di una superellisse convessa tra rotonda e quadrata. Equivale a superellipse(2), richiede un raggio del bordo non nullo e necessita ancora di un controllo di supporto del browser.
Apri guidaModalità Colori ForzatiForced Colors Mode
La modalità colori forzati utilizza una palette di sistema scelta dall'utente invece di molti colori della pagina. Questo può rendere più facile distinguere controlli e testo.
Apri guidaVisual Effect MaterialVisual Effect Material
Il Materiale Effetto Visivo è uno stile di superficie macOS che fonde e sfoca ciò che è dietro di esso. Cambia con lo stato della finestra e l’aspetto chiaro o scuro.
Apri guida