This commit is contained in:
parent
246417a553
commit
155d47222e
SSH key fingerprint:
SHA256:5BmINP9VjZWaUk5Z+2CTut1KFhwLtd0ZynMekKbtViM
20 changed files with 5172 additions and 4003 deletions
|
|
@ -1,374 +1,650 @@
|
|||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<head>
|
||||
<script>
|
||||
const setTheme = (theme) => {
|
||||
theme ??= localStorage.theme || "system";
|
||||
document.getElementById("themeLight").checked = theme === "light";
|
||||
document.getElementById("themeDark").checked = theme === "dark";
|
||||
localStorage.theme = theme;
|
||||
};
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
setTheme();
|
||||
});
|
||||
const setTheme = (theme) => {
|
||||
theme ??= localStorage.theme || "system";
|
||||
document.getElementById("themeLight").checked = theme === "light";
|
||||
document.getElementById("themeDark").checked = theme === "dark";
|
||||
localStorage.theme = theme;
|
||||
};
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
setTheme();
|
||||
});
|
||||
</script>
|
||||
<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">
|
||||
<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>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<body>
|
||||
<header>
|
||||
<a href="/" id="backToWiki">
|
||||
<img src="../assets/image/logo_eventname_glow.svg" class="header-image dark-only" alt="Logo of Easterhegg 2025. In the style of a neon sign:
|
||||
<a href="/" id="backToWiki">
|
||||
<img
|
||||
src="../assets/image/logo_eventname_glow.svg"
|
||||
class="header-image dark-only"
|
||||
alt="Logo of Easterhegg 2025. In the style of a neon sign:
|
||||
The text 'Unhandled Eggception Easterhegg 2025' with a line art of a hare and an egg.
|
||||
The egg shell and the word 'Eggception' are glowing in a light blue, everything else in a bright pink."/>
|
||||
<img src="../assets/image/logo_eventname_glow_off.svg" class="header-image light-only" alt="Logo of Easterhegg 2025. In the style of a unpowered neon sign:
|
||||
The egg shell and the word 'Eggception' are glowing in a light blue, everything else in a bright pink."
|
||||
/>
|
||||
<img
|
||||
src="../assets/image/logo_eventname_glow_off.svg"
|
||||
class="header-image light-only"
|
||||
alt="Logo of Easterhegg 2025. In the style of a unpowered neon sign:
|
||||
The text 'Unhandled Eggception Easterhegg 2025' with a line art of a hare and an egg.
|
||||
The egg shell and the word 'Eggception' are dimly glowing in a dark blue, everything else in a dark pink."/>
|
||||
</a>
|
||||
The egg shell and the word 'Eggception' are dimly glowing in a dark blue, everything else in a dark pink."
|
||||
/>
|
||||
</a>
|
||||
</header>
|
||||
<div>
|
||||
<nav>
|
||||
<button aria-label="Open Navigation"><i data-icon="menu-small"></i></button>
|
||||
<ul>
|
||||
<li class="link-back"><a href="/"><i data-icon="arrow-left"></i>Back to Wiki</a></li>
|
||||
<li><a href="../"><i data-icon="home"></i>Overview</a></li>
|
||||
<li class="active"><a href=""><i data-icon="info"></i>Colors</a></li>
|
||||
<li><a href="../typography"><i data-icon="info"></i>Typography</a></li>
|
||||
<li><a href="../iconography"><i data-icon="info"></i>Iconography</a></li>
|
||||
<li><a href="../logo"><i data-icon="info"></i>Logo</a></li>
|
||||
<li><a href="../glow"><i data-icon="info"></i>Glow</a></li>
|
||||
<li><a href="../demopage"><i data-icon="info"></i>Demopage</a></li>
|
||||
<li><a href="../generator"><i data-icon="info"></i>Image Generator</a></li>
|
||||
<li id="themeToggleDark" class="themeToggle">
|
||||
<input id="themeDark" type="checkbox" aria-label="Switch between dark and light mode">
|
||||
<label for="themeDark">
|
||||
<i data-icon="light"></i>
|
||||
</label>
|
||||
</li>
|
||||
<li id="themeToggleLight" class="themeToggle">
|
||||
<input id="themeLight" type="checkbox" aria-label="Switch between dark and light mode">
|
||||
<label for="themeLight">
|
||||
<i data-icon="light"></i>
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<main>
|
||||
<div class="alert">
|
||||
<i data-icon="warning"></i>
|
||||
<p>
|
||||
<strong>Work in progress</strong>
|
||||
This style guide is still under development.<br>
|
||||
Not all resources may be available yet, explanations and examples may be missing and things may
|
||||
change without notice.
|
||||
</p>
|
||||
</div>
|
||||
<h1>Color Guide</h1>
|
||||
<p>
|
||||
The design consists of two sets of colors: lightmode and darkmode. Each set consists of the same number
|
||||
of colors, each of which has its own function. At the end of the page, one can find an overview of all
|
||||
defined colors for quick lockup. Read on for the functions of each color.
|
||||
</p>
|
||||
<p>
|
||||
The fore- and background colors are chosen for good contrast and are the same but swapped for light- and
|
||||
darkmode. Most backgrounds should use the background color and most texts should use the foreground
|
||||
color. In some cases, more subtelty is needed:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
If visual distinction through containers, boxes or similar is needed, the background shades can be
|
||||
used to use a slightly lighter background color (in case of darkmode) or a slightly darker one (in
|
||||
case of lightmode). Preferably, each shade should corespond to a layer of nesting, but if desired,
|
||||
one can also mix-and-match, as long as the background for the main content is always the regular
|
||||
background color.
|
||||
</li>
|
||||
<li>
|
||||
For more subtle text, e.g. in a footer, subtitle, etc. one can use the foreground shades to achieve
|
||||
this effect. To ensure a high enough contrast between fore- and background, these colors should not
|
||||
be used in front of the background shades mentioned above, other than for very small amounts of
|
||||
texts like headings and alike.
|
||||
</li>
|
||||
</ul>
|
||||
<p>
|
||||
Additionally, there are also colors for various design elements. The accent colors can be used for
|
||||
whatever one desires, but are especially intended for use in hyperlinks like this:
|
||||
</p>
|
||||
<table>
|
||||
<caption>Overview of link highlighting</caption>
|
||||
<tr>
|
||||
<th scope="row">Regular Link:</th>
|
||||
<td><a class="a-regular" href="">https://eh22.easterhegg.eu/</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Hover/Focus/Active Link:</th>
|
||||
<td><a class="a-hover" href="">https://eh22.easterhegg.eu/</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Visited Link:</th>
|
||||
<td><a class="a-visited" href="">https://eh22.easterhegg.eu/</a></td>
|
||||
</tr>
|
||||
</table>
|
||||
<p>
|
||||
Other than that, there are two more colors: the error and the success color. Intended for anything
|
||||
regarding user-feedback, they should tell someone that something is a critical action, has some positive
|
||||
or negativ meaning or progresses something in some way or form.
|
||||
</p>
|
||||
<nav>
|
||||
<button aria-label="Open Navigation">
|
||||
<i data-icon="menu-small"></i>
|
||||
</button>
|
||||
<ul>
|
||||
<li class="link-back">
|
||||
<a href="/"><i data-icon="arrow-left"></i>Back to Wiki</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../"><i data-icon="home"></i>Overview</a>
|
||||
</li>
|
||||
<li class="active">
|
||||
<a href=""><i data-icon="info"></i>Colors</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../typography"><i data-icon="info"></i>Typography</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../iconography"><i data-icon="info"></i>Iconography</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../logo"><i data-icon="info"></i>Logo</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../glow"><i data-icon="info"></i>Glow</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../demopage"><i data-icon="info"></i>Demopage</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../generator"><i data-icon="info"></i>Image Generator</a>
|
||||
</li>
|
||||
<li id="themeToggleDark" class="themeToggle">
|
||||
<input
|
||||
id="themeDark"
|
||||
type="checkbox"
|
||||
aria-label="Switch between dark and light mode"
|
||||
/>
|
||||
<label for="themeDark">
|
||||
<i data-icon="light"></i>
|
||||
</label>
|
||||
</li>
|
||||
<li id="themeToggleLight" class="themeToggle">
|
||||
<input
|
||||
id="themeLight"
|
||||
type="checkbox"
|
||||
aria-label="Switch between dark and light mode"
|
||||
/>
|
||||
<label for="themeLight">
|
||||
<i data-icon="light"></i>
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<main>
|
||||
<div class="alert">
|
||||
<i data-icon="warning"></i>
|
||||
<p>
|
||||
<strong>Work in progress</strong>
|
||||
This style guide is still under development.<br />
|
||||
Not all resources may be available yet, explanations and examples
|
||||
may be missing and things may change without notice.
|
||||
</p>
|
||||
</div>
|
||||
<h1>Color Guide</h1>
|
||||
<p>
|
||||
The design consists of two sets of colors: lightmode and darkmode.
|
||||
Each set consists of the same number of colors, each of which has its
|
||||
own function. At the end of the page, one can find an overview of all
|
||||
defined colors for quick lockup. Read on for the functions of each
|
||||
color.
|
||||
</p>
|
||||
<p>
|
||||
The fore- and background colors are chosen for good contrast and are
|
||||
the same but swapped for light- and darkmode. Most backgrounds should
|
||||
use the background color and most texts should use the foreground
|
||||
color. In some cases, more subtelty is needed:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
If visual distinction through containers, boxes or similar is
|
||||
needed, the background shades can be used to use a slightly lighter
|
||||
background color (in case of darkmode) or a slightly darker one (in
|
||||
case of lightmode). Preferably, each shade should corespond to a
|
||||
layer of nesting, but if desired, one can also mix-and-match, as
|
||||
long as the background for the main content is always the regular
|
||||
background color.
|
||||
</li>
|
||||
<li>
|
||||
For more subtle text, e.g. in a footer, subtitle, etc. one can use
|
||||
the foreground shades to achieve this effect. To ensure a high
|
||||
enough contrast between fore- and background, these colors should
|
||||
not be used in front of the background shades mentioned above, other
|
||||
than for very small amounts of texts like headings and alike.
|
||||
</li>
|
||||
</ul>
|
||||
<p>
|
||||
Additionally, there are also colors for various design elements. The
|
||||
accent colors can be used for whatever one desires, but are especially
|
||||
intended for use in hyperlinks like this:
|
||||
</p>
|
||||
<table>
|
||||
<caption>
|
||||
Overview of link highlighting
|
||||
</caption>
|
||||
<tr>
|
||||
<th scope="row">Regular Link:</th>
|
||||
<td>
|
||||
<a class="a-regular" href="">https://eh22.easterhegg.eu/</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Hover/Focus/Active Link:</th>
|
||||
<td><a class="a-hover" href="">https://eh22.easterhegg.eu/</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Visited Link:</th>
|
||||
<td>
|
||||
<a class="a-visited" href="">https://eh22.easterhegg.eu/</a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<p>
|
||||
Other than that, there are two more colors: the error and the success
|
||||
color. Intended for anything regarding user-feedback, they should tell
|
||||
someone that something is a critical action, has some positive or
|
||||
negativ meaning or progresses something in some way or form.
|
||||
</p>
|
||||
|
||||
<h2>Digital Media</h2>
|
||||
<div class="layout-column">
|
||||
<div class="dark swatch-grid">
|
||||
<h3>Darkmode</h3>
|
||||
<h2>Digital Media</h2>
|
||||
<div class="layout-column">
|
||||
<div class="dark swatch-grid">
|
||||
<h3>Darkmode</h3>
|
||||
|
||||
<section aria-labelledby="label-dark-fore-background">
|
||||
<span id="label-dark-fore-background">Fore- & Background</span>
|
||||
<section aria-labelledby="label-dark-fore-background">
|
||||
<span id="label-dark-fore-background"
|
||||
>Fore- & Background</span
|
||||
>
|
||||
|
||||
<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">#f2f0f5</span>
|
||||
</div>
|
||||
<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">#f2f0f5</span>
|
||||
</div>
|
||||
|
||||
<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">#0c011f</span>
|
||||
</div>
|
||||
</section>
|
||||
<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">#0c011f</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section aria-labelledby="label-dark-shades">
|
||||
<span id="label-dark-shades">Background Shades</span>
|
||||
<section aria-labelledby="label-dark-shades">
|
||||
<span id="label-dark-shades">Background Shades</span>
|
||||
|
||||
<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">#180736</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">#180736</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">#26114B</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">#26114B</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">#371F60</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">#371F60</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">#4B3176</span>
|
||||
</div>
|
||||
</section>
|
||||
<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">#4B3176</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section aria-labelledby="label-dark-texts">
|
||||
<span id="label-dark-texts">Text Shades</span>
|
||||
<section aria-labelledby="label-dark-texts">
|
||||
<span id="label-dark-texts">Text Shades</span>
|
||||
|
||||
<div aria-labelledby="label-dark-swatch-text-1" class="swatch-container">
|
||||
<div class="swatch" style="--swatch-color: var(--color-dark-text-1)"></div>
|
||||
<span id="label-dark-swatch-text-1">#b2a0cb</span>
|
||||
</div>
|
||||
<div
|
||||
aria-labelledby="label-dark-swatch-text-1"
|
||||
class="swatch-container"
|
||||
>
|
||||
<div
|
||||
class="swatch"
|
||||
style="--swatch-color: var(--color-dark-text-1)"
|
||||
></div>
|
||||
<span id="label-dark-swatch-text-1">#b2a0cb</span>
|
||||
</div>
|
||||
|
||||
<div aria-labelledby="label-dark-swatch-text-2" class="swatch-container">
|
||||
<div class="swatch" style="--swatch-color: var(--color-dark-text-2)"></div>
|
||||
<span id="label-dark-swatch-text-2">#957eb5</span>
|
||||
</div>
|
||||
<div
|
||||
aria-labelledby="label-dark-swatch-text-2"
|
||||
class="swatch-container"
|
||||
>
|
||||
<div
|
||||
class="swatch"
|
||||
style="--swatch-color: var(--color-dark-text-2)"
|
||||
></div>
|
||||
<span id="label-dark-swatch-text-2">#957eb5</span>
|
||||
</div>
|
||||
|
||||
<div aria-labelledby="label-dark-swatch-text-3" class="swatch-container">
|
||||
<div class="swatch" style="--swatch-color: var(--color-dark-text-3)"></div>
|
||||
<span id="label-dark-swatch-text-3">#7a60a0</span>
|
||||
</div>
|
||||
<div
|
||||
aria-labelledby="label-dark-swatch-text-3"
|
||||
class="swatch-container"
|
||||
>
|
||||
<div
|
||||
class="swatch"
|
||||
style="--swatch-color: var(--color-dark-text-3)"
|
||||
></div>
|
||||
<span id="label-dark-swatch-text-3">#7a60a0</span>
|
||||
</div>
|
||||
|
||||
<div aria-labelledby="label-dark-swatch-text-4" class="swatch-container">
|
||||
<div class="swatch" style="--swatch-color: var(--color-dark-text-4)"></div>
|
||||
<span id="label-dark-swatch-text-4">#61468b</span>
|
||||
</div>
|
||||
</section>
|
||||
<div
|
||||
aria-labelledby="label-dark-swatch-text-4"
|
||||
class="swatch-container"
|
||||
>
|
||||
<div
|
||||
class="swatch"
|
||||
style="--swatch-color: var(--color-dark-text-4)"
|
||||
></div>
|
||||
<span id="label-dark-swatch-text-4">#61468b</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section aria-labelledby="label-dark-primary-secondary">
|
||||
<span id="label-dark-primary-secondary">Primary & Secondary</span>
|
||||
<section aria-labelledby="label-dark-primary-secondary">
|
||||
<span id="label-dark-primary-secondary"
|
||||
>Primary & Secondary</span
|
||||
>
|
||||
|
||||
<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>
|
||||
<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>
|
||||
|
||||
<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-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>
|
||||
|
||||
<section aria-labelledby="label-dark-error-success">
|
||||
<span id="label-dark-error-success">Error & Success</span>
|
||||
<section aria-labelledby="label-dark-error-success">
|
||||
<span id="label-dark-error-success">Error & Success</span>
|
||||
|
||||
<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">#bb2626</span>
|
||||
</div>
|
||||
<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">#bb2626</span>
|
||||
</div>
|
||||
|
||||
<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">#54aa18</span>
|
||||
</div>
|
||||
</section>
|
||||
<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">#54aa18</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section aria-labelledby="label-dark-accents">
|
||||
<span id="label-dark-accents">Accents</span>
|
||||
<section aria-labelledby="label-dark-accents">
|
||||
<span id="label-dark-accents">Accents</span>
|
||||
|
||||
<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-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-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-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-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-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 class="light swatch-grid">
|
||||
<h3>Lightmode</h3>
|
||||
<div class="light swatch-grid">
|
||||
<h3>Lightmode</h3>
|
||||
|
||||
<section aria-labelledby="label-light-fore-background">
|
||||
<span id="label-light-fore-background">Fore- & Background</span>
|
||||
<section aria-labelledby="label-light-fore-background">
|
||||
<span id="label-light-fore-background"
|
||||
>Fore- & Background</span
|
||||
>
|
||||
|
||||
<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">#0c011f</span>
|
||||
</div>
|
||||
<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">#0c011f</span>
|
||||
</div>
|
||||
|
||||
<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">#f2f0f5</span>
|
||||
</div>
|
||||
</section>
|
||||
<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">#f2f0f5</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section aria-labelledby="label-light-shades">
|
||||
<span id="label-light-shades">Background Shades</span>
|
||||
<section aria-labelledby="label-light-shades">
|
||||
<span id="label-light-shades">Background Shades</span>
|
||||
|
||||
<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">#d1c6e0</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">#d1c6e0</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">#b2a0cb</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">#b2a0cb</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">#957eb5</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">#957eb5</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">#7a60a0</span>
|
||||
</div>
|
||||
</section>
|
||||
<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">#7a60a0</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section aria-labelledby="label-light-texts">
|
||||
<span id="label-light-texts">Text Shades</span>
|
||||
<section aria-labelledby="label-light-texts">
|
||||
<span id="label-light-texts">Text Shades</span>
|
||||
|
||||
<div aria-labelledby="label-light-swatch-text-1" class="swatch-container">
|
||||
<div class="swatch" style="--swatch-color: var(--color-light-text-1)"></div>
|
||||
<span id="label-light-swatch-text-1">#26114b</span>
|
||||
</div>
|
||||
<div
|
||||
aria-labelledby="label-light-swatch-text-1"
|
||||
class="swatch-container"
|
||||
>
|
||||
<div
|
||||
class="swatch"
|
||||
style="--swatch-color: var(--color-light-text-1)"
|
||||
></div>
|
||||
<span id="label-light-swatch-text-1">#26114b</span>
|
||||
</div>
|
||||
|
||||
<div aria-labelledby="label-light-swatch-text-2" class="swatch-container">
|
||||
<div class="swatch" style="--swatch-color: var(--color-light-text-2)"></div>
|
||||
<span id="label-light-swatch-text-2">#371f60</span>
|
||||
</div>
|
||||
<div
|
||||
aria-labelledby="label-light-swatch-text-2"
|
||||
class="swatch-container"
|
||||
>
|
||||
<div
|
||||
class="swatch"
|
||||
style="--swatch-color: var(--color-light-text-2)"
|
||||
></div>
|
||||
<span id="label-light-swatch-text-2">#371f60</span>
|
||||
</div>
|
||||
|
||||
<div aria-labelledby="label-light-swatch-text-3" class="swatch-container">
|
||||
<div class="swatch" style="--swatch-color: var(--color-light-text-3)"></div>
|
||||
<span id="label-light-swatch-text-3">#4b3176</span>
|
||||
</div>
|
||||
<div
|
||||
aria-labelledby="label-light-swatch-text-3"
|
||||
class="swatch-container"
|
||||
>
|
||||
<div
|
||||
class="swatch"
|
||||
style="--swatch-color: var(--color-light-text-3)"
|
||||
></div>
|
||||
<span id="label-light-swatch-text-3">#4b3176</span>
|
||||
</div>
|
||||
|
||||
<div aria-labelledby="label-light-swatch-text-4" class="swatch-container">
|
||||
<div class="swatch" style="--swatch-color: var(--color-light-text-4)"></div>
|
||||
<span id="label-light-swatch-text-4">#61468b</span>
|
||||
</div>
|
||||
</section>
|
||||
<div
|
||||
aria-labelledby="label-light-swatch-text-4"
|
||||
class="swatch-container"
|
||||
>
|
||||
<div
|
||||
class="swatch"
|
||||
style="--swatch-color: var(--color-light-text-4)"
|
||||
></div>
|
||||
<span id="label-light-swatch-text-4">#61468b</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section aria-labelledby="label-light-primary-secondary">
|
||||
<span id="label-light-primary-secondary">Primary & Secondary</span>
|
||||
<section aria-labelledby="label-light-primary-secondary">
|
||||
<span id="label-light-primary-secondary"
|
||||
>Primary & Secondary</span
|
||||
>
|
||||
|
||||
<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">#9a0a61</span>
|
||||
</div>
|
||||
<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">#9a0a61</span>
|
||||
</div>
|
||||
|
||||
<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">#167fac</span>
|
||||
</div>
|
||||
</section>
|
||||
<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">#167fac</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section aria-labelledby="label-light-error-success">
|
||||
<span id="label-light-error-success">Error & Success</span>
|
||||
<section aria-labelledby="label-light-error-success">
|
||||
<span id="label-light-error-success">Error & Success</span>
|
||||
|
||||
<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>
|
||||
<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>
|
||||
|
||||
<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-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>
|
||||
|
||||
<section aria-labelledby="label-light-accents">
|
||||
<span id="label-light-accents">Accents</span>
|
||||
<section aria-labelledby="label-light-accents">
|
||||
<span id="label-light-accents">Accents</span>
|
||||
|
||||
<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-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-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-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
|
||||
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 colors 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>
|
||||
|
||||
<h2>Printing</h2>
|
||||
<p>
|
||||
Our primary and secondary colors 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
|
||||
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>
|
||||
</main>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue