# Lawn & Land Marketing — Brand Context for AI Agents

> **Read this first.** This is the single file that defines how anything created for or by Lawn & Land Marketing should look, sound, and feel. Drop it into your prompt, your system message, or paste it as a reference. Every other token file, mockup, and asset descends from this.

**Version:** 0.2 · May 2026
**Canonical brand site:** https://brandkit.lawnlab.dev/
**Brand-assets repo:** https://github.com/LawnAndLandMarketing/brand-assets

---

## 01 · Who we are

**Lawn & Land Marketing** is a digital marketing agency built specifically for the **lawn care and landscaping industry** ("the green industry"). Not a generalist agency with a green logo. A specialist that lives in this category.

- 60+ green industry clients · 98%+ client retention rate
- We do: websites, paid (Google + Meta), SEO, creative, reporting, and the working systems behind them
- Buyer: lawn & landscape **operators** — owners, GMs, marketing leads at $500K–$10M revenue companies
- **Stats discipline:** keep client counts vague (e.g. "60+"). Never publish exact client numbers, revenue figures, team headcount, or specific ad-spend totals.

### The positioning in one line
**Digital marketing built for the green industry.**

### The brand IS / IS NOT
| Brand IS | Brand IS NOT |
|---|---|
| Specialist | Generalist |
| Operator-grade | Cute startup |
| Direct | Process theatre |
| Confident | Bragging |
| Bad-ass | Aggressive |
| Witty when earned | Punny on purpose |

---

## 02 · Voice & tone

The voice is a **blue-collar operator who reads the trades and also reads marketing books.** Marcus Sheridan's "They Ask, You Answer" transparency, plus Liquid Death's confidence and dry wit, minus the gore.

### Formula (use this to test any line of copy)
- **60% Blue-collar honesty** — plain words, short sentences, name the actual problem
- **25% Operator confidence** — we've done this, we know the numbers, we don't hedge
- **15% Dry, sharp wit** — the joke is at the expense of bad work, never people

### The four pillars
1. **Specialist, not generalist.** Say "lawn & landscape" on purpose. Name the trucks, the routes, the buyer. Generic marketing language is the enemy.
2. **Outcomes, not effort.** Don't describe the process. Describe the result. Booked routes. Close rate. Lift on paid.
3. **Transparent over polished.** If a buyer is asking it privately, we should be answering it publicly — including price, including weaknesses.
4. **Confident, not cocky.** Name what we're good at. Name what we're not. Bragging is for people who haven't done the work yet.

### Say this / Not this

| ✅ Say | ❌ Not |
|---|---|
| "We build growth systems for lawn & landscape operators." | "We are a full-service digital marketing agency partnering with home service brands to drive ROI." |
| "Cedar Lawn booked 314 leads in October. Close rate hit 18%." | "Our innovative strategies have helped clients like Cedar Lawn achieve significant growth." |
| "You don't need more ads. You need ads that book routes." | "Maximize your marketing ROI with our data-driven advertising solutions." |
| "Here's what we charge. Here's what you get. Here's when you should walk." | "Contact us for a custom quote tailored to your unique business needs." |
| "Partner, not vendor." | "We're more than just a marketing agency — we're an extension of your team." |

### Words to use
operator · booked routes · close rate · pipeline · spend · lift · growth system · partner · specialist · green industry · built for · trucks · buyer · real numbers · show don't tell · ship · test · compound

### Words to avoid
synergy · holistic · ecosystem · solutions · cutting-edge · innovative · revolutionize · unlock · empower · best-in-class · world-class · ROI-driven · data-driven · game-changer · turf wars · rooted in · growing together · mowing the competition

### The one approved pun
**"Let's get growing."** That's the only one. Use sparingly — sign-offs, CTAs, internal rallying lines. Everything else stays direct. No "turf wars," no "rooted in results," no "fertile ground." Restraint is what makes this one land.

### Tone calibration
- **Default:** confident, direct, slightly dry. Like a contractor who also happens to read.
- **Sales surfaces:** add a few percent more confidence. Numbers do the bragging.
- **Reports & client comms:** drop the wit. Be a competent specialist who reports honestly.
- **Social:** the wit is welcome. Don't perform — observe.

---

## 03 · Color system

**Dark-led.** Midnight is the brand's anchor. The light theme exists, but the brand's default mood is dark.

### Core (4)
| Token | Hex | Role |
|---|---|---|
| **Midnight** | `#191919` | Canvas · text · authority |
| **Limeade** | `#ACE71D` | Attention · CTAs · active states |
| **Gator** | `#5DCA49` | Support · gradients · growth cues |
| **Twilight** | `#6837EF` | Digital accent · light-mode driver |

### Secondary
| Token | Hex | Use |
|---|---|---|
| **Cloud** | `#F5F7F2` | Light canvases · cards · documents |
| **Field Mist** | `#E5EEDC` | Quiet backgrounds · hover states |
| **Slate** | `#7B827D` | Secondary copy · dividers · table meta |
| **Night Pine** | `#293526` | Dark layered surfaces under Midnight |

### Neutral ramp (use for grays beyond Slate)
`50 #F5F7F2 · 100 #E9EEE3 · 200 #D2DCC9 · 300 #B3BFAA · 400 #95A18D · 500 #7B827D (Slate) · 600 #5E665C · 700 #444B43 · 800 #2D332C · 850 #232723 · 900 #1E211D · 950 #191919 (Midnight)`

### Semantic (UI / apps only)
| Token | Hex | Role |
|---|---|---|
| **Brick** | `#E54B4B` | Destructive / error |
| **Marigold** | `#F5A524` | Warning / caution |
| **Sky** | `#3B82F6` | Info / link |
| **Sod** | `#16A34A` | Confirmed success |

These are **functional, not decorative.** A button isn't "red" — it's destructive. Never use Brick, Marigold, or Sky as brand accents.

### Data-viz sequence (categorical)
Use in this order, don't skip, don't reorder for variety:
`#ACE71D · #6837EF · #5DCA49 · #3B82F6 · #F5A524 · #E54B4B · #7B827D · #C6B0FA`

For sequential / quantitative data, use the **Limeade → Gator** gradient or the neutral ramp instead.

### Approved pairings
- Limeade on Midnight ✅
- Midnight on Limeade ✅
- White on Gator ✅
- White on Twilight ✅
- Midnight on Cloud ✅
- Twilight on Cloud ✅

### Off-brand pairings (don't ship)
- Limeade on Cloud (insufficient contrast)
- Gator on Limeade (two greens vibrating)
- Slate on Midnight for body copy (too low contrast)
- Any gradient on type
- Off-system colors: pink, teal, coral, magenta, etc.

### The 70 / 25 / 5 ratio
Every composition lands around:
- **70% Foundational neutrals** — Midnight leads, Cloud supports
- **25% Growth system** — Limeade does most of the work, Gator supports. **Limeade > Gator > everything else.**
- **5% Digital emphasis** — Twilight. One moment per surface, max.

**Rule 02 (don't flip):** Limeade leads. Gator supports. Twilight punctuates. That order never flips.

If green is over ~25% of a surface, it stops being a brand color and starts being a paint job. Twilight is a guest — not a host.

### Twilight specifically — the premium accent
Twilight (`#6837EF`) is the brand's most expensive-feeling color and the **only non-green in the core palette**. That's deliberate. Because we live in a green industry, **purple stops the eye** — and a stopped eye is the whole point of an accent.

**Rules for Twilight:**
- **One Twilight moment per surface.** Not two. The whole reason it works is that there's only ever one.
- **Use it for things that need to be found.** The live chat widget on the website is the perfect example — it sits in Twilight specifically so a visitor can locate it the second they scroll. Same logic applies to: the active state on a key nav item, the current step in a multi-step flow, the "current month" pin on a dashboard, the active filter chip, the destructive-confirm-state on a primary action.
- **Never use it as a background.** Twilight is a punctuation mark. It points at one thing.
- **Never gradient it into green.** The cross-family gradient (Twilight → Limeade) exists, but use it sparingly — it's reserved for editorial/digital moments, not a default surface.
- **On light surfaces, Twilight becomes the primary.** In light mode, the brand primary flips from Limeade to Twilight. This is the only place Twilight gets to take the lead — and even then, Limeade still anchors brand callouts.

If you can remove Twilight from a layout and lose nothing important, you used too much. Pull it back to one moment.

---

## 04 · Typography

Three fonts. Three jobs. **No exceptions.**

### Rethink Sans — Display (Brand)
- Hero headlines, H1/H2, campaign callouts
- **Use:** 800 italic primarily, 900 italic for rare special cases
- **Case:** ALL CAPS when the layout is sharp; Title Case when the message needs warmth
- **Rule:** heavy italic weights communicate momentum

### Outfit — Body (Support)
- Body copy, UI descriptions, landing-page support text
- **Use:** 400 regular, 500 medium, 600 semi-bold

### Inter — Utility (UI)
- Buttons, nav labels, badges, captions, tables
- **Use:** 500 medium, 600 semi-bold

### Type rules
- Headlines stay **solid color** — never gradient-filled
- Never stretch or squish type
- **Don't overdo italic display** — hierarchy creates punch, not volume
- Minimum body size: 14px on web, 12pt in print

### Twilight emphasis marker (`.hl`) — the signature impact device
For the **one line per surface** that has to land — a closing statement, a promise, a payoff — set the key word in the Twilight marker: a skewed swipe of **Twilight `#6837EF`** that sits low behind the *lower portion* of the word, cut off at the top, with the lettering in **white** on top. Skewed −11° (italic-leaning), sharp edges, no radius. Reads as motion, not a sticker.
- **Use on:** dark surfaces. **One** impact phrase per page — never decoration, never body copy, never on greens.
- **Don't confuse it** with the hero's solid-Limeade identity chip. This is the impact-statement marker; that's the brand-mark accent.

```css
.hl { position: relative; z-index: 0; color: #fff; font-weight: 700; padding: 0 .22em; white-space: nowrap; }
.hl::before { content: ''; position: absolute; z-index: -1; left: 0; right: 0; bottom: .12em; height: .66em; background: #6837EF; transform: skewX(-11deg); }
```
Markup: `Proof, not <span class="hl">promises.</span>`

---

## 05 · Layout & composition

### Grid
- 12-column on web, gutter 24px
- Max container 1240px for marketing, 1440px for product
- Section padding: 96px desktop / 64px mobile (top + bottom)

### Density
- **Generous whitespace.** Cramped layouts read as cheap.
- One hero idea per screen. Stack secondary content below.
- Sections breathe — 56–96px between groups.

### Hierarchy pattern (always)
1. Eyebrow (Inter, uppercase, Limeade, .14em letter-spacing)
2. Display headline (Rethink Sans italic, sometimes with one accent word in Limeade or Twilight)
3. Sub-line (Outfit, muted gray)
4. Primary CTA (Limeade button) + Secondary CTA (ghost)

---

## 06 · Gradients

Six approved gradients. **One per surface.** Never stack two.

| Name | From → To | Use |
|---|---|---|
| **Limeade → Gator** | `#ACE71D → #5DCA49` (135°) | Primary brand gradient. Callouts, premium surfaces. |
| **Midnight → Gator** | `#191919 → #5DCA49` (180°) | Dark hero canvases, app surfaces. |
| **Twilight → Limeade** | `#6837EF → #ACE71D` (110°) | Controlled digital contrast. |
| **Twilight → Soft Twilight** | `#6837EF → #C6B0FA` (135°) | Light-mode action states. |
| **Cloud → Limeade** | `#F5F7F2 → #ACE71D` (90°) | Highlight bars on light surfaces. |
| **Midnight → Twilight** | `#191919 → #6837EF` (135°) | Tech-forward editorial moments. |

**Rules:** Brand gradients only mix core + secondary tokens. Never blend in semantic colors. Never on type. Stick to 90°, 110°, 135°, or 180°.

---

## 07 · Textures

Background should feel **alive without trying to steal the scene.** Four approved textures:

1. **Gator Glow** — wide ambient radial. Hero surfaces, social graphics.
2. **Dot Grid** — 22px grid, ~10% opacity. Dashboards, technical surfaces.
3. **Fine Grain** — SVG noise overlay under 3% intensity. Decks, print-ish digital.
4. **Diagonal Motion** — 135° Limeade lines at very low opacity. Editorial separators.

---

## 08 · Opacity rules

- ✅ Use for: glows, ambient light, tinted card fills (8–20%), photo overlays, hover states, dividers, backdrop blurs.
- ❌ Never use for: body copy, headlines, logo, CTAs, anything mission-critical.

---

## 09 · Iconography

- **Library:** [Lucide](https://lucide.dev/) — exclusively. Never mix with Material, Heroicons, etc.
- **Style:** stroke only (no filled icons)
- **Stroke width:** 1.75 (small) / 2.0 (large)
- **End caps + joins:** round
- **Color:** inherits from `currentColor` — Limeade for emphasis, white/Midnight for default, Slate for meta
- **Sizes:** 16 (inline meta) · 20 (UI / buttons) · 24 (nav default) · 40 (feature cards) · 64 (hero / empty states)
- **Treatments:** plain · tinted circle (10% Limeade fill) · solid Limeade tile

### What's forbidden
- **Filled icons** — stroke only, always
- **Emoji in product UI, reports, dashboards, or marketing assets** — decks and social posts only, sparingly
- **Icons drawn in HTML/CSS** (divs + borders + pseudo-elements masquerading as icons) — if you need an icon, use the SVG from Lucide. Do not invent one with markup.
- **Mixing icon libraries** (Lucide + Material + Heroicons in the same surface)
- **3D / skeuomorphic icons**, gradients on icons, drop shadows on icons
- **Custom one-off icons** unless the design system explicitly adopts them

---

## 10 · Motion

**Punctuation, not entertainment.** No bounces, no springs, no elastic curves, no parallax.

### Easing
- **Primary:** `cubic-bezier(.2, .7, .2, 1)` — the L&L ease. Default for everything.
- **Smooth:** `cubic-bezier(.4, 0, .2, 1)` — layout shifts, page transitions.
- **Decelerate:** `cubic-bezier(0, 0, .2, 1)` — entrances.

Linear is forbidden.

### Durations
- **150ms** — Instant: hover, focus, color shift
- **200ms** — Default: button press, dropdown, link
- **300ms** — Layered: card lift, modal open, panel slide
- **500ms** — Entrance: hero elements on load, stat count-ups (sparingly)
- **800ms** — Cinematic: section reveal (once per page max)

### Principles
- Forward, never floppy
- Short by default — 150–300ms covers 95% of cases
- Always respect `prefers-reduced-motion`

---

## 11 · Logo system

**Three forms · three color treatments · three border options** = the full library.

### Three forms
- **Badge** — avatars, favicons, social icons (≥32px digital)
- **Vertical** — centered placements, presentations (≥80px tall)
- **Horizontal** — nav bars, headers, email signatures (≥120px wide). **The default.**

### Three color treatments
- **Colored (brand)** — default. Use on Midnight, Cloud, or any approved brand surface.
- **All-White** — use on dark backgrounds (Midnight, photography, dark surfaces).
- **All-Black** — use on light backgrounds (Cloud, white paper, printed documents).

### Three border treatments (colored versions)
- **Regular (no border)** — solid brand surfaces with clear space
- **Thin border** — semi-busy or light backgrounds
- **Thick border** — heavily busy or photographic surfaces

### File naming convention
Colored + bordered variants ship as **SVG** with transparent backgrounds (sharp at any size). White and black monochrome variants ship as PNG. Favicons are pre-padded square PNGs (badge centered on Midnight).

Colored (use these by default):
- `badge.svg` · `horizontal.svg` · `vertical.svg`
- `badge-bordered-thin.svg` · `horizontal-bordered-thin.svg` · `vertical-bordered-thin.svg`
- `badge-bordered-thick.svg` · `horizontal-bordered-thick.svg` · `vertical-bordered-thick.svg`

Monochrome (use on dark / light surfaces respectively):
- `badge-white.png` · `horizontal-white.png` · `vertical-white.png`
- `badge-black.png` · `horizontal-black.png` · `vertical-black.png`

Favicons / app icons (always use these for square slots — never raw `badge.svg`):
- `favicon.ico` · `favicon-32.png` · `favicon-64.png` · `favicon-192.png` · `favicon-512.png`

All files live at `/assets/logos/` on the brand site. Full pack at `/downloads/logos/ll-brand-assets.zip`.

### Clear space rule
**Minimum clear space = the height of the "L" in the wordmark.** No text, photo, graphic, or pattern enters that zone. Ever.

### 🚫 NON-NEGOTIABLE: The badge is not a perfect square — never stretch it into one
The badge logo is **1418 × 1026** (~1.38:1, wider than tall). It looks square-ish, which is exactly why people drop it into a square container and stretch it. **Don't.** This is the single most common logo misuse we see.

**Rules:**
- The badge ships at its real proportions. Never set both `width` and `height` — lock one, let the other auto.
- Never use `object-fit: fill` or `background-size: 100% 100%` with the badge as the source.
- **For favicons, app icons, and any square slot:** generate a pre-padded square PNG (badge centered on a transparent or Midnight square canvas) and ship *that file* into the square. Never let the browser/OS scale a non-square source into a square slot.
- For avatars and social icons, do the same — pad first, ship a true square asset.
- If a square is the only option and you don't have a padded asset ready, **use the horizontal logo** instead.

### Sizing rule
**Lock height, let width be auto.** Never set both. Applies to every form of the logo.

### Logo misuse — never ship
Stretching (especially the badge into a square — see the non-negotiable above) · recoloring (use the official white or black variant instead) · drop shadows / glows · pattern fills · added taglines ("Established 2018") · sub-minimum size

### Rotation
- The **horizontal** and **vertical** marks always sit level. Never tilted "for energy."
- The **badge is the exception** — it can be rotated/tilted for energy or layout-driven moments. Stretching the badge is still forbidden (see non-negotiable above).

### Fade / watermark use
Fading the logo for a watermark on imagery, document backgrounds, or signage is **allowed**. Keep it readable enough that the mark is identifiable but not loud. Never fade a logo that's also doing CTA / hero / primary-identity work — that stays at 100%.

---

## 12 · Component patterns

### Buttons
- **NON-NEGOTIABLE: Buttons never wrap to two lines.** Every button gets `white-space: nowrap` and `line-height: 1`. A wrapped button is a broken button. **Escalation order, in order:** (1) Rewrite the copy verb-first short ("Book a Call", "See the Work"). (2) `white-space: nowrap`, already baked in. (3) On mobile, full-width stack with `--block` modifier and tighter horizontal padding. (4) Only then drop to a smaller size class. Never shrink type below 11px. Never use sentence-length CTAs.
- **Primary:** Limeade fill, Midnight text, uppercase Inter 700, .14em letter-spacing
- **Secondary:** transparent, white text, 18%-opacity white border
- **Ghost:** transparent, Limeade text, no border
- **Destructive:** transparent, Brick text + border, hover → Brick fill
- **Hover:** translateY(-1px), Limeade glow shadow on primary
- **Focus:** 3px Limeade ring at 35% opacity

### Inputs
- Background `#1A1D19`, border `#2D332C`, radius 8px
- Focus border Limeade, 3px ring at 18% opacity
- Label: Inter 600, 10px, uppercase, .14em, muted color above the field
- Error state: Brick border + Brick helper text

### Cards
- Background `#1A1D19`, border `#2D332C`, radius 12px
- Hover: lift -2px, border → Limeade, soft shadow appears (300ms ease)
- KPI cards: big italic Rethink Sans number in Limeade or Twilight, label above

### Badges
- Tiny dot + uppercase label, .14em letter-spacing, 5px radius
- Variants: default · success (Limeade) · info (Sky) · warn (Marigold) · error (Brick) · violet (Twilight)

---

## 13 · How to brief Lawn & Land design work

If you're an AI agent or designer building something for Lawn & Land, run this test on every output:

1. **Would it feel out of place next to brandkit.lawnlab.dev?** If yes — rework.
2. **Does the headline use italic Rethink Sans?** If no, and it's a hero — rework.
3. **Is Twilight under 5% of the surface and limited to one moment?** If higher — rework.
4. **Is there a gradient on type?** If yes — kill it.
5. **Are you using emoji in product UI? Or icons drawn with divs+borders?** If yes — kill it. Use Lucide SVG.
6. **Is the copy bragging or naming a number?** Naming a number is the brand. Bragging is not.
7. **Does it sound like a generic agency could've made it?** If yes — start over.
8. **Do any buttons wrap to two lines at any viewport size?** If yes — fix immediately. Non-negotiable.
9. **Is the badge logo stretched to fit a square slot?** (Favicon, avatar, app icon, social profile pic.) If yes — fix immediately. Non-negotiable. The badge is ~1.38:1, never a perfect square. Pad it, don't stretch it.

When in doubt: **Specialist over generalist. Clear over clever. Premium over flashy. Discipline is the moat.**

---

## 14 · Token files

The CSS and JSON tokens that drive all of the above are at:

- `/downloads/tokens/ll-brand-tokens.css` — full custom-property set with both themes
- `/downloads/tokens/ll-brand-tokens.json` — portable for Figma, Style Dictionary, etc.

Use the tokens. Don't hand-pick hex codes from the brand guide. Drift starts the moment someone "eyeballs it."

---

## 15 · Quick reference card

```
Brand:     Lawn & Land Marketing — built for the green industry
Theme:     Dark-led (Midnight #191919)
Primary:   Limeade #ACE71D (dark) / Twilight #6837EF (light)
Type:      Rethink Sans (display, italic 800) · Outfit (body) · Inter (UI)
Ratio:     70 neutrals / 25 green / 5 violet
Order:     Limeade leads · Gator supports · Twilight punctuates
Voice:     Direct · confident · slightly dry · zero puns except "Let's get growing"
Library:   Lucide icons · stroke only · 1.75–2.0 weight · never emoji · never CSS-drawn
Motion:    cubic-bezier(.2, .7, .2, 1) · 150–300ms default
Buttons:   white-space: nowrap — never two lines, ever
Mood:      Specialist. Operator-grade. Discipline is the moat.
```

---

*This document is the brand's source of truth for AI-assisted design and writing work. If something here conflicts with another asset, this file wins. Updated May 2026.*