This repository has been archived on 2023-08-02. You can view files and clone it, but cannot push or open issues or pull requests.
qwik-website/graphical-profile.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>