Meddle Brand Guidelines - Design System and Visual Standards
Comprehensive guide to our design system, colour palette, typography, and visual elements for maintaining brand consistency.
MeddleBrand System
A comprehensive design system showcasing our complete colour palette, typography hierarchy, and visual elements that define the Meddle brand across all healthcare technology touchpoints.
Primary Colors
Neutral Colors
Accent Colors
17 Brand Colors • Complete Design System
Complete Color Palette
A meticulously crafted colour system featuring 17 distinct colours across primary, neutral, and accent categories. Each colour is optimised for healthcare technology applications with WCAG 2.1 AA accessibility compliance.
Primary Colors
Core brand colours that define Meddle's identity
Main brand colour for logos, navigation, and primary actions. Optimised for healthcare technology applications.
Deep accent colour for headers, dark mode elements, and sophisticated design applications.
Vibrant accent for highlights, success states, and energetic design elements.
Neutral Colors
Essential foundation colours for backgrounds, text, and structure
Accent Colors
Vibrant secondary colours for CTAs, highlights, and creative elements
Light Accents
Dark Accents
Colour Combinations & Usage
Proven colour combinations that showcase our brand's design capability
Primary Combinations
Perfect for hero sections, CTAs, and brand highlights. Creates energy while maintaining professional credibility.
Ideal for headers, navigation, and professional interfaces. Provides depth without overwhelming content.
Accent Combinations
Perfect for creative sections, notifications, and engaging content. Balances warmth with clarity.
Great for care-focused content, patient communications, and gentle user interactions.
Typography System
Our font hierarchy and typography standards for maintaining readability and visual hierarchy across all platforms.
Font Hierarchy
H1 - Hero Headlines
font-bold, text-5xl to text-7xl
H2 - Section Headers
font-bold, text-3xl to text-5xl
H3 - Subsection Headers
font-semibold, text-xl to text-2xl
H4 - Card Headers
font-semibold, text-lg
Font Specifications
Standard body text uses text-base (16px) with leading-relaxed (1.625) for optimal readability.
Larger body text for important content uses text-lg (18px) with leading-relaxed.
Small text for captions and secondary information uses text-sm (14px).
Layout System
Our spacing, grid, and layout standards for maintaining visual consistency and professional appearance.
Spacing Scale
Grid System
Component Guidelines
Standards for buttons, cards, and interactive elements to maintain consistency and user experience.
Buttons
Cards
Standard card styling with hover effects
Icons
Visual Elements
Background accents, gradients, and visual enhancements that add depth without overwhelming content.
Background Accents
Positioned top-right with low opacity for subtle depth
Gradients
Subtle gradient for section backgrounds
Mobile-First Guidelines
Responsive design principles and mobile optimisation standards for maintaining quality across all devices.
Responsive Principles
Start with mobile design and progressively enhance for larger screens.
Use Tailwind's responsive prefixes: sm:, md:, lg:, xl:
Hide decorative elements on mobile, focus on essential content.
Mobile Patterns
MaintainingBrand Consistency
These guidelines ensure visual consistency and professional quality across all Meddle touchpoints. Use them as your reference for all design decisions.