TenTen Group - Brand Color System
Bright Blue, Salmon, Black & Overlay Color Analysis
Brand Color System
🎯 Complete Brand System
Four carefully balanced colors providing maximum flexibility for all brand applications
WCAG Accessibility Analysis
Color Performance Matrix
Bright Blue (#0070F6)
Salmon (#F54737)
Black (#1A1A1A)
Typography Hierarchy & Color Options
White Background Typography
Black Text
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Body text paragraph with excellent readability using black.
Small text caption or metadata
Extra small text for fine print
Bright Blue Text
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Body text paragraph using bright blue for brand emphasis.
Small text caption or metadata
Extra small text for fine print
Salmon Text (Large Only)
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
⚠️ Salmon color should only be used for large text (18px+) due to contrast requirements
Small text not recommended for salmon color
Bright Blue Background Typography
White Text
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Body text paragraph with excellent contrast on bright blue background.
Small text caption or metadata
Extra small text for fine print
Black Text
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Body text with strong 16.8:1 contrast ratio on bright blue.
Small text caption or metadata
Extra small text for fine print
Salmon Background Typography
Black Text (Recommended)
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Body text with excellent 4.1:1 contrast ratio providing strong readability.
Small text caption or metadata
Extra small text for fine print
💡 White text can be used on salmon background but meets minimum contrast only for large text (18px+)
Black Background Typography
White Text
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Perfect contrast at 16.8:1 ratio.
Small text caption
Bright Blue Text
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Strong 3.7:1 contrast ratio.
Large text recommended
Salmon Text
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Good 4.1:1 contrast ratio.
Excellent readability
📝 Typography Best Practices
✅ Recommended Combinations
- • Black text on white backgrounds - perfect for all text sizes
- • White text on black backgrounds - excellent contrast
- • Black text on colored backgrounds - strong readability
- • Bright Blue for headings and brand elements
- • Salmon for large headings and accent text only
⚠️ Use With Caution
- • Salmon text on white - large text only (18px+)
- • White text on Salmon - large text only
- • Overlay color - very limited use only
- • Bright Blue and Salmon together - avoid small text
- • Always test contrast ratios for accessibility compliance
- • Consider user experience across different devices
Brand Color Usage Examples
🌐 Website Header
Transform Your Business
Black provides excellent readability for all body text and headers.
📋 Card Layout System
Strategy Consulting
Black ensures perfect readability for all content text.
Learn More →📝 Form Designs
Get In Touch
Newsletter Signup
Contact Form
Brand Color Usage Strategy
Color Roles & Applications
🔵 Bright Blue (#0070F6) - Primary Brand
- Logo and brand marks - Primary brand identity
- Primary buttons - Call-to-action elements
- Headers and navigation - Key structural elements
- Links and interactive elements - User interface highlights
🔴 Salmon (#F54737) - Secondary Accent
- Secondary buttons - Supporting actions (large text only)
- Highlights and callouts - Drawing attention to key content
- Icons and decorative elements - Visual accents and emphasis
- Active states - Selected or current page indicators
⚫ Black (#1A1A1A) - Text & Contrast
- Body text and paragraphs - Excellent readability for content
- Headlines and subheadings - Professional, crisp typography
- Form labels and UI text - Critical interface elements
- Dark backgrounds - Strong contrast sections and overlays
🌲 Overlay (#001F05) - Limited Use
- Logo animation backgrounds - Sophisticated forest green for motion graphics
- Color block motion - Dynamic transitions and animated elements
- Special overlays - Video overlays and presentation backgrounds
- Premium loading states - High-end user interface animations
✨ Four-Color System Advantages
Enhanced Flexibility
Overlay adds motion graphics depth for premium animations
Strong Accessibility
Black provides 16.8:1 contrast ratio for excellent readability
Brand Sophistication
Deep forest green adds premium elegance to motion elements
Controlled Usage
Limited overlay ensures impactful, strategic motion application
Understanding the Results:
Meets AA standards for all text sizes
AA compliant for large text only
Exceeds AAA standards significantly
Reserved for animation and motion graphics
Implementation Best Practices:
- Primary Text: Always use Black (#1A1A1A) for excellent readability
- Brand Elements: Bright Blue for logo, navigation, and primary buttons
- Accents: Salmon for highlights, secondary buttons (large text), and visual interest
- Motion Elements: Overlay (#001F05) for logo animations and color block motion
- Limited Use: Reserve overlay for motion graphics, animations, and special video overlays
- Accessibility: This system maintains strong WCAG compliance across all applications