Brand Guidelines

You help define, document, and apply consistent brand identity across a project.

When to trigger automatically

When starting a new project (or when the user says "let's start building X"), check if BRAND.md exists in the project root. If it doesn't, offer to create one before writing any code:

"לפני שנתחיל — רוצה שנגדיר את המיתוג של הפרויקט? זה ייקח 5 דקות ויחסוך המון בהמשך."

What goes in BRAND.md

A complete brand file has 6 sections:

1. Identity

• Product/company name
• Tagline (if any)
• Mission (1 sentence: what it does and for whom)
• Personality adjectives (3–5 words: e.g. "מקצועי, חכם, אמין, נגיש")

2. Colors

Define all as CSS oklch() values (per global code conventions):

:root {
  --color-primary:    oklch(55% 0.18 250);   /* main brand color */
  --color-secondary:  oklch(70% 0.12 200);   /* accent */
  --color-bg:         oklch(98% 0.005 250);  /* background */
  --color-surface:    oklch(96% 0.006 250);  /* cards/surfaces */
  --color-text:       oklch(15% 0.01 250);   /* main text */
  --color-muted:      oklch(55% 0.01 250);   /* secondary text */
  --color-border:     oklch(88% 0.01 250);   /* borders */
  --color-success:    oklch(65% 0.18 145);
  --color-warning:    oklch(75% 0.15 85);
  --color-error:      oklch(55% 0.22 25);
}

3. Typography

• Heading font (Google Font name or system font)
• Body font
• Font size scale (base, sm, lg, xl)
• Letter spacing preference (usually -0.02em per global rules)

4. Visual style

• Border radius preference (e.g. 12px for rounded, 4px for sharp, 999px for pill)
• Shadow style (flat, subtle, dramatic)
• Illustration style (photos, icons, abstract, none)
• Image mood (clean & minimal, warm & lifestyle, dark & premium)

5. Tone of voice

• Language: Hebrew / English / both
• Formality: פורמלי / שיחתי / חצי-פורמלי
• Examples of on-brand copy vs. off-brand copy
• Key phrases to use / avoid

6. Logo

• Logo file path (if exists)
• Usage rules (minimum size, clear space, do/don't)
• Dark background variant (if applicable)

Output

Create BRAND.md in the project root with all 6 sections filled in.

Also create src/styles/brand.css (or src/app/globals.css section) with the CSS custom properties ready to paste.

After creating BRAND.md:

1. Summarize the brand in 2–3 sentences
2. Show the color palette (as a small text table)
3. Ask: "רוצה שאשתמש בהנחיות האלה אוטומטית כשאני כותב קוד ב-UI?"

Applying existing brand guidelines

When the user says "use the brand" or "follow the brand guidelines":

1. Read BRAND.md from the project root
2. Extract relevant tokens for the current task
3. Apply them to any UI code being written (CSS vars, Tailwind config, component styles)

Updating brand guidelines

If the user changes something ("שנה את הצבע הראשי ל..."), update both:

1. BRAND.md — the written guideline
2. src/styles/brand.css or wherever the CSS vars are defined

Interview template

If the user says "create brand guidelines" without providing details, ask these questions (all at once, not one by one):

כדי להגדיר את המיתוג אצטרך כמה פרטים:

1. שם המוצר/עסק?
2. מה הוא עושה ולמי? (משפט אחד)
3. 3 מילים שמתארות את האופי שאתה רוצה? (למשל: מקצועי, חם, חדשני)
4. יש לך צבעים מועדפים? (אם לא — אגדיר בהתאם לאופי)
5. השפה הראשית: עברית / אנגלית / שתיהן?
6. יש לוגו קיים?