> ## 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 > Crie um design system de workspace na Base44 para definir as cores, fontes, logo e componentes da sua marca uma vez e aplicar um visual consistente em todos os seus apps. Um design system salva a identidade visual da sua marca no nível do workspace: suas cores, fontes, logo e um conjunto de componentes combinados. Crie-o uma vez, defina-o como padrão, e cada novo app que você constrói já começa alinhado à marca, então você não precisa redefinir seu estilo a cada vez. Você não precisa ser designer. Com apenas alguns detalhes, como seu logo, uma breve descrição da sua marca, a sensação que você quer e quaisquer arquivos de design que tiver, a Base44 cria um design system inteiro para você, para que todos os seus apps pareçam profissionais e alinhados à marca. Your design systems in workspace settings **Disponibilidade:** * Design systems estão disponíveis no [plano **Builder**](https://base44.com/pricing) e superiores. * Workspaces no plano Builder e superiores incluem 1 design system. Workspaces Enterprise não têm limite. * Design systems se aplicam a apps web, não a apps mobile. Um app importado do Figma, iniciado a partir de uma URL ou migrado de outra plataforma pode receber um design system depois que terminar de construir. * Criar e usar um design system não custa créditos. *** ## O que está incluído Quando você cria um design system, a Base44 preenche tudo o que mantém seus apps consistentes e alinhados à marca, e mostra tudo em uma prévia ao vivo. Mude uma cor ou uma fonte, e cada exemplo é atualizado imediatamente, então você sempre vê como fica. A design system, with your brand settings on the left and a live preview on the right Um design system cobre 3 coisas: * **Os fundamentos da sua marca:** Seu logo, nome da marca, slogan e uma breve descrição, além dos valores centrais da sua marca, do tom de voz e das diretrizes de design sobre como ela deve parecer. * **Sua identidade visual:** Suas cores, suas fontes, o quão arredondados são seus cantos, quanta sombra fica sob os elementos e quanto espaço vai entre eles. * **Peças prontas:** Um conjunto completo de componentes que já combinam com sua marca e estão prontos para serem usados em qualquer app, incluindo botões, ícones, cards, navegação, formulários e seções de página, cada um estilizado para seus estados interativos. *** ## Criando um design system Você cria um design system a partir das configurações do seu workspace. Em um único formulário, você pode combinar uma breve descrição, seu logo, uma importação do Figma, de um site ou de um pacote npm, e seus próprios arquivos de design, e a Base44 gera um design system completo a partir do que você fornecer. **Para criar um design system:** 1. Clique no nome do seu workspace no canto inferior esquerdo, depois clique em **Settings**. 2. Clique em **Design system**. 3. Clique em **Create**. Se seu workspace já tem um design system, clique em **Create new design system**. 4. Em **Create your design system**, adicione qualquer um dos seguintes: * **Descreva sua marca:** Escreva uma breve descrição da sua marca e adicione seu logo no quadrado ao lado. * **Importe uma fonte existente:** Você pode usar uma fonte por design system. Alterne entre as abas: * **Figma file:** Arraste ou procure um arquivo `.fig`, de até 1,9 GB, e anexe todas as suas páginas e frames ou escolha alguns específicos. A Base44 reduz imagens grandes demais e prepara arquivos grandes em segundo plano, e não armazena o arquivo original. * **Website URL:** Cole o endereço de um site. Use apenas URLs cujos conteúdos você tem o direito de usar. * **NPM package:** Insira um pacote publicado pelo nome, nome\@versão ou um link do npmjs.com. Ele é resolvido no registro público do npm por padrão, ou clique em **Private registry** para adicionar a URL de um registro, um token de acesso e os escopos que devem ser resolvidos lá. Seu token de acesso é usado uma vez para buscar o pacote e não é armazenado. * **Carregue seus recursos de design:** Adicione imagens, fontes, um arquivo `design.md` ou outros arquivos de design, até 10 arquivos. 5. Clique em **Create**. Gerar seu design system pode levar alguns minutos, e você pode sair e voltar enquanto ele é gerado. 6. Revise o design system gerado na prévia e ajuste o que quiser. The Create a design system dialog with a logo, a brand description, an imported source, and uploaded design resources *** ## Editando seu design system Quando você abre um design system, você o edita em um editor de dois painéis. À esquerda estão todas as configurações da sua marca e do seu design. À direita, uma **Preview** ao vivo mostra esses estilos aplicados a botões, ícones e cards reais, da forma como aparecem no seu app ou site. Conforme você altera uma configuração à esquerda, a prévia é atualizada instantaneamente. O nome e o slogan do seu design system ficam no topo da página. Clique em qualquer um deles para editá-lo ali mesmo. À esquerda, você pode editar cada parte do seu design system: Uma breve descrição da sua marca. A Base44 a usa para manter tudo o que gera alinhado à marca. Adicione os logos da sua marca ou gere um com IA. Clique em **Add logo** para carregar um logo, ou em **Generate logo** para descrever um e deixar a Base44 criá-lo. Um logo é marcado como **Primary**, e você pode definir outro como principal pelo menu **More actions** dele. Editing your brand logos Escolha suas fontes de título e de texto, ou carregue as suas próprias. Você também pode ajustar o peso de cada estilo de fonte. Qualquer pessoa no seu workspace que pode editar, ou seja, donos, admins e editores, pode carregar uma fonte. Viewers e guests não podem. Choosing your heading and body fonts Clique em uma cor para editá-la, ou clique em **Generate palette** e descreva as cores que deseja. Editing a color in the palette Define como sua marca se comunica. Clique em **Add tone** para adicionar um traço, ou clique no ícone de gerar para deixar a Base44 sugerir um novo conjunto. Adding tone of voice traits Os princípios que sua marca defende. Clique em **Add value** para adicionar um, ou clique no ícone de gerar para deixar a Base44 sugerir um novo conjunto. Adding your core values Defina o quão arredondados seus componentes parecem. Setting your corner radius values Ajuste quanto espaço vai entre os elementos. Fine-tuning your spacing scale Defina o quão elevados seus componentes parecem. Clique em uma sombra para ajustar sua posição, desfoque, extensão e cor. Setting your shadow values Regras que mantêm a linguagem visual do seu app consistente. Clique em **Add guideline** para adicionar uma, ou abra o menu **More actions** em uma diretriz para editá-la ou excluí-la. Editing your design guidelines Suas edições não são aplicadas até que você as salve. Clique em **Save changes** para mantê-las, ou em **Reset changes** para desfazer as edições que ainda não salvou. Um design system precisa de um nome e de uma visão geral antes que você possa salvá-lo. *** ## Gerenciando seus design systems Gerencie um design system pelo card dele na seção **Design system**. Abra o ícone **More actions** em um design system para editá-lo, defini-lo como padrão ou excluí-lo. **Quem pode gerenciar design systems:** * **Donos e admins:** Podem criar, editar, definir o padrão e excluir qualquer design system. * **Editores:** Podem criar e editar design systems. Apenas donos e admins podem definir o padrão ou excluir um design system. Opening a design system for editing ### Definindo um design system padrão Defina um design system como padrão do seu workspace para que novos apps comecem com ele automaticamente. **Para definir seu design system padrão:** 1. Clique no nome do seu workspace no canto inferior esquerdo, depois clique em **Settings**. 2. Clique em **Design system**. 3. No design system desejado, clique no ícone **More actions** e clique em **Set as default**. Setting a design system as your workspace default Para parar de usar um design system como padrão, abra o mesmo menu e clique em **Remove default**. ### Excluindo um design system Exclua um design system de que você não precisa mais. Excluir um design system pelo card dele tem efeito imediato e não pode ser desfeito. **Para excluir um design system:** 1. Clique no nome do seu workspace no canto inferior esquerdo, depois clique em **Settings**. 2. Clique em **Design system**. 3. No design system desejado, clique no ícone **More actions** e clique em **Delete**. Deleting a design system *** ## Usando seu design system enquanto constrói Quando você inicia um novo app, seu design system padrão vem pré-selecionado, então o app é construído para combinar com sua marca desde o primeiro prompt. Para escolher um design system diferente, clique no ícone **Add** no chat de IA, selecione **Use a design system** e escolha o que deseja. The home prompt box with the Add menu open, Use a design system highlighted, and the design system list beside it Você também pode aplicar um design system a um app em que já está trabalhando, pelo mesmo ícone **Add** no chat de IA. Quando seu workspace tem um design system, a opção mostra o nome dele, e clicar nela anexa o design system ao seu próximo prompt. The AI chat Add menu open with Use a design system highlighted Aplicar um design system tem efeito em um turno de construção no chat de IA. Se seu chat está em um modo que não constrói, como **Discuss**, mude para **Build** primeiro. Aplicar um design system a um app que já está construído reconstrói o app para combinar, em vez de reestilizá-lo no lugar. Aplique-o cedo, ou espere que o app seja gerado novamente. *** ## Perguntas frequentes Clique em uma pergunta abaixo para saber mais sobre design systems. Não. Descreva sua marca em poucas palavras, ou importe de um site, de um arquivo do Figma, de um pacote npm ou do seu logo, e a Base44 gera um design system completo para você. Depois, você pode ajustar qualquer parte dele. No plano Builder e superiores, você tem 1 design system por workspace, então use um workspace separado para cada cliente ou projeto que precisa da própria marca. Workspaces Enterprise não têm limite. Esta página foi traduzida usando IA. Para as informações mais precisas e atualizadas, consulte a [versão em inglês](/).