With Otto brand kit

Logo usage

• Maintain clear space around the logo
• Use the dark text version on light backgrounds
• Use the white text version on dark backgrounds or photos
• Don't modify, stretch, or alter the logo proportions
• Don't use the logo on backgrounds that don't provide sufficient contrast

Colour usage

• Persian Green (#02AC8A) is our main brand colour, for accents and borders
• Use Deep Sea Green (#105E59) for green text, buttons, and fills with text or icons on them
• Use Loafer and Willow Brook for backgrounds and subtle accents
• Use Mindaro for success states and feature highlights
• Use Terracotta for alerts and warnings
• Maintain accessibility by ensuring proper contrast ratios

Which green to use where

Persian Green is the brand colour, but it is too light to carry text. White text on Persian Green has a contrast ratio of 2.89:1, and Persian Green text on white is the same. Both fail WCAG AA, which asks for 4.5:1. Deep Sea Green reaches about 7.6:1 against white.

• Use Deep Sea Green for any green text, for buttons, and for any green fill with text or an icon on it, such as table headers and icon badges
• Use Persian Green for accents, borders, focus rings, and large decorative shapes, where nothing has to be read against it

General guidelines

• These assets are provided for editorial, educational, and promotional use
• Please don't use our branding in a way that suggests endorsement
• If you have questions about usage, contact us at support@withotto.app