Payroc Design logo
  • Our brand
    Mission statement Personality Values Assets
  • Content guidelines
    Voice and tone Grammar and formatting Inclusive language Writing style guides
  • Design system
    Get started Essentials Components Patterns
Submit a design request
  1. Payroc design
  2. Design system
  3. Components
  4. Image

Image

Images can help tell a story or sell a product. Use images that relate to the content, have the correct aspect ratio and approved by the branding team. Visit the Payroc Brandfolder to see some options.

Anatomy

Diagram of a image component.
  1. Logos
  2. Image

Example

Coded example

Modern office building with Payroc logo

Code snippet

HTML JavaScript
										
<img class="round-corners" src="assets/image-example.png" alt="Modern office building with Payroc logo">
          
									
										
None required
                  
									

Figma prototype

Usage guide

Dos and don'ts

Try to use original images available through our Brandfolder site.

Reach out to our creative team to source an image from one of our stock image libraries.

Use engaging images that show people in real settings.

Use images that are protected by copyright, which we do not have permission to use.

Use generic images that are obviously from stock libraries.

Stretch and distort images from their original aspect ratio.

Payroc Design logo

Copyright © Payroc

    Our brand
  • Mission statement
  • Personality
  • Values
  • Assets
  • Brand Guide for Sales Partners
    Content guidelines
  • Voice and tone
  • Grammar and formatting
  • Inclusive lanugage
  • Writing style guides
    Design system
  • Get started
  • Essentials
  • Components
  • Patterns