Files
nuc/whyrating-templates/public/WHYMYRATING_AI_CONTEXT.md
Alejandro Gutiérrez ea5775da25 Add WhyRating Templates - brand identity system
Next.js app showcasing WhyRating brand guidelines with interactive
tabs for colors, typography, proportions, logos, voice, downloads,
and AI context. Includes email templates (headers, signatures, CTAs)
and presentation component.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-18 15:17:42 +01:00

9.3 KiB

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:

<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

: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