Section 02
Color Palette
The palette formalizes what's already in the app. Emerald is the brand color; stone grounds it without feeling corporate; teal extends it for gradient use.
Primary Colors
Emerald Core
#047857
RGB 4, 120, 87
Primary brand color. CTA buttons, logo block, active nav states, success indicators, links.
Signals growth, nature, trustworthiness, and calm authority. Not as saturated as green — more institutional.
Stone Charcoal
#1c1917
RGB 28, 25, 23
Primary text, dark backgrounds, navbars, footer. The near-black anchor for the entire system.
Warm undertone (not cold gray) keeps the brand feeling human and approachable rather than sterile or corporate.
Stone White
#fafaf9
RGB 250, 250, 249
Page backgrounds, card surfaces, content areas. Never pure white (#fff) in backgrounds.
The warm off-white reads as lived-in and residential — appropriate for a product serving homeowners.
Secondary / Accent Colors
Emerald Mid
#059669
Hover states, gradient start, secondary CTAs
Teal
#0d9488
Hero gradients, accent illustrations, data viz
Amber
#d97706
Flagged status, warnings, review queue, pending states
Red
#dc2626
Denied status, errors, destructive actions only
Gradient Usage
Primary gradient: from-emerald-700 to-teal-600 · Use on hero sections, feature panels, and email headers only. Never on small UI elements — solid emerald only for buttons and icons.
Section 03
Typography System
A disciplined two-font system: grotesque for UI and display (authoritative, scannable), serif for long-form content and testimonials (warm, human, trustworthy).
Your community's questions — answered in seconds.
Instant answers. Real bylaws. No waiting.
Guard Portal · Admin Dashboard · Bylaw Chat
"HOAHelper answered 34 questions last week that would have landed in my inbox. I got my Sunday back." — Maria T., Board President, Twin Lakes HOA
Residents deserve clear, fast answers about the rules that govern their home. We built HOAHelper because we believe every community — regardless of size or budget — should have access to accurate, document-grounded guidance without burdening volunteer board members.
Type Scale Reference
| Role |
Size |
Weight |
Tracking |
| Hero headline | 48–64px | 900 Black | -2px to -3px |
| Section heading | 28–36px | 700–800 | -1px |
| Card title | 18–22px | 700 | -0.5px |
| Body / UI | 14–16px | 400 | 0 |
| Label / caption | 10–12px | 700 | +1.5px to +3px uppercase |
| Testimonial / editorial | 15–18px | 400 italic (Georgia) | 0 |
Section 04
Brand Voice & Personality
HOAHelper exists at the intersection of technology and community. The voice must be trusted by a 58-year-old board president and also feel modern enough that a 32-year-old property manager takes it seriously.
Dependable
Every claim is grounded in what the product actually does. No hype, no vague AI promises. If HOAHelper says it answers based on your bylaws, it cites the section. The brand speaks the same way.
Empathetic
Board members are volunteers under real stress. Residents feel ignored. HOAHelper copy acknowledges this without wallowing in it. We see the problem clearly and we have a solution.
Precise
We're working with legal documents and community rules. Vagueness is a liability. Copy uses specific numbers ("80% of questions"), concrete use cases, and avoids fluffy marketing language.
Calm
HOA situations are often tense. The brand doesn't add to the noise. Emerald, stone, and serif type all signal: someone reasonable is in charge here.
Unpretentious
This is a tool for real communities, not a Silicon Valley unicorn. We don't call it "revolutionary" or "disruptive." It helps people. That's enough, and it's what we say.
Optimistic
The product exists because a better situation is possible. Copy leads with resolution, not just pain. Boards can get their evenings back. Residents can get answers now. We've already built that.
Tone of Voice Spectrum
Very formal
Friendly-professional
Very casual
Very technical
Plain-language first
Zero jargon
Very playful
Grounded, dry wit
Very serious
Write like this
"Residents get answers based on your community's actual documents — not generic advice from the internet."
"You volunteered to serve your neighbors. Not to spend every Sunday answering the same questions about pool hours."
"80% of routine questions handled automatically. You only hear about the ones that actually need you."
Avoid this
"Revolutionizing community management with cutting-edge AI technology!"
"Leverage our powerful AI platform to unlock synergies across your HOA ecosystem."
"Game-changing, disruptive SaaS solution for modern community living."
Section 07
AI Image Generation Prompts
Copy-paste ready prompts for Midjourney, DALL-E, or Stable Diffusion. Append "--ar 16:9" for landscape, "--ar 1:1" for square, "--ar 9:16" for vertical (Reels/Stories).
01 · Logo Generation
Primary Logo Concept (Concept A)
"Minimal professional logo for 'HOAHelper', a SaaS product. Small rounded square icon in emerald green (#047857) containing a simple white home icon (Lucide-style, single stroke weight 1.5px). To the right: wordmark 'HOAHelper' in bold sans-serif (weight 800), 'HOA' in charcoal black, 'Helper' in emerald green. Clean white background. No shadows, no gradients, no drop shadows. Flat design. Vector style. --style raw --no people --no decorative elements"
02 · Brand Hero Image
Landing Page / Marketing Hero
"Professional lifestyle photograph. A person in their late 40s-50s sits at a light wood kitchen table in a warm, naturally lit home. They're looking at their phone with a calm, relieved expression. The phone screen shows a clean chat interface with emerald green message bubbles. In the background, slightly out of focus: a residential neighborhood visible through a window, warm afternoon light. Color treatment: warm tones, slightly desaturated, stone and cream foreground. No text overlay. Cinematic but not dramatic. Photographed on medium format, natural light only, editorial style. --ar 16:9 --style raw"
03 · Brand Marketing Image
Guard Portal / Gate Security Use Case
"Professional editorial photograph. A security guard in a neutral uniform stands at a residential gate booth, looking at a tablet screen. The screen shows a clean UI with green 'ALLOWED' status. The guard looks calm and confident, not stressed. Background: blurred suburban neighborhood gate, warm daylight, green landscaping. No text visible except the word 'ALLOWED' on the tablet. Warm, calm, trustworthy mood. Natural light, slightly desaturated color treatment. --ar 16:9 --style raw --no dramatic lighting"
04 · Icon Set
Consistent UI Icons
"Set of 8 minimal line icons on white background, single-stroke style (Lucide/Feather icon aesthetic), 1.5px stroke weight, 24x24px grid, emerald green (#047857) stroke on white. Icons: (1) home/house, (2) document with checkmark, (3) shield with check, (4) chat bubble with lightning bolt, (5) person with plus sign, (6) bar chart, (7) clock with check, (8) flag/warning triangle. Consistent optical weight across all. No fill, outline only. Clean grid layout showing all 8 icons arranged 4x2. Vector illustration style. --style raw --no shadows --no gradients"
05 · Social / Ad Creative
Board Member Burnout — Problem Creative
"Editorial photograph, overhead flat-lay. A kitchen table surface: laptop open showing an email inbox with many unread messages, a yellow legal pad with handwritten notes ('Pool hours?', 'Can we have a fence?', 'Parking issue — unit 14'), a coffee mug, scattered papers, sticky notes. Warm natural light from the side. Color palette: warm white and stone tones, slight desaturation. No people visible. Conveys overwhelm without being theatrical. Clean composition, centered. --ar 1:1 --style raw"