Extended
Supporting Colors
Our supporting colors help our main colors work better. Light purple (Purple 050) works great for backgrounds and little details - it makes things feel friendly and supportive.
Light golden yellow (GY 100) works with our main purple to add depth and warmth.
Just remember: always pair these lighter colors with darker ones like our main purple or deep gray to keep things looking sharp, not pastel.
.png)
.png)
Gradients
Gradients should be used sparingly to add more depth and visual interest.
.png)
ayode-gradient-primary class
.png)
ayode-gradient-ultraviolet class
.png)
ayode-gradient-secondary class
.png){kind=spacer}
ayode-gradient-shimmer class
.png){kind=spacer}
ayode-gradient-shimmer-dark class
##
Secondary
The ĀYŌDÈ purple (#602DDE) and golden yellow (#E7C852) combination works well because the colors have similar intensity levels, creating balance, they provide enough contrast to be distinct while not clashing, and the golden yellow adds warmth to the cool purple.
Supporting the primary colors, our extended purple palette adds layers of depth and sophistication to illustrations and presentations. Complementing this, the extended golden yellow palette provides warm undertones that ground the experience.
Shades of Purple
.png)
ayode-gradient-purple-050 class
ayode-gradient-purple-100 class
ayode-gradient-purple-200 class
ayode-gradient-purple-300 class
ayode-gradient-purple-400 class
ayode-gradient-purple-500 class
ayode-gradient-purple-600 class
ayode-gradient-purple-700 class
ayode-gradient-purple-900 class
 (1).png)
ayode-gradient-purple-10000 class (Placeholder)
Shades of Golden Yellow
ayode-gradient-golden-yellow-050 class
.png)
ayode-gradient-golden-yellow-100 class
ayode-gradient-golden-yellow-200 class
ayode-gradient-golden-yellow-300 class
ayode-gradient-golden-yellow-500 class
Overlay
Example Usage
<div class="ayode-bg-overlay">Overlay Background</div>
Each class follows the structure ayode-gradient-[type] for clarity and easy implementation.