<div class="container my-12 flex items-center justify-center">
<div class="w-full">
<h2 class="text-center pb-12 text-6xl font-heading font-bold text-alpha">Colour Palette</h2>
<div class="space-y-8">
<div class="border-b border-b-grey-400 overflow-auto">
<h3 class="text-center text-4xl text-navy mb-4">Brand Colours</h3>
<p class="mb-4 text-center">Core brand colours for the business/product.</p>
<div class="space-y-4 mb-4">
<div class="overflow-x-auto flex justify-start items-start space-x-4">
<div class="flex-1 ">
<div class="h-16 rounded-md bg-alpha-50 border border-grey-400"></div>
<div class="text-center text-tiny pt-3 ">
alpha-50
</div>
</div>
<div class="flex-1 ">
<div class="h-16 rounded-md bg-alpha-100 border border-grey-400"></div>
<div class="text-center text-tiny pt-3 ">
alpha-100
</div>
</div>
<div class="flex-1 ">
<div class="h-16 rounded-md bg-alpha-200 border border-grey-400"></div>
<div class="text-center text-tiny pt-3 ">
alpha-200
</div>
</div>
<div class="flex-1 ">
<div class="h-16 rounded-md bg-alpha-300 border border-grey-400"></div>
<div class="text-center text-tiny pt-3 ">
alpha-300
</div>
</div>
<div class="flex-1 ">
<div class="h-16 rounded-md bg-alpha-400 border border-grey-400"></div>
<div class="text-center text-tiny pt-3 ">
alpha-400
</div>
</div>
<div class="flex-1 ">
<div class="h-16 rounded-md bg-alpha-500 border border-grey-400"></div>
<div class="text-center text-tiny pt-3 ">
alpha-500
</div>
</div>
<div class="flex-1 ">
<div class="h-16 rounded-md bg-alpha-600 border border-grey-400"></div>
<div class="text-center text-tiny pt-3 ">
alpha-600
</div>
</div>
<div class="flex-1 ">
<div class="h-16 rounded-md bg-alpha-700 border border-grey-400"></div>
<div class="text-center text-tiny pt-3 font-bold">
alpha-700
</div>
<div class="text-center font-bold">Default</div>
</div>
<div class="flex-1 ">
<div class="h-16 rounded-md bg-alpha-800 border border-grey-400"></div>
<div class="text-center text-tiny pt-3 ">
alpha-800
</div>
</div>
<div class="flex-1 ">
<div class="h-16 rounded-md bg-alpha-900 border border-grey-400"></div>
<div class="text-center text-tiny pt-3 ">
alpha-900
</div>
</div>
</div>
<div class="overflow-x-auto flex justify-start items-start space-x-4">
<div class="flex-1 ">
<div class="h-16 rounded-md bg-bravo-50 border border-grey-400"></div>
<div class="text-center text-tiny pt-3 ">
bravo-50
</div>
</div>
<div class="flex-1 ">
<div class="h-16 rounded-md bg-bravo-100 border border-grey-400"></div>
<div class="text-center text-tiny pt-3 ">
bravo-100
</div>
</div>
<div class="flex-1 ">
<div class="h-16 rounded-md bg-bravo-200 border border-grey-400"></div>
<div class="text-center text-tiny pt-3 ">
bravo-200
</div>
</div>
<div class="flex-1 ">
<div class="h-16 rounded-md bg-bravo-300 border border-grey-400"></div>
<div class="text-center text-tiny pt-3 ">
bravo-300
</div>
</div>
<div class="flex-1 ">
<div class="h-16 rounded-md bg-bravo-400 border border-grey-400"></div>
<div class="text-center text-tiny pt-3 ">
bravo-400
</div>
</div>
<div class="flex-1 ">
<div class="h-16 rounded-md bg-bravo-500 border border-grey-400"></div>
<div class="text-center text-tiny pt-3 ">
bravo-500
</div>
</div>
<div class="flex-1 ">
<div class="h-16 rounded-md bg-bravo-600 border border-grey-400"></div>
<div class="text-center text-tiny pt-3 ">
bravo-600
</div>
</div>
<div class="flex-1 ">
<div class="h-16 rounded-md bg-bravo-700 border border-grey-400"></div>
<div class="text-center text-tiny pt-3 font-bold">
bravo-700
</div>
<div class="text-center font-bold">Default</div>
</div>
<div class="flex-1 ">
<div class="h-16 rounded-md bg-bravo-800 border border-grey-400"></div>
<div class="text-center text-tiny pt-3 ">
bravo-800
</div>
</div>
<div class="flex-1 ">
<div class="h-16 rounded-md bg-bravo-900 border border-grey-400"></div>
<div class="text-center text-tiny pt-3 ">
bravo-900
</div>
</div>
</div>
<div class="overflow-x-auto flex justify-start items-start space-x-4">
<div class="flex-1 ">
<div class="h-16 rounded-md bg-charlie-50 border border-grey-400"></div>
<div class="text-center text-tiny pt-3 ">
charlie-50
</div>
</div>
<div class="flex-1 ">
<div class="h-16 rounded-md bg-charlie-100 border border-grey-400"></div>
<div class="text-center text-tiny pt-3 ">
charlie-100
</div>
</div>
<div class="flex-1 ">
<div class="h-16 rounded-md bg-charlie-200 border border-grey-400"></div>
<div class="text-center text-tiny pt-3 ">
charlie-200
</div>
</div>
<div class="flex-1 ">
<div class="h-16 rounded-md bg-charlie-300 border border-grey-400"></div>
<div class="text-center text-tiny pt-3 ">
charlie-300
</div>
</div>
<div class="flex-1 ">
<div class="h-16 rounded-md bg-charlie-400 border border-grey-400"></div>
<div class="text-center text-tiny pt-3 ">
charlie-400
</div>
</div>
<div class="flex-1 ">
<div class="h-16 rounded-md bg-charlie-500 border border-grey-400"></div>
<div class="text-center text-tiny pt-3 ">
charlie-500
</div>
</div>
<div class="flex-1 ">
<div class="h-16 rounded-md bg-charlie-600 border border-grey-400"></div>
<div class="text-center text-tiny pt-3 ">
charlie-600
</div>
</div>
<div class="flex-1 ">
<div class="h-16 rounded-md bg-charlie-700 border border-grey-400"></div>
<div class="text-center text-tiny pt-3 font-bold">
charlie-700
</div>
<div class="text-center font-bold">Default</div>
</div>
<div class="flex-1 ">
<div class="h-16 rounded-md bg-charlie-800 border border-grey-400"></div>
<div class="text-center text-tiny pt-3 ">
charlie-800
</div>
</div>
<div class="flex-1 ">
<div class="h-16 rounded-md bg-charlie-900 border border-grey-400"></div>
<div class="text-center text-tiny pt-3 ">
charlie-900
</div>
</div>
</div>
</div>
</div>
<div class="border-b border-b-grey-400 overflow-auto">
<h3 class="text-center text-4xl text-navy mb-4">Neutral Colours</h3>
<p class="mb-4 text-center">Usually some form of gray / black / white, 90% of your interface will be made of these.</p>
<div class="space-y-4 mb-4">
<div class="overflow-x-auto flex justify-start items-start space-x-4">
<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-4">
<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">Default</div>
</div>
</div>
<div class="overflow-x-auto flex justify-start items-start space-x-4">
<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">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-12 text-6xl font-heading font-bold text-alpha">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-4xl text-navy mb-4">{{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-4">
{% 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">Default</div>
{% endif %}
</div>
{% endfor %}
</div>
{% endfor %}
</div>
</div>
{% endfor %}
</div>
</div>
</div>
{
"siteName": "MentorKit Pattern Library",
"navItems": [
{
"menu_item": "About Us"
},
{
"menu_item": "Testimonials"
},
{
"menu_item": "Our Team"
},
{
"menu_item": "Contact Us"
}
],
"palette": [
{
"heading": "Brand Colours",
"description": "Core brand colours for the business/product.",
"values": [
{
"bgName": "bg-alpha",
"label": "#dc1c2b",
"variants": [
"bg-alpha-50",
"bg-alpha-100",
"bg-alpha-200",
"bg-alpha-300",
"bg-alpha-400",
"bg-alpha-500",
"bg-alpha-600",
"bg-alpha-700",
"bg-alpha-800",
"bg-alpha-900"
],
"default": "bg-alpha-700"
},
{
"bgName": "bg-bravo",
"label": "#032B43",
"variants": [
"bg-bravo-50",
"bg-bravo-100",
"bg-bravo-200",
"bg-bravo-300",
"bg-bravo-400",
"bg-bravo-500",
"bg-bravo-600",
"bg-bravo-700",
"bg-bravo-800",
"bg-bravo-900"
],
"default": "bg-bravo-700"
},
{
"bgName": "bg-charlie",
"label": "#8BB8F8",
"variants": [
"bg-charlie-50",
"bg-charlie-100",
"bg-charlie-200",
"bg-charlie-300",
"bg-charlie-400",
"bg-charlie-500",
"bg-charlie-600",
"bg-charlie-700",
"bg-charlie-800",
"bg-charlie-900"
],
"default": "bg-charlie-700"
}
]
},
{
"heading": "Neutral Colours",
"description": "Usually some form of gray / black / white, 90% of your interface will be made of these.",
"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.