nuc/whyrating-templates/public/WHYMYRATING_AI_CONTEXT.md

# actionkitnow.com Brand Context for AI Systems

> **Purpose:** This document provides AI systems with comprehensive brand guidelines for generating content, designs, copy, and code related to actionkitnow.com.com.

---

## Brand Identity

### What actionkitnow.com Is
A review intelligence tool that helps local business owners understand what's really driving their Google rating — enterprise-grade insights at a small business price, no subscription required.

### Target Audience
Small and medium business owners: bakery owners, dentists, auto shop managers, local service providers. People who want actionable insights without complexity, jargon, or enterprise pricing.

### Core Positioning

| Attribute | Value |
|-----------|-------|
| Tagline | "The story behind your stars" |
| Primary CTA | "Analyze my reviews" |
| Value Proposition | "Enterprise-grade insights. Small business price." |
| Voice | Helpful expert, not salesy |
| Feel | Professional but approachable |

### The Logo Story (One Sentence)
"Your Google rating (yellow star) hides insights (dark magnifier) that reveal a path to growth (green bars)."

---

## Design System

### Key Principle
> **Logo = Distinctive.** Creates recognition and differentiation.
> **UI = Familiar.** Feels like tools users already know.

### Logo Colors (Reserved for Brand Mark Only)

| Element | HEX | RGB | Usage |
|---------|-----|-----|-------|
| Star | `#FBBC05` | rgb(251, 188, 5) | Google Yellow — instant recognition |
| Magnifier | `#1E293B` | rgb(30, 41, 59) | Dark Slate — "we see deeper" |
| Lens | `#FEF3C7` | rgb(254, 243, 199) | Light amber interior |
| Bar Light | `#86EFAC` | rgb(134, 239, 172) | Shortest growth bar |
| Bar Mid | `#22C55E` | rgb(34, 197, 94) | Medium growth bar |
| Bar Dark | `#15803D` | rgb(21, 128, 61) | Tallest growth bar |

### UI Colors (Product Interface & Marketing)

| Role | HEX | RGB | Usage |
|------|-----|-----|-------|
| Primary | `#4285F4` | rgb(66, 133, 244) | CTAs, links, buttons, focus states |
| Secondary | `#1E40AF` | rgb(30, 64, 175) | Hover states, depth |
| Accent | `#F59E0B` | rgb(245, 158, 11) | Highlights, `.com` in wordmark |
| Success | `#34A853` | rgb(52, 168, 83) | Success states, positive metrics |
| Error | `#EA4335` | rgb(234, 67, 53) | Errors, warnings |
| Dark | `#1E293B` | rgb(30, 41, 59) | Primary text |
| Slate | `#64748B` | rgb(100, 116, 139) | Secondary text |
| Light | `#F8FAFC` | rgb(248, 250, 252) | Page backgrounds |
| Card | `#FFFFFF` | rgb(255, 255, 255) | Card backgrounds |
| Dark BG | `#1C1917` | rgb(28, 25, 23) | Dark mode background (Stone 900) |

### Typography

| Context | Font | Weight | Size |
|---------|------|--------|------|
| Wordmark only | Nunito | 700 | Variable |
| H1 | Inter | 700 | 36px |
| H2 | Inter | 600 | 30px |
| H3 | Inter | 600 | 24px |
| H4 | Inter | 500 | 20px |
| Body | Inter | 400 | 16px |
| Small | Inter | 400 | 14px |
| Caption | Inter | 400 | 12px |

**Line Heights:** Headings 1.2-1.3, Body 1.5-1.6

**Font Loading:**
```html
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Nunito:wght@700&display=swap" rel="stylesheet">
```

### Border Radius
- Brand radius: `10px` (professional yet approachable)

---

## Brand Voice

### Tone Principles
1. **Helpful expert** — knowledgeable but never condescending
2. **Plain language** — no jargon, no buzzwords
3. **Respectful of time** — get to the point
4. **Encouraging** — problems are fixable

### Writing Examples

#### DO ✅

| Context | Example |
|---------|---------|
| Headlines | "See exactly what's frustrating your customers" |
| Value prop | "Fix the right problems first" |
| Pricing | "Enterprise-grade insights. Small business price." |
| CTA | "Analyze my reviews" |
| Feature | "We read every review so you don't have to" |
| Support | "Questions? Just reply to this email." |

#### DON'T ❌

| Context | Bad Example | Why |
|---------|-------------|-----|
| Headlines | "Leverage AI-powered sentiment analysis" | Jargon |
| Value prop | "Unlock synergies in your feedback pipeline" | Buzzwords |
| Pricing | "🚨 LIMITED TIME: 50% OFF!" | Salesy/desperate |
| CTA | "Get started now!" | Generic, pushy |
| Feature | "Revolutionary disruptive solution" | Empty hype |
| Support | "Please submit a ticket" | Cold, corporate |

### Email Subject Lines
- ✅ "Your June review summary is ready"
- ✅ "3 things customers mentioned this week"
- ❌ "🚨 URGENT: Don't miss your analytics!"
- ❌ "You won't BELIEVE what customers said"

### Handling Objections

**"I don't have time for another tool"**
- ✅ "That's exactly why we built this — 5 minutes gives you what used to take hours."
- ❌ "Our platform is incredibly easy to use with minimal onboarding!"

**"I already read my reviews"**
- ✅ "You know what they said. We show you the patterns you'd miss."
- ❌ "Our AI provides deeper insights than manual review reading."

---

## Logo Usage Rules

### Logo Variants
1. **Icon Only** — Star + magnifier + bars, no text (favicons, app icons, watermarks)
2. **Primary (Vertical)** — Icon above, wordmark below (landing pages, marketing)
3. **Full (Vertical)** — Icon + wordmark + tagline (splash screens, presentations)
4. **Horizontal** — Icon left, wordmark right (headers, email signatures)
5. **Horizontal Full** — Icon + wordmark + tagline horizontal (documentation)

### Minimum Sizes
- **Full logo:** 120px width minimum
- **Icon only:** 32px minimum

### Single Color Versions
Available in Dark (`#1E293B`) or White (`#FFFFFF`) for:
- Watermarks
- Single-color printing
- Embroidery

### Logo Misuse — DO NOT:
- Change logo colors outside approved variations
- Stretch, skew, or distort the logo
- Add effects (shadows, gradients, outlines)
- Place on busy backgrounds without contrast
- Rearrange logo elements
- Use Google Blue for the magnifier (makes us look like a Google product)

---

## Design Rationale (For Context)

### Why Two Color Systems?
| System | Colors | Purpose |
|--------|--------|---------|
| Logo | Yellow, Dark, Custom Greens | Distinctive brand mark |
| UI | Google-inspired blues | Familiar interface |

Users spend seconds on the logo but hours in the UI. Logo = memorable. UI = familiar.

### Why Dark Magnifier (Not Google Blue)?
- Google Blue = "We're part of Google"
- Dark = "We see what Google doesn't show you"

The dark magnifier differentiates us from looking like a Google product.

### Why Custom Green Gradient (Not Single Green)?
- Single color = static, binary success
- Gradient = progressive growth, improvement journey

The ascending bars visualize "things get better" — what SMB owners want.

### Why Nunito for Wordmark?
- Inter = clean, enterprise, tech
- Nunito = warm, friendly, approachable

Matches our "helpful expert" voice. Nunito for wordmark only; Inter for everything else.

---

## CSS Variables Reference

```css
:root {
  /* Brand Logo Colors */
  --brand-star: #FBBC05;
  --brand-magnifier: #1E293B;
  --brand-lens: #FEF3C7;
  --brand-bar-light: #86EFAC;
  --brand-bar-mid: #22C55E;
  --brand-bar-dark: #15803D;
  --brand-accent: #F59E0B;

  /* UI Colors */
  --ui-primary: #4285F4;
  --ui-primary-hover: #1E40AF;
  --ui-success: #34A853;
  --ui-error: #EA4335;

  /* Surface Colors */
  --surface-page: #F8FAFC;
  --surface-card: #FFFFFF;
  --surface-muted: #F1F5F9;

  /* Fonts */
  --font-sans: 'Inter', sans-serif;
  --font-wordmark: 'Nunito', sans-serif;

  /* Border radius */
  --radius-brand: 10px;
}

/* Dark mode */
.dark {
  --surface-page: #1C1917;
  --surface-card: #292524;
  --surface-muted: #44403C;
}
```

---

## AI Generation Rules

When generating content for actionkitnow.com:

### Copy/Text
1. Use plain language — avoid jargon like "leverage", "synergy", "pipeline"
2. Be direct and respectful of time
3. Frame problems as fixable, tone should be encouraging
4. Never use desperate/salesy language (🚨, "URGENT", "LIMITED TIME")
5. Primary CTA is always "Analyze my reviews" or close variation

### Design/UI
1. Use `#4285F4` (Primary Blue) for interactive elements
2. Use `#1E293B` (Dark) for primary text
3. Reserve logo colors for the logo only — don't use `#FBBC05` or greens in UI
4. Use `#F59E0B` (Accent) sparingly for warmth and star-related visuals
5. Border radius should be `10px` for cards/buttons
6. Always support dark mode with warm Stone palette

### Code
1. Use Inter font family for UI, Nunito only for wordmark
2. Include font preconnect for performance
3. Use CSS variables for colors
4. Tailwind classes follow brand system

### Imagery
1. Logo should never be distorted or recolored
2. Magnifier must be Dark, never Google Blue
3. Growth bars always use 3-shade green gradient
4. Clear space around logo = height of letter "y"

---

## Quick Copy Reference

| Need | Copy |
|------|------|
| Tagline | "The story behind your stars" |
| Primary CTA | "Analyze my reviews" |
| Value prop | "Enterprise-grade insights. Small business price." |
| Problem statement | "Your Google rating tells customers whether to visit — but it doesn't tell you why it's dropping." |
| Solution | "actionkitnow.com analyzes every review and shows you exactly what's frustrating customers, what they love, and what to fix first." |
| Objection handler (time) | "5 minutes gives you what used to take hours." |
| Objection handler (competition) | "You know what they said. We show you the patterns you'd miss." |

---

*Version: 2.0 | Last updated: January 2025*