Docs

Brand profiles

If you build several projects for the same client or for your company, save its identity once (colors, fonts, interface rules, voice and documentation) and apply it to any kit. The agent follows it from the first commit, without you explaining it every time.

Prompt

Paste this prompt into your agent: it detects the brand (from the project, the website or the logo), reviews it with you and applies it.

I want to save my company's identity (colors, fonts and design rules) to use it in all my projects with first-commit. I'm not technical: explain in plain words what you'll do at each step and ask me before installing anything. 1. Install the first-commit skill: npx skills@latest add Marlon-Chaviano/first-commit --skill first-commit 2. If this project already has the brand, detect it: npx create-first-commit brand detect If I only have the website or the logo, ask me for them and get the colors and fonts from there (you can use the extract-design-system skill). Write the result to brand.json in the format described at https://first-commit.dev/docs/brands. 3. Show me the colors and fonts you found and correct them with me. 4. Apply it to this project: npx create-first-commit brand ./brand.json

Create a profile

In Brand profiles, with a live preview. It can be yours or an organization's (all its members use it). A local file works too:

{
  "name": "web",
  "title": "Acme",
  "colors": { "primary": "#e11d48", "primaryForeground": "#ffffff", "background": "#ffffff", "foreground": "#0a0a0a" },
  "fonts": { "sans": "Inter" },
  "radius": "0.75rem",
  "voice": "Friendly and direct.",
  "rules": ["Primary buttons always use the primary color", "Lucide icons, never emojis"],
  "docs": { "style-guide.md": "# Style guide\n\n…" }
}

Only have the client's website? Ask your agent to extract the colors and fonts with the extract-design-system skill and write the brand.json.

Use it

$ npx create-first-commit landing-next --brand acme/web

In an existing project (also to update it when the profile changes):

$ npx create-first-commit brand acme/web

$ npx create-first-commit brand ./brand.json

What it writes

docs/brand/BRAND.md: Colors, typography, shape, voice and rules, for people and agents.
docs/brand/tokens.json: The same values as design tokens, for projects that aren't web (mobile, emails…).
docs/brand/*.md: The company documentation you added to the profile.
Global stylesheet: --brand-* variables and the shadcn/ui ones (--primary, --background…) at the end of the file, in a block that's rewritten on update.
AGENTS.md: A block with the rules: use only the brand's tokens, fonts and voice.

Anything you write outside those blocks is left alone. The project remembers the profile in kits.lock: just run npx create-first-commit brand to bring in the new version.