MCP Quoting System

# TechForge Manufacturing - Brand Guide ## 🏭 Brand Identity **Company Name:** TechForge Manufacturing **Tagline:** "Forging Innovation Since 1985" **Industry:** Precision Engineering & Manufacturing **Established:** 1985 (Fictitious) --- ## 🎨 Brand Colors ### Primary Colors **Navy Blue (Primary)** - Hex: `#003d82` - RGB: 0, 61, 130 - Usage: Main brand color, headers, borders - Represents: Trust, reliability, professionalism **Orange (Accent)** - Hex: `#ff6b35` - RGB: 255, 107, 53 - Usage: CTAs, highlights, active states - Represents: Energy, innovation, action ### Supporting Colors **Dark Blue** - Hex: `#002347` - RGB: 0, 35, 71 - Usage: Top bar, footer, dark backgrounds **Light Blue** - Hex: `#0066cc` - RGB: 0, 102, 204 - Usage: Hover states, links **Accent Yellow** - Hex: `#ffc107` - RGB: 255, 193, 7 - Usage: Warnings, medium confidence indicators ### Neutrals **Dark Gray:** `#2c3e50` **Medium Gray:** `#34495e` **Light Gray:** `#ecf0f1` **White:** `#ffffff` ### Status Colors **Success Green:** `#27ae60` **Warning Yellow:** `#f39c12` **Danger Red:** `#e74c3c` --- ## 🔤 Typography **Primary Font:** Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif **Heading Styles:** - H1: 28px, Bold, Navy Blue - H2: 24px, Bold, Navy Blue - H3: 18px, Bold, Navy Blue with Orange underline **Body Text:** 14-16px, Regular, Dark Gray **Labels:** 14px, Bold, Uppercase, Letter-spacing: 0.5px **Buttons:** 16px, Bold, Uppercase, Letter-spacing: 0.5px --- ## 📐 Logo **Logo Icon:** ``` ┌─────────┐ │ TF │ Navy background │ │ White text └─────────┘ Orange border/shadow ``` **Dimensions:** 50px × 50px **Border Radius:** 8px **Shadow:** 0 4px 8px rgba(255, 107, 53, 0.3) **Logo Text:** - "TechForge Manufacturing" - 28px, Bold, White - "Precision Engineering Solutions" - 13px, Medium, Orange, Uppercase --- ## 🎯 Brand Elements ### Company Tagline "Forging Innovation Since 1985" - Font Size: 14px - Style: Italic - Color: Light Gray - Placement: Top right of header ### Contact Information **Address:** 1985 Industrial Way, Manufacturing City, USA **Phone:** (555) 123-4567 **Email:** quotes@techforge.example.com ### Established Badge "Since 1985" - Emphasizes experience and reliability --- ## 🎨 Visual Style Guidelines ### Cards - White background - Border-radius: 12px - Left border: 5px solid Navy Blue - Shadow: 0 4px 12px rgba(0,0,0,0.15) ### Buttons **Primary (Orange):** - Background: `#ff6b35` - Hover: `#ff5722` - Shadow: 0 4px 8px rgba(255, 107, 53, 0.3) **Secondary (Navy):** - Background: `#003d82` - Hover: `#0066cc` - Shadow: 0 4px 8px rgba(0, 61, 130, 0.3) ### Tables - Header: Navy Blue background, White text - Rows: Hover effect with light blue tint - Borders: 2px solid light gray ### Forms - Border: 2px solid light gray - Focus: Orange border with soft shadow - Labels: Uppercase, Bold, Dark Gray --- ## 📱 Responsive Design **Desktop:** Full layout with sidebar options **Tablet:** Stacked cards, full-width forms **Mobile:** Single column, collapsible navigation **Breakpoint:** 768px --- ## 🏭 Brand Personality **Professional:** Clean, organized, business-focused **Reliable:** Established since 1985, proven track record **Innovative:** "Forging Innovation" - modern approach **Precise:** Engineering focus, attention to detail **Strong:** Bold colors, industrial aesthetic --- ## 💼 Brand Voice **Tone:** Professional but approachable **Language:** Technical yet clear **Style:** Direct, confident, solution-oriented **Do's:** - Use industry terminology appropriately - Emphasize precision and quality - Highlight experience (since 1985) - Focus on customer solutions **Don'ts:** - Use overly casual language - Make unsubstantiated claims - Use jargon without explanation - Be vague about capabilities --- ## 🎯 UI/UX Principles ### Hierarchy 1. Company branding (top bar) 2. Page title and description 3. Navigation tabs 4. Content cards 5. Footer information ### Color Usage **Navy Blue (60%):** - Primary text - Headers - Borders - Table headers **Orange (10%):** - Call-to-action buttons - Active states - Highlights - Accents **White/Gray (30%):** - Backgrounds - Neutral elements - Secondary text ### Spacing - Cards: 30px padding - Sections: 20px margin-bottom - Form fields: 20px margin-bottom - Grid gap: 20px ### Shadows - Light: 0 2px 4px rgba(0,0,0,0.1) - Medium: 0 4px 12px rgba(0,0,0,0.15) - Heavy: 0 8px 20px rgba(0,0,0,0.2) --- ## 🏆 Brand Assets ### Confidence Indicators **High Confidence (Green):** - Background: `#d4edda` - Text: `#155724` - Border: Success Green - Message: "Reliable estimate based on similar past work" **Medium Confidence (Yellow):** - Background: `#fff3cd` - Text: `#856404` - Border: Warning Yellow - Message: "Review recommended before sending" **Low Confidence (Red):** - Background: `#f8d7da` - Text: `#721c24` - Border: Danger Red - Message: "Engineering review strongly recommended" ### Match Score Badges **High Match (85%+):** - Background: Success Green - Text: White - Label: "% Match" **Medium Match (70-85%):** - Background: Warning Yellow - Text: White **Low Match (<70%):** - Background: Danger Red - Text: White --- ## 🎨 Theme Customization To change the theme, update these CSS variables: ```css :root { --primary-blue: #003d82; --primary-orange: #ff6b35; --dark-blue: #002347; --light-blue: #0066cc; /* etc. */ } ``` ### Alternative Color Schemes **Option 1: Green Tech** - Primary: `#2c5f2d` (Forest Green) - Accent: `#97c024` (Lime Green) **Option 2: Red Industrial** - Primary: `#8b0000` (Dark Red) - Accent: `#ffa500` (Orange) **Option 3: Gray Corporate** - Primary: `#2c3e50` (Slate) - Accent: `#3498db` (Blue) --- ## 📋 Usage Examples ### New Quote Button ```html <button class="btn"> Generate Quote </button> ``` - Orange background - White text - Uppercase - Bold weight - Rounded corners ### Alert Message ```html <div class="alert alert-success"> <strong>✓ Success!</strong><br> Quote generated successfully. </div> ``` - Color-coded by type - Icon on left - Bold title - Clear message ### Stat Card ```html <div class="stat-card"> <div class="stat-value">47</div> <div class="stat-label">Total Quotes</div> </div> ``` - White background - Navy border - Orange value - Navy label - Hover effect --- ## 🎯 Brand Applications ### Business Cards - Navy blue background - White text - Orange logo/accent - Company tagline ### Letterhead - TechForge logo top left - Navy blue header line - Orange accent stripe - Contact info footer ### Email Signatures ``` [TechForge Logo] John Smith Senior Sales Engineer TechForge Manufacturing 📞 (555) 123-4567 ✉ jsmith@techforge.example.com 🌐 www.techforge.example.com ``` --- ## 📄 Templates ### Quote Document Header ``` TECHFORGE MANUFACTURING Precision Engineering Solutions Since 1985 QUOTATION Quote ID: [NUMBER] Date: [DATE] Customer: [NAME] ``` ### Email Template ``` Subject: Quote [ID] - [Customer Name] Dear [Customer], Thank you for your inquiry. Please find attached our quotation for [Description]. [Quote Details] We look forward to working with you. Best regards, TechForge Manufacturing Team ``` --- ## ✅ Brand Checklist When creating new materials: - [ ] Navy blue is primary brand color - [ ] Orange used for CTAs and accents - [ ] Logo includes "TF" icon - [ ] Tagline "Forging Innovation Since 1985" - [ ] Professional, industrial aesthetic - [ ] Contact information included - [ ] Uppercase labels and buttons - [ ] Proper spacing and shadows - [ ] Responsive design considered - [ ] Confidence indicators color-coded --- **TechForge Manufacturing** - Your Partner in Precision Engineering *This is a fictitious company created for demonstration purposes.*