Patient Led Oncology

Color Usage Guidelines

• Use Primary Teal (#016a7b) for all headings, primary CTAs, and important links
• Use Light Teal (#eaf4f6) sparingly for subtle backgrounds and borders
• Maintain sufficient contrast ratios (WCAG AA minimum) for accessibility
• Avoid using more than 3 colors in a single design element
• Use white text on Primary Teal backgrounds for maximum readability

Typography Guidelines

• Always use Lato for all text elements - no substitutions
• Use font-weight 900 for all headings to create strong hierarchy
• Use font-weight 400 for body text and UI elements
• Maintain line-height of 1.3-1.5 for optimal readability
• Use letter-spacing of 0.15px for body text and links
• Never use all caps except for navigation labels or special emphasis

Logo Usage Guidelines

• Maintain minimum clear space around logo equal to the height of one petal
• Use full color version on light backgrounds
• Use monochrome version on dark backgrounds or when color printing isn't available
• Never stretch, distort, or alter the logo proportions
• Minimum size: 100px width for digital, 0.5" for print
• Logo should always appear in primary teal (#016a7b) or white when on colored backgrounds

Button Guidelines

• Use primary buttons for main actions (sign up, book consult, get started)
• Use secondary buttons for less critical actions (learn more, view details)
• Use text link buttons for tertiary actions or when space is limited
• Maintain consistent padding (15px vertical, 30px horizontal minimum)
• Buttons should have clear hover states (darker shade for primary, inverted for secondary)
• Never use more than one primary button per section

Image Guidelines

• Images should convey hope, trust, and professionalism
• Avoid overly clinical or sterile medical imagery
• Use warm, natural lighting when possible
• Maintain consistent color tone - avoid overly saturated or desaturated images
• Always include alt text for accessibility
• Use high-resolution images (minimum 1200px width for web)
• Consider using subtle overlays of primary teal for brand consistency

Layout Guidelines

• Use consistent spacing multiples (10px base unit)
• Maintain maximum content width of 1200px for optimal readability
• Use grid systems with 12 or 16 columns for complex layouts
• Maintain minimum 40px padding on mobile, 60px on desktop
• Use white space generously to create breathing room
• Group related elements with tighter spacing, separate unrelated sections

Voice Characteristics

• Compassionate: Acknowledge the difficulty of the cancer journey
• Empowering: Give patients tools and knowledge to take control
• Knowledgeable: Speak with authority based on research and experience
• Hopeful: Focus on possibilities and positive outcomes
• Patient-Centered: Always prioritize patient needs and experiences
• Clear: Avoid medical jargon, explain complex concepts simply

Writing Guidelines

• Use "you" and "your" to speak directly to patients
• Avoid passive voice - use active, direct language
• Keep sentences short and clear (15-20 words average)
• Use bullet points and lists for scannability
• Include real patient stories and testimonials
• Always include disclaimers for medical information
• Use inclusive language that respects all patients and caregivers

Client Logo Usage Guidelines

• Display client logos with equal prominence and spacing
• Maintain original aspect ratios - do not stretch or distort
• Use on white or light backgrounds for best visibility
• Include links to partner websites when displaying logos
• Respect each partner's brand guidelines if provided
• Use on Clients page, partnership sections, and case studies

YouTube Content

• Cancer Patient Lab Interview: Mark Sean Taylor discusses his personal experience, Patient Led Oncology, and findings
• Video URL: https://www.youtube.com/watch?v=nMAwLuaWpCU
• Channel: Cancer Patient Lab
• Use for: About page, media section, educational content

Asset Categories

• Logos: Primary logo, wellness symbol (PNG & JPG formats)
• Illustrations: Microscope illustration, scientific graphics
• Team Photos: Individual photos of team members (5 total)
• Client Logos: Partner clinic and organization logos (5 total)
• Videos: YouTube interviews and educational content
• Other Assets: Additional photos, graphics, or media as needed

Usage Guidelines for Non-Brand Assets

• Team photos should be used consistently across all team-related pages
• Maintain aspect ratios when resizing images
• Use high-resolution versions for print, optimized versions for web
• Always include proper attribution when required
• Videos should be embedded using responsive iframe code
• Keep asset library organized by category for easy access

Font Loading

Include Lato from Google Fonts in your HTML head: