2 · Brand kit

TL;DR

Objective — build the single source of truth for visual identity — brand name, logo variations, a WCAG-checked color palette, bilingual-RTL typography, committed reference files, and marketing assets — so every later surface (email templates, social, marketing pages) consumes one consistent set of values.

User part + done-when

👤 User part — most of this is human design judgment: confirm the brand name and domain availability, create the logo set, choose the palette and fonts, and set up Canva/Figma. An agent can extract values off a brand-kit image, write the reference files, and run the commit — but it can’t decide a name or design a logo.

Done when the name + domain are confirmed, the logo set exports legibly on both backgrounds, every palette combination passes WCAG 4.5:1, typography (with RTL fonts if bilingual) is chosen, and the reference files are committed.  ·  ⏱ ~4–8 hr first time  ·  🔀 mixed (👤 design decisions, 🤖 reference files + commit).

Background

The brand kit is the single source of truth for visual identity: colors, fonts, logos, and usage rules. Build it before configuring email templates, social handles, or marketing pages — every one of those consumes these values.

flowchart LR
  A["1. Brand name"] --> B["2. Logo variations"]
  B --> C["3. Color palette<br/>(WCAG 4.5:1)"]
  C --> D["4. Typography"]
  D --> E["5. Commit reference files"]
  E --> F["6. Design tools"]
  F --> G["7. Marketing assets"]

Fast path — AI-assisted extraction

If you already have a brand kit image (from Canva, Figma, or a designer), upload it to your AI chat and say: “Extract brand colors, fonts, and details into the brand reference folder.” The agent reads the hex codes and typography off the image and writes the reference files. Skip to section 5 to verify.

Steps

1. Finalize the brand name

Confirm a name that’s available, defensible, and consistent across domain and social handles before anything else depends on it.

Who does this

👤 User checks availability and verifies trademark/handle status — naming is a human decision an agent can’t make.

1. Check availability at Namechk and Domainr.

   • ✅ The candidate name’s domain and handles are checked.

2. Verify against the criteria — domain available (or already owned), searchable and pronounceable, no trademark conflicts, social handles available across platforms.

   • ✅ A confirmed brand name and domain.

2. Create logo variations

Generate the full asset set so every app and marketing surface has the right logo at the right size.

Who does this

👤 User creates the logos in a design tool — generation and visual judgment are human work.

1. Export every asset the app and marketing surfaces need. Generate with AI tools (Midjourney, DALL·E, Looka, or Canva).

   Asset	Size	Format	Use
   Logo (light bg)	200×60px	PNG (transparent)	Light mode
   Logo (dark bg)	200×60px	PNG (transparent)	Dark mode
   Icon only	512×512px	PNG	App icon, favicon source
   Favicon	32×32px	ICO/PNG	Browser tab
   Social image	1200×630px	PNG/JPG	Open Graph

   • ✅ All five assets exported.

2. Save them under the app’s upload path.

   uploads/logo/
   ├── logo_light.png
   ├── logo_dark.png
   ├── icon.png
   ├── favicon.png
   └── og-image.png

   • ✅ The logo reads on both light AND dark backgrounds, and the favicon is legible at 16×16.

3. Define the color palette

Define the complete color system, then run every text/background combination through a WCAG contrast check.

Who does this

👤 User picks the palette and runs each combination through the contrast checker — color choice is a design decision.

1. Define the complete color system, then run every text/background combination through the WebAIM Contrast Checker for a WCAG 4.5:1 minimum. The hex values below are placeholders — fill them with your palette.

   Primary colors:

   Role	Hex	Usage
   Primary	#______	CTAs, links, active states
   Primary Hover	#______	Hover states, emphasis
   Primary Accent	#______	Badges, highlights

   Light-mode neutrals:

   Role	Hex	Usage
   Background	#F8FAFB	Page backgrounds
   Text Primary	#1A1F26	Headlines, body
   Text Secondary	#6B7280	Captions, muted
   Border	#D1D5DB	Dividers, borders

   Dark-mode neutrals:

   Role	Hex	Usage
   Background	#0F1419	Page backgrounds
   Text Primary	#E8ECEF	Headlines, body
   Text Secondary	#6B7280	Captions, muted
   Border	#374151	Dividers, borders

   Semantic colors:

   Role	Hex	Usage
   Success	#22C55E	Success messages
   Warning	#F59E0B	Warnings, alerts
   Error	#EF4444	Errors, destructive
   Info	#3B82F6	Information, tooltips

   • ✅ Every text/background combination passes WCAG 4.5:1.

Tools: Coolors for palette generation, Realtime Colors to preview in context, Contrast Checker for WCAG.

4. Choose typography

Select a heading font and a body font — and Arabic/RTL fonts for bilingual projects so the layout doesn’t fall back to a system font mid-page.

Who does this

👤 User chooses the font pairing — typography selection is a design decision.

1. Select a heading font and a body font. For bilingual projects, add Arabic/RTL fonts.

   Bilingual (English + Arabic):

   Use	English font	Arabic font
   Headings	Poppins Bold	Noto Kufi Arabic Bold
   Body	Montserrat Regular	Noto Kufi Arabic Medium

   English-only pairings:

   Heading	Body	Style
   Poppins	Montserrat	Professional (recommended default)
   Outfit	Plus Jakarta Sans	Friendly, tech
   Manrope	DM Sans	Geometric, minimal
   Inter	Inter	Clean, modern (common — verify contrast on your palette)

   • ✅ A heading + body pairing is chosen (with RTL fonts if bilingual).

2. Prepare the CSS variables the app theme will consume.

   @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Montserrat:wght@400;500;600&family=Noto+Kufi+Arabic:wght@400;500;700&display=swap');
   
   :root {
     --font-heading: 'Poppins', Arial, Helvetica, sans-serif;
     --font-body: 'Montserrat', Arial, Helvetica, sans-serif;
     --font-heading-ar: 'Noto Kufi Arabic', 'Segoe UI', Tahoma, sans-serif;
     --font-body-ar: 'Noto Kufi Arabic', 'Segoe UI', Tahoma, sans-serif;
   }

   • ✅ The font CSS variables are prepared for the theme.

5. Commit the brand reference files

Write all values from sections 1–4 into versioned reference files so the brand is reproducible and the agent can read it later.

1. Write the brand reference files under the project brand folder.

   Admin-Local/1-Project/0-Brand/
   ├── README.md              # Complete brand reference
   ├── colors/
   │   └── color-palette.md   # All hex codes (quick-reference)
   └── fonts/
       └── typography.md      # Font families + CSS variables

   • ✅ The brand reference files exist with colors, typography, and assets.

2. Fill the brand-reference template with all six sections — Colors, Typography, Logo URLs, Button styles, Link URLs, Contact info — then commit.

   # Stage only the brand folder created in step 1. (git add aborts the whole
   # command with "fatal: pathspec … did not match" if you list a path that
   # doesn't exist — so don't add files you haven't written.)
   git add Admin-Local/1-Project/0-Brand/
   git commit -m "docs(brand): create brand kit reference with colors, typography, and assets"
   # Expected: a commit lands with the brand reference files staged

   • ✅ The brand reference + template are committed to the repo.

Claude Code helpers

Use /commit to auto-generate a descriptive commit message. If you need custom landing pages or UI components beyond admin-panel theming, /frontend-design builds production-quality interfaces from the brand kit.

6. Set up the brand in design tools

Load the brand into the design tools so non-developers stay on-brand.

Who does this

👤 User configures Canva/Figma — these are dashboard actions in third-party design apps.

1. Canva Brand Kit — add the fonts (Poppins, Montserrat, + Arabic if bilingual) and all brand colors so non-developers stay on-brand.

   • ✅ The Canva Brand Kit holds the fonts and colors.

2. Figma Variables (optional) — create a Variables collection for colors, typography, and spacing.

   • ✅ A Figma Variables collection exists (if used).

7. Create marketing assets

Produce the recurring marketing assets up front so launch and email work isn’t blocked later.

Who does this

👤 User produces the marketing assets in a design tool — creative work that’s human-led.

1. Produce the recurring marketing assets and save them under the upload paths.

   Asset	Size	Purpose
   Hero image	1200×800	Landing page
   Feature screenshots	800×600	Marketing
   Dashboard preview	1400×900	Product demo
   Email header	600×200	Newsletters
   Social media banner	1500×500	Twitter/LinkedIn

   • ✅ Core marketing assets are exported to uploads/marketing/ and uploads/email/.

Checklist

Do not mark this step done until every box below is checked.

• 👤 Brand name + domain confirmed — availability checked, no trademark conflicts.
• 👤 Logo set exported — light, dark, icon, favicon, OG — legible on both backgrounds.
• 👤 Palette defined — every combination passes WCAG 4.5:1.
• 👤 Typography chosen — CSS variables prepared (with RTL fonts if bilingual).
• 🤖 Reference files committed — under Admin-Local/1-Project/0-Brand/.
• 👤 Core marketing assets exported — hero, screenshots, banners.

→Next step

Payments & billing