// Create a complete brand identity — logo (via quiver.ai), colors, fonts, SVG refinement in Inkscape, and a full asset pack (PNGs, favicons, OG images), delivered as a brand guide HTML page. Triggers on branding, logo, brand pack, brand color, project identity, social preview, visual identity.
| name | branding |
| description | Create a complete brand identity — logo (via quiver.ai), colors, fonts, SVG refinement in Inkscape, and a full asset pack (PNGs, favicons, OG images), delivered as a brand guide HTML page. Triggers on branding, logo, brand pack, brand color, project identity, social preview, visual identity. |
Create a complete brand identity for a project: logo mark, wordmark lockups, color palette, font selection, a production-ready asset pack, and a brand guide.
Verify these tools are installed before starting:
which inkscape && which magick
brew install --cask inkscapebrew install imagemagickThe workflow has 7 phases. The first 3 are collaborative with the user; the last 4 are mostly automated production work.
Throughout the collaborative phases, use temporary HTML pages to show the user their options. This is a core technique in this workflow — never ask the user to open SVG files from folders or guess what things look like.
The pattern:
tmp/ directory (e.g., tmp/brand-fonts.html)open -a "Google Chrome" /path/to/file.htmltmp/ files before committingKey rules for preview pages:
textContent, createElement) rather than innerHTML, which security hooks may block.<link> tags in the <head> for font previews — they render instantly in the browser.Ask the user:
Don't overthink this — a 2-minute conversation is enough. The AI tool will do the creative heavy lifting.
Craft a detailed prompt for the user to paste into an AI SVG generation tool (quiver.ai, recraft.ai, or similar). The prompt should specify:
Present the prompt to the user. They paste it into the tool, generate options, and either:
Once you have the SVG, read it to understand its structure (viewBox, dimensions, colors used). This is the mark — the icon without text.
Important: If the mark SVG has embedded text or fonts, note it — those will be converted to paths in Phase 4.
Suggest 4-6 fonts that pair well with the mark's style. Build a single HTML preview page that shows all candidates side by side:
Load fonts via Google Fonts <link> tags. Open the page in Chrome for the user to compare.
After the user picks a font:
curl -L -o /tmp/FontName.ttf "https://raw.githubusercontent.com/google/fonts/main/ofl/fontname/FontName%5Bwght%5D.ttf"
ofl/ path for most Google Fonts. Verify the download with file /tmp/FontName.ttf — it should say "TrueType Font data", not "HTML" or "ASCII text".cp /tmp/FontName.ttf ~/Library/Fonts/ (macOS)brand/fonts/ for the asset packIf the user already has a logo with colors, extract them first. Show all colors found in the SVG as chips in a preview HTML page — name each one by its role (e.g., "Hull Navy", "Sail Red").
Then present brand color candidates as large clickable-looking cards with:
Include a proposed color schema section showing how the colors would be used:
Color variant exploration: If the user wants to try different shades or swap a color (e.g., "that red is too dark"), generate a comparison page with 4-6 variants showing the full mark with each color swapped in. Use sed to replace hex values in the SVG for quick iteration — inline each variant SVG directly in the HTML.
Tailwind color scale: When the user settles on a brand color, they'll need a full shade scale for Tailwind. Direct them to generate one at:
The user pastes their hex, gets back a 50-950 scale in OKLCH, and shares it with you to wire into the project.
Record the final colors for the asset pack:
This phase produces the master SVGs that everything else is derived from. You need 9 SVG files:
| Variant | Mark only | Horizontal lockup | Stacked lockup |
|---|---|---|---|
| Color | mark-color.svg | logo-horizontal-color.svg | logo-stacked-color.svg |
| Black | mark-black.svg | logo-horizontal-black.svg | logo-stacked-black.svg |
| White | mark-white.svg | logo-horizontal-white.svg | logo-stacked-white.svg |
A lockup is the mark + wordmark text composed together. Two layouts:
Start with the color horizontal lockup:
<text> element using the chosen fontPreview each lockup in Chrome before converting text to paths. Open the SVG directly — open -a "Google Chrome" file.svg. The user should confirm the proportions, spacing, and overall feel before proceeding. Adjust text x position, font-size, and viewBox width based on feedback.
Google Fonts @import doesn't work in Inkscape. The font must be installed locally first (done in Phase 3). Then convert all text to paths so the SVG is self-contained:
inkscape input.svg --actions="select-all;object-to-path;export-filename:output.svg;export-do"
After conversion, verify with grep -c '<text' output.svg — should return 0.
#18181b (zinc-950, not pure black — standard design practice for better readability)#ffffff#18181b. In black/white variants, everything is monochrome.Use sed for color replacement — handle both fill="#hex" attributes and fill:#hex in style attributes:
sed 's/fill="#[0-9A-Fa-f]\{6\}"/fill="#18181b"/g; s/fill:#[0-9a-fA-F]\{6\}/fill:#18181b/g' input.svg > output.svg
After compositing, trim the viewBox to fit content tightly:
inkscape file.svg --actions="select-all;fit-canvas-to-selection;export-filename:file.svg;export-do"
Or manually adjust the viewBox after checking element bounding boxes:
inkscape file.svg --query-all
brand/
├── svg/ 9 master SVGs (from Phase 4)
├── png/ rasterized variants at standard sizes
├── favicon/ ico + png sizes + webmanifest
├── social/ platform-specific images
└── fonts/ font files + README
Export from the master SVGs using Inkscape (better SVG rendering than ImageMagick):
Marks — export at: 64, 128, 256, 512, 1024px (square, width = height)
inkscape mark-color.svg --export-type=png --export-filename=../png/mark-color-256.png --export-width=256
Lockups — export at widths appropriate for the aspect ratio:
Use the /favicon skill if available. Otherwise, generate manually from the mark:
# PNG sizes for favicons
inkscape brand/svg/mark-color.svg --export-type=png --export-filename=brand/favicon/favicon-16x16.png --export-width=16
inkscape brand/svg/mark-color.svg --export-type=png --export-filename=brand/favicon/favicon-32x32.png --export-width=32
inkscape brand/svg/mark-color.svg --export-type=png --export-filename=brand/favicon/apple-touch-icon.png --export-width=180
inkscape brand/svg/mark-color.svg --export-type=png --export-filename=brand/favicon/android-chrome-192x192.png --export-width=192
inkscape brand/svg/mark-color.svg --export-type=png --export-filename=brand/favicon/android-chrome-512x512.png --export-width=512
# ICO (multi-resolution)
magick brand/favicon/favicon-16x16.png brand/favicon/favicon-32x32.png brand/favicon/favicon.ico
Create brand/favicon/site.webmanifest:
{
"name": "PROJECT_NAME",
"short_name": "PROJECT_NAME",
"icons": [
{ "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
],
"theme_color": "#HEX_OF_BRAND_COLOR",
"background_color": "#ffffff",
"display": "standalone"
}
OG image (1280x640) — for GitHub social preview, Open Graph tags:
magick -size 1280x640 xc:white \
\( brand/svg/logo-horizontal-color.svg -resize 1100x -trim +repage \) \
-gravity center -composite \
brand/social/og-image-1280x640.png
The -trim +repage before -gravity center is critical — it strips the SVG's internal whitespace so ImageMagick centers the actual visual content, not the viewBox bounding box. Without this, the logo will appear off-center.
Platform icons:
inkscape brand/svg/mark-color.svg --export-type=png --export-filename=brand/social/discord-icon-512.png --export-width=512
inkscape brand/svg/mark-color.svg --export-type=png --export-filename=brand/social/github-avatar-500.png --export-width=500
inkscape brand/svg/mark-color.svg --export-type=png --export-filename=brand/social/npm-icon-256.png --export-width=256
Create brand/fonts/README.md documenting the font choice, license, and source:
# Brand Font
**[Font Name]** by [Foundry]
- Weight: 700 (Bold) for wordmark
- License: SIL Open Font License
- Source: [GitHub URL]
The full font family archive is included for reference.
Generate a comprehensive HTML brand guide page at brand/brand-guide.html. This is what a designer would deliver as a "brand style guide" or "brand board" — a single-page reference that anyone on the team can open to understand how to use the brand.
The brand guide should include these sections:
Project name and tagline/description at the top.
Show all 9 SVG variants organized in a grid:
#0f172a)Label each with its filename and recommended usage:
Include minimum size guidance: mark should not be displayed smaller than 32px, lockups not smaller than 120px wide.
Show each brand color as a large swatch with:
bg-primary-500)If a full Tailwind scale was generated, show the complete 50-950 ramp as a horizontal strip of swatches with labels.
Show all logo-specific colors too (hull, sails, water, etc.) with their hex values.
brand/fonts/A table listing every file in the brand/ directory with:
Organized by subdirectory (svg/, png/, favicon/, social/, fonts/).
<link>. No external file references (the guide should work when opened from any location).After generating, open in Chrome for the user to review: open -a "Google Chrome" brand/brand-guide.html
This phase is project-specific. Ask the user which of these apply:
<p align="center">
<a href="PROJECT_URL">
<img src="brand/svg/logo-horizontal-color.svg" width="280" alt="PROJECT_NAME">
</a>
</p>
GitHub renders SVGs from the repo inline. The width attribute prevents it from blowing up to full width. Wrap in <a> to link to the project's website.
<link> tags to <head><meta name="theme-color" content="#HEX">If the user has a Tailwind scale, wire it into the CSS:
@theme {
--color-primary-50: oklch(...);
--color-primary-100: oklch(...);
/* ... */
--color-primary-950: oklch(...);
}
"homepage" to package.json pointing to the docs/websitePresent manual steps clearly at the end — don't try to automate things that require browser UI interaction.
Before declaring done, verify:
brand/ directorytmp/ cleaned upBuild Ruby CLI tools with Thor and Zeitwerk. Use for new Ruby CLI gems, adding commands, refactoring, or 'Thor CLI', 'command-line tool in Ruby'.
Read, send input to, or spawn other tmux panes, windows, and sessions - including agents (Claude Code, Codex), REPLs, and TUIs running in them. Use when the user references another pane, window, or agent.
Convert markdown to PDF using Chrome. Triggers on 'markdown to pdf', 'render to pdf', 'pdf from markdown', 'print this markdown'.
Fetch secrets and create/manage 1Password items via CLI. Use when needing API keys, tokens, or credentials, or storing new secrets. Ask for the op://Vault/Item/field reference, not the secret itself.
Rigorous code review of completed implementation before committing. Use for features, refactors, and critical-path changes — not trivial changes (this is expensive).
Assess and improve codebase architecture via layered analysis and guided restructuring. Triggers on architecture review, structural assessment, design patterns, modularity, coupling, framework alignment.