Color

Primary Brand Colors
Primary brand colors are Celo Green, Celo Gold, Celo Dark, and Celo Light. Celo Green is used to denote value and action including communication and applications of the cUSD. Celo Gold is used more often when speaking to actions related to CELO like validation, proof of stake, and governance. Celo Dark and Celo Light are high contrast complementary colors, interchangeably switching between background and typography. Celo Dark has a tendency to represent technical content while Celo Light represents non-technical topics.
Copy
Copied
Celo Green
#35D07F
RGBA (53, 208, 127, 0.01)
CMYK (75,0,39,18)
Copy
Copied
Celo Gold
#FBCC5C
RGBA (251, 204, 92, 0.01)
CMYK (0,19,63,2)
Copy
Copied
Celo Dark
#2E3338
RGBA (46, 51, 56, 0.01)
CMYK (18,9,0,78)
Copy
Copied
Celo White
#FFFFFF
RGBA (255, 255, 255, 0.01)
CMYK (0,0,0,0)
Accent Colors
Accent colors include violet, red, cyan, and blue. Violet, red, and cyan are colors that often represent alternative coins, projects, and personas in the ecosystem. Blue represents help within digital experiences like websites and mobile applications.
Copy
Copied
Violet
#BF97FF
RGBA (191, 151, 255, 0.01)
CMYK (25,41,0,0)
Copy
Copied
Red
#FB7C6D
RGBA (251, 124, 109, 0.01)
CMYK (0,51,57,2)
Copy
Copied
Cyan
#73DDFF
RGBA (115, 221, 255, 0.01)
CMYK (55,13,0,0)
Copy
Copied
Blue
#3488EC
RGBA (52, 136, 236, 0.01)
CMYK (78,42,0,7)
Grays
Grays are used when hierarchy needs to be established. Use grays to visually communicate intended ranking of importance in Typography or UI.
Copy
Copied
Heavy Gray
#ABADAF
RGBA (171, 173, 175, 0.01)
CMYK (2,1,0,31)
Copy
Copied
Gray
#DDDDDD
RGBA (221, 221, 221, 0.01)
CMYK (0,0,0,13)
Copy
Copied
Light Gray
#EDEEEF
RGBA (237, 238, 239, 0.01)
CMYK (1,0,0,6)
Copy
Copied
Faint Gray
#F8F9F9
RGBA (248, 249, 249, 0.01)
CMYK (0,0,0,2)

Background Colors

Background colors function as canvases in which accent and brand colors can punctuate layout compositions.
Copy
Copied
Celo White
#FFFFFF
RGBA (255, 255, 255, 0.01)
CMYK (0,0,0,0)
Copy
Copied
Faint Gray
#F8F9F9
RGBA (248, 249, 249, 0.01)
CMYK (0,0,0,2)
Copy
Copied
Faint Gold
#FEF2D6
RGBA (254, 242, 214, 0.01)
CMYK (0,5,16,0)
Copy
Copied
Celo Dark
#2E3338
RGBA (46, 51, 56, 0.01)
CMYK (18,9,0,78)
Contrast
For accessibility, choose high contrast color combinations when laying out text.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac dignissim purus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac dignissim purus.
For best results, we recommend following these dos and don’ts:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac dignissim purus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac dignissim purus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac dignissim purus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac dignissim purus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac dignissim purus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac dignissim purus.