<style>
.set {
display: flex;
flex-wrap: wrap;
margin: 0 -1rem;
margin-top: 0;
padding: 0;
list-style: none;
}
li {
flex: 1 0 20%;
margin: 1rem;
}
.color {
width: 100%;
min-width: 160px;
height: 80px;
color: white;
border: 1px solid whitesmoke;
margin-bottom: 1rem;
}
p {
margin: 0;
}
</style>
<p>The primary color (#24A) can be referenced as the theme color. It is used for the branding on the logo, hero image and as background color for the menu. The other primary colors, black and white, are being used for texts (as foreground color) on the different elements.</p>
<ul class="set">
{% for item in page.colors %}
<li>
<div class="color" style="background:{{ item.hex }}"></div>
<p>{{ item.name }}</p>
{% if item.hex %}<p>{{ item.hex }}</p>{% endif %}
{% if item.rgb %}<p>{{ item.rgb }}</p>{% endif %}
</li>
{% endfor %}
</ul>
<style>
.set {
display: flex;
flex-wrap: wrap;
margin: 0 -1rem;
margin-top: 0;
padding: 0;
list-style: none;
}
li {
flex: 1 0 20%;
margin: 1rem;
}
.color {
width: 100%;
min-width: 160px;
height: 80px;
color: white;
border: 1px solid whitesmoke;
margin-bottom: 1rem;
}
p {
margin: 0;
}
</style>
<p>The background colors are used as the colors for the main background of the "board", the background of the "tasks cards" themselves and the buttons used in the menu and on the various sites.</p>
<ul class="set">
{% for item in page.colors %}
<li>
<div class="color" style="background:{{ item.hex }}"></div>
<p>{{ item.name }}</p>
{% if item.hex %}<p>{{ item.hex }}</p>{% endif %}
{% if item.rgb %}<p>{{ item.rgb }}</p>{% endif %}
</li>
{% endfor %}
</ul>
<style>
.set {
display: flex;
flex-wrap: wrap;
margin: 0 -1rem;
margin-top: 0;
padding: 0;
list-style: none;
}
li {
flex: 1 0 20%;
margin: 1rem;
}
.color {
width: 100%;
min-width: 160px;
height: 80px;
color: white;
border: 1px solid whitesmoke;
margin-bottom: 1rem;
}
p {
margin: 0;
}
</style>
<p>The task status colors are supposed to show the different status throughout the app. The todo status color aligns with the theme color whereas doing and done are trying to have a certain contrast to each.</p>
<ul class="set">
{% for item in page.colors %}
<li>
<div class="color" style="background:{{ item.hex }}"></div>
<p>{{ item.name }}</p>
{% if item.hex %}<p>{{ item.hex }}</p>{% endif %}
{% if item.rgb %}<p>{{ item.rgb }}</p>{% endif %}
</li>
{% endfor %}
</ul>