Logo Placement Strategy

Logo Placement Strategy & Wireframe Design Document Classification: Design Framework Version: 1.0 | Date: August 2025 1. Brand Hierarchy Framework 1.1 Primary Brand Positioning KETURAH (Primary Brand) ├── Project Stabio Granden Living (Secondary) ├── MAG Property Development (Partner) └── A++ Group (Partner) 1.2 Visual Weight Distribution Keturah: 40% visual weight (primary brand) Stabio Project: 30% visual weight (project identity) MAG: 15% visual weight (development partner) A++: 15% visual weight (architecture partner) 2. Header Layout Strategy 2.1 Desktop Layout (1920px width) ┌─────────────────────────────────────────────────────────────┐ │ [KETURAH LOGO] [STABIO GRANDEN LIVING] [MAG] [A++] │ │ 240px 400px 120px 120px │ │ (Primary) (Project) (Partners) │ └─────────────────────────────────────────────────────────────┘ 2.2 Mobile Layout (375px width) ┌─────────────────────────┐ │ [KETURAH LOGO] │ │ 180px │ │ │ │ [STABIO GRANDEN LIVING] │ │ 200px │ │ │ │ [MAG] [A++] │ │ 80px 80px │ └─────────────────────────┘ 2.3 Tablet Layout (768px width) ┌─────────────────────────────────────────┐ │ [KETURAH] [STABIO GRANDEN] [MAG][A++] │ │ 200px 280px 100px 100px│ └─────────────────────────────────────────┘ 3. Logo Specifications 3.1 Keturah Logo Requirements Format: SVG primary, PNG fallback Minimum Width: 180px (mobile), 240px (desktop) Color Variants: Full color, white, black Clear Space: 1.5x logo height on all sides Typography: Custom Keturah wordmark 3.2 Stabio Project Logo Requirements Format: SVG with text integration Style: Modern, Swiss-inspired typography Color Palette: Blue-green gradient (#034f84 to #0a8754) Elements: Swiss flag accent, mountain silhouette Text: "STABIO GRANDEN LIVING" 3.3 MAG Logo Requirements Format: SVG from brand assets Colors: Red background (#E53E3E), white text Minimum Width: 100px (mobile), 120px (desktop) Clear Space: 0.5x logo height Hover Effect: Subtle scale (1.05x) 3.4 A++ Logo Requirements Format: SVG minimalist design Colors: Black text, transparent background Typography: Clean sans-serif "A++" Minimum Width: 80px (mobile), 120px (desktop) Style: Architectural, sophisticated 4. Interactive Elements 4.1 Hover States .logo-container:hover { transform: scale(1.05); transition: transform 0.3s ease; filter: brightness(1.1); } 4.2 Click Actions Keturah: Navigate to main homepage Stabio: Navigate to project overview MAG: Open partner information modal A++: Open architecture portfolio modal 4.3 Tooltip Information MAG: "Luxury Development Partner since 1978" A++: "Human Sustainable Architecture" 5. About Section Layout 5.1 Partner Showcase Design ┌─────────────────────────────────────────────────────────────┐ │ PARTNER ECOSYSTEM │ │ │ │ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │ │ │ [MAG LOGO] │ │ [A++ LOGO] │ │ [MANUS AI] │ │ │ │ │ │ │ │ │ │ │ │ Development │ │ Architecture│ │ AI Platform │ │ │ │ Excellence │ │ Innovation │ │ Integration │ │ │ │ │ │ │ │ │ │ │ │ [Learn More]│ │ [Learn More]│ │ [Learn More]│ │ │ └─────────────┘ └─────────────┘ └─────────────┘ │ └─────────────────────────────────────────────────────────────┘ 5.2 Partner Information Cards Card Dimensions: 300px width x 400px height Image Area: 300px x 200px (partner logo/imagery) Content Area: 300px x 200px (description + CTA) Spacing: 40px between cards Animation: Fade-in on scroll 6. Footer Layout Strategy 6.1 Footer Logo Arrangement ┌─────────────────────────────────────────────────────────────┐ │ FOOTER │ │ │ │ ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐ │ │ │KETURAH │ │ STABIO │ │ MAG │ │ A++ │ │ │ │(Grayscale)│(Grayscale)│(Grayscale)│(Grayscale)│ │ │ └─────────┘ └─────────┘ └─────────┘ └─────────┘ │ │ │ │ Hover Effect: Color Restoration │ └─────────────────────────────────────────────────────────────┘ 6.2 Footer Specifications Default State: 50% opacity grayscale Hover State: Full color restoration Size: 80px height for all logos Alignment: Center-aligned with equal spacing Background: Dark theme (#1a1a1a) 7. Responsive Breakpoints 7.1 Breakpoint Strategy / Mobile First Approach / @media (min-width: 375px) { / Mobile / } @media (min-width: 768px) { / Tablet / } @media (min-width: 1024px) { / Desktop / } @media (min-width: 1440px) { / Large Desktop / } 7.2 Logo Scaling Matrix Screen Size Keturah Stabio MAG A++ Mobile 180px 200px 80px 80px Tablet 200px 280px 100px 100px Desktop 240px 400px 120px 120px Large 280px 480px 140px 140px 8. Accessibility Considerations 8.1 Alt Text Requirements Keturah: "Keturah - Luxury Real Estate Development" Stabio: "Stabio Granden Living - Swiss Luxury Project" MAG: "MAG Property Development - Dubai Partner" A++: "A++ Group - Human Sustainable Architecture" 8.2 Keyboard Navigation Tab Order: Keturah → Stabio → MAG → A++ Focus Indicators: 2px blue outline (#034f84) Skip Links: "Skip to main content" option 8.3 Screen Reader Support ARIA Labels: Descriptive labels for all logos Role Attributes: navigation, banner, contentinfo Landmark Regions: Proper semantic structure 9. Brand Guidelines Compliance 9.1 Color Harmony :root { --keturah-primary: #034f84; --keturah-secondary: #0a8754; --mag-red: #E53E3E; --aplus-black: #1a1a1a; --neutral-white: #ffffff; --neutral-gray: #f5f5f5; } 9.2 Typography Coordination Primary Font: Inter (Keturah, Stabio) Secondary Font: Helvetica Neue (MAG) Accent Font: Futura (A++) Fallback: Arial, sans-serif 9.3 Spacing System Base Unit: 8px Logo Margins: 16px (2 units) Section Padding: 32px (4 units) Container Max-Width: 1200px 10. Implementation Guidelines 10.1 Development Checklist [ ] Obtain SVG files from all partners [ ] Create responsive CSS framework [ ] Implement hover animations [ ] Add accessibility features [ ] Test across devices and browsers [ ] Validate with brand guidelines 10.2 Quality Assurance Cross-Browser Testing: Chrome, Firefox, Safari, Edge Device Testing: iPhone, iPad, Android, Desktop Performance: Logo loading under 2 seconds Accessibility: WCAG 2.1 AA compliance 10.3 Maintenance Protocol Monthly Review: Logo placement effectiveness Quarterly Update: Partner brand guideline changes Annual Audit: Complete design system review Version Control: Git-based asset management Document Control Classification: Design Framework Distribution: Design Team, Development Team, Partners Review Cycle: Bi-weekly during implementation Version Control: Git repository with tagged releases Access Level: Internal Team + Partner Review