Skip to the content

Use a brand in your code

Every brand made in ideare is a set of files: icons, a share card, colors and fonts. One command puts them in your project and keeps them in step with the brand.

Start here

In your project's folder, run:

npx ideare init crumb-crust

Swap crumb-crust for the brand's name in the address of its public page: the part after ideare.app/b/. No account needed.

The command:

  • works out whether the project is Next.js (app/ or src/app/), Vite or plain HTML;
  • shows the brand's name and domain, marked "unverified", before it writes anything;
  • lists every file it will add, replace or change, and keeps a copy of yours in .ideare/backup/;
  • puts in the icons, the manifest, the share card, the colors and the fonts, and adds one marked @import to your CSS.

Then commit ideare.json, ideare.lock.json and the files.

Keep it up to date

  • npx ideare pull brings the brand's newest approved version.
  • npx ideare status tells you whether there's a newer version.
  • npx ideare check fails when someone edits a brand file by hand. Run it in CI.
  • npx ideare login and npx ideare push send changes back. From anyone but an owner, a change becomes a proposal the owner approves.
  • npx ideare open opens the brand's public page.

Every command takes --yes (no questions) and --json (for tools and agents). It needs Node 20.3 or newer.

No account, with the downloaded kit

The "Download my kit" button on the home page saves a zip with your brand's brand.json. To make every file on your computer from it:

npx ideare init --local --from crumb-crust-kit/brand.json

The brand.json format

Every brand is one file, brand.json, in format 1. Everything else (icons, logos, pictures, tokens) is made from it. Its JSON Schema lives at https://ideare.app/schema/brand.v1.json, and editors like VS Code complete the fields when the file points to it in $schema.

The fields: name, shortName, domain, locales, defaultLocale, copy, voice, mark, wordmark, colors, paints, fonts, radii, art, links. Colors are hex, with a light and a dark version. A CLI that gets a newer format than it knows refuses it and says "Update ideare".

In code

The kit that draws every file is open source (MIT): @ideare/kit. The API has an SDK, @ideare/sdk.

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