# profitslocal — Brand & Design Asset MD

> Brand: **profitslocal** / **profitslocal.com**  
> Category: Creative AI website agency for small local businesses  
> Core promise: **We research and pre-build your website first. You only purchase after seeing the finished product.**

---

## 1. Brand Essence

### One-liner
**Beautiful, research-backed local-business websites — pre-built before you pay.**

### Positioning
profitslocal is a creative AI agency that researches small local businesses, their customers, competitors, neighborhood, search demand, and design opportunity, then pre-builds a high-taste website preview before asking the client to purchase.

### Brand personality
- **Tasteful but approachable:** premium design, not intimidating.
- **Playful but purposeful:** creative visuals with clear conversion logic.
- **Local-first:** storefronts, maps, neighborhood signals, real-business warmth.
- **Trust-building:** preview-first model, transparent pricing, no hidden fees.
- **Fast and practical:** fast-loading, SEO-ready, mobile-ready, easy to launch.

### Brand mantra
**Research first. Design with taste. Preview before payment.**

---

## 2. Visual Creative Direction

### Design language name
**Local Intelligence Collage**

A light-mode, art-directed visual system combining:
- miniature local storefront worlds,
- browser-window website previews,
- map pins and neighborhood maps,
- research sticky notes,
- elegant serif typography,
- hand-drawn annotation marks,
- motion ribbons and upward arrows,
- pastel 3D objects and UI cards.

The look should feel like a premium Awwwards-level website concept, but still clear enough for a developer to recreate.

### Global mood
Warm, bright, clever, crafted, editorial, optimistic, high-trust.

### Avoid
- dark AI dashboards,
- generic purple/blue neon gradients,
- plain white SaaS blocks,
- repetitive text-left/image-right layouts,
- meaningless abstract blobs,
- overstuffed dashboard-card spam,
- sterile corporate stock-photo feeling.

---

## 3. Logo Direction

### Logo concept
A **coral local pin / heart / growth marker** paired with a clean lowercase wordmark: `profitslocal`.

The mark should suggest:
- local location,
- care for small business,
- conversion/growth,
- warm human service.

### Wordmark style
- Lowercase only: `profitslocal`
- Rounded but confident sans-serif
- Tight tracking, not overly playful
- Prefer black/charcoal wordmark with coral mark

### Logo usage
- Primary: coral mark + charcoal wordmark on cream/white backgrounds.
- Reverse use is not the main direction; this brand should stay light-mode first.
- Keep clear space around logo equal to at least the height of the logo mark.
- Do not place the logo over busy images without a soft cream overlay.

Included assets:
- `logo-mark.svg`
- `logo-horizontal.svg`

---

## 4. Color System

### Core palette
| Token | Hex | Usage |
|---|---:|---|
| `--pl-cream` | `#FFF6EC` | Main warm background |
| `--pl-paper` | `#FFFCF7` | Cards, notes, panels |
| `--pl-charcoal` | `#17191C` | Main text |
| `--pl-muted` | `#5E6268` | Body copy |
| `--pl-coral` | `#FF5A3D` | Primary CTA, logo mark, accents |
| `--pl-coral-soft` | `#FFB39F` | Soft highlights, blush cards |
| `--pl-peach` | `#FFE1CE` | Warm section surfaces |
| `--pl-citrus` | `#FFD45A` | Growth arrows, optimism, badges |
| `--pl-mint` | `#CDECCF` | Trust, starter, success cues |
| `--pl-green` | `#47B86A` | Positive metrics, checks |
| `--pl-sky` | `#8BD3F7` | Motion, annotations, secondary accents |
| `--pl-blue` | `#327BEA` | SEO/local search, data cards |
| `--pl-lilac-soft` | `#EADCFB` | Very occasional creative accent |

### Gradients
- **Primary growth ribbon:** `linear-gradient(110deg, #FF5A3D 0%, #FF9D6E 45%, #FFD45A 100%)`
- **Sky motion:** `linear-gradient(110deg, #8BD3F7 0%, #DDF6FF 55%, #FFF6EC 100%)`
- **Trust mint:** `linear-gradient(135deg, #EAF8E9 0%, #CDECCF 100%)`
- **Paper glow:** `radial-gradient(circle at 70% 20%, #FFFFFF 0%, #FFF6EC 55%, #FFE8D8 100%)`

### Color rules
- Keep most surfaces warm cream/paper.
- Use coral for primary action and emotional emphasis.
- Use blue/sky only for annotation, search, motion, and secondary CTAs.
- Use green for proof, speed, checks, trust, and performance.
- Use yellow/citrus for growth and upward movement.

---

## 5. Typography

### Display headline
Use a high-contrast editorial serif.

Recommended direction:
- Playfair Display
- Libre Baskerville
- Cormorant Garamond
- Canela-style if licensed

Usage:
- Large statements
- Section headlines
- Elegant product/website preview headlines

### Italic accent
Use the italic cut of the display serif for emotional keywords.

Examples:
- `local-business`
- `before`
- `growth`
- `SEO-ready`
- `your website`

### UI / body font
Use a clean modern sans.

Recommended direction:
- Inter
- Manrope
- Plus Jakarta Sans
- Geist Sans

Usage:
- Body text
- Buttons
- Feature chips
- Navigation
- Pricing cards
- Metric labels

### Handwritten annotation font
Use sparingly for sticky notes and human notes.

Recommended direction:
- Caveat
- Patrick Hand
- Nanum Pen Script

Usage:
- Research notes
- Sticky notes
- Underlines
- Small emotional details

### Type hierarchy
| Element | Desktop size | Weight | Notes |
|---|---:|---:|---|
| Hero H1 | 88–132px | 500–700 | Mix serif regular + italic accent |
| Section H2 | 72–108px | 500–700 | Large, editorial, spacious |
| Subheading | 22–30px | 400–500 | Clear, warm, readable |
| Body | 17–20px | 400 | Max width 520–680px |
| UI label | 13–15px | 500–700 | Chips, tags, cards |
| Hand notes | 18–28px | 400 | Never overuse |

---

## 6. Layout System

### Canvas
- Primary comp ratio: `16:9`
- Website implementation width: `1440–1728px`
- Section height: `min-height: 860–960px` on desktop
- Light-mode full-background sections only

### Grid
- Use a 12-column grid as the invisible base.
- Break the grid intentionally with image cards, ribbons, notes, and map fragments.
- Avoid repeating the same layout twice in a row.

### Spacing
- Outer desktop padding: `64–96px`
- Section vertical padding: `96–140px`
- Card gap: `20–32px`
- Headline line-height: `0.88–1.02`
- Body line-height: `1.45–1.65`

### Composition principles
- Every section should have one clear job: hook, educate, prove, price, performance, process, convert.
- Text should feel integrated into the visual world, not pasted on top.
- Use large type as part of the composition.
- Add one secondary-read detail per section, such as a sticky note or hand-drawn microcopy.
- Keep motion implied through curves, arrows, paper planes, and diagonal paths.

---

## 7. UI Component System

### Primary CTA
- Shape: pill button
- Background: coral
- Text: white
- Radius: `999px`
- Height: `58–72px`
- Padding: `22–34px`
- Shadow: soft coral glow
- Icon: white circular arrow capsule on right

Copy examples:
- `See sample websites`
- `Request a sample build`
- `Browse sample websites`

### Secondary CTA
- Shape: pill button
- Background: warm paper or transparent
- Border: charcoal at 70–90% opacity
- Text: charcoal
- Arrow icon on right

Copy examples:
- `How it works`
- `Talk to profitslocal`

### Feature chips
Small rounded badges with icon + label.

Examples:
- `Transparent pricing`
- `Fast loading`
- `SEO ready`
- `Mobile friendly`
- `Schema ready`
- `Local SEO`

Style:
- Paper background
- Soft shadow
- Colored circular icon container
- Rounded corners `999px`

### Cards
Use paper-like elevated cards:
- Background: `#FFFCF7` or `rgba(255,252,247,0.88)`
- Border: subtle peach/mint/blue line
- Radius: `24–36px`
- Shadow: soft, warm, layered
- Optional: torn paper edge or pinned note detail

### Sticky notes
Use for human warmth and secondary proof.

Rules:
- One to three notes per section maximum.
- Handwritten font only.
- Keep text short.
- Add small heart, underline, or check mark.

### Browser mockups
Use rounded browser frames with subtle UI chrome.

Rules:
- Each mockup should show a believable local-business site.
- Use different industries: bakery, cafe, salon, dental, fitness.
- Keep mockups visually premium, not generic.
- Mobile mockup should appear in preview/gallery/performance sections.

---

## 8. Imagery & Illustration Style

### Image direction
The imagery is not generic AI art. It should feel like **frontend design reference imagery**: codeable, premium, layered, and functional.

### Key visual objects
- local storefronts with awnings,
- small 3D buildings,
- neighborhood maps,
- map pins,
- floating browser windows,
- mobile device mockups,
- research checklists,
- competitor tables,
- sticky notes and pins,
- hand-drawn arrows,
- paper planes,
- growth ribbons,
- speed gauges,
- charts and local search cards.

### Lighting
- High-key, sunlit, warm.
- Soft shadows, no harsh contrast.
- Cream background glow.
- Light sky moments are allowed in hero/final CTA.

### Texture
- Smooth 3D clay/paper hybrid.
- Subtle paper grain.
- Soft UI glass only when needed.
- No metallic cyberpunk or futuristic AI chrome.

---

## 9. Motion Direction

### Motion personality
Fast, friendly, light, clever.

### Suggested motion patterns
- Paper plane dotted path on scroll.
- Growth ribbon parallax across sections.
- Browser cards floating in with slight rotation.
- Sticky notes pinning into place.
- Map pin pulse on research/SEO sections.
- PageSpeed gauge counting up from 72 to 98.
- Pricing cards stagger into view.
- Process path draws itself as user scrolls.

### Accessibility
- Respect `prefers-reduced-motion`.
- Do not animate core reading text aggressively.
- Keep CTA stable and easy to click.

---

## 10. Copy System

### Primary messaging
- `Beautiful local-business websites, pre-built before you pay.`
- `Research first. Design second.`
- `Good taste is a growth strategy.`
- `See the finished site before you spend a dollar.`
- `Transparent pricing. Zero mystery.`
- `Fast-loading. SEO-ready. Built to be found.`
- `From research to ready-to-buy in four steps.`
- `Ready to see your website before you pay?`

### Tone rules
- Clear first, clever second.
- Premium but not vague.
- Warm, human, direct.
- Always reinforce the preview-first model.

### Microcopy examples
- `We do the work. You see the result.`
- `Built for your success.`
- `Real insights. Real advantage.`
- `Only purchase when you love the result.`
- `Pay for what you need. Nothing you don’t.`
- `You focus on your business. We’ll handle the rest.`

---

## 11. Eight-Section Website Blueprint

### Section 01 — Hero
**Purpose:** instantly explain the offer and create a premium first impression.  
**Headline:** `Beautiful local-business websites, pre-built before you pay.`  
**Copy:** `We research your market, design with taste, and only charge when you love the finished site.`  
**CTAs:** `See sample websites`, `How it works`  
**Visual:** storefront world + website preview + research notes + growth ribbon.  
**Image:** `images/section-01-hero.png`

### Section 02 — Research
**Purpose:** show that profitslocal does serious local research before designing.  
**Headline:** `Research first. Design second.`  
**Copy:** `We study your competitors, customers, neighborhood, and search intent before we create your site.`  
**CTA:** `See the research process`  
**Visual:** map fragments, competitor table, search results, customer needs, design opportunities.  
**Image:** `images/section-02-research.png`

### Section 03 — Taste Strategy
**Purpose:** position design taste as a business-growth advantage.  
**Headline:** `Good taste is a growth strategy.`  
**Copy:** `Our work blends AI, creative research, and design direction to make local brands feel unforgettable.`  
**CTA:** `Explore our design approach`  
**Visual:** moodboard, typography specimens, visual systems, creative website fragments.  
**Image:** `images/section-03-taste-strategy.png`

### Section 04 — Preview Gallery
**Purpose:** explain the preview-first, no-risk purchase model.  
**Headline:** `See the finished site before you spend a dollar.`  
**Copy:** `We pre-build the website, refine the details, and only then invite you to purchase.`  
**CTA:** `Browse sample websites`  
**Visual:** immersive gallery of local-business websites across bakery, dental, fitness, salon, cafe.  
**Image:** `images/section-04-preview-gallery.png`

### Section 05 — Transparent Pricing
**Purpose:** build trust around cost and scope.  
**Headline:** `Transparent pricing. Zero mystery.`  
**Copy:** `Clear packages, visible scope, and no surprise fees. You know exactly what goes into your site before you commit.`  
**CTA:** `View pricing details`  
**Visual:** sculptural pricing cards: Starter, Growth, Custom.  
**Image:** `images/section-05-transparent-pricing.png`

### Section 06 — Performance & SEO
**Purpose:** prove the websites are fast, technical, and discoverable.  
**Headline:** `Fast-loading. SEO-ready. Built to be found.`  
**Copy:** `Clean code, strong technical foundations, and local-search structure that helps your business show up and stand out.`  
**CTA:** `See performance features`  
**Visual:** PageSpeed gauge, local search result, schema code, mobile-ready, growth chart.  
**Image:** `images/section-06-performance-seo.png`

### Section 07 — Process
**Purpose:** make the service feel simple, fast, and predictable.  
**Headline:** `From research to ready-to-buy in four steps.`  
**Steps:** `Research`, `Pre-build`, `Review`, `Launch`  
**CTA:** `How the process works`  
**Visual:** curved path with four connected scenes and micro-proof strip.  
**Image:** `images/section-07-process.png`

### Section 08 — Final CTA
**Purpose:** close with confidence and invite action.  
**Headline:** `Ready to see your website before you pay?`  
**Copy:** `Let profitslocal research your market, design something beautiful, and show you the finished result before you commit.`  
**CTAs:** `Request a sample build`, `Talk to profitslocal`  
**Visual:** local street scene, polished website preview, launch rocket, upward arrow.  
**Image:** `images/section-08-final-cta.png`

---

## 12. Frontend Implementation Notes

### CSS feel
- Use large editorial headlines with controlled line height.
- Create layered absolute-positioned image groups inside each section.
- Use `transform: rotate()` lightly for cards and sticky notes.
- Use soft shadows, not heavy drop shadows.
- Avoid pure white backgrounds; always use warm cream, gradient, or art-directed image/color fields.

### Recommended section structure
```html
<section class="pl-section pl-section--hero">
  <div class="pl-bg"></div>
  <div class="pl-copy">
    <p class="pl-eyebrow">We do the work. You see the result.</p>
    <h1>Beautiful <em>local-business</em> websites, pre-built before you pay.</h1>
    <p class="pl-lede">We research your market, design with taste, and only charge when you love the finished site.</p>
    <div class="pl-actions">
      <a class="pl-btn pl-btn--primary">See sample websites</a>
      <a class="pl-btn pl-btn--secondary">How it works</a>
    </div>
  </div>
  <div class="pl-visual" aria-hidden="true"></div>
</section>
```

### SEO / performance principles
- Export section imagery as AVIF/WebP where possible.
- Keep visible text as real HTML, not baked into images, for SEO and accessibility.
- Use images as decorative/art-direction layers where appropriate.
- Lazy-load below-the-fold imagery.
- Use responsive image sizes.

---

## 13. Image Generation Direction Template

Use this when creating new visual sections or variants:

```txt
Create a single horizontal website-section design image for profitslocal, a creative AI website agency for small local businesses. Light mode only. Use the established Local Intelligence Collage style: warm cream background, coral CTA accents, editorial serif typography, playful 3D storefronts, browser mockups, map pins, research notes, hand-drawn arrows, paper planes, and motion ribbons. The design should feel premium, highly art-directed, original, Awwwards-level, but implementation-friendly and conversion-aware. Avoid generic SaaS dashboards, dark AI themes, purple/blue neon, and simple text-left/image-right composition.

Section purpose: [PURPOSE]
Headline: [HEADLINE]
Supporting copy: [COPY]
CTA: [CTA]
Visual idea: [VISUAL CONCEPT]
Keep the design cohesive with profitslocal but make this section structurally distinct from the others.
```

### Negative prompt / avoid list
```txt
Avoid dark mode, generic AI neon, purple cyberpunk glow, bland SaaS layout, plain white section, overused dashboard cards, random abstract blobs, unreadable tiny text, low-contrast text, stock-photo corporate look, repetitive composition, messy collage without hierarchy.
```

---

## 14. Asset Inventory

### Design images
- `images/section-01-hero.png`
- `images/section-02-research.png`
- `images/section-03-taste-strategy.png`
- `images/section-04-preview-gallery.png`
- `images/section-05-transparent-pricing.png`
- `images/section-06-performance-seo.png`
- `images/section-07-process.png`
- `images/section-08-final-cta.png`

### Brand files
- `logo-mark.svg`
- `logo-horizontal.svg`
- `color-palette.svg`
- `design-tokens.css`
- `brand-tokens.json`

---

## 15. Final Brand Summary

profitslocal should feel like **a creative research lab for local-business websites**: warm, fast, trustworthy, artistic, and practical. The brand’s strongest differentiator is not simply “AI websites.” It is the preview-first model:

**Clients see a beautiful, researched, finished website before they pay.**