Dashboard → User-Facing Pages → Look & Feel Tab

Color Scheme

Primary Color

• Background gradients

• Primary buttons

• Brand accents

• Navigation elements

• Brand Recognition: Establishes visual identity

• User Experience: Guides user attention

• Accessibility: Must meet contrast requirements

• Emotional Response: Influences user perception

• CSS Variable: --primary-color

• Gradient Usage: Applied to hero sections

• Button Styling: Primary action buttons

• Focus States: Form and interactive elements

Secondary Color

• Secondary text elements

• Accent highlights

• Supporting UI elements

• Hover states

• Contrast: Must work well with primary color

• Readability: Ensure text remains legible

• Harmony: Should complement primary color

• Accessibility: Meet WCAG contrast guidelines

Button Text Color

• Button text

• Call-to-action elements

• Form submit buttons

• Navigation highlights

• Contrast Ratio: Minimum 4.5:1 for normal text

• Readability: Must be clearly visible

• Focus States: Distinct focus indicators

• Hover Effects: Clear hover state changes

Hero Section Settings

Hero Gradient Distance

• CSS Gradient: linear-gradient(90deg, transparent 0%, primary-color X%)

• Responsive: Adjusts based on screen size

• Performance: Hardware-accelerated rendering

• Browser Support: Modern browsers with fallback

• Text Readability: Ensures text remains visible over images

• Visual Hierarchy: Guides user attention

• Brand Consistency: Maintains color scheme

• Professional Appearance: Creates polished look

Typography

Base Font Size

• Desktop: Full specified size

• Tablet: Slightly reduced for better fit

• Mobile: Further reduced for readability

• Accessibility: Respects user browser settings

• CSS: font-size: 16px (base)

• Scale: Uses relative units (rem/em)

• Line Height: Optimized for readability

• Font Stack: System fonts for performance

Logo Settings

Logo Type

• Light Logo: For dark backgrounds or hero sections

• Dark Logo: For light backgrounds or content areas

• Background Contrast: Choose based on background color

• Visibility: Ensure logo is clearly visible

• Brand Consistency: Match overall design theme

• User Experience: Should be immediately recognizable

Logo Size

• Proportional Scaling: Maintains aspect ratio

• Responsive Design: Adjusts for different screen sizes

• Brand Impact: Larger logos for stronger brand presence

• Page Balance: Should not overwhelm other content

• CSS: height: 32px; width: auto;

• Responsive: Scales down on mobile devices

• Quality: Maintains image quality at all sizes

• Loading: Optimized for fast page load