Usage Guidelines by Medium

Colour usage guidelines by medium, grounded in colour psychology and usability best practices.


Digital Applications (Web & Mobile)

LIGHT MODE

Heading Example

Body text uses Black 800 (#262626) for optimal readability. This provides enough contrast while reducing eye strain compared to pure black.

✓ Success

⚠ Warning

✕ Error

DARK MODE

Heading Example

Body text uses Slate 200 (#E2E8F0) on dark backgrounds for comfortable reading. Headings can use white or yellow.

✓ Success

⚠ Warning

✕ Error

Why These Choices?

  • White/Black backgrounds - Maximum contrast for extended reading
  • Warm greys for text - Reduces eye strain vs pure black (#000000)
  • Yellow for CTAs - High visibility and energy, proven to increase conversions
  • Traffic light system - Universally understood, works for colour blind users

STANDARD

White Paper

Black text for body copy. Use yellow for highlights, callouts, and accents only.

CALLOUT BOX
HIGHLIGHT

Yellow Background

Black text on yellow for callouts and highlights. Ensure yellow is solid, not screened.

PREMIUM

Black Paper

Yellow or white text on black creates a premium, high-end feel for covers and hero sections.

Print-Specific Guidelines

  • Yellow backgrounds - Use for callouts, boxes, and highlights - not full pages
  • Black on yellow - Ensure yellow is solid (not screened) for adequate contrast
  • Yellow on black - Creates premium, high-end feel for covers and hero sections
  • Avoid yellow text - Never use yellow for body text on white paper

Social Media

INSTAGRAM & FACEBOOK

TRANSFORM
YOUR BUSINESS

Become the man your family needs

Learn More

Black backgrounds with white/yellow text for maximum impact in feed. Text minimum 60px.

LINKEDIN

Professional Growth
Made Simple

Transform your business with proven strategies and accountability.

Learn More

White backgrounds with yellow accents for professional tone. Yellow borders to stand out.

Best Practices

  • Consistent branding - Use yellow in every post for instant recognition
  • High contrast - Black backgrounds with white/yellow text perform best
  • Thumb-stopping - Bold, ALL CAPS headlines in yellow
  • Mobile-first - Test all posts on mobile before publishing

Email Marketing

UPA DESIGN SYSTEM

Ready to Transform Your Business?

Join thousands of business owners who have already transformed their companies with our proven strategies and accountability framework.

GET STARTED TODAY
© 2024 Ultimate Performance Academy
  • Subject lines - Keep professional, use emojis sparingly
  • Header - Black or branded background with yellow accent
  • Body - White background, black text, yellow CTAs
  • CTA buttons - Yellow (#facc15) background with black text