53 lines
2.3 KiB
HTML
53 lines
2.3 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">
|
|
</div>
|
|
</body>
|
|
</html> |