EH22/design
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Styleguide: improve swatches, add font styles

Browse source
This commit is contained in:
kritzl 2025-02-11 12:52:56 +01:00
commit 60e70523d7
Signed by: kritzl
SSH key fingerprint: SHA256:5BmINP9VjZWaUk5Z+2CTut1KFhwLtd0ZynMekKbtViM
10 changed files with 1194 additions and 386 deletions
Download patch file Download diff file Expand all files Collapse all files

336
styleguide/color_guide.html
View file

@ -2,199 +2,231 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="assets/style/main.css">
<title>Color Guide</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="assets/style/styleguide.css">
<title>Color Guide</title>
</head>
<body>
<h1>Color Guide</h1>
<header>
<a href="index.html">Back to Overview</a>
</header>
<main>
<h1>Color Guide</h1>
<p>
<div class="float-left dark swatch-grid">
<h2>Darkmode</h2>
</p>
<section aria-labelledby="label-dark-fore-background">
<span id="label-dark-fore-background">Fore- &amp; Background</span>
<h2>Digital Media</h2>
<div class="layout-column">
<div class="dark swatch-grid">
<h2>Darkmode</h2>
<div aria-labelledby="label-dark-swatch-foreground" class="swatch-container">
<div class="swatch" style="--swatch-color: var(--color-dark-foreground)"></div>
<span id="label-dark-swatch-foreground">#f5f0f0</span>
</div>
<section aria-labelledby="label-dark-fore-background">
<span id="label-dark-fore-background">Fore- &amp; Background</span>
<div aria-labelledby="label-dark-swatch-background" class="swatch-container">
<div class="swatch" style="--swatch-color: var(--color-dark-background)"></div>
<span id="label-dark-swatch-background">#180736</span>
</div>
</section>
<div aria-labelledby="label-dark-swatch-foreground" class="swatch-container">
<div class="swatch" style="--swatch-color: var(--color-dark-foreground)"></div>
<span id="label-dark-swatch-foreground">#f5f0f0</span>
</div>
<!-- TODO: Final shades -->
<section aria-labelledby="label-dark-shades">
<span id="label-dark-shades">Shades</span>
<div aria-labelledby="label-dark-swatch-background" class="swatch-container">
<div class="swatch" style="--swatch-color: var(--color-dark-background)"></div>
<span id="label-dark-swatch-background">#180736</span>
</div>
</section>
<div aria-labelledby="label-dark-swatch-shade-1" class="swatch-container">
<div class="swatch" style="--swatch-color: var(--color-dark-shade-1)"></div>
<span id="label-dark-swatch-shade-1">#TODO</span>
</div>
<!-- TODO: Final shades -->
<section aria-labelledby="label-dark-shades">
<span id="label-dark-shades">Shades</span>
<div aria-labelledby="label-dark-swatch-shade-2" class="swatch-container">
<div class="swatch" style="--swatch-color: var(--color-dark-shade-2)"></div>
<span id="label-dark-swatch-shade-2">#TODO</span>
</div>
<div aria-labelledby="label-dark-swatch-shade-1" class="swatch-container">
<div class="swatch" style="--swatch-color: var(--color-dark-shade-1)"></div>
<span id="label-dark-swatch-shade-1">#TODO</span>
</div>
<div aria-labelledby="label-dark-swatch-shade-3" class="swatch-container">
<div class="swatch" style="--swatch-color: var(--color-dark-shade-3)"></div>
<span id="label-dark-swatch-shade-3">#TODO</span>
</div>
<div aria-labelledby="label-dark-swatch-shade-2" class="swatch-container">
<div class="swatch" style="--swatch-color: var(--color-dark-shade-2)"></div>
<span id="label-dark-swatch-shade-2">#TODO</span>
</div>
<div aria-labelledby="label-dark-swatch-shade-4" class="swatch-container">
<div class="swatch" style="--swatch-color: var(--color-dark-shade-4)"></div>
<span id="label-dark-swatch-shade-4">#TODO</span>
</div>
</section>
<div aria-labelledby="label-dark-swatch-shade-3" class="swatch-container">
<div class="swatch" style="--swatch-color: var(--color-dark-shade-3)"></div>
<span id="label-dark-swatch-shade-3">#TODO</span>
</div>
<section aria-labelledby="label-dark-primary-secondary">
<span id="label-dark-primary-secondary">Primary &amp; Secondary</span>
<div aria-labelledby="label-dark-swatch-shade-4" class="swatch-container">
<div class="swatch" style="--swatch-color: var(--color-dark-shade-4)"></div>
<span id="label-dark-swatch-shade-4">#TODO</span>
</div>
</section>
<div aria-labelledby="label-dark-swatch-primary" class="swatch-container">
<div class="swatch" style="--swatch-color: var(--color-dark-primary)"></div>
<span id="label-dark-swatch-primary">#c6257d</span>
</div>
<section aria-labelledby="label-dark-primary-secondary">
<span id="label-dark-primary-secondary">Primary &amp; Secondary</span>
<div aria-labelledby="label-dark-swatch-secondary" class="swatch-container">
<div class="swatch" style="--swatch-color: var(--color-dark-secondary)"></div>
<span id="label-dark-swatch-secondary">#4dadd8</span>
</div>
</section>
<div aria-labelledby="label-dark-swatch-primary" class="swatch-container">
<div class="swatch" style="--swatch-color: var(--color-dark-primary)"></div>
<span id="label-dark-swatch-primary">#c6257d</span>
</div>
<!-- TODO: Might be too bright -->
<section aria-labelledby="label-dark-error-success">
<span id="label-dark-error-success">Error &amp; Success</span>
<div aria-labelledby="label-dark-swatch-secondary" class="swatch-container">
<div class="swatch" style="--swatch-color: var(--color-dark-secondary)"></div>
<span id="label-dark-swatch-secondary">#4dadd8</span>
</div>
</section>
<div aria-labelledby="label-dark-swatch-error" class="swatch-container">
<div class="swatch" style="--swatch-color: var(--color-dark-error)"></div>
<span id="label-dark-swatch-error">#f22d2d</span>
</div>
<!-- TODO: Might be too bright -->
<section aria-labelledby="label-dark-error-success">
<span id="label-dark-error-success">Error &amp; Success</span>
<div aria-labelledby="label-dark-swatch-success" class="swatch-container">
<div class="swatch" style="--swatch-color: var(--color-dark-success)"></div>
<span id="label-dark-swatch-success">#8cff3c</span>
</div>
</section>
<div aria-labelledby="label-dark-swatch-error" class="swatch-container">
<div class="swatch" style="--swatch-color: var(--color-dark-error)"></div>
<span id="label-dark-swatch-error">#f22d2d</span>
</div>
<!-- TODO: Color names -->
<!-- TODO: Secondary as first accent? -->
<section aria-labelledby="label-dark-accents">
<span id="label-dark-accents">Accents</span>
<div aria-labelledby="label-dark-swatch-success" class="swatch-container">
<div class="swatch" style="--swatch-color: var(--color-dark-success)"></div>
<span id="label-dark-swatch-success">#8cff3c</span>
</div>
</section>
<div aria-labelledby="label-dark-swatch-accent-1" class="swatch-container">
<div class="swatch" style="--swatch-color: var(--color-dark-accent-1)"></div>
<span id="label-dark-swatch-accent-1">#60a5f9</span>
</div>
<!-- TODO: Color names -->
<!-- TODO: Secondary as first accent? -->
<section aria-labelledby="label-dark-accents">
<span id="label-dark-accents">Accents</span>
<div aria-labelledby="label-dark-swatch-accent-2" class="swatch-container">
<div class="swatch" style="--swatch-color: var(--color-dark-accent-2)"></div>
<span id="label-dark-swatch-accent-2">#d381f7</span>
</div>
<div aria-labelledby="label-dark-swatch-accent-1" class="swatch-container">
<div class="swatch" style="--swatch-color: var(--color-dark-accent-1)"></div>
<span id="label-dark-swatch-accent-1">#60a5f9</span>
</div>
<div aria-labelledby="label-dark-swatch-accent-3" class="swatch-container">
<div class="swatch" style="--swatch-color: var(--color-dark-accent-3)"></div>
<span id="label-dark-swatch-accent-3">#ff7975</span>
</div>
</section>
</div>
<div aria-labelledby="label-dark-swatch-accent-2" class="swatch-container">
<div class="swatch" style="--swatch-color: var(--color-dark-accent-2)"></div>
<span id="label-dark-swatch-accent-2">#d381f7</span>
</div>
<div class="float-right light swatch-grid">
<h2>Lightmode</h2>
<div aria-labelledby="label-dark-swatch-accent-3" class="swatch-container">
<div class="swatch" style="--swatch-color: var(--color-dark-accent-3)"></div>
<span id="label-dark-swatch-accent-3">#ff7975</span>
</div>
</section>
</div>
<section aria-labelledby="label-light-fore-background">
<span id="label-light-fore-background">Fore- &amp; Background</span>
<div class="light swatch-grid">
<h2>Lightmode</h2>
<div aria-labelledby="label-light-swatch-foreground" class="swatch-container">
<div class="swatch" style="--swatch-color: var(--color-light-foreground)"></div>
<span id="label-light-swatch-foreground">#180736</span>
</div>
<section aria-labelledby="label-light-fore-background">
<span id="label-light-fore-background">Fore- &amp; Background</span>
<div aria-labelledby="label-light-swatch-background" class="swatch-container">
<div class="swatch" style="--swatch-color: var(--color-light-background)"></div>
<span id="label-light-swatch-background">#f5f0f0</span>
</div>
</section>
<div aria-labelledby="label-light-swatch-foreground" class="swatch-container">
<div class="swatch" style="--swatch-color: var(--color-light-foreground)"></div>
<span id="label-light-swatch-foreground">#180736</span>
</div>
<!-- TODO: Final shades -->
<section aria-labelledby="label-light-shades">
<span id="label-light-shades">Shades</span>
<div aria-labelledby="label-light-swatch-background" class="swatch-container">
<div class="swatch" style="--swatch-color: var(--color-light-background)"></div>
<span id="label-light-swatch-background">#f5f0f0</span>
</div>
</section>
<div aria-labelledby="label-light-swatch-shade-1" class="swatch-container">
<div class="swatch" style="--swatch-color: var(--color-light-shade-1)"></div>
<span id="label-light-swatch-shade-1">#TODO</span>
</div>
<!-- TODO: Final shades -->
<section aria-labelledby="label-light-shades">
<span id="label-light-shades">Shades</span>
<div aria-labelledby="label-light-swatch-shade-2" class="swatch-container">
<div class="swatch" style="--swatch-color: var(--color-light-shade-2)"></div>
<span id="label-light-swatch-shade-2">#TODO</span>
</div>
<div aria-labelledby="label-light-swatch-shade-1" class="swatch-container">
<div class="swatch" style="--swatch-color: var(--color-light-shade-1)"></div>
<span id="label-light-swatch-shade-1">#TODO</span>
</div>
<div aria-labelledby="label-light-swatch-shade-3" class="swatch-container">
<div class="swatch" style="--swatch-color: var(--color-light-shade-3)"></div>
<span id="label-light-swatch-shade-3">#TODO</span>
</div>
<div aria-labelledby="label-light-swatch-shade-2" class="swatch-container">
<div class="swatch" style="--swatch-color: var(--color-light-shade-2)"></div>
<span id="label-light-swatch-shade-2">#TODO</span>
</div>
<div aria-labelledby="label-light-swatch-shade-4" class="swatch-container">
<div class="swatch" style="--swatch-color: var(--color-light-shade-4)"></div>
<span id="label-light-swatch-shade-4">#TODO</span>
</div>
</section>
<div aria-labelledby="label-light-swatch-shade-3" class="swatch-container">
<div class="swatch" style="--swatch-color: var(--color-light-shade-3)"></div>
<span id="label-light-swatch-shade-3">#TODO</span>
</div>
<section aria-labelledby="label-light-primary-secondary">
<span id="label-light-primary-secondary">Primary &amp; Secondary</span>
<div aria-labelledby="label-light-swatch-shade-4" class="swatch-container">
<div class="swatch" style="--swatch-color: var(--color-light-shade-4)"></div>
<span id="label-light-swatch-shade-4">#TODO</span>
</div>
</section>
<div aria-labelledby="label-light-swatch-primary" class="swatch-container">
<div class="swatch" style="--swatch-color: var(--color-light-primary)"></div>
<span id="label-light-swatch-primary">#TODO</span>
</div>
<section aria-labelledby="label-light-primary-secondary">
<span id="label-light-primary-secondary">Primary &amp; Secondary</span>
<div aria-labelledby="label-light-swatch-secondary" class="swatch-container">
<div class="swatch" style="--swatch-color: var(--color-light-secondary)"></div>
<span id="label-light-swatch-secondary">#TODO</span>
</div>
</section>
<div aria-labelledby="label-light-swatch-primary" class="swatch-container">
<div class="swatch" style="--swatch-color: var(--color-light-primary)"></div>
<span id="label-light-swatch-primary">#TODO</span>
</div>
<section aria-labelledby="label-light-error-success">
<span id="label-light-error-success">Error &amp; Success</span>
<div aria-labelledby="label-light-swatch-secondary" class="swatch-container">
<div class="swatch" style="--swatch-color: var(--color-light-secondary)"></div>
<span id="label-light-swatch-secondary">#TODO</span>
</div>
</section>
<div aria-labelledby="label-light-swatch-error" class="swatch-container">
<div class="swatch" style="--swatch-color: var(--color-light-error)"></div>
<span id="label-light-swatch-error">#b21010</span>
</div>
<section aria-labelledby="label-light-error-success">
<span id="label-light-error-success">Error &amp; Success</span>
<div aria-labelledby="label-light-swatch-success" class="swatch-container">
<div class="swatch" style="--swatch-color: var(--color-light-success)"></div>
<span id="label-light-swatch-success">#47990f</span>
</div>
</section>
<div aria-labelledby="label-light-swatch-error" class="swatch-container">
<div class="swatch" style="--swatch-color: var(--color-light-error)"></div>
<span id="label-light-swatch-error">#b21010</span>
</div>
<!-- TODO: Color names -->
<!-- TODO: Secondary as first accent? -->
<section aria-labelledby="label-light-accents">
<span id="label-light-accents">Accents</span>
<div aria-labelledby="label-light-swatch-success" class="swatch-container">
<div class="swatch" style="--swatch-color: var(--color-light-success)"></div>
<span id="label-light-swatch-success">#47990f</span>
</div>
</section>
<div aria-labelledby="label-light-swatch-accent-1" class="swatch-container">
<div class="swatch" style="--swatch-color: var(--color-light-accent-1)"></div>
<span id="label-light-swatch-accent-1">#303ec0</span>
</div>
<!-- TODO: Color names -->
<!-- TODO: Secondary as first accent? -->
<section aria-labelledby="label-light-accents">
<span id="label-light-accents">Accents</span>
<div aria-labelledby="label-light-swatch-accent-2" class="swatch-container">
<div class="swatch" style="--swatch-color: var(--color-light-accent-2)"></div>
<span id="label-light-swatch-accent-2">#6c366c</span>
</div>
<div aria-labelledby="label-light-swatch-accent-1" class="swatch-container">
<div class="swatch" style="--swatch-color: var(--color-light-accent-1)"></div>
<span id="label-light-swatch-accent-1">#303ec0</span>
</div>
<div aria-labelledby="label-light-swatch-accent-3" class="swatch-container">
<div class="swatch" style="--swatch-color: var(--color-light-accent-3)"></div>
<span id="label-light-swatch-accent-3">#932f0a</span>
</div>
</section>
</div>
<div aria-labelledby="label-light-swatch-accent-2" class="swatch-container">
<div class="swatch" style="--swatch-color: var(--color-light-accent-2)"></div>
<span id="label-light-swatch-accent-2">#6c366c</span>
</div>
<div aria-labelledby="label-light-swatch-accent-3" class="swatch-container">
<div class="swatch" style="--swatch-color: var(--color-light-accent-3)"></div>
<span id="label-light-swatch-accent-3">#932f0a</span>
</div>
</section>
</div>
</div>
<h2>Printing</h2>
<p>
Our primary and secondary colours are also defined for CMYK printing:
</p>
<div class="swatch-grid">
<section aria-labelledby="label-light-primary-secondary">
<span id="label-cmyk-primary-secondary">CMYK Colors</span>
<div aria-labelledby="label-light-swatch-primary" class="swatch-container">
<div class="swatch" style="--swatch-color: var(--color-cmyk-primary)"></div>
<span id="label-cmyk-swatch-primary">0/94/6/0</span>
</div>
<div aria-labelledby="label-light-swatch-secondary" class="swatch-container">
<div class="swatch" style="--swatch-color: var(--color-cmyk-secondary)"></div>
<span id="label-cmyk-swatch-secondary">81/0/10/0</span>
</div>
</section>
</div>
</main>
</body>
</html>