Corporate

Corporate

Mission

Project trust, stability, and professionalism through a conservative blue-navy palette and formal, structured layouts.

Brand

🎨 Colors

• #0A1628 — Primary dark (navy background)
• #1E3A5F — Secondary dark (card backgrounds)
• #0066CC — Accent (corporate blue)
• #FFFFFF — Primary text on dark / background on light
• #94A3B8 — Secondary text (slate)
• #F1F5F9 — Light section background (alternating)

🔤 Typography

• Heading font: Libre Franklin (Google Fonts)
• Body font: Source Sans 3 (Google Fonts)
• Type scale: xs 0.75rem / sm 0.875rem / base 1rem / lg 1.125rem / xl 1.375rem / 2xl 1.75rem / 3xl 2.25rem

📐 Spacing

• Grid: 12-column, 2rem gap, max-width 1140px
• Section padding: 5rem top/bottom (alternating white/navy backgrounds)
• Card gap: 2rem

🧩 Components

• Buttons: 4px border-radius (nearly square), solid navy fill, white text, subtle darken on hover
• Cards: White with 1px #E2E8F0 border, 8px radius, subtle shadow, icon-top layout
• Nav: Full-width navy bar, centered or left-aligned logo, dropdown menus for sub-sections
• Hero: Full-width navy background, centered heading, subhead, two CTAs (primary + outline), stock-photo or abstract background
• Footer: Dark navy with 4-column link grid, copyright line, social icons, "trust bar" with certifications

♿ Accessibility

• Minimum 4.5:1 contrast for all text (navy on white = 13:1, white on navy = 13:1)
• Focus rings: 2px solid #0066CC outline
• Reduced motion: remove hover lifts, keep opacity transitions
• Minimum font size 0.875rem for body

✍️ Writing Tone

• Formal and professional — use complete sentences, avoid contractions
• Third-person or institutional "we"; avoid first-person singular
• Labels: title case for navigation, sentence case for body CTAs

Do / Don't

✅ Do

• Alternate between white and light-gray section backgrounds for rhythm
• Use data-heavy layouts: stat blocks, comparison tables, bulleted feature lists
• Include trust signals: client logos, certifications, case-study links
• Maintain conservative border-radius (4-8px max)
• Structure content with clear headings, subheadings, and supporting body

❌ Don't

• Use bright or neon accent colors — stay in the blue-navy range
• Add playful animations — hover lifts are the ceiling
• Use unconventional layouts — centered or two-column only
• Feature informal photography — use corporate stock or product shots
• Mix in trendy design elements (glassmorphism, neumorphism, brutalism)

Quality Gates

• All text passes 4.5:1 contrast (target 7:1 for body text)
• Focus states visible on every interactive element
• Page respects prefers-reduced-motion
• No font smaller than 0.875rem
• Navigation works with keyboard (tab order logical)
• Trust signals present above the fold (client logos or certification)