O Brand Studio

O Brand Studio em #/start é o único lugar onde você molda sua marca - seus logos, cores, tipografia, o restante dos seus tokens e os arquivos que ela mantém. Configure aqui uma vez e toda ferramenta, página e exportação segue por construção, não por revisão.

As mudanças aparecem em pré-visualização ao vivo em todo o app conforme você as faz, então você pode ver uma cor ou uma fonte se aplicar em tudo antes de confirmar. É tudo no dispositivo: seus arquivos de marca e tokens nunca saem da sua máquina (escolher uma Google Font busca aquela família específica do Google, uma vez, após um diálogo de consentimento), e a marca viaja em um único arquivo de brand pack.

Este é o editor. O dashboard é o espelho. A aba Design system no Dashboard (#/d) mostra sua marca em modo só leitura; você edita aqui, em #/start. Se quiser mudar uma cor depois, volte ao Brand Studio.

As salas

O studio é um conjunto de salas listadas num trilho lateral - não etapas. Nada é numerado, nada é condicionado a outra coisa e chegar a qualquer uma delas é legítimo:

Num celular, a mesma lista vira uma faixa horizontal de chips fixada sob o cabeçalho. Trocar de sala nunca recarrega nada - o editor mantém todos os seus painéis montados e simplesmente mostra o que você pediu.

Faça deep-link de uma sala com #/start?area=<key>. As chaves são overview, color (note a grafia americana na URL), type, logos, tokens, catalogue (a sala Files - a chave do painel é um contrato permanente, então a URL mantém o nome antigo) e versions. ?tab= é o alias de longa data para a mesma coisa e ainda funciona, então links e favoritos antigos continuam funcionando; qualquer coisa não reconhecida abre a Overview em vez de dar erro.

Fixas no pé do trilho ficam as ações que pertencem ao sistema de design inteiro, não a uma sala:

O trilho de salas do studio - Overview, Colours, Type, Logos, Tokens e Filessigned by Lollyvector SVGVerifique você mesmoGet the signed file20 paths~1.1k nodes37 groups19 KBO trilho de salas do studio - Overview, Colours, Type, Logos, Tokens e Filessigned by Lollyvector SVGVerifique você mesmoGet the signed file20 paths~1.1k nodes37 groups19 KBTry it in the app

Overview

Overview é a sala em que você chega, e ela tem duas faces.

Com nada configurado ainda, ela oferece duas portas - Start from a file (design tokens, um projeto Penpot, um pacote de sistema de design ou um SVG) e Start from scratch (adicione uma cor e continue quando quiser) - e uma saída discreta Explore the tools abaixo delas, porque sair também é uma resposta legítima.

Uma vez que um sistema de design existe, a mesma sala mostra o que você tem: a paleta e sua contagem de cores, as famílias tipográficas em vigor, quantos slots de logo estão preenchidos, quantos tokens existem e a sala Files. Cada bloco é uma porta para sua sala. Há contagens aqui, nunca uma barra de progresso e nunca um cartão de conclusão - nada neste studio é devido.

Logos

Comece esvaziando sua pasta de marcas na zona de soltura no topo: "Drop marks here, or choose several at once" aceita quantos arquivos você tiver de uma vez. Cada arquivo é lido quanto à forma e à tinta, e então enfileirado sob Waiting for a slot como um chip que diz o que pensa - "Looks like the Horizontal primary", com a medida em que se baseou, e um botão Place (Replace, onde aquele slot já está preenchido). Onde não tem certeza, o chip diz isso claramente e oferece Change slot em vez disso, que lista os oito. Nada é colocado até você apertar algo.

Duas coisas acontecem ao redor dessa fila. Uma marca com margem vazia em excesso recebe uma oferta de corte primeiro - responda ou pressione Escape e o arquivo original entra sem alterações. E onde uma marca pode suprir um slot irmão vazio, a sala oferece a versão derivada mono ou reverse como seu próprio chip, marcado Generated, que desaparece de novo se você preencher aquele slot de outra forma.

Abaixo disso fica a grade em que toda marca acaba - slots de orientação × tratamento:

São oito slots opcionais. Clique num slot para adicionar um PNG, SVG, JPEG ou WebP; clique num slot preenchido para substituí-lo. Todo slot é opcional e tudo permanece neste dispositivo.

A matriz de logos - cada orientação ao longo do topo, cada tratamento como seu próprio slot tracejado, todos opcionaissigned by Lollyvector SVGVerifique você mesmoGet the signed file8 paths~4.8k nodes19 groups54 KBA matriz de logos - cada orientação ao longo do topo, cada tratamento como seu próprio slot tracejado, todos opcionaissigned by Lollyvector SVGVerifique você mesmoGet the signed file8 paths~4.8k nodes19 groups54 KB

Colours

The Colours room after one colour - the two panes back, the generate offer, roles reading in three registers and the pane at one coloursigned by Lollyvector SVGVerifique você mesmoGet the signed file114 paths~26k nodes149 groups4 images523 KBThe Colours room after one colour - the two panes back, the generate offer, roles reading in three registers and the pane at one coloursigned by Lollyvector SVGVerifique você mesmoGet the signed file114 paths~26k nodes149 groups4 images523 KB

A sala mais rica, em dois painéis. O da esquerda é onde você trabalha; o da direita é sua paleta ao vivo. Arraste o divisor entre eles para redimensionar (Enter nele recolhe a paleta para fora do caminho).

A sala Colours - uma cor primária deriva rampas, cartões de espécime com razões de contraste e uma paleta ao vivosigned by Lollyvector SVGVerifique você mesmoGet the signed file61 paths~9.4k nodes77 groups200 KBA sala Colours - uma cor primária deriva rampas, cartões de espécime com razões de contraste e uma paleta ao vivosigned by Lollyvector SVGVerifique você mesmoGet the signed file61 paths~9.4k nodes77 groups200 KB

Adicione uma cor, depois dê a ela uma função

Add a colour é o todo do caminho simples: cole ou escolha uma cor em qualquer notação e ela vira exatamente um token. Nada é derivado dela, nada é sugerido a partir dela, nada mais é exigido. Cole uma lista inteira de cores e cada uma vira um chip que você pode adicionar por si só.

Roles é a camada por cima - qual cor exerce qual papel. Papéis são opcionais (um sistema de design com três cores soltas e nenhum papel é perfeitamente válido), qualquer amostra pode assumir um e a leitura de contraste é medida contra a superfície, APCA primeiro.

As alas de especialista

Quatro seções recolhidas ficam abaixo dessas duas. Abra a que quiser; cada uma é deep-linkável como #/start?area=color&focus=<wing>:

Uma cor, uma paleta inteira

Dentro de Generate a starter palette, escolha uma Primary colour e o Lolly calcula uma paleta completa - superfícies claras e escuras, texto, destaques e rampas completas de tinta/tom - usando a mesma matemática perceptual de cor (OKLCH) que o engine usa em todo lugar. Ajuste a derivação:

Nada nesta ala grava algo na sua marca. É uma pré-visualização, ao vivo em todo o app para você julgar, até você apertar Replace palette (abaixo).

Abaixo da primária você verá rampas ao vivo Primary / Neutral / Secondary / Blend e cartões de espécime Light e Dark, cada um trazendo sua própria leitura de contraste - a razão WCAG com o valor APCA Lc ao lado. Clique num passo na rampa Neutral ou Secondary para fixar aquele tom em vez do padrão derivado.

As quatro rampas empilhadas acima de cartões de amostra claros e escuros, cada cartão trazendo sua própria taxa de contraste WCAGsigned by Lollyvector SVGVerifique você mesmoGet the signed file25 paths~4.6k nodes60 groups57 KBAs quatro rampas empilhadas acima de cartões de amostra claros e escuros, cada cartão trazendo sua própria taxa de contraste WCAGsigned by Lollyvector SVGVerifique você mesmoGet the signed file25 paths~4.6k nodes60 groups57 KB

Monte sua paleta (gerador de harmonia)

Ainda na mesma ala, Monte sua paleta gera cores de destaque combinando com sua cor primária. Escolha uma Harmonia - Complementar, Adjacente, Tríade, Tétrade ou Análoga (que traz sua própria contagem de Destaques, de 2 a 5, e um Ângulo de matiz de 10° a 45°) - e cada candidata chega com um nome legível gerado automaticamente e um botão + Adicionar. Adicionar uma coloca essa cor na sua paleta imediatamente, um clique para um token. "Sua paleta, aplicada" mostra o conjunto inteiro em prévia sobre gráficos reais.

Destaques gerados, cada um com uma amostra, um nome gerado automaticamente, seu hex e um botão Adicionarsigned by Lollyvector SVGVerifique você mesmoGet the signed file8 paths936 nodes14 groups15 KBDestaques gerados, cada um com uma amostra, um nome gerado automaticamente, seu hex e um botão Adicionarsigned by Lollyvector SVGVerifique você mesmoGet the signed file8 paths936 nodes14 groups15 KB

Confirmando uma paleta gerada

Substituir paleta é o único controle nesta ala que grava algo, e nunca grava de imediato. Pressione-o e um cartão de revisão se abre primeiro, com o título "Substituir a paleta?", detalhando exatamente o que está prestes a acontecer: quantos papéis permanecem como você os atribuiu, quantas cores que você mesmo adicionou são mantidas, quantas curvas de tom são reancoradas, quantos travamentos de impressão são refixados, quantos tons ocultos permanecem ocultos, quantos pontos de gradiente mantêm sua cor.

Substituir paleta nesse cartão confirma a operação; Cancelar sai sem mudar nada. Depois que roda, o cartão vira "Paleta substituída." com um único Desfazer já em foco - e um checkpoint do sistema de design inteiro é criado antes da troca, então "voltar como estava" é uma restauração, não uma tarde perdida.

A paleta, o gráfico e cada amostra

O painel direito lista todas as cores da sua marca, agrupadas (Primária, Neutra, Secundária, Espectro, Personalizada, Papéis), cada grupo dobrável com seu próprio + Adicionar. Abaixo dele, Gráfico de cores se expande em duas visões das mesmas amostras: a Roda (a roda OKLCH - arraste um ponto para recolori-lo, clique num ponto para editá-lo ou clique num espaço vazio para soltar uma nova amostra) e o gráfico de Gama, que mostra onde a faixa exibível realmente termina. #/start?area=color&focus=chart abre o cartão diretamente, assim como ?wheel sempre faz.

O painel de paleta, cada grupo dobrável, com a pílula de download fixada na borda inferiorsigned by Lollyvector SVGVerifique você mesmoGet the signed file155 paths~14k nodes199 groups1 image191 KBO painel de paleta, cada grupo dobrável, com a pílula de download fixada na borda inferiorsigned by Lollyvector SVGVerifique você mesmoGet the signed file155 paths~14k nodes199 groups1 image191 KB

A roda OKLCH - o ângulo é o matiz, a distância do centro é a croma e os cinzas seguem um trilho de luminosidade na lateralsigned by Lollyvector SVGVerifique você mesmoGet the signed file274 paths~3.7k nodes67 groups83 KBA roda OKLCH - o ângulo é o matiz, a distância do centro é a croma e os cinzas seguem um trilho de luminosidade na lateralsigned by Lollyvector SVGVerifique você mesmoGet the signed file274 paths~3.7k nodes67 groups83 KB

Clique em qualquer amostra para abrir seu editor:

Esses travamentos de impressão são o que uma gráfica usa quando você exporta um PDF ou TIFF em CMYK - veja Exportação.

Excluir uma amostra é seguro: passos de rampa derivados e papéis de tema ficam ocultos (o token subjacente continua resolvendo, então nada a jusante quebra), enquanto cores que você mesmo adicionou são removidas de vez.

Gradientes

Um painel opcional de Gradientes cria tokens de mescla a partir da sua paleta para fundos e destaques. Pule por completo se sua marca não usa gradientes. Cada gradiente tem uma prévia, pontos nomeados (2-8) e um ângulo. O comportamento chave: um ponto referencia uma amostra, então recolorir essa amostra faz o gradiente acompanhar. A interpolação roda em OKLCH para mesclas limpas. Exclua um ponto para encurtar a sequência.

Leve a paleta para outros lugares

A pílula flutuante fixada na borda inferior do painel de paleta baixa a paleta inteira como Tokens de design (JSON), Variáveis CSS, Classes CSS, Variáveis SCSS, uma Paleta GIMP (.gpl) ou um Adobe Swatch Exchange (.ase) - assim a marca entra direto no Illustrator, Figma, GIMP ou numa folha de estilos. Ela fica fora do scroller do painel, então mantém seu lugar não importa até onde a paleta role. (Você também pode baixar a paleta na visão Catálogo.)

Tipografia

The compare stage open under its card, with the search row, the pinned families and the cards folded to a one-line stripsigned by Lollyvector SVGVerifique você mesmoGet the signed file74 paths~11k nodes99 groups234 KBThe compare stage open under its card, with the search row, the pinned families and the cards folded to a one-line stripsigned by Lollyvector SVGVerifique você mesmoGet the signed file74 paths~11k nodes99 groups234 KB

A sala começa com quatro cartões de papel - as quatro fontes que o app, suas ferramentas e toda exportação de fato leem. Cada cartão mostra o que atende esse papel agora, definido nessa fonte, com uma linha de texto real embaixo:

Títulos, código e itálico caem de volta na primária até você atribuí-los, então uma marca de fonte única não exige nenhuma decisão aqui. Nada num cartão grava algo: Trocar (ou Escolher uma fonte num papel vazio) abre o palco de comparação restrito a esse papel.

A sala Tipografia - os cartões de papel e uma amostra ao vivo de cada fonte em açãosigned by Lollyvector SVGVerifique você mesmoGet the signed file59 paths~9.3k nodes73 groups196 KBA sala Tipografia - os cartões de papel e uma amostra ao vivo de cada fonte em açãosigned by Lollyvector SVGVerifique você mesmoGet the signed file59 paths~9.3k nodes73 groups196 KB

O palco de comparação

O palco abre dentro da própria sala, não numa caixa de diálogo, então os cartões de onde você veio permanecem na tela. Pesquise uma família do Google Fonts (Inter, Fraunces, Space Grotesk...) ou solte um arquivo de fonte, pressione Adicionar à comparação e as candidatas ficam lado a lado nas mesmas palavras antes de qualquer uma delas ser instalada. Esc cancela e devolve o teclado ao cartão de onde você abriu.

Essa é a única porta de entrada, e é por isso que nada entra na sua marca sem ser visto. Abaixo do palco ficam os dois painéis de gerenciamento:

De qualquer forma a fonte permanece neste dispositivo, é renderizada no app, nas suas ferramentas e em toda exportação, offline para sempre, e viaja no seu pacote de marca - nada é buscado no momento da renderização. Tudo no Google Fonts é distribuído sob uma licença aberta (OFL/Apache/UFL).

O painel Papéis de tipografia no rodapé mostra uma amostra ao vivo de cada papel - corpo e interface na primária, uma fonte de destaque opcional para os títulos principais, um itálico para ênfase, uma monoespaçada para código e dados - assim você vê o conjunto inteiro funcionando junto.

A amostra de Papéis de tipografia - título, corpo, itálico e código, cada um na fonte para a qual esse papel resolve, com o nome da fonte ao ladosigned by Lollyvector SVGVerifique você mesmoGet the signed file17 paths~5.6k nodes29 groups68 KBA amostra de Papéis de tipografia - título, corpo, itálico e código, cada um na fonte para a qual esse papel resolve, com o nome da fonte ao ladosigned by Lollyvector SVGVerifique você mesmoGet the signed file17 paths~5.6k nodes29 groups68 KB

Tokens

O restante do sistema de design, editável sem tocar em código:

A sala Tokens - um controle deslizante de raio de canto mais espaçamento, dimensionamento, sombras e o resto do sistemasigned by Lollyvector SVGVerifique você mesmoGet the signed file73 paths~14k nodes95 groups1 image292 KBA sala Tokens - um controle deslizante de raio de canto mais espaçamento, dimensionamento, sombras e o resto do sistemasigned by Lollyvector SVGVerifique você mesmoGet the signed file73 paths~14k nodes95 groups1 image292 KB

Arquivos

Solte aqui os arquivos que sua marca guarda - além dos logotipos: recursos vetoriais, de imagem, de áudio e de movimento (vídeo, Lottie, animado). Eles chegam ao seu Catálogo, organizados em seções e prontos no seletor de recursos de cada ferramenta. Tudo permanece neste dispositivo. (O trilho rotula a sala como Arquivos; a chave de URL permanece catalogue, porque a chave de um painel é um contrato permanente.)

Trazer uma marca

Adicionar de... no rodapé do trilho abre um seletor de dois estágios. O primeiro estágio pergunta o que você tem, não em que formato está:

Escolha a fonte de arquivo de design e o segundo estágio é o cartão abaixo: os formatos aceitos aparecem como blocos de ícone em ordem de preferência, e o cartão inteiro é um único alvo de arrastar-e-soltar - clique em qualquer lugar dele ou arraste um arquivo até ele. Você também pode soltar um arquivo direto no estúdio.

O cartão de importação - os formatos aceitos aparecem como blocos de ícone, e o cartão inteiro é um único alvo de arrastar-e-soltarsigned by Lollyvector SVGVerifique você mesmoGet the signed file19 paths~3.2k nodes35 groups2 images175 KBO cartão de importação - os formatos aceitos aparecem como blocos de ícone, e o cartão inteiro é um único alvo de arrastar-e-soltarsigned by Lollyvector SVGVerifique você mesmoGet the signed file19 paths~3.2k nodes35 groups2 images175 KB

O que cada arquivo de design te dá:

Uma instalação a partir de origem cria um checkpoint primeiro, então "voltar a antes da importação" é uma única restauração. E o que uma varredura encontra não entra direto: os candidatos chegam à Bandeja, onde cada um é adicionado por um clique próprio, pela sala responsável por aquele tipo de material.

#/start?source=<kind> abre o seletor numa origem específica (file, pdf, image, font, url), e ?import o abre na lista simples.

Mover uma marca entre dispositivos

Exportar no rodapé do trilho grava um único LollyBrand-…zip - seus tokens, fontes, logotipos e preferência de tema, com um manifesto de integridade que ele verifica ao ser importado de volta. Ao lado, Tokens (.json) grava o documento de tokens de design puro, sozinho: sem fontes, sem logotipos, só os tokens, que é o que um repositório, uma etapa de CI ou outra ferramenta de tokens de fato lê.

Trazer um de volta é Adicionar de... → Tokens de design ou um arquivo de design (acima), ou arrastar e soltar no estúdio. É assim que um colega te passa uma marca, ou como você a leva para uma segunda instalação - sem conta, sem nuvem. Para trazer uma marca pela linha de comando, veja ingest:brand.

Versões

Versões, no rodapé do painel lateral, é onde um sistema de design deixa de ser um alvo móvel. Publique uma e você obtém uma cópia permanente e nomeada guardada neste dispositivo: ela nunca muda depois disso, então uma ferramenta que a fixa continua desenhando a mesma coisa. O painel fica oculto até que haja algo seu para publicar, então um estúdio que nunca publica nunca vê os controles.

Três coisas para saber antes de pressionar qualquer coisa, e o painel diz as três antes do clique, não depois:

Você pode Publish only ou Publish and make active - a diferença é se as ferramentas e o aplicativo passam a seguir essa versão dali em diante ou continuam seguindo sua edição mais recente. Follow the latest again coloca cada edição no ar assim que é feita. #/start?area=versions abre o painel diretamente.

Quando a marca é fixa

Algumas builds vêm com uma marca bloqueada - suas cores, fontes e tokens são o que toda ferramenta e exportação usam, e não há nada para mudar. Nesse caso, o estúdio é substituído por uma nota breve explicando que essa build vem com uma marca fixa e a edição está desativada. Isso é deliberado: é assim que uma organização garante que tudo permaneça dentro da marca.

Para onde ir agora