forked from qwik/qwik-site
72 lines
2.6 KiB
Plaintext
72 lines
2.6 KiB
Plaintext
{% extends "templates/article.njk" %}
|
|
{% import "components/toc.njk" as toc with context %}
|
|
|
|
{% block head %}
|
|
<title>qwik - graphical resources</title>
|
|
{% endblock %}
|
|
|
|
{% block header %}
|
|
<img src="/assets/images/design-res-promo.svg" alt="A promotional image for our graphical resources." />
|
|
Graphical Resources
|
|
<i>Last updated 10th August 2021</i>
|
|
{% endblock %}
|
|
|
|
{% block main %}
|
|
{{ toc.header("h1", "Typography") }}
|
|
<p>
|
|
We only use one font, <a href="https://manropefont.com/">Manrope</a>, coming with 7 weights:
|
|
</p>
|
|
<ul>
|
|
<li>Extra Light</li>
|
|
<li>Light</li>
|
|
<li>Regular</li>
|
|
<li>Medium</li>
|
|
<li>Semibold</li>
|
|
<li>Bold</li>
|
|
<li>Extra Bold</li>
|
|
</ul>
|
|
<p>
|
|
We use <i>Regular</i> as the main font and for strong (bold) text we use <i>Semibold</i>.
|
|
We use a line height of 1.5 for better readability. We don't really have a specific size that
|
|
the font should be, but try to keep it readable (make sure the font is readble on all screens).
|
|
Also, try to keep a visual hierarchy (having headeings bigger than paragraphs, and so on).
|
|
</p>
|
|
<p>
|
|
Other weights should only be used for other material than text, like posters, images, social media,
|
|
and so on, to "spice them up".
|
|
</p>
|
|
<p>
|
|
We also <i>justify</i> wider text bodies, while we recommend using left-aligned text for less wide text bodies:
|
|
</p>
|
|
<img src="/assets/images/design-text-aligning.svg" alt="An image showing how we align text.">
|
|
|
|
|
|
|
|
{{ toc.header("h1", "Logo") }}
|
|
<img class="logo" src="/assets/images/logo.svg" alt="Our logo.">
|
|
<p>
|
|
You can download our logo <a href="https://qwik.space/resources/logo.svg" download="qwik-logo.svg">here</a>. It is made by BurnyLlama
|
|
and is available under the <a href="https://creativecommons.org/licenses/by/4.0/">CC-BY-4.0</a> license
|
|
(tl;dr: give us credit).
|
|
</p>
|
|
|
|
|
|
|
|
{{ toc.header("h1", "Images") }}
|
|
<p>
|
|
We recommend using SVGs instead of raster images like PNGs and JPGs. This is because they scale for all screens, and
|
|
are (typically) smaller in size (unless you're making something huge).
|
|
</p>
|
|
|
|
|
|
|
|
{{ toc.header("h1", "Colours") }}
|
|
<p>
|
|
We provide a pretty big colour scheme that includes one greyscale (consisting of 15 tones) and 12 colours with five tones each.
|
|
Official material for qwik should <b>only</b> use these colours.
|
|
</p>
|
|
<img src="/assets/images/design-colors-showcase.svg" alt="An image showing all colours.">
|
|
<p>
|
|
<a href="./colours">Read more about our colours here.</a>
|
|
</p>
|
|
{% endblock %} |