auditandfix-brand.md
1 --- 2 title: 'Audit&Fix Brand Guide' 3 category: business 4 last_verified: '2026-03-01' 5 related_files: 6 - website/assets/img/logo.svg 7 - website/assets/img/favicon.svg 8 - website/assets/css/style.css 9 tags: [brand, design, logo] 10 status: active 11 --- 12 13 # Audit&Fix Brand Guide 14 15 Audit&Fix is the customer-facing brand for CRO audit reports sold at **BRAND_URL**. It is a separate product from 333 Method — never reference "333 Method" in brand materials. 16 17 --- 18 19 ## Brand Name 20 21 **Audit&Fix** — always written as one word with an ampersand. No spaces. The `&` is always in the brand orange. 22 23 - ✅ Audit&Fix 24 - ✅ Audit&Fix (HTML) 25 - ❌ Audit & Fix 26 - ❌ AuditAndFix 27 - ❌ audit&fix 28 29 Tagline: **"Professional CRO Audit Reports"** 30 31 --- 32 33 ## Colour Palette 34 35 | Role | Name | Hex | Usage | 36 | ----------- | --------- | --------- | -------------------------------------------------------- | 37 | Primary | Navy | `#1a365d` | Headers, nav background, CTA primary | 38 | Accent | Orange | `#e05d26` | Ampersand in logo, CTA buttons, highlights, urgency text | 39 | Orange Dark | — | `#c44d1e` | Hover states | 40 | Urgency | — | `#c44d1e` | Scarcity/urgency inline text | 41 | Background | Off-white | `#f7fafc` | Alternating section background | 42 | Text | Charcoal | `#2d3748` | Body text | 43 | Text Light | — | `#4a5568` | Secondary body text | 44 | Text Muted | — | `#718096` | Labels, captions | 45 | Border | — | `#e2e8f0` | Input borders, dividers | 46 | Success | Green | `#38a169` | Guarantee badge, A grade | 47 48 **Report grade colours (PDF only):** 49 50 | Grade | Colour | 51 | ------- | ------------------ | 52 | A+/A/A- | `#38a169` (green) | 53 | B+/B/B- | `#3182ce` (blue) | 54 | C | `#d69e2e` (amber) | 55 | D | `#dd6b20` (orange) | 56 | E/F | `#e53e3e` (red) | 57 58 --- 59 60 ## Typography 61 62 **System font stack (no external fonts):** 63 64 ```css 65 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif; 66 ``` 67 68 Fast-loading, no FOUT, renders natively on all platforms. 69 70 | Element | Size | Weight | 71 | -------------- | ----------- | ------- | 72 | H1 (hero) | 2.6rem | 800 | 73 | H2 (section) | 1.8rem | 700 | 74 | H3 | 1.05rem | 700 | 75 | Body | 1rem | 400 | 76 | Small / labels | 0.85–0.9rem | 400–600 | 77 | CTA button | 1.1rem | 700 | 78 79 --- 80 81 ## Logo 82 83 **File:** `website/assets/img/logo.svg` 84 85 - Magnifying glass icon (orange `#e05d26` stroke, white tick inside) + wordmark 86 - Wordmark: "Audit" (white) + "&" (orange `#e05d26`) + "Fix" (white) 87 - Dimensions: 220×48px viewBox, rendered at 36px height in nav 88 - Designed for dark backgrounds (navy hero) 89 90 **Fallback text** (if SVG fails to load): 91 92 ```html 93 <span class="logo-text">Audit<span class="logo-amp">&</span>Fix</span> 94 ``` 95 96 **Usage rules:** 97 98 - Always use on dark/navy backgrounds. Do not place on white without adjusting colours. 99 - Minimum height: 28px 100 - Do not recolour, stretch, or add effects 101 102 **Light-background variant:** `website/assets/img/logo-light.svg` 103 104 - "Audit"/"Fix" text: navy `#1a365d` 105 - "&": orange `#e05d26` (unchanged) 106 - Magnifying glass stroke: orange `#e05d26` (unchanged) 107 - Tick inside glass: navy `#1a365d` (was white — must be dark on light backgrounds) 108 109 --- 110 111 ## Favicon 112 113 **File:** `website/assets/img/favicon.svg` 114 115 - 32×32 navy square (`#1a365d`, rx:6 rounded corners) 116 - Magnifying glass (orange `#e05d26` stroke) + white tick — matches logo icon 117 - SVG scales on all DPIs; `favicon-32.png` is the PNG fallback for older browsers 118 119 **HTML reference (both lines required):** 120 121 ```html 122 <link rel="icon" href="assets/img/favicon.svg" type="image/svg+xml" /> 123 <link rel="icon" href="assets/img/favicon-32.png" sizes="32x32" type="image/png" /> 124 ``` 125 126 **Regenerating the PNG fallback** if favicon.svg changes: 127 128 ```bash 129 node -e "import('sharp').then(({default:s})=>s(require('fs').readFileSync('website/assets/img/favicon.svg')).resize(32,32).png().toFile('website/assets/img/favicon-32.png')).then(()=>console.log('done'))" 130 ``` 131 132 --- 133 134 ## Voice & Tone 135 136 - **Plain English** — No jargon. Write for business owners, not developers. 137 - **Direct and specific** — "3–5 issues fixable in under an hour" not "we find many issues". 138 - **Loss aversion framing** — "Stop losing customers" / "leads you already paid for". 139 - **No hype** — No "revolutionary", "game-changing", "next-level". Let the specifics do the work. 140 - **British spelling** for AU/GB/NZ/IE markets. American spelling for US/CA. No spintax in copy — pick the right variant for the audience. 141 142 --- 143 144 ## PDF Report Branding (audit-report-generator.js) 145 146 | Element | Value | 147 | ---------------------------- | --------------------------------------------------- | 148 | Cover header colour | Navy `#1a365d` | 149 | Accent / low-score indicator | Orange `#e05d26` | 150 | Body text | `#2d3748` | 151 | Background | White `#ffffff` | 152 | Footer text | "Confidential — Prepared by Audit&Fix for [domain]" | 153 | Font | Helvetica (pdfkit built-in) | 154 155 --- 156 157 ## Assets Checklist 158 159 | Asset | File | Status | 160 | -------------------------------- | -------------------------------------------- | --------------------------------------- | 161 | Logo (SVG, dark bg) | `assets/img/logo.svg` | ✅ Created | 162 | Favicon (SVG) | `assets/img/favicon.svg` | ✅ Created | 163 | Marcus Webb photo | `assets/img/marcus-webb.jpg` | ✅ Provided | 164 | Report preview hero | `assets/img/report-preview.png` | ⏳ Pending (generate via report:sample) | 165 | Report cover thumbnail | `assets/img/report-cover.png` | ⏳ Pending | 166 | Report factors thumbnail | `assets/img/report-factors.png` | ⏳ Pending | 167 | Report screenshots thumbnail | `assets/img/report-screenshots.png` | ⏳ Pending | 168 | Report recommendations thumbnail | `assets/img/report-recommendations.png` | ⏳ Pending | 169 | Sample PDF | `assets/sample-reports/sample-cro-audit.pdf` | ⏳ Pending (npm run report:sample) | 170 | Logo (SVG, light bg variant) | `assets/img/logo-light.svg` | ✅ Created | 171 | Favicon PNG fallback | `assets/img/favicon-32.png` | ✅ Created (generated via sharp) | 172 173 --- 174 175 ## Do Not 176 177 - Mention "333 Method" anywhere in Audit&Fix materials 178 - Use the 333 Method logo, colours, or brand name 179 - Promise specific conversion rate improvements (e.g. "we guarantee a 40% uplift") 180 - Offer "free" anything — the product is a paid report 181 - Use stock photos of fake business owners as real testimonials