BoardFriend
Design Philosophy & Guidelines

Clinical precision meets digital clarity

BoardFriend's design philosophy draws inspiration from the precision, clarity, and professionalism inherent in medical practice. Every design decision reflects the serious, focused nature of medical education while maintaining approachability and ease of use.

Core Design Principles

Restraint over excess

We deliberately avoid the colorful, gradient-heavy aesthetics common in consumer applications. Instead, we embrace a monochromatic palette anchored by sophisticated grays and clean whites, with strategic use of deep charcoal (gray-900) as our primary accent and teal for purposeful highlights. This restraint mirrors the focused, distraction-free environment that medical professionals require.

Typography as communication

Our typographic choices prioritize legibility and hierarchy. We use light font weights (font-light) for headlines to create an elegant, approachable feel while maintaining the authority expected in medical contexts. The generous use of white space around text elements ensures comfortable reading during long study sessions.

Asymmetry and breathing room

Rather than relying on centered layouts and uniform card grids, we employ asymmetrical compositions that guide the eye naturally through content. Large sections of white space aren't empty—they're intentional pauses that allow complex information to be processed without cognitive overload.

Subtle visual depth

We enhance our clean foundation with carefully placed gradient backgrounds that create depth while maintaining the clinical precision our users expect. Soft gradients in our scrub blue palette add visual interest without compromising the professional aesthetic.

UI Design Guidelines

These guidelines can be applied across AI tools and professional applications to maintain consistency and sophistication.

Color System

Primary Palette

  • Primary Text: gray-900 (#111827) - For headlines and primary content
  • Secondary Text: gray-600 (#4B5563) - For body text and descriptions
  • Tertiary Text: gray-500 (#6B7280) - For metadata and supporting information
  • Background: white (#FFFFFF) - Primary background
  • Surface: gray-50 (#F9FAFB) - Secondary backgrounds and cards
  • Border: gray-100 (#F3F4F6) - Subtle divisions and borders

Brand Accent Color

Medical Orange

#E55039

Our signature medical orange evokes energy, focus, and clinical precision associated with medical practice. This vibrant orange serves as our primary brand accent, used strategically for:

  • • Primary call-to-action buttons
  • • Brand name highlights
  • • Navigation active states
  • • Success indicators and confirmations
  • • Key interactive elements

Supporting Colors (Use Sparingly)

Color should be used strategically to convey meaning, not decoration. When additional color is necessary:

  • Success/Positive: #F2A085 (lighter orange) - For confirmations, success states
  • Warning/Attention: amber-600 (#D97706) - For warnings, important notices
  • Error/Negative: red-600 (#DC2626) - For errors, destructive actions
  • Information/Neutral: #CC3D1F (darker orange) - For informational content, links

Gradient Backgrounds & Visual Depth

Gradient Usage

Subtle gradients add visual interest while maintaining professionalism:

  • Hero Sections: bg-gradient-to-br from-[#FDF2EF] via-white to-[#FBF7F5]
  • Feature Cards: bg-gradient-to-br from-[#FDF2EF] to-[#FBF7F5]
  • Social Proof: bg-gradient-to-r from-[#FDF2EF] via-white to-[#FBF7F5]
  • Dark Sections: bg-gradient-to-br from-gray-900 via-[#E55039] to-gray-900

Color Variations

Our medical orange palette provides consistent variations:

  • Primary: #E55039 - Main brand color
  • Darker: #CC3D1F - Hover states, darker elements
  • Lighter: #F2A085 - Secondary elements, success states
  • Very Light: #FDF2EF - Subtle backgrounds
  • Border: #F5C4B0 - Borders and dividers

Typography Scale

  • Hero Headlines: text-5xl to text-6xl, font-light, tight line-height
  • Section Headlines: text-3xl to text-4xl, font-light
  • Subsection Headlines: text-2xl, font-light
  • Body Large: text-xl, regular weight, relaxed line-height
  • Body Regular: text-base, regular weight
  • Body Small: text-sm, regular weight
  • Metadata/Labels: text-xs to text-sm, font-medium, uppercase, tracked

Component Guidelines

Buttons

  • Primary: bg-[#E55039], white text, hover:bg-[#CC3D1F]
  • Secondary: border-gray-200, gray-700 text, transparent background
  • Ghost: No background, gray-700 text, hover:text-[#E55039]
  • Sizing: Generous padding (px-8 py-4 for large), comfortable touch targets
  • States: Subtle hover effects to darker orange, no dramatic transformations

Accessibility Standards

  • Contrast: Medical orange (#E55039) meets WCAG AA standards against white backgrounds
  • Focus Indicators: Clear, visible focus states using medical orange
  • Touch Targets: Minimum 44px for interactive elements
  • Alt Text: Descriptive alternative text for all meaningful images
  • Semantic HTML: Proper heading hierarchy and landmark elements

The Medical Orange Philosophy

Why Medical Orange?

Our choice of medical orange (#E55039) as the primary brand color is deeply intentional:

  • Energy & Focus: Orange conveys energy, enthusiasm, and focused attention—essential for effective studying
  • Psychological Impact: Orange stimulates mental activity and promotes confidence, perfect for medical education
  • Professional Warmth: The deeper shade suggests expertise while maintaining approachability
  • Visual Accessibility: Provides excellent contrast against white backgrounds while being energizing during study sessions
  • Memorable Identity: Orange creates a distinctive, memorable brand presence in the medical education space

Color Usage Strategy

While our foundation remains monochromatic, strategic medical orange usage enhances usability:

  • Brand Identity: Use #E55039 for brand moments and primary CTAs
  • Hierarchy: Medical orange accents support information hierarchy
  • Interactive States: Consistent hover and focus states using #CC3D1F
  • Success Indicators: Lighter orange (#F2A085) for positive feedback
  • Visual Interest: Gradients using our orange palette add depth without distraction
  • Professional Context: Reinforces the energetic, focused medical education environment

This design philosophy creates digital environments that feel appropriate for serious medical education while remaining approachable and energizing. The strategic use of medical orange and subtle gradients adds warmth and visual interest to our monochromatic foundation, creating design that motivates and energizes medical students while allowing them to focus on what matters most: mastering the knowledge and skills they need to become excellent physicians.