> ## Documentation Index > Fetch the complete documentation index at: https://docs.base44.com/llms.txt > Use this file to discover all available pages before exploring further. # Design system > Crea un design system del workspace in Base44 per definire una sola volta i colori, i font, il logo e i componenti del tuo brand, poi applica un look coerente a tutte le tue app. Un design system salva il look and feel del tuo brand a livello di workspace: i suoi colori, i font, il logo e un set di componenti coordinati. Crealo una volta, impostalo come predefinito, e ogni nuova app che costruisci parte già in linea con il brand, così non devi ridefinire il tuo stile ogni volta. Non serve essere designer. Con pochi dettagli, come il tuo logo, una breve descrizione del tuo brand, lo stile che vuoi e gli eventuali file di design che hai, Base44 crea un intero design system per te, così tutte le tue app appaiono professionali e in linea con il brand. Your design systems in workspace settings **Disponibilità:** * I design system sono disponibili dal [**piano Builder**](https://base44.com/pricing) in su. * I workspace sul piano Builder e superiori includono 1 design system. I workspace Enterprise non hanno limiti. * I design system si applicano alle web app, non alle app mobile. Un'app importata da Figma, avviata da un URL o migrata da un'altra piattaforma può ricevere un design system una volta completata la costruzione. * Creare e usare un design system non costa crediti. *** ## Cosa include Quando crei un design system, Base44 compila tutto ciò che mantiene le tue app coerenti e in linea con il brand, e lo mostra in un'anteprima live. Cambia un colore o un font, e ogni esempio si aggiorna subito, così vedi sempre come appare. A design system, with your brand settings on the left and a live preview on the right Un design system copre 3 cose: * **Le basi del tuo brand:** il tuo logo, il nome del brand, la tagline e una breve descrizione, più i valori fondamentali del brand, il tono di voce e le linee guida di design su come deve apparire. * **Il tuo look and feel:** i tuoi colori, i tuoi font, quanto sono arrotondati gli angoli, quanta ombra c'è sotto gli elementi e quanto spazio c'è tra di loro. * **Elementi pronti all'uso:** un set completo di componenti già in linea con il tuo brand e pronti da inserire in qualsiasi app, inclusi pulsanti, icone, card, navigazione, form e sezioni di pagina, ognuno stilizzato per i suoi stati interattivi. *** ## Creare un design system Crei un design system dalle impostazioni del workspace. In un unico form puoi combinare una breve descrizione, il tuo logo, un'importazione da Figma, un sito web o un pacchetto npm, e i tuoi file di design, e Base44 genera un design system completo da ciò che fornisci. **Per creare un design system:** 1. Clicca sul nome del tuo workspace in basso a sinistra, poi clicca **Settings**. 2. Clicca **Design system**. 3. Clicca **Create**. Se il tuo workspace ha già un design system, clicca invece **Create new design system**. 4. In **Create your design system**, aggiungi uno o più dei seguenti elementi: * **Descrivi il tuo brand:** scrivi una breve descrizione del tuo brand e aggiungi il logo nel riquadro accanto. * **Importa una fonte esistente:** puoi usare una fonte per design system. Passa tra le schede: * **Figma file:** trascina o seleziona un file `.fig`, fino a 1,9 GB, e allega tutte le sue pagine e frame o scegline alcuni. Base44 ridimensiona le immagini troppo grandi e prepara i file di grandi dimensioni in background, e non memorizza il file originale. * **Website URL:** incolla l'indirizzo di un sito web. Usa solo URL di cui hai i diritti sui contenuti. * **NPM package:** inserisci un pacchetto pubblicato per nome, name\@version o un link npmjs.com. Per impostazione predefinita viene risolto dal registro npm pubblico, oppure clicca **Private registry** per aggiungere l'URL di un registro, un token di accesso e gli eventuali scope da risolvere lì. Il tuo token di accesso viene usato una volta per recuperare il pacchetto e non viene memorizzato. * **Carica le tue risorse di design:** aggiungi immagini, font, un file `design.md` o altri file di design, fino a 10 file. 5. Clicca **Create**. Generare il design system può richiedere qualche minuto, e puoi uscire e tornare mentre è in corso. 6. Rivedi il design system generato nell'anteprima, poi regola ciò che vuoi. The Create a design system dialog with a logo, a brand description, an imported source, and uploaded design resources *** ## Modificare il tuo design system Quando apri un design system, lo modifichi in un editor a due pannelli. A sinistra ci sono tutte le impostazioni del brand e del design. A destra, una **Preview** live mostra quegli stili applicati a pulsanti, icone e card reali, così come appaiono nella tua app o sito. Quando cambi un'impostazione a sinistra, l'anteprima si aggiorna all'istante. Il nome e la tagline del design system si trovano in cima alla pagina. Clicca uno dei due per modificarlo direttamente. A sinistra, puoi modificare ogni parte del tuo design system: Una breve descrizione del tuo brand. Base44 la usa per mantenere in linea con il brand tutto ciò che genera. Aggiungi i loghi del tuo brand, o generane uno con l'AI. Clicca **Add logo** per caricare un logo, o **Generate logo** per descriverne uno e lasciare che Base44 lo crei. Un logo è contrassegnato come **Primary**, e puoi impostarne un altro come primario dal suo menu **More actions**. Editing your brand logos Scegli i font per i titoli e il corpo del testo, o carica i tuoi. Puoi anche regolare il peso di ogni stile di font. Chiunque nel tuo workspace possa modificare, cioè proprietari, admin ed editor, può caricare un font. Viewer e ospiti no. Choosing your heading and body fonts Clicca un colore per modificarlo, o clicca **Generate palette** e descrivi i colori che vuoi. Editing a color in the palette Definisce come comunica il tuo brand. Clicca **Add tone** per aggiungere un tratto, o clicca l'icona di generazione per lasciare che Base44 suggerisca un nuovo set. Adding tone of voice traits I principi che il tuo brand rappresenta. Clicca **Add value** per aggiungerne uno, o clicca l'icona di generazione per lasciare che Base44 suggerisca un nuovo set. Adding your core values Imposta quanto appaiono arrotondati i tuoi componenti. Setting your corner radius values Regola quanto spazio c'è tra gli elementi. Fine-tuning your spacing scale Imposta quanto appaiono in rilievo i tuoi componenti. Clicca un'ombra per regolarne posizione, sfocatura, estensione e colore. Setting your shadow values Regole che mantengono coerente il linguaggio visivo della tua app. Clicca **Add guideline** per aggiungerne una, o apri il menu **More actions** su una linea guida per modificarla o eliminarla. Editing your design guidelines Le tue modifiche non vengono applicate finché non le salvi. Clicca **Save changes** per conservarle, o **Reset changes** per annullare le modifiche non ancora salvate. Un design system ha bisogno di un nome e di una overview prima di poter essere salvato. *** ## Gestire i tuoi design system Gestisci un design system dalla sua card nella sezione **Design system**. Apri l'icona **More actions** su un design system per modificarlo, impostarlo come predefinito o eliminarlo. **Chi può gestire i design system:** * **Proprietari e admin:** possono creare, modificare, impostare il predefinito ed eliminare qualsiasi design system. * **Editor:** possono creare e modificare i design system. Solo proprietari e admin possono impostare il predefinito o eliminare un design system. Opening a design system for editing ### Impostare un design system predefinito Imposta un design system come predefinito del workspace così le nuove app partono automaticamente con esso. **Per impostare il design system predefinito:** 1. Clicca sul nome del tuo workspace in basso a sinistra, poi clicca **Settings**. 2. Clicca **Design system**. 3. Sul design system che vuoi, clicca l'icona **More actions** e clicca **Set as default**. Setting a design system as your workspace default Per smettere di usare un design system come predefinito, apri lo stesso menu e clicca **Remove default**. ### Eliminare un design system Elimina un design system che non ti serve più. L'eliminazione di un design system dalla sua card ha effetto immediato e non può essere annullata. **Per eliminare un design system:** 1. Clicca sul nome del tuo workspace in basso a sinistra, poi clicca **Settings**. 2. Clicca **Design system**. 3. Sul design system che vuoi, clicca l'icona **More actions** e clicca **Delete**. Deleting a design system *** ## Usare il design system mentre costruisci Quando inizi una nuova app, il tuo design system predefinito è preselezionato, così l'app viene costruita in linea con il tuo brand fin dal primo prompt. Per scegliere un design system diverso, clicca l'icona **Add** nella chat AI, seleziona **Use a design system**, poi scegli quello che vuoi. The home prompt box with the Add menu open, Use a design system highlighted, and the design system list beside it Puoi anche applicare un design system a un'app su cui stai già lavorando, dalla stessa icona **Add** nella chat AI. Quando il tuo workspace ha un solo design system, l'opzione ne mostra il nome, e cliccarla allega il design system al tuo prossimo prompt. The AI chat Add menu open with Use a design system highlighted L'applicazione di un design system ha effetto in un turno di build nella chat AI. Se la chat è impostata su una modalità che non costruisce, come **Discuss**, passa prima a **Build**. Applicare un design system a un'app già costruita ricostruisce l'app per adattarla, invece di ristilizzarla sul posto. Applicalo presto, o aspettati che l'app venga rigenerata. *** ## FAQ Clicca su una domanda qui sotto per saperne di più sui design system. No. Descrivi il tuo brand in poche parole, o importa da un sito web, un file Figma, un pacchetto npm o il tuo logo, e Base44 genera un design system completo per te. Puoi poi regolarne qualsiasi parte. Sul piano Builder e superiori hai 1 design system per workspace, quindi usa un workspace separato per ogni cliente o progetto che ha bisogno del proprio brand. I workspace Enterprise non hanno limiti. Questa pagina è stata tradotta con l'AI. Per le informazioni più accurate e aggiornate, consulta la [versione inglese](/).