59 lines
3.3 KiB
Plaintext
59 lines
3.3 KiB
Plaintext
{% extends "templates/article.njk" %}
|
|
{% import "components/toc.njk" as toc with context %}
|
|
{% import "components/color.njk" as color with context %}
|
|
|
|
{% block head %}
|
|
<link rel="stylesheet" type="text/css" href="/assets/css/graphical-profile.css">
|
|
<title>qwik - colours</title>
|
|
{% endblock %}
|
|
|
|
{% block header %}
|
|
<img src="/assets/images/design-colors-showcase.svg" alt="A promotional image for our colour scheme." />
|
|
Colours
|
|
<i>Last updated 10th August 2021</i>
|
|
{% endblock %}
|
|
|
|
{% block main %}
|
|
{{ toc.header("h1", "Basic colour rules") }}
|
|
<p>
|
|
We use Sea Green ({{ color.label("#3DDF89") }}) as our primary colour, and Hacky Cyan ({{ color.label("#4CDCDF") }})
|
|
and Sky Blue ({{ color.label("#4C9CEF") }}) as accents. We use Sea Green for things like titles, H1s, and buttons.
|
|
For all other HXs we use Hacky Cyan. We use Sky Blue for links.
|
|
</p>
|
|
|
|
{{ toc.header("h1", "Colour Scheme") }}
|
|
<p>
|
|
We have a kind of large colour scheme, although most colours are usually unused. When creating official qwik material
|
|
only these colours should be used. The colour scheme is crafted by BurnyLlama, but is of course freely available to anyone
|
|
outside qwik (as we believe owning colours would be a stupid idea).
|
|
</p>
|
|
{{ toc.header("h2", "Colours") }}
|
|
<div class="color-list">
|
|
{{ color.palette("Apple Red", ["#BF3638", "#D5484A", "#EF5255", "#FA7A7C", "#FA999A"]) }}
|
|
{{ color.palette("Fruity Orange", ["#AF6118", "#DA7516", "#EB801B", "#F99434", "#F9AE67"]) }}
|
|
{{ color.palette("Pineapple Yellow", ["#BD920F", "#DFAC11", "#F4C025", "#FFD147", "#FFE38F"]) }}
|
|
{{ color.palette("Pear Green", ["#7D9A37", "#96BB3E", "#AED651", "#C2E571", "#DBF1A7"]) }}
|
|
{{ color.palette("Parakeet Green", ["#53A545", "#61C350", "#72D661", "#93E684", "#BCF0B2"]) }}
|
|
{{ color.palette("Sea Green", ["#2AA764", "#2ACB75", "#3DDF89", "#5DEEA1", "#A9F4CC"]) }}
|
|
{{ color.palette("Hacky Cyan", ["#2CA3A5", "#2DCACD", "#4CDCDF", "#6BE8EB", "#B7EFF0"]) }}
|
|
{{ color.palette("Sky Blue", ["#1C67B5", "#2A83DF", "#4C9CEF", "#74B6FB", "#A3CEFA"]) }}
|
|
{{ color.palette("Vivid Indigo", ["#2143CA", "#3457E5", "#4C6DEF", "#748FFB", "#B1C0FC"]) }}
|
|
{{ color.palette("Royal Purple", ["#613FD9", "#7C5DE9", "#967CF4", "#BCAAFD", "#CFC2FE"]) }}
|
|
{{ color.palette("Popping Magenta", ["#B63AB0", "#D152CB", "#E175DB", "#EC9AEF", "#EFB1F1"]) }}
|
|
{{ color.palette("Flower Pink", ["#D0356D", "#E2407C", "#EE588F", "#FA80AC", "#FBA7C6"]) }}
|
|
</div>
|
|
|
|
{{ toc.header("h2", "Greyscale") }}
|
|
<p>
|
|
Internally we call our greyscale <i>Mighty Greyscale</i>, although that's kinda arbitrary.
|
|
Our main background colour is {{ color.label("#10102F", "border: 1px solid var(--grey5);") }}.
|
|
You can use {{ color.label("#00001F", "border: 1px solid var(--grey5);") }} for drop-shadows,
|
|
and {{ color.label("#20203F", "border: 1px solid var(--grey5);") }} to "elevate" elements.
|
|
</p>
|
|
<div class="color-list">
|
|
{{ color.palette("", ["#00001F", "#10102F", "#20203F", "#30304F", "#40405F"]) }}
|
|
{{ color.palette("", ["#50506F", "#60607F", "#70708F", "#80809F", "#9090AF"]) }}
|
|
{{ color.palette("", ["#A0A0BF", "#B0B0CF", "#C0C0DF", "#D0D0EF", "#E0E0FF"]) }}
|
|
</div>
|
|
|
|
{% endblock %} |