3
Color
Index
3.1
3.2
3.3
3.4
4.5
Brand Color
Shades
Gradient
Proportion
Example
3.1
Brand Color
The following values represent our core palette. These are used most often in the system and should be relied on when the color palette must be limited.
Black
#141414
White
#fbfbfb
Accent Color
Casual
Pink
FF00CB
Blue
00DDFF
Green
BDFF00
3.2
Shades
Our color system uses 10 defined shades to ensure visual consistency across all applications. This structured range simplifies color usage, making it easier to maintain harmony and balance throughout the brand.
Shades logic
Apply to all colors
Black
#141414
900
90% Opacity
800
80% Opacity
700
70% Opacity
600
60% Opacity
500
50% Opacity
400
40% Opacity
300
30% Opacity
200
20% Opacity
100
10% Opacity
3.3
Gradient
Gradients are used as an occasional color option to add depth and energy to the brand. They should be applied selectively to highlight key moments or visuals, while maintaining balance with the core color system.
#EBEBEB
#FF00CB
#EBEBEB
#BDFF00
#EBEBEB
#00DDFF
3.4
Proportion
The logo is our primary identifier. It contains both the Coco symbol and our name in the wordmark. It should be used most often to represent our brand, especially to an unfamiliar audience.
3.5
Digital vs Print
When working with print, the five brand colors will appear more desaturated and muted than on screen. Use them carefully and prioritize black and white for most applications. Always review CMYK conversions to ensure accurate and consistent color reproduction.
Digital
3.6
Application
Depending on its placement, the elements can serve a different purpose in a composition. Consider both the audience and application when choosing the right placement. For more informative or direct uses, use corner placements. For more expressive uses, use center placements.
Colophon
v1.01
last update 2025 Oct
This brand guideline was designed and compiled by the internal Coco Design Team.
Typography set in inter.
Layout created in Figma.
Create and run on Framer.
All photography and mockups © 2025 Coco Robotics unless otherwise credited.
Printed / distributed digitally in 2025
For inquiries, contact info@cocodelivery.com
Colophon
v1.01
last update 2025 Oct
This brand guideline was designed and compiled by the internal Coco Design Team.
Typography set in inter.
Layout created in Figma.
Create and run on Framer.
All photography and mockups © 2025 Coco Robotics unless otherwise credited.
Printed / distributed digitally in 2025
For inquiries, contact info@cocodelivery.com
Please use desktop to view the guideline
Colophon
v1.01
last update 2025 Oct
This brand guideline was designed and compiled by the internal Coco Design Team.
Typography set in inter.
Layout created in Figma.
Create and run on Framer.
All photography and mockups © 2025 Coco Robotics unless otherwise credited.
Printed / distributed digitally in 2025
For inquiries, contact info@cocodelivery.com