Usage Guidelines

• Primary logo color should be Brand Blue (#22b0fc)
• White logo can be used on Brand Blue or Brand Orange backgrounds
• Don't modify the logo proportions or add effects like shadows
• Always maintain clear space around the logo
• For small applications, or limited space, use the wordmark version
• Only use approved color combinations shown in the examples above

Color Usage Guidelines

• Use primary colors for main UI elements and primary actions
• Secondary colors should be used sparingly for accents and highlight information
• Functional colors should be consistent across the interface (success=green, error=red, etc.)
• Maintain sufficient contrast ratios for text legibility (at least 4.5:1 for normal text)
• Always consider color-blind users when designing interfaces

Typography Guidelines

• Maintain hierarchical structure with appropriate heading levels text-4xl → text-3xl → text-2xl → text-xl → text-lg → text-base
• Ensure sufficient contrast between text and background (WCAG AA compliance) text-gray-900 dark:text-white, text-gray-700 dark:text-gray-300
• Keep body text between 14-18px for optimal readability text-sm (14px), text-base (16px), text-lg (18px)
• Use consistent line heights: 1.2-1.3 for headings, 1.5-1.6 for body text leading-tight, leading-snug, leading-normal, leading-relaxed
• Limit line length to 50-75 characters for best readability max-w-prose, max-w-lg, max-w-xl
• Use appropriate font weights to establish hierarchy and emphasis font-normal, font-medium, font-semibold, font-bold

Component Guidelines

• Maintain consistent spacing within and between components
• Use appropriate colors for different component states and types
• Ensure all interactive elements have hover and focus states
• Provide sufficient contrast for text and elements
• Design for accessibility, ensuring components are keyboard navigable
• Follow responsive design principles for all components

Layout Guidelines

• Use consistent spacing based on the spacing scale p-4, m-4, gap-4, etc.
• Design with a mobile-first approach, then optimize for larger screens md:flex, lg:grid-cols-3, etc.
• Use the 12-column grid system for flexible layouts grid-cols-12, col-span-6, etc.
• Maintain proper content hierarchy through layout decisions order-1, order-2, flex-1, etc.
• Use container widths appropriately based on content needs max-w-md, max-w-7xl, etc.
• Ensure adequate white space around elements for readability p-6, m-8, space-y-4, etc.
• Keep layouts consistent across similar page types Use component-based design with consistent classes

Try It

Imagery Best Practices

• Ensure all imagery conveys professionalism, security, and reliability
• Maintain brand consistency across all visual elements
• Optimize images for web to ensure fast page loading
• Use appropriate image formats (SVG for icons and illustrations, WebP/JPEG for photos)
• Ensure all imagery is accessible with proper alt text
• Use responsive images that adapt to different screen sizes
• Avoid stock imagery clichés (e.g., generic handshakes, overly staged office scenes)