+
+ {renderTab()}
+ + {tabs.find(t => t.id === activeTab)?.label} +
++ {tabs.find(t => t.id === activeTab)?.description} + {activeTab !== 'settings' && '. Edit the content below and download as PNG.'} +
++ {tabs.find(t => t.id === activeTab)?.description} + {activeTab !== 'settings' && '. Edit the content below and download as PNG.'} +
+{tipBody}
+A Strategic Identity System
+The Problem
++ They know their rating. But they don't know why it's dropping. +
+Who We Serve
+
+ People who want actionable insights, not enterprise complexity.
+ Who don't have time for complex tools or $300/month software.
+
Our Mission
+The Strategic Challenge
+Four Requirements
+{item.text}
+The Trade-off
+Full Google palette
+Looks like a clone. No differentiation.
+Completely unique
+Disconnected from what we do.
+Hybrid approach
+Recognition + Differentiation.
+The Logo
+Google Yellow
++ “This is about your Google rating.” +
+Instant recognition.
+Dark Slate
++ “We see what Google doesn't show.” +
+Differentiation. Depth. Analysis.
+Creative Decision
+Google Blue
+“We're part of Google”
+Dark Slate
+“We look deeper”
+Custom Green Gradient
++ “You'll see improvement.” +
+Progress. Journey. The outcome they want.
+Creative Decision
+Single Green
+Static. Binary success.
+Gradient
+Growth journey. Things get better.
++ Your Google rating hides insights that reveal a path to growth. +
+Adaptable
+Light backgrounds
+Dark backgrounds
+The Logo Story
+Proportions System
++ Tight gap creates a unified lockup. Text nearly matches star height. +
+Proportions System
++ Why 85%? Text nearly matches star height — + bold presence, tight unity, reads as one mark. +
++ Tight gap. Bold text. One unified mark. +
+The Wordmark
+Nunito Bold — Warm, approachable, human.
+Font Choice
+whyrating
+Inter
+Clean. Professional.
Tech/enterprise. “Platform”
whyrating
+Nunito
+Warm. Approachable.
Small business friendly. “Helper”
Key Insight
+Logo Colors
+Distinctive. Memorable.
Creates differentiation.
UI Colors
+Familiar. Google-inspired.
Reduces cognitive load.
+ Users spend seconds on the logo, but hours in the interface. +
+Core Principle
+Logo = Distinctive
+Creates recognition and differentiation.
+UI = Familiar
+Feels like tools users already know.
+Brand Voice
+Four Principles
+{item.title}
+{item.desc}
+How We Write
+✓ We say
+“Analyze my reviews”
+“Fix the right problems first”
+“Questions? Just reply.”
+✗ We don't say
+“Leverage AI-powered analytics”
+“Unlock synergies”
+“Please submit a ticket”
+Logo Variants
+Icon
+Primary
+Full
+Horizontal
+Horizontal Full
+Our Tagline
+Brand Guidelines v2.0
+Press ESC to exit
++ Usage: Copy this document and include it in your AI system prompt, Claude Project Knowledge, + or as context when asking AI to generate content, code, or designs for whyrating.com. +
+{description}
} + {children} ++ Note: Favicon pack generation coming soon. For now, use the SVG and resize as needed. +
++ Multiple sizes: Use the dropdown to download standard or 2x retina versions for each platform. +
+Horizontal lockup, left-aligned - Primary Blue CTA - White or Light background
+Icon-only version - Centered with padding - Works on light and dark
+Horizontal lockup, top-left - Single color version acceptable for fax/print
+{description}
} + {children} +{item.reason}
++ Minimum sizes enforced: Icon variant = 32px minimum - All other variants = 120px minimum. Sizes below the minimum are automatically clamped. +
+
+ SVG = Transparent: The logo SVG has no background. Use colorScheme="dark" when placing on dark backgrounds.
+
+ A review intelligence tool that helps local business owners understand what's really driving their Google rating. +
++ Your Google rating (star) hides insights (magnifier) that reveal a path to growth (bars). +
++ Small and medium business owners — the bakery owner, the auto shop manager, the local dentist. + People who want actionable insights, not enterprise complexity. They don't have time for complex tools + and don't want to pay $300/month for enterprise software. +
+{subtitle}
} + {children} ++ Understanding logo proportions requires tight-fit bounding boxes — + containers that touch the exact edges of visual elements with no extra padding. This ensures measurements are accurate and reproducible. +
++ Extra padding distorts proportions — ratios become meaningless. +
++ Box edges touch content exactly — proportions are real and measurable. +
++ Tight Fit: The bounding box must touch the extreme points of the object on all sides. + No padding, no extra space. Only then are proportions real and useful for design. +
++ Geometry: In a 5-point star with the point facing up, + the two lower points define the bottom edge of the bounding box. Both must touch exactly that edge. +
++ For text: The bounding box extends from the first pixel of the initial character + to the last pixel of the final character. Vertically: from cap-height to descender (if letters like g, y, p exist). +
++ Spacing rule: The gap is measured from the right edge of the symbol's bounding box to the left edge of the text's bounding box. + Optimal value: 0.4x – 0.5x of the symbol height. +
+| Measurement | +Range | +Optimal | +
|---|---|---|
| W symbol : W text | +1:2 — 1:4 | +1 : 2.5 – 3 | +
| H text / H symbol | +50% — 75% | +60% | +
| Gap / H symbol | +0.3x — 0.6x | +0.44x | +
| Vertical text offset | +3% — 8% up | +5% up | +
| Complete ratio (S:G:T) | +— | +1 : 0.42 : 4 | +
+ S = Symbol width, G = Gap width, T = Text width. + All measured from tight-fit bounding boxes. +
++ This ratio creates visual breathing room while maintaining cohesion. + Too tight feels cramped; too loose breaks the lockup. +
+
+{`function getTightFitBounds(text, font, fontSize) {
+ // 1. Create offscreen canvas
+ const canvas = document.createElement('canvas');
+ const ctx = canvas.getContext('2d');
+
+ // 2. Render text to canvas
+ ctx.font = \`\${fontSize}px \${font}\`;
+ ctx.fillText(text, 0, fontSize);
+
+ // 3. Scan pixels for non-transparent bounds
+ const pixels = ctx.getImageData(0, 0, canvas.width, canvas.height);
+ let top = null, bottom = null, left = null, right = null;
+
+ for (let i = 0; i < pixels.data.length; i += 4) {
+ if (pixels.data[i + 3] !== 0) { // Non-transparent pixel
+ const x = (i / 4) % canvas.width;
+ const y = Math.floor((i / 4) / canvas.width);
+ if (top === null) top = y;
+ bottom = y;
+ if (left === null || x < left) left = x;
+ if (right === null || x > right) right = x;
+ }
+ }
+ return { width: right - left, height: bottom - top };
+}`}
+
+ + This algorithm scans every pixel to find the exact boundaries of rendered content, ignoring font metrics, padding, and whitespace. +
+
+{`// Horizontal variant calculation (u = base unit, e.g., 120px)
+
+// Icon size: 60% of base unit
+horizontalIcon = u * 0.60 // 72px
+
+// Star tight-fit within 72px icon:
+starWidth = 72 * 0.683 = 49.2px // (star fills 68.3% of viewBox)
+starHeight = 72 * 0.667 = 48.0px // (star fills 66.7% of viewBox)
+
+// Text height target: 54% of star height
+targetTextHeight = 48 * 0.54 = 25.9px
+
+// Gap target: 0.44 × star height
+targetGap = 48 * 0.44 = 21.1px
+horizontalGap = u * 0.176 // 21.1px`}
+
+ Interactive logo renderer with PNG export at 2x scale.
+Pixel-analysis tool that verifies proportions against spec (±15% tolerance).
+Detailed measurement report with color-based element detection.
+{description}
} + {children} ++ All proportions verified. Logo variants render within +/-15% of design specifications. Measurements performed using Python pixel analysis on 2x rendered screenshots. +
+| Metric | +Measured | +Expected | +Match | +
|---|---|---|---|
| {label} | +{data.measured}{unit} | +{data.expected}{unit} | +
| Variant | +Width | +Height | +W Match | +H Match | +
|---|---|---|---|---|
| {name} | +{data.width}px / {data.expectedW} | +{data.height}px / {data.expectedH} | +
{item.desc}
++ Acceptance threshold: +/-15% tolerance accounts for these rendering variations while ensuring proportions remain visually correct. +
++ whyrating.com exists in a unique position: we analyze Google reviews, but we're not a Google product. Our visual identity needed to: +
++ The reasoning: Users spend seconds looking at a logo but hours in the interface. The logo needs to be memorable and distinctive. The UI needs to feel familiar and reduce cognitive load. +
+| Approach | +Pros | +Cons | +
|---|---|---|
| Full Google palette | +Maximum familiarity, feels integrated | +Looks like a Google clone, no differentiation | +
| Completely unique | +Maximum distinctiveness | +Disconnected from what we do, learning curve | +
| Hybrid (chosen) ✓ | +Recognition + differentiation | +Requires careful balance | +
+ The dark magnifier communicates: “We look deeper.” It's the visual representation of our value prop — revealing insights hidden beneath the surface. +
++ The ascending bars with deepening green visually communicate: “Things get better.” This is literally what SMB owners want — improvement. +
++ Our brand voice is “helpful expert, not salesy.” Nunito's rounded letterforms reflect that warmth. But we still use Inter for everything else to maintain professionalism. +
++ If yes to all four, proceed. If not, reconsider. +
++ Changes here will update all templates, downloads, and preview components. Settings are saved in your browser. +
+e.g., whyrating, whymyrating, mybrand
+{localConfig.domain}{localConfig.domainTLD}
+{localConfig.tagline}
+{localConfig.supportEmail}
+Tighter line height keeps headings compact and impactful
+More breathing room improves readability for paragraphs
+{description}
} + {children} +1200 × 675px • LinkedIn, Twitter
+