<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-bravo-900">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-2xl 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-2xl 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-2xl 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-2xl 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-2xl 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-2xl 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-2xl bg-alpha-600 border border-grey-400"></div>
<div class="text-center text-tiny pt-3 font-bold">
alpha-600
</div>
<div class="text-center font-bold">Default</div>
</div>
<div class="flex-1 ">
<div class="h-16 rounded-2xl bg-alpha-700 border border-grey-400"></div>
<div class="text-center text-tiny pt-3 ">
alpha-700
</div>
</div>
<div class="flex-1 ">
<div class="h-16 rounded-2xl 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-2xl 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-2xl 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-2xl 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-2xl 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-2xl 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-2xl 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-2xl 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-2xl 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-2xl bg-bravo-700 border border-grey-400"></div>
<div class="text-center text-tiny pt-3 ">
bravo-700
</div>
</div>
<div class="flex-1 ">
<div class="h-16 rounded-2xl 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-2xl bg-bravo-900 border border-grey-400"></div>
<div class="text-center text-tiny pt-3 font-bold">
bravo-900
</div>
<div class="text-center font-bold">Default</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">Focussed Palette Colours</h3>
<p class="mb-4 text-center">Complementary colour</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-2xl 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-2xl bg-charlie-200 border border-grey-400"></div>
<div class="text-center text-tiny pt-3 font-bold">
charlie-200
</div>
<div class="text-center font-bold">Default</div>
</div>
<div class="flex-1 ">
<div class="h-16 rounded-2xl 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-2xl 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-2xl bg-charlie-800 border border-grey-400"></div>
<div class="text-center text-tiny pt-3 ">
charlie-800
</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-2xl bg-delta-50 border border-grey-400"></div>
<div class="text-center text-tiny pt-3 ">
delta-50
</div>
</div>
<div class="flex-1 ">
<div class="h-16 rounded-2xl bg-delta-200 border border-grey-400"></div>
<div class="text-center text-tiny pt-3 font-bold">
delta-200
</div>
<div class="text-center font-bold">Default</div>
</div>
<div class="flex-1 ">
<div class="h-16 rounded-2xl bg-delta-400 border border-grey-400"></div>
<div class="text-center text-tiny pt-3 ">
delta-400
</div>
</div>
<div class="flex-1 ">
<div class="h-16 rounded-2xl bg-delta-600 border border-grey-400"></div>
<div class="text-center text-tiny pt-3 ">
delta-600
</div>
</div>
<div class="flex-1 ">
<div class="h-16 rounded-2xl bg-delta-800 border border-grey-400"></div>
<div class="text-center text-tiny pt-3 ">
delta-800
</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-2xl bg-echo-50 border border-grey-400"></div>
<div class="text-center text-tiny pt-3 ">
echo-50
</div>
</div>
<div class="flex-1 ">
<div class="h-16 rounded-2xl bg-echo-300 border border-grey-400"></div>
<div class="text-center text-tiny pt-3 font-bold">
echo-300
</div>
<div class="text-center font-bold">Default</div>
</div>
<div class="flex-1 ">
<div class="h-16 rounded-2xl bg-echo-500 border border-grey-400"></div>
<div class="text-center text-tiny pt-3 ">
echo-500
</div>
</div>
<div class="flex-1 ">
<div class="h-16 rounded-2xl bg-echo-600 border border-grey-400"></div>
<div class="text-center text-tiny pt-3 ">
echo-600
</div>
</div>
<div class="flex-1 ">
<div class="h-16 rounded-2xl bg-echo-700 border border-grey-400"></div>
<div class="text-center text-tiny pt-3 ">
echo-700
</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-2xl 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-2xl 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-2xl 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-2xl 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-2xl 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-2xl 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-2xl 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-2xl 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-2xl 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-2xl 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-2xl 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-2xl 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-bravo-900">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-2xl {{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": "BIR 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": "#37939B",
"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-600"
},
{
"bgName": "bg-bravo",
"label": "#004346",
"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-900"
}
]
},
{
"heading": "Focussed Palette Colours",
"description": "Complementary colour",
"values": [
{
"bgName": "bg-charlie",
"label": "#FACEB6",
"variants": [
"bg-charlie-50",
"bg-charlie-200",
"bg-charlie-400",
"bg-charlie-600",
"bg-charlie-800"
],
"default": "bg-charlie-200"
},
{
"bgName": "bg-delta",
"label": "#B3E6EF",
"variants": [
"bg-delta-50",
"bg-delta-200",
"bg-delta-400",
"bg-delta-600",
"bg-delta-800"
],
"default": "bg-delta-200"
},
{
"bgName": "bg-echo",
"label": "#DCB8DF",
"variants": [
"bg-echo-50",
"bg-echo-300",
"bg-echo-500",
"bg-echo-600",
"bg-echo-700"
],
"default": "bg-echo-300"
}
]
},
{
"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": "#595956",
"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-700"
},
{
"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.