78 lines
3.7 KiB
HTML
78 lines
3.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
<link rel="apple-touch-icon" sizes="180x180" href="/favicons/apple-touch-icon.png">
|
|
<link rel="icon" type="image/png" sizes="32x32" href="/favicons/favicon-32x32.png">
|
|
<link rel="icon" type="image/png" sizes="16x16" href="/favicons/favicon-16x16.png">
|
|
<link rel="manifest" href="/favicons/site.webmanifest">
|
|
<link rel="mask-icon" href="/favicons/safari-pinned-tab.svg" color="#3ddf89">
|
|
<link rel="shortcut icon" href="/favicons/favicon.ico">
|
|
<meta name="msapplication-TileColor" content="#181833">
|
|
<meta name="msapplication-config" content="/favicons/browserconfig.xml">
|
|
<meta name="theme-color" content="#3ddf89">
|
|
|
|
<link rel="stylesheet" type="text/css" href="./styles/main.css">
|
|
<link rel="stylesheet" type="text/css" href="./styles/graphical-profile.css">
|
|
<title>qwik resources</title>
|
|
</head>
|
|
<body>
|
|
<div class="grid-container">
|
|
<header>
|
|
<img src="./resources/design-res-promo.svg" alt="Promotional image for qwik's graphical profile." class="image">
|
|
<h1>qwik resources</h1>
|
|
<i>graphical profile, guidelines, and resources</i>
|
|
</header>
|
|
|
|
|
|
<h1>Typography</h1>
|
|
<p>
|
|
We only use one font, <a href="https://manropefont.com/">Manrope</a>. It has 7 weights:
|
|
</p>
|
|
<ul>
|
|
<li>Extra Light</li>
|
|
<li>Light</li>
|
|
<li>Regular</li>
|
|
<li>Medium</li>
|
|
<li>Semi Bold</li>
|
|
<li>Bold</li>
|
|
<li>Extra Bold</li>
|
|
</ul>
|
|
<p>
|
|
We use <i>Regular</i> as the default weight and for bold text <i>Bold</i>. We use a line height of 1.5
|
|
for better readability. Try to keep the font big enough to be readble. Other weights should only be used in
|
|
other material, like posters, images, social media posts, etc. to spice them up. <br><br>
|
|
We'd also recommend justifying paragraphs that are wider, wile left-aligning less wide paragraphs.
|
|
(See image below.)
|
|
</p>
|
|
<img src="./resources/design-text-aligning.svg" alt="An image showing how we align text." class="image">
|
|
|
|
|
|
<h1>Logo</h1>
|
|
<img src="./resources/logo.svg" alt="qwik's logo" class="logo" style="margin: 1rem 0;">
|
|
<p>
|
|
You can download our logo as an svg <a href="./resources/logo.svg" download>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>
|
|
|
|
|
|
<h1>Colors</h1>
|
|
<p>
|
|
We have a big colour scheme including 12 colours with five tones each. We also provide a greyscale with
|
|
15 tones. Our official designs <i>should</i> only use these colours and tones.
|
|
</p>
|
|
<img src="./resources/design-colors-showcase.svg" alt="An image showing all colours in the qwik color scheme." class="image">
|
|
<p>
|
|
Our primary color is called Sea Green (#3DDF89 <span class="color" style="background-color: #3DDF89;"></span>),
|
|
and then we have two accent colours: Hacky Cyan (#4CDCDF <span class="color" style="background-color: #4CDCDF;"></span>)
|
|
and Sky Blue (#4C9CEF <span class="color" style="background-color: #4C9CEF;"></span>).
|
|
We use Sea Green for H1s and buttons, Hacky Cyan for H2s, and Sky Blue for links.
|
|
<br>
|
|
<a href="./graphical-profil_colors.html">Here you can find all the hex-codes for the other colours.</a>
|
|
</p>
|
|
</div>
|
|
</body>
|
|
</html> |