<div class="container my-12 flex items-center justify-center">
<div class="w-full">
<h2 class="text-center pb-4 text-6xl font-heading font-normal ">Colour Palette</h2>
<div class="space-y-8">
<div class="border-b border-b-grey-400 overflow-auto">
<h3 class="text-center text-3xl mb-10">Brand Colours</h3>
<p class="mb-4 text-center"></p>
<div class="space-y-4 mb-4">
<div class="overflow-x-auto flex justify-start items-start space-x-2">
<div class="flex-1 ">
<div class="h-16 rounded-md bg-red-50 border border-grey-400"></div>
<div class="text-center text-tiny pt-3 ">
red-50
</div>
</div>
<div class="flex-1 ">
<div class="h-16 rounded-md bg-red-100 border border-grey-400"></div>
<div class="text-center text-tiny pt-3 ">
red-100
</div>
</div>
<div class="flex-1 ">
<div class="h-16 rounded-md bg-red-200 border border-grey-400"></div>
<div class="text-center text-tiny pt-3 ">
red-200
</div>
</div>
<div class="flex-1 ">
<div class="h-16 rounded-md bg-red-300 border border-grey-400"></div>
<div class="text-center text-tiny pt-3 ">
red-300
</div>
</div>
<div class="flex-1 ">
<div class="h-16 rounded-md bg-red-400 border border-grey-400"></div>
<div class="text-center text-tiny pt-3 ">
red-400
</div>
</div>
<div class="flex-1 ">
<div class="h-16 rounded-md bg-red-500 border border-grey-400"></div>
<div class="text-center text-tiny pt-3 ">
red-500
</div>
</div>
<div class="flex-1 ">
<div class="h-16 rounded-md bg-red-600 border border-grey-400"></div>
<div class="text-center text-tiny pt-3 ">
red-600
</div>
</div>
<div class="flex-1 ">
<div class="h-16 rounded-md bg-red-700 border border-grey-400"></div>
<div class="text-center text-tiny pt-3 font-bold">
red-700
</div>
<div class="text-center font-bold text-sm">Default</div>
</div>
<div class="flex-1 ">
<div class="h-16 rounded-md bg-red-800 border border-grey-400"></div>
<div class="text-center text-tiny pt-3 ">
red-800
</div>
</div>
<div class="flex-1 ">
<div class="h-16 rounded-md bg-red-900 border border-grey-400"></div>
<div class="text-center text-tiny pt-3 ">
red-900
</div>
</div>
</div>
<div class="overflow-x-auto flex justify-start items-start space-x-2">
<div class="flex-1 ">
<div class="h-16 rounded-md bg-blue-50 border border-grey-400"></div>
<div class="text-center text-tiny pt-3 ">
blue-50
</div>
</div>
<div class="flex-1 ">
<div class="h-16 rounded-md bg-blue-100 border border-grey-400"></div>
<div class="text-center text-tiny pt-3 ">
blue-100
</div>
</div>
<div class="flex-1 ">
<div class="h-16 rounded-md bg-blue-200 border border-grey-400"></div>
<div class="text-center text-tiny pt-3 ">
blue-200
</div>
</div>
<div class="flex-1 ">
<div class="h-16 rounded-md bg-blue-300 border border-grey-400"></div>
<div class="text-center text-tiny pt-3 ">
blue-300
</div>
</div>
<div class="flex-1 ">
<div class="h-16 rounded-md bg-blue-400 border border-grey-400"></div>
<div class="text-center text-tiny pt-3 ">
blue-400
</div>
</div>
<div class="flex-1 ">
<div class="h-16 rounded-md bg-blue-500 border border-grey-400"></div>
<div class="text-center text-tiny pt-3 ">
blue-500
</div>
</div>
<div class="flex-1 ">
<div class="h-16 rounded-md bg-blue-600 border border-grey-400"></div>
<div class="text-center text-tiny pt-3 ">
blue-600
</div>
</div>
<div class="flex-1 ">
<div class="h-16 rounded-md bg-blue-700 border border-grey-400"></div>
<div class="text-center text-tiny pt-3 font-bold">
blue-700
</div>
<div class="text-center font-bold text-sm">Default</div>
</div>
<div class="flex-1 ">
<div class="h-16 rounded-md bg-blue-800 border border-grey-400"></div>
<div class="text-center text-tiny pt-3 ">
blue-800
</div>
</div>
<div class="flex-1 ">
<div class="h-16 rounded-md bg-blue-900 border border-grey-400"></div>
<div class="text-center text-tiny pt-3 ">
blue-900
</div>
</div>
</div>
<div class="overflow-x-auto flex justify-start items-start space-x-2">
<div class="flex-1 ">
<div class="h-16 rounded-md bg-cyan-50 border border-grey-400"></div>
<div class="text-center text-tiny pt-3 ">
cyan-50
</div>
</div>
<div class="flex-1 ">
<div class="h-16 rounded-md bg-cyan-100 border border-grey-400"></div>
<div class="text-center text-tiny pt-3 ">
cyan-100
</div>
</div>
<div class="flex-1 ">
<div class="h-16 rounded-md bg-cyan-200 border border-grey-400"></div>
<div class="text-center text-tiny pt-3 ">
cyan-200
</div>
</div>
<div class="flex-1 ">
<div class="h-16 rounded-md bg-cyan-300 border border-grey-400"></div>
<div class="text-center text-tiny pt-3 ">
cyan-300
</div>
</div>
<div class="flex-1 ">
<div class="h-16 rounded-md bg-cyan-400 border border-grey-400"></div>
<div class="text-center text-tiny pt-3 ">
cyan-400
</div>
</div>
<div class="flex-1 ">
<div class="h-16 rounded-md bg-cyan-500 border border-grey-400"></div>
<div class="text-center text-tiny pt-3 ">
cyan-500
</div>
</div>
<div class="flex-1 ">
<div class="h-16 rounded-md bg-cyan-600 border border-grey-400"></div>
<div class="text-center text-tiny pt-3 ">
cyan-600
</div>
</div>
<div class="flex-1 ">
<div class="h-16 rounded-md bg-cyan-700 border border-grey-400"></div>
<div class="text-center text-tiny pt-3 font-bold">
cyan-700
</div>
<div class="text-center font-bold text-sm">Default</div>
</div>
<div class="flex-1 ">
<div class="h-16 rounded-md bg-cyan-800 border border-grey-400"></div>
<div class="text-center text-tiny pt-3 ">
cyan-800
</div>
</div>
<div class="flex-1 ">
<div class="h-16 rounded-md bg-cyan-900 border border-grey-400"></div>
<div class="text-center text-tiny pt-3 ">
cyan-900
</div>
</div>
</div>
<div class="overflow-x-auto flex justify-start items-start space-x-2">
<div class="flex-1 ">
<div class="h-16 rounded-md bg-magenta-50 border border-grey-400"></div>
<div class="text-center text-tiny pt-3 ">
magenta-50
</div>
</div>
<div class="flex-1 ">
<div class="h-16 rounded-md bg-magenta-100 border border-grey-400"></div>
<div class="text-center text-tiny pt-3 ">
magenta-100
</div>
</div>
<div class="flex-1 ">
<div class="h-16 rounded-md bg-magenta-200 border border-grey-400"></div>
<div class="text-center text-tiny pt-3 ">
magenta-200
</div>
</div>
<div class="flex-1 ">
<div class="h-16 rounded-md bg-magenta-300 border border-grey-400"></div>
<div class="text-center text-tiny pt-3 ">
magenta-300
</div>
</div>
<div class="flex-1 ">
<div class="h-16 rounded-md bg-magenta-400 border border-grey-400"></div>
<div class="text-center text-tiny pt-3 ">
magenta-400
</div>
</div>
<div class="flex-1 ">
<div class="h-16 rounded-md bg-magenta-500 border border-grey-400"></div>
<div class="text-center text-tiny pt-3 ">
magenta-500
</div>
</div>
<div class="flex-1 ">
<div class="h-16 rounded-md bg-magenta-600 border border-grey-400"></div>
<div class="text-center text-tiny pt-3 ">
magenta-600
</div>
</div>
<div class="flex-1 ">
<div class="h-16 rounded-md bg-magenta-700 border border-grey-400"></div>
<div class="text-center text-tiny pt-3 font-bold">
magenta-700
</div>
<div class="text-center font-bold text-sm">Default</div>
</div>
<div class="flex-1 ">
<div class="h-16 rounded-md bg-magenta-800 border border-grey-400"></div>
<div class="text-center text-tiny pt-3 ">
magenta-800
</div>
</div>
<div class="flex-1 ">
<div class="h-16 rounded-md bg-magenta-900 border border-grey-400"></div>
<div class="text-center text-tiny pt-3 ">
magenta-900
</div>
</div>
</div>
<div class="overflow-x-auto flex justify-start items-start space-x-2">
<div class="flex-1 ">
<div class="h-16 rounded-md bg-teal-50 border border-grey-400"></div>
<div class="text-center text-tiny pt-3 ">
teal-50
</div>
</div>
<div class="flex-1 ">
<div class="h-16 rounded-md bg-teal-100 border border-grey-400"></div>
<div class="text-center text-tiny pt-3 ">
teal-100
</div>
</div>
<div class="flex-1 ">
<div class="h-16 rounded-md bg-teal-200 border border-grey-400"></div>
<div class="text-center text-tiny pt-3 ">
teal-200
</div>
</div>
<div class="flex-1 ">
<div class="h-16 rounded-md bg-teal-300 border border-grey-400"></div>
<div class="text-center text-tiny pt-3 ">
teal-300
</div>
</div>
<div class="flex-1 ">
<div class="h-16 rounded-md bg-teal-400 border border-grey-400"></div>
<div class="text-center text-tiny pt-3 ">
teal-400
</div>
</div>
<div class="flex-1 ">
<div class="h-16 rounded-md bg-teal-500 border border-grey-400"></div>
<div class="text-center text-tiny pt-3 ">
teal-500
</div>
</div>
<div class="flex-1 ">
<div class="h-16 rounded-md bg-teal-600 border border-grey-400"></div>
<div class="text-center text-tiny pt-3 ">
teal-600
</div>
</div>
<div class="flex-1 ">
<div class="h-16 rounded-md bg-teal-700 border border-grey-400"></div>
<div class="text-center text-tiny pt-3 font-bold">
teal-700
</div>
<div class="text-center font-bold text-sm">Default</div>
</div>
<div class="flex-1 ">
<div class="h-16 rounded-md bg-teal-800 border border-grey-400"></div>
<div class="text-center text-tiny pt-3 ">
teal-800
</div>
</div>
<div class="flex-1 ">
<div class="h-16 rounded-md bg-teal-900 border border-grey-400"></div>
<div class="text-center text-tiny pt-3 ">
teal-900
</div>
</div>
</div>
</div>
</div>
<div class="border-b border-b-grey-400 overflow-auto">
<h3 class="text-center text-3xl mb-10">Neutral Colours</h3>
<p class="mb-4 text-center"></p>
<div class="space-y-4 mb-4">
<div class="overflow-x-auto flex justify-start items-start space-x-2">
<div class="flex-1 ">
<div class="h-16 rounded-md bg-grey-50 border border-grey-400"></div>
<div class="text-center text-tiny pt-3 ">
grey-50
</div>
</div>
<div class="flex-1 ">
<div class="h-16 rounded-md bg-grey-100 border border-grey-400"></div>
<div class="text-center text-tiny pt-3 ">
grey-100
</div>
</div>
<div class="flex-1 ">
<div class="h-16 rounded-md bg-grey-200 border border-grey-400"></div>
<div class="text-center text-tiny pt-3 ">
grey-200
</div>
</div>
<div class="flex-1 ">
<div class="h-16 rounded-md bg-grey-300 border border-grey-400"></div>
<div class="text-center text-tiny pt-3 ">
grey-300
</div>
</div>
<div class="flex-1 ">
<div class="h-16 rounded-md bg-grey-400 border border-grey-400"></div>
<div class="text-center text-tiny pt-3 ">
grey-400
</div>
</div>
<div class="flex-1 ">
<div class="h-16 rounded-md bg-grey-500 border border-grey-400"></div>
<div class="text-center text-tiny pt-3 ">
grey-500
</div>
</div>
<div class="flex-1 ">
<div class="h-16 rounded-md bg-grey-600 border border-grey-400"></div>
<div class="text-center text-tiny pt-3 ">
grey-600
</div>
</div>
<div class="flex-1 ">
<div class="h-16 rounded-md bg-grey-700 border border-grey-400"></div>
<div class="text-center text-tiny pt-3 ">
grey-700
</div>
</div>
<div class="flex-1 ">
<div class="h-16 rounded-md bg-grey-800 border border-grey-400"></div>
<div class="text-center text-tiny pt-3 ">
grey-800
</div>
</div>
<div class="flex-1 ">
<div class="h-16 rounded-md bg-grey-900 border border-grey-400"></div>
<div class="text-center text-tiny pt-3 ">
grey-900
</div>
</div>
</div>
<div class="overflow-x-auto flex justify-start items-start space-x-2">
<div class="flex-1 ">
<div class="h-16 rounded-md bg-black border border-grey-400"></div>
<div class="text-center text-tiny pt-3 font-bold">
black
</div>
<div class="text-center font-bold text-sm">Default</div>
</div>
</div>
<div class="overflow-x-auto flex justify-start items-start space-x-2">
<div class="flex-1 ">
<div class="h-16 rounded-md bg-white border border-grey-400"></div>
<div class="text-center text-tiny pt-3 font-bold">
white
</div>
<div class="text-center font-bold text-sm">Default</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container my-12 flex items-center justify-center">
<div class="w-full">
<h2 class="text-center pb-4 text-6xl font-heading font-normal ">Colour Palette</h2>
<div class="space-y-8">
{% for object in palette %}
<div class="border-b border-b-grey-400 overflow-auto">
<h3 class="text-center text-3xl mb-10">{{object.heading}}</h3>
<p class="mb-4 text-center">{{object.description }}</p>
<div class="space-y-4 mb-4">
{% for parent in object.values %}
<div class="overflow-x-auto flex justify-start items-start space-x-2">
{% for item in parent.variants %}
<div class="flex-1 ">
<div class="h-16 rounded-md {{item}} border border-grey-400"></div>
{{object.default}}
<div class="text-center text-tiny pt-3 {% if item == parent.default %}font-bold{% endif %}">
{{item | replace("bg-", "")}}
</div>
{% if item === parent.default %}
<div class="text-center font-bold text-sm">Default</div>
{% endif %}
</div>
{% endfor %}
</div>
{% endfor %}
</div>
</div>
{% endfor %}
</div>
</div>
</div>
{
"siteName": "UCEA",
"navItems": [
{
"menu_item": "About Us"
},
{
"menu_item": "Testimonials"
},
{
"menu_item": "Our Team"
},
{
"menu_item": "Contact Us"
}
],
"palette": [
{
"heading": "Brand Colours",
"values": [
{
"bgName": "bg-red",
"label": "#930617",
"variants": [
"bg-red-50",
"bg-red-100",
"bg-red-200",
"bg-red-300",
"bg-red-400",
"bg-red-500",
"bg-red-600",
"bg-red-700",
"bg-red-800",
"bg-red-900"
],
"default": "bg-red-700"
},
{
"bgName": "bg-blue",
"label": "#245076",
"variants": [
"bg-blue-50",
"bg-blue-100",
"bg-blue-200",
"bg-blue-300",
"bg-blue-400",
"bg-blue-500",
"bg-blue-600",
"bg-blue-700",
"bg-blue-800",
"bg-blue-900"
],
"default": "bg-blue-700"
},
{
"bgName": "bg-cyan",
"label": "#0C888D",
"variants": [
"bg-cyan-50",
"bg-cyan-100",
"bg-cyan-200",
"bg-cyan-300",
"bg-cyan-400",
"bg-cyan-500",
"bg-cyan-600",
"bg-cyan-700",
"bg-cyan-800",
"bg-cyan-900"
],
"default": "bg-cyan-700"
},
{
"bgName": "bg-magenta",
"label": "#8F0A4D",
"variants": [
"bg-magenta-50",
"bg-magenta-100",
"bg-magenta-200",
"bg-magenta-300",
"bg-magenta-400",
"bg-magenta-500",
"bg-magenta-600",
"bg-magenta-700",
"bg-magenta-800",
"bg-magenta-900"
],
"default": "bg-magenta-700"
},
{
"bgName": "bg-teal",
"label": "#158474",
"variants": [
"bg-teal-50",
"bg-teal-100",
"bg-teal-200",
"bg-teal-300",
"bg-teal-400",
"bg-teal-500",
"bg-teal-600",
"bg-teal-700",
"bg-teal-800",
"bg-teal-900"
],
"default": "bg-teal-700"
}
]
},
{
"heading": "Neutral Colours",
"values": [
{
"bgName": "bg-grey",
"label": "#747577",
"variants": [
"bg-grey-50",
"bg-grey-100",
"bg-grey-200",
"bg-grey-300",
"bg-grey-400",
"bg-grey-500",
"bg-grey-600",
"bg-grey-700",
"bg-grey-800",
"bg-grey-900"
],
"default": "bg-gray-500"
},
{
"bgName": "bg-black",
"label": "#000000",
"variants": [
"bg-black"
],
"default": "bg-black"
},
{
"bgName": "bg-white",
"label": "#FFFFFF",
"variants": [
"bg-white"
],
"default": "bg-white"
}
]
}
]
}
No notes defined.