StratIQX Documentation

Appearance

StratIQX Brand Style Guide ​

Table of Contents ​

  1. Brand Overview
  2. Logo Guidelines
  3. Color Palette
  4. Typography
  5. Logo Usage
  6. Application Guidelines
  7. Do's and Don'ts
  8. Brand Voice & Messaging

Brand Overview ​

Brand Name ​

StratIQX

Tagline ​

"Strategic Intelligence Amplified"

Brand Positioning ​

StratIQX is a cutting-edge strategic intelligence platform that empowers organizations to make data-driven decisions with unprecedented speed and precision. We amplify human strategic thinking through AI-powered insights, transforming complex data into actionable intelligence.

Brand Values ​

  • Intelligence: Leveraging advanced AI and analytics
  • Precision: Accurate, reliable insights
  • Agility: Real-time responsiveness to change
  • Innovation: Cutting-edge technology solutions
  • Clarity: Complex data made simple

Logo Guidelines ​

The StratIQX logo consists of:

  • Wordmark: "StratIQX" in custom typography
  • Emphasis: "IQ" highlighted to emphasize intelligence
  • Clean geometry: Modern, tech-forward aesthetic

Logo Variations ​

Full Logo with Tagline ​

  • Primary logo with "Strategic Intelligence Amplified" beneath
  • Use when space permits and brand recognition needs reinforcement
  • Minimum width: 200px for digital, 2 inches for print

Logo Only ​

  • Standalone StratIQX wordmark
  • Use when tagline is not necessary or space is limited
  • Minimum width: 120px for digital, 1.2 inches for print
  • "SIQ" monogram for very small applications
  • Use only when space is extremely limited
  • Minimum size: 24px for digital, 0.25 inches for print

Logo Construction & Visual Identity ​

The StratIQX logo is constructed with specific color emphasis:

Wordmark Styling ​

  • "Strat": White (#FFFFFF)
  • "IQ": Blue-400 (#60A5FA) - Emphasizes intelligence
  • "X": Cyan-400 (#22D3EE) - Represents amplification

Typography Treatment ​

  • Clean, modern sans-serif styling
  • Consistent letter spacing
  • Bold weight for impact
  • Optically balanced character spacing

3D Logo Symbol ​

The favicon represents a sophisticated 3D sphere with:

  • Primary gradient: Blue spectrum from sky-400 to blue-800
  • Intelligence network pattern: Subtle connected nodes overlay
  • 3D effects: Highlights, shadows, and depth for premium feel
  • Dimensional appearance: Conveys depth and sophistication

Color Palette ​

Primary Colors ​

Brand Blue ​

  • Hex: #2563EB (Primary), #1D4ED8 (Hover)
  • RGB: 37, 99, 235 (Primary), 29, 78, 216 (Hover)
  • CSS Variables: --primary: 221.2 83.2% 53.3%
  • Usage: Primary brand color, buttons, key UI elements

Intelligence Cyan ​

  • Hex: #06B6D4 (Cyan-500), #38BDF8 (Sky-400)
  • RGB: 6, 182, 212 (Cyan), 56, 189, 248 (Sky)
  • Usage: Accent color, highlights, "X" in logo, interactive elements

Secondary Colors ​

Slate Gray (Background) ​

  • Hex: #0F172A (Slate-900), #1E293B (Slate-800), #334155 (Slate-700)
  • Usage: Dark backgrounds, cards, containers

Blue Grays (Accents) ​

  • Hex: #1E40AF (Blue-800), #1D4ED8 (Blue-700)
  • Usage: Borders, overlays, subtle accents

Text Colors ​

  • Hex: #FFFFFF (White), #CBD5E1 (Slate-300), #64748B (Slate-500)
  • Usage: Primary text (white), secondary text (slate-300), muted text (slate-500)

Neutral Colors ​

Pure White ​

  • Hex: #FFFFFF
  • Usage: Backgrounds, negative space

Light Gray ​

  • Hex: #F8FAFC
  • Usage: Light backgrounds, subtle divisions

Medium Gray ​

  • Hex: #E2E8F0
  • Usage: Borders, inactive states

Dark Gray ​

  • Hex: #1E293B
  • Usage: Heavy text, dark themes

Deep Black ​

  • Hex: #000000
  • Usage: High contrast applications, print

Typography ​

Primary Typeface: Inter ​

  • Usage: All UI elements, headers, body text
  • Google Fonts Import: @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap')
  • Weights Available:
    • Light (300) - Large headers, elegant applications
    • Regular (400) - Body text, paragraphs
    • Medium (500) - Subheadings, card titles
    • Semibold (600) - Important UI elements, buttons
    • Bold (700) - Main headlines, strong emphasis

Secondary Typeface: Segoe UI ​

  • Usage: System font fallback, Microsoft ecosystem compatibility
  • Google Fonts Import: @import url('https://fonts.googleapis.com/css2?family=Segoe+UI:wght@300;400;500;600;700&display=swap')
  • Application: Office document integration, Windows-native feel

Font Stack Implementation ​

css
font-family: {
  'sans': ['Inter', 'Segoe UI', 'system-ui', 'sans-serif'],
  'office': ['Segoe UI', '-apple-system', 'BlinkMacSystemFont', 'sans-serif'],
  'modern': ['Inter', 'sans-serif']
}

Logo Usage ​

Header Applications ​

Website Header (Current Implementation) ​

html
<div className="text-2xl font-bold text-white">
  Strat<span className="text-blue-400">IQ</span><span className="text-cyan-400">X</span>
</div>
<div className="ml-3 text-sm text-gray-300 font-medium">
  Strategic Intelligence Amplified
</div>
  • Use full logo with tagline on homepage header
  • Logo only on internal pages for space optimization
  • Colors: White, Blue-400 (#60A5FA), Cyan-400 (#22D3EE)

Hero Section (Landing Page) ​

html
<div className="text-6xl md:text-7xl font-bold text-white mb-4">
  Strat<span className="text-blue-400">IQ</span><span className="text-cyan-400">X</span>
</div>
<div className="text-xl text-blue-200 font-medium mb-2">
  Strategic Intelligence Amplified
</div>
  • Large-scale logo treatment for maximum impact
  • Prominent tagline placement
  • Responsive sizing (6xl mobile, 7xl desktop)
html
<div className="flex items-center mb-4">
  <div className="text-xl font-bold text-white">
    Strat<span className="text-blue-400">IQ</span><span className="text-cyan-400">X</span>
  </div>
</div>
  • Smaller scale logo treatment
  • Maintains color differentiation
  • Copyright notice: "© 2025 StratIQX. Strategic Intelligence Amplified through AI orchestration and human expertise."

Document Applications ​

  • Business Cards: Use abbreviated "SIQ" monogram or simplified wordmark
  • Letterhead: Full logo with tagline in header
  • Reports: Large logo on cover, small logo in footers
  • Email Signatures: Text-based logo with color coding

Background Treatments ​

Primary Background ​

  • Dark Theme: Gradient from slate-900 via blue-900 to slate-900
  • CSS: bg-gradient-to-br from-slate-900 via-blue-900 to-slate-900
  • Usage: Main application background, landing pages

Secondary Backgrounds ​

  • Card/Section: Slate-800/50 with blue-800/30 borders
  • Header: Slate-900/50 with backdrop-blur-lg effect
  • Overlays: Blue-900/20 gradient overlays for depth

Button Styling ​

css
bg-gradient-to-r from-blue-600 to-cyan-600 
hover:from-blue-700 hover:to-cyan-700
  • Primary action buttons use blue-to-cyan gradient
  • Hover states darken the gradient
  • Text: White for contrast
  • Include shadow-lg for depth

Application Guidelines ​

Digital Applications ​

Website Landing Page ​

  • Header: Full logo with tagline, Brand Blue on white background
  • Hero section: Large logo treatment with tagline prominently displayed
  • Navigation: Logo only, consistent scaling

Web Application Interface ​

  • Top navigation: Logo only, scaled appropriately
  • Loading screens: Full logo with tagline and subtle animation
  • Error pages: Logo only to maintain simplicity

Mobile Applications ​

  • App icon: Simplified "SIQ" monogram
  • Splash screen: Full logo with tagline
  • Navigation: Logo only, optimized for small screens

Marketing Materials ​

  • Brochures: Full logo with tagline on cover
  • Business cards: Logo only, prominent placement
  • Trade show materials: Large logo treatment for visibility

Corporate Documents ​

  • Reports: Full logo on cover, abbreviated in headers/footers
  • Presentations: Consistent logo placement, appropriate sizing
  • Official correspondence: Logo in letterhead format

Environmental Applications ​

Office Signage ​

  • High contrast applications
  • Ensure visibility from appropriate distances
  • Consider illumination requirements

Vehicle Graphics ​

  • Simplified logo applications
  • High contrast for visibility
  • Weather-resistant materials

Do's and Don'ts ​

✅ Do's ​

  • Maintain proportions - Always scale logo proportionally
  • Use approved colors - Stick to the defined color palette
  • Ensure clear space - Respect minimum clear space requirements
  • Use high-resolution files - Ensure crisp reproduction at all sizes
  • Be consistent - Apply logo consistently across all touchpoints
  • Consider context - Choose appropriate logo version for each application

❌ Don'ts ​

  • Don't stretch or distort - Never alter the logo's proportions
  • Don't change colors - Don't use colors outside the approved palette
  • Don't add effects - No drop shadows, gradients, or other effects
  • Don't rotate - Keep the logo horizontal unless specifically designed otherwise
  • Don't crowd - Always maintain minimum clear space
  • Don't place on busy backgrounds - Ensure logo remains clearly visible

Common Mistakes to Avoid ​

  • Using low-resolution logo files
  • Placing logo on backgrounds with insufficient contrast
  • Scaling logo too small to be legible
  • Combining with other logos without proper spacing
  • Using outdated logo versions

Brand Voice & Messaging ​

Brand Voice Characteristics ​

Intelligent ​

  • Demonstrate deep understanding of strategic challenges
  • Use precise, technical language when appropriate
  • Showcase analytical thinking

Confident ​

  • Make clear, decisive statements
  • Back claims with data and evidence
  • Project authority in strategic intelligence

Approachable ​

  • Balance technical expertise with accessibility
  • Use clear, jargon-free explanations when needed
  • Maintain professional warmth

Forward-thinking ​

  • Focus on future possibilities and opportunities
  • Emphasize innovation and advancement
  • Highlight cutting-edge capabilities

Key Messages (Updated from Live Implementation) ​

Primary Value Proposition ​

"AI-Powered Strategic Intelligence - Transforming Data Into Competitive Advantage"

Tagline ​

"Strategic Intelligence Amplified"

Supporting Messages ​

  • "Get comprehensive market intelligence delivered 10x faster than traditional consulting, at 60% less cost"
  • "AI orchestration and human expertise combined"
  • "Transforming complex market data into clear strategic advantage"
  • "Ready to amplify your strategic intelligence?"

Performance Claims ​

  • 10x: Faster delivery than traditional methods
  • 60%: Cost savings compared to traditional consulting
  • 427: Sources analyzed (market intelligence capability)

Service Categories ​

  1. Market Intelligence Reports - $5,000 - $12,000
  2. Strategic Analysis & Advisory - $8,000 - $18,000
  3. Ongoing Intelligence Retainer - $2,000 - $5,000/month

Tone Guidelines ​

Professional Contexts ​

  • Authoritative yet approachable
  • Data-driven and evidence-based
  • Clear and precise communication

Marketing Contexts ​

  • Inspiring and forward-looking
  • Results-oriented messaging
  • Emphasis on transformation and improvement

Technical Contexts ​

  • Detailed and comprehensive
  • Accurate and specific
  • Educational and informative

Implementation Checklist ​

Immediate Implementation ​

  • [ ] Update all digital assets with approved logo
  • [ ] Implement color palette across website and applications
  • [ ] Update email signatures and templates
  • [ ] Review and update marketing materials

Ongoing Maintenance ​

  • [ ] Regular brand compliance audits
  • [ ] Team training on brand guidelines
  • [ ] Template creation for common applications
  • [ ] Brand asset library management

Quality Assurance ​

  • [ ] Logo reproduction testing across different media
  • [ ] Color accuracy verification on various displays
  • [ ] Print quality testing for physical materials
  • [ ] Accessibility compliance checking

CSS Custom Properties (From Tailwind Config) ​

Light Theme Variables ​

css
:root {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  --primary: 221.2 83.2% 53.3%;      /* Blue-600 */
  --primary-foreground: 210 40% 98%;
  --secondary: 210 40% 96%;
  --muted: 210 40% 96%;
  --muted-foreground: 215.4 16.3% 46.9%;
  --border: 214.3 31.8% 91.4%;
  --radius: 0.5rem;
}

Dark Theme Variables ​

css
.dark {
  --background: 222.2 84% 4.9%;      /* Slate-900 */
  --foreground: 210 40% 98%;
  --primary: 217.2 91.2% 59.8%;      /* Blue-400 */
  --secondary: 217.2 32.6% 17.5%;    /* Slate-700 */
  --muted: 217.2 32.6% 17.5%;
  --border: 217.2 32.6% 17.5%;
}

Asset Management (Updated Paths) ​

File Structure ​

public/
├── favicon.svg           # Main 3D sphere logo
├── favicon-3d.svg       # Alternative 3D version
├── favicon-iqx.svg      # Simplified IQX version
├── favicon.ico          # Legacy browser support
└── site.webmanifest     # PWA configuration

Favicon Implementation ​

  • Theme Color: #2563eb (Blue-600)
  • Manifest Name: "StratIQX Intelligence Platform"
  • Short Name: "StratIQX"
  • Description: "Strategic Intelligence for Business Growth"

This brand style guide is a living document that should be reviewed and updated as the StratIQX brand evolves. For questions about brand implementation or to request additional assets, please contact the brand management team.

Document Version: 1.0
Last Updated: August 2025
Next Review: February 2026

Strategic Intelligence Hub Documentation

Copyright © 2024-present StratIQX