🎨 Visual & Style Guidelines
What you’ll get out of this
This section defines the internal design and UI rules for DeelRx CRM, including color schemes, typography, and visual identity guidelines.Brand Colors
Primary Colors
- Primary:
#0D9373(Teal Green) - Light:
#07C983(Bright Teal) - Dark:
#0D9373(Same as Primary)
Color Usage
- Primary color for main actions and branding
- Light variant for hover states and highlights
- Dark variant for text and emphasis
Typography
Font Families
- Primary: System fonts for optimal performance
- Headings: Bold, clear hierarchy
- Body: Readable, mobile-friendly sizing
Text Hierarchy
- H1: Main page titles
- H2: Section headers (required for all docs)
- H3: Subsection headers
- Body: Standard content text
- Small: Captions and metadata
Logo Usage
Logo Variants
- Dark Logo: For light backgrounds
- Light Logo: For dark backgrounds
- Favicon: SVG format for crisp display
Logo Guidelines
- Always maintain proper spacing around logo
- Use appropriate variant for background
- Never distort or modify logo proportions
UI Components
Mintlify Components
- Cards: Clean, bordered containers
- Buttons: Primary actions in brand colors
- Links: Consistent with brand color scheme
- Code blocks: Syntax highlighting with brand colors
Visual Hierarchy
- Use consistent spacing and margins
- Maintain clear content flow
- Ensure mobile responsiveness
- Follow accessibility guidelines
Accessibility
Color Contrast
- Ensure sufficient contrast ratios
- Test with color blindness simulators
- Provide alternative text for images
- Use semantic HTML structure
Mobile Design
- Thumb-friendly touch targets
- Readable font sizes on small screens
- Optimized for one-handed use
- Fast loading and responsive
Brand Consistency
Visual Identity
- Maintain consistent color usage
- Use brand colors for all interactive elements
- Ensure logo appears correctly across platforms
- Follow established spacing and layout patterns
Documentation Standards
- Consistent header structure
- Proper use of Mintlify components
- Clear visual hierarchy
- Mobile-first responsive design
These guidelines ensure visual consistency across all DeelRx CRM touchpoints and maintain the professional, privacy-focused brand identity.