BRANDING GUIDELINES

BRAND INGREDIENTS

ICONOGRAPHY

Icons are an essential part of user interfaces, visually expressing objects, actions and ideas. Icons are used to communicate the core idea and intent of a product or action, and they bring benefits to user interfaces, such as saving real estate and enhancing aesthetic appeal. Two complimentary styles of icons are used to create our iconongraphy system.

When choosing icons:

  • Only use custom icons from the SalonScale icon library
  • Only use material design icons from Figma library
  • Use icons to support copy or distinguish actions

CUSTOM ICONS

The primary icon style is an outline style icon with a duotone fill. This icon style is more expressive and is intended to be used in more prominent places such as main navigation within our product as well as in marketing, sales and customer success content.

MATERIAL DESIGN ICONS

The second style of icon makes use of the material design icon library and is a simple outline style with no fill. The secondary icons will largely be used in product outside of the main navigation for things like search, alerts, editing and notifications, and may also be used in select instances for communication outside of product such as bullet point styles or as graphic elements. 

RULES FOR ICONS

SIZE + SCALING

Our icons are designed at 24 x 24 dp. To ensure pixel perfect accuracy, these should never be scaled down below 16 x 16 dp (favicon size). Please ensure you are always scaling icons proportionatley to avoid stretching/skewing.

ICON SIZING

CLEARANCE SPACE

Clearance space allows for proper legibility and no chance of overlap. This should be approximatley double the size of the bounding box (48dp).

CLEARANCE SPACE

COLOR

To ensure proper legibility it’s important to use our icons on a background that provides enough contrast.

ICON COLOR CONTRAST

SUCCESSFUL ICON USAGE

The following examples show successful uses of SalonScale’s iconography system.

SUCCESSFUL CUSTOM ICON USAGE

SUCCESSFUL MATERIAL DESIGN ICON USAGE

UNSUCCESSFUL ICON USAGE

The following examples show unsuccessful uses of SalonScale’s iconography system.

UNSUCCESSFUL CUSTOM ICON USAGE

UNSUCCESSFUL MATERIAL DESIGN ICON USAGE