Imagery and Visual Style
This section defines how imagery, photography, graphics, and icons must be used across NayaOne applications.
Visual imagery plays a crucial role in establishing brand identity and communicating messages effectively. These guidelines ensure consistency in visual style while maintaining flexibility for different contexts and use cases.
General rules
Section titled “General rules”- Visual imagery must align with the NayaOne brand identity
- Photography and graphics must be professional and high-quality
- Icons and graphics must follow the established design system
- Visual content must support accessibility requirements
- Imagery must be used consistently across all modules and applications
Multi-tenant considerations
Section titled “Multi-tenant considerations”Visual imagery may need to adapt to different tenant contexts while maintaining brand consistency.
To support this:
- Use semantic tokens for icon colors and sizes
- Photography style guidelines should be flexible enough for tenant-specific needs
- Custom graphics must follow the same design principles regardless of tenant
- Visual elements must render correctly across different themes and contexts
Photography style
Section titled “Photography style”Photography is a powerful tool for conveying the NayaOne brand personality and values.
Style and tone
Section titled “Style and tone”NayaOne photography should reflect:
- Professional and modern: Clean, crisp images that convey innovation and expertise
- Authentic: Real people and real scenarios, avoiding overly staged or artificial compositions
- Approachable: Warm and inviting, showing the human side of technology
- Diverse and inclusive: Representing diverse teams, users, and perspectives
Composition guidelines
Section titled “Composition guidelines”- Use natural lighting when possible
- Maintain clean backgrounds that don’t distract from the subject
- Follow the rule of thirds for balanced compositions
- Ensure sufficient contrast between subject and background
- Avoid cluttered or busy compositions
Color treatment
Section titled “Color treatment”- Maintain natural color tones
- Avoid excessive color grading or filters
- Ensure images work well in both light and dark themes
- Use color correction to align with brand palette when appropriate
Subject matter
Section titled “Subject matter”Ideal photography subjects include:
- People: Diverse teams collaborating, users interacting with technology, professionals in their work environment
- Technology: Clean shots of devices, interfaces, and digital tools
- Workspaces: Modern, organized office spaces and collaborative environments
- Abstract concepts: Visual metaphors for innovation, connection, and growth
Graphics and icons
Section titled “Graphics and icons”Custom graphics and icons must follow consistent design principles and align with the design system.
For a complete list of available icons and usage guidelines, see Icons.
Icon guidelines
Section titled “Icon guidelines”DOs
- Use icons from the approved icon library
- Maintain consistent icon style and weight
- Use semantic icon colors from design tokens
- Ensure icons are accessible and meet contrast requirements
- Scale icons proportionally using size tokens
DON'Ts
- Mix different icon styles or weights
- Use custom icons without design system approval
- Hardcode icon colors or sizes
- Use icons that are too small or unclear
- Rely on icons alone to convey meaning
Icon usage
Section titled “Icon usage”- Size: Use icon size tokens (
--icon-size-sm,--icon-size-md,--icon-size-lg) - Color: Use semantic color tokens (
--color-icon-primary,--color-icon-secondary) - Style: Maintain consistent stroke width and visual weight
- Accessibility: Icons must have accessible labels when used without text
Custom graphics
Section titled “Custom graphics”When creating custom graphics:
- Follow the design system’s visual language
- Use brand colors from the approved palette
- Maintain consistency with existing graphics
- Ensure graphics are scalable and work at different sizes
- Test graphics in both light and dark themes
Graphic elements
Section titled “Graphic elements”- Illustrations: Should be modern, clean, and align with brand personality
- Charts and data visualizations: Must follow accessibility guidelines for color usage
- Decorative elements: Should enhance rather than distract from content
- Patterns and textures: Use sparingly and ensure they don’t reduce readability
Accessibility requirements
Section titled “Accessibility requirements”All visual imagery must meet accessibility standards:
- Alt text: All images must have descriptive alt text
- Contrast: Graphics and icons must meet contrast requirements
- Color independence: Information must not rely solely on color
- Text alternatives: Complex graphics should have text descriptions
- Focus indicators: Interactive graphics must have visible focus states
References
Section titled “References”File formats and optimization
Section titled “File formats and optimization”- Photography: Use high-quality formats (JPEG, WebP) with appropriate compression
- Icons: Use SVG format for scalability and crisp rendering
- Graphics: Prefer vector formats (SVG) when possible
- Optimization: Ensure images are optimized for web performance
- Responsive images: Use appropriate image sizes for different screen sizes
Testing and validation
Section titled “Testing and validation”- Verify imagery displays correctly across different themes
- Test image loading and performance
- Validate accessibility requirements are met
- Review visual consistency across applications
- Ensure imagery aligns with brand guidelines