Pular para o conteúdo

Use uma marca no seu código

Toda marca feita no ideare é um conjunto de arquivos: ícones, imagem de compartilhamento, cores e fontes. Um comando coloca tudo no seu projeto e mantém em dia com a marca.

Comece aqui

Na pasta do seu projeto, rode:

npx ideare init padaria-fermento

Troque padaria-fermento pelo nome da marca no endereço da página pública dela: a parte depois de ideare.app/b/. Não precisa de conta.

O comando:

  • descobre se o projeto é Next.js (app/ ou src/app/), Vite ou HTML;
  • mostra o nome e o domínio da marca, com o aviso "unverified", antes de gravar;
  • lista cada arquivo que vai adicionar, trocar ou mudar, e guarda uma cópia dos seus em .ideare/backup/;
  • coloca os ícones, o manifesto, a imagem de compartilhamento, as cores e as fontes, e adiciona um @import marcado no seu CSS.

Depois, faça commit de ideare.json, ideare.lock.json e dos arquivos.

Mantenha em dia

  • npx ideare pull traz a versão aprovada mais nova da marca.
  • npx ideare status diz se existe uma versão mais nova.
  • npx ideare check falha quando alguém edita um arquivo da marca à mão. Rode no CI.
  • npx ideare login e npx ideare push mandam alterações de volta. De quem não é dono, a alteração vira uma proposta que o dono aprova.
  • npx ideare open abre a página pública da marca.

Todo comando aceita --yes (sem perguntas) e --json (pra ferramentas e agentes). Precisa de Node 20.3 ou mais novo.

Sem conta, com o kit baixado

O botão "Baixar meu kit" da página inicial baixa um zip com o brand.json da sua marca. Pra fazer todos os arquivos no seu computador a partir dele:

npx ideare init --local --from padaria-fermento-kit/brand.json

O formato do brand.json

Cada marca é um arquivo, brand.json, no formato 1. Todo o resto (ícones, logos, imagens, tokens) sai dele. O JSON Schema fica em https://ideare.app/schema/brand.v1.json, e editores como o VS Code completam os campos quando o arquivo aponta pra ele em $schema.

Os campos: name, shortName, domain, locales, defaultLocale, copy, voice, mark, wordmark, colors, paints, fonts, radii, art, links. As cores vêm em hex, com uma versão clara e uma escura. Um CLI que recebe um formato mais novo do que conhece recusa e diz "Update ideare".

No código

O kit que desenha cada arquivo é aberto (licença MIT): @ideare/kit. A API tem um SDK, @ideare/sdk.

import { draftBrand, generate } from "@ideare/kit";