qwik-site/content/pages/articles/graphical-profile/intro.njk

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 %}