From 38e6bd4d7408f7c66394b9e4d58cc13cef048d7c Mon Sep 17 00:00:00 2001
From: betalars <contact@betalars.de>
Date: Fri, 18 Mar 2022 00:06:17 +0100
Subject: [PATCH] Added Color explainations to Styleguide
---
styleguide-website/index.html | 160 ++------
styleguide-website/svg/color-shemes-dark.svg | 282 ++++++++++++++
.../svg/color-shemes-gradients.svg | 350 ++++++++++++++++++
styleguide-website/svg/color-shemes-light.svg | 282 ++++++++++++++
4 files changed, 948 insertions(+), 126 deletions(-)
create mode 100644 styleguide-website/svg/color-shemes-dark.svg
create mode 100644 styleguide-website/svg/color-shemes-gradients.svg
create mode 100644 styleguide-website/svg/color-shemes-light.svg
diff --git a/styleguide-website/index.html b/styleguide-website/index.html
index 759f039..235370e 100644
--- a/styleguide-website/index.html
+++ b/styleguide-website/index.html
@@ -1,7 +1,7 @@
<!DOCTYPE html>
<html lang="de">
<head>
- <title>Brdiging Bubbles Design</title>
+ <title>Brdging Bubbles Design</title>
<meta charset="UTF-8"/>
<meta name="color-scheme" content="dark light">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -41,42 +41,38 @@
<div id="logo-alt-first-container">
<p>Es fehlt noch eine Kreatur? Baut euch ein ganz eigenes Logo aus den Vorlagen im Gitlab. Neben aufgeräumten SVGs, die sich gut fürs Plotten eignen, gibt es da auch die Rohversionen zum hacken.</p>
<p>Oder noch viel besser: adaptiert euer eigenes Logo und nimmt dafür inspiration von unserem Design.</p>
- <img src="svg/logoVariation.svg" id="logo-alt-img"
- alt="Das gleiche Logo wie oben aber jetzt mit grellem, gelben Hintergrund."/>
- </div>
- <img src="svg/chaosWestLogoVariation.svg" id="logo-cw-img"
- alt="Das Chaos West Logo im Farbschema des Events"/>
</div>
<hr/>
</section>
<section aria-labelledby="color-scheme">
- <h2 id="color-scheme">das Farbschema</h2>
- <div id="colors-container">
- <div id="color-boxes">
- <img class="color-preview-img" src="svg/colorsDark.svg"
- alt="Ein Quadrat, in welchem das dunkle Farbschema gezeigt wird"/>
- <img class="color-preview-img" src="svg/colorsLight.svg"
- alt="Ein Quadrat, in welchem das helle Farbschema gezeigt wird"/>
- </div>
- <div id="color-lists">
- <h3>Dunkel</h3>
- <ul>
- <li>Fließtext: #CDFFAB</li>
- <li>Highlights, Überschriften: #00FF6E</li>
- <li>Links, tertiäre Überschriften: #eb2d83</li>
- <li>Haupthintergrund: #061210</li>
- <li>Hervorgehobener Hintergrund: #2A0E1A</li>
- </ul>
- <h3>Hell</h3>
- <ul>
- <li>Fließtext: #1A1A1A</li>
- <li>Highlights, Überschriften: #DA1884</li>
- <li>Links, tertiäre Überschriften: ##00A388</li>
- <li>Haupthintergrund: #FFFFFF</li>
- <li>Hervorgehobener Hintergrund: #FFFDBE</li>
- </ul>
- </div>
- </div>
+ <div><h2 id="color-scheme">das Farbschema</h2></div>
+ <p>
+ Das Farbschema basiert auf 5 Basisfarben - die je in einer "light" und einer "dark" Variante existieren und 5 dazugehörigen dunklen Gradienten. </p>
+ <p>
+ Dabei sollte in den meisten Kontexten das dunkle Farbschema genutzt werden. Wenn sich Nutzende über eine CSS-Flag ein helles Theme wünschen oder der Kontext das erfordert, kann auch das Light theme verwendet werden. Die Grundfarben sind so abgestimmt, dass sie leicht verschiedene HEX-Werte haben, jedoch vor dem Untergrund visuell gleich aussehen.
+ </p>
+ <img src="svg/color-shemes-dark.svg" height="300" alt="Infographic on Color Sheme Base. It has text with a somewhat yellow tint, a dark background, a slightly brighter textbox and 5 colors: gree, blue, purple, red and yellow in front of a dark gradient.">
+ <img src="svg/color-shemes-light.svg" height="300" alt="Infographic on Color Sheme Light. It has black text, a somewhat yellow background, a grey textbox and 5 colors: gree, blue, purple, red and yellow in front of a light gradient.">
+ <img src="svg/color-shemes-gradients.svg" height="300" alt="Infographic on Gradients. There is for each before mentioned color a dark gradient.">
+ <p>
+ Die Textfarbe ist dabei immer ein Beige. Bzw ein sehr sehr dunkles grau.
+ </p>
+ <h3> Themes ableiten </h3>
+ <p>
+ Aus den den Grundfarben lassen sich nun Themes ableiten. Jedes Theme benötigt:
+ </p>
+ <ul lang="de">
+ <li> Eine Primärfarbe (starker Kontrast zum Untergrund bevorzugt) </li>
+ <li> Eine Sekundärfarbe (starker Kontrast zur Textfarbe bevorzugt) </li>
+ <li> Eine tertiäre Farbe </li>
+ <li>
+ Einen Farbgradienten
+ <ul lang="de">
+ <li> daraus abgeleitet die dunkelste Farbe als primäre Hintergrundfarbe </li>
+ <li> eine Farbe aus dem Gradienten (siehe vorgeschlagene Auswahl) als sekundäre Hintergrundfarbe. </li>
+ </li>
+ </ul>
+ <p> Für abgeleitete Light Themes ist nur ein Gradient vorgesehen. </p>
<hr/>
</section>
<section aria-labelledby="text-demo">
@@ -115,100 +111,12 @@
<input type="text" id="text-input-example"/>
</div>
</section>
- <section aria-labelledby="customization">
- <h2 id=customization">Customization</h2>
- <h3>Farben</h3>
- <fieldset class="customization-fieldset">
- <legend>Dunkel</legend>
- <label for="dark-text-color">Fließtext</label>
- <input class="customization-color-input" id="dark-text-color" type="color"/>
- <span id="dark-text-color-display"></span>
-
- <label for="dark-highlight-color">Highlights, Überschriften</label>
- <input class="customization-color-input" id="dark-highlight-color" type="color"/>
- <span id="dark-highlight-color-display"></span>
-
- <label for="dark-secondary-highlight-color">Links, tertiäre Überschriften</label>
- <input class="customization-color-input" id="dark-secondary-highlight-color" type="color"/>
- <span id="dark-secondary-highlight-color-display"></span>
-
- <label for="dark-main-bg-color">Haupthintergrund</label>
- <input class="customization-color-input" id="dark-main-bg-color" type="color"/>
- <span id="dark-main-bg-color-display"></span>
-
- <label for="dark-secondary-bg-color">Hervorgehobener Hintergrund</label>
- <input class="customization-color-input" id="dark-secondary-bg-color" type="color"/>
- <span id="dark-secondary-bg-color-display"></span>
-
- <label for="dark-tertiary-bg-color">Tertiäre Hintergrundfarbe</label>
- <input class="customization-color-input" id="dark-tertiary-bg-color" type="color"/>
- <span id="dark-tertiary-bg-color-display"></span>
-
- <label for="dark-colors-container-background">Hintergrund für die Farbvorschau</label>
- <input class="customization-color-input" id="dark-colors-container-background" type="color"/>
- <span id="dark-colors-container-background-display"></span>
- </fieldset>
-
- <fieldset class="customization-fieldset">
- <legend>Hell</legend>
- <label for="light-text-color">Fließtext</label>
- <input class="customization-color-input" id="light-text-color" type="color"/>
- <span id="light-text-color-display"></span>
-
- <label for="light-highlight-color">Highlights, Überschriften</label>
- <input class="customization-color-input" id="light-highlight-color" type="color"/>
- <span id="light-highlight-color-display"></span>
-
- <label for="light-secondary-highlight-color">Links, tertiäre Überschriften</label>
- <input class="customization-color-input" id="light-secondary-highlight-color" type="color"/>
- <span id="light-secondary-highlight-color-display"></span>
-
- <label for="light-main-bg-color">Haupthintergrund</label>
- <input class="customization-color-input" id="light-main-bg-color" type="color"/>
- <span id="light-main-bg-color-display"></span>
-
- <label for="light-secondary-bg-color">Hervorgehobener Hintergrund</label>
- <input class="customization-color-input" id="light-secondary-bg-color" type="color"/>
- <span id="light-secondary-bg-color-display"></span>
-
- <label for="light-tertiary-bg-color">Tertiäre Hintergrundfarbe</label>
- <input class="customization-color-input" id="light-tertiary-bg-color" type="color"/>
- <span id="light-tertiary-bg-color-display"></span>
-
- <label for="light-colors-container-background">Hintergrund für die Farbvorschau</label>
- <input class="customization-color-input" id="light-colors-container-background" type="color"/>
- <span id="light-colors-container-background-display"></span>
- </fieldset>
- <h3>Schriftarten</h3>
-
- <label for="body-font" class="font-input-label">Fließtext (Direktlink zur .ttf Datei)</label>
- <input id="body-font" type="url" class="font-input">
-
- <label for="header-font" class="font-input-label">Überschriften (Direktlink zur .ttf Datei)</label>
- <input id="header-font" type="url" class="font-input"/>
-
- <h3>Bilder</h3>
- <label for="banner-img-input" class="img-input-label">Banner</label>
- <input id="banner-img-input" class="img-input" type="url"/>
-
- <label for="vision-img-input" class="img-input-label">Vision</label>
- <input id="vision-img-input" class="img-input" type="url"/>
-
- <label for="hr-img-input" class="img-input-label">Inhaltstrenner</label>
- <input id="hr-img-input" type="url"/>
-
- <label for="logo-img-input" class="img-input-label">Logo</label>
- <input id="logo-img-input" class="img-input" type="url"/>
-
- <label for="logo-alt-img-input" class="img-input-label">Logo alt</label>
- <input id="logo-alt-img-input" class="img-input" type="url"/>
-
- <label for="logo-cw-img-input" class="img-input-label">Logo alt 2</label>
- <input id="logo-cw-img-input" class="img-input" type="url"/>
-
- <button id="apply-customization-button">Vorschau</button>
+ <section aria-labelledby="Pixelwelt">
+ <h2 id="pixelwelt">Pixelwelt</h2>
+ <p>
+ Hier entsteht noch ein Abschnitt zum Thema Pixelwelt. Bitte habt einen kleinen Augenblick geduld!
+ </p>
</section>
</main>
-<script src="js/customization.js" type="application/javascript"></script>
</body>
</html>
diff --git a/styleguide-website/svg/color-shemes-dark.svg b/styleguide-website/svg/color-shemes-dark.svg
new file mode 100644
index 0000000..7175109
--- /dev/null
+++ b/styleguide-website/svg/color-shemes-dark.svg
@@ -0,0 +1,282 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ width="200"
+ height="140"
+ viewBox="0 0 52.916665 37.041664"
+ version="1.1"
+ id="svg160177"
+ inkscape:version="1.1.2 (0a00cf5339, 2022-02-04, custom)"
+ sodipodi:docname="color-shemes-dark.svg"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:svg="http://www.w3.org/2000/svg">
+ <sodipodi:namedview
+ id="namedview160179"
+ pagecolor="#505050"
+ bordercolor="#eeeeee"
+ borderopacity="1"
+ inkscape:pageshadow="0"
+ inkscape:pageopacity="0"
+ inkscape:pagecheckerboard="0"
+ inkscape:document-units="mm"
+ showgrid="false"
+ units="px"
+ inkscape:snap-page="true"
+ inkscape:zoom="3.1322391"
+ inkscape:cx="108.22929"
+ inkscape:cy="130.25826"
+ inkscape:window-width="3840"
+ inkscape:window-height="2064"
+ inkscape:window-x="0"
+ inkscape:window-y="34"
+ inkscape:window-maximized="1"
+ inkscape:current-layer="layer1" />
+ <defs
+ id="defs160174">
+ <linearGradient
+ inkscape:collect="always"
+ id="media-dark">
+ <stop
+ style="stop-color:#020613;stop-opacity:1"
+ offset="0"
+ id="stop305514" />
+ <stop
+ style="stop-color:#332a39;stop-opacity:1"
+ offset="1"
+ id="stop305516" />
+ </linearGradient>
+ <linearGradient
+ inkscape:collect="always"
+ xlink:href="#media-dark"
+ id="linearGradient1326"
+ gradientUnits="userSpaceOnUse"
+ gradientTransform="matrix(0.62788367,0,0,0.20637033,-837.9087,-92.998094)"
+ x1="1274.2083"
+ y1="270.42169"
+ x2="1274.2083"
+ y2="449.97531" />
+ </defs>
+ <g
+ inkscape:label="Layer 1"
+ inkscape:groupmode="layer"
+ id="layer1">
+ <rect
+ style="fill:url(#linearGradient1326);fill-opacity:1;stroke-width:0.956621;stroke-linecap:round;stroke-linejoin:round;stroke-dashoffset:3.96851"
+ id="rect1324"
+ width="52.916668"
+ height="37.041668"
+ x="-52.916668"
+ y="-37.041668"
+ inkscape:export-filename="/home/betalars/Development/congress/bridging-bubbles-design/draft/metabals_background.png"
+ inkscape:export-xdpi="237.57231"
+ inkscape:export-ydpi="237.57231"
+ transform="scale(-1)" />
+ <rect
+ style="fill:#030714;fill-opacity:1;stroke-width:1.08854;stroke-linecap:round;stroke-linejoin:round;stroke-dashoffset:3.96851"
+ id="rect505567-3"
+ width="27.771074"
+ height="37.041664"
+ x="0"
+ y="9.5367432e-07" />
+ <rect
+ style="fill:#a74bd7;fill-opacity:1;stroke:none;stroke-width:1.68745;stroke-linecap:round;stroke-linejoin:round;stroke-dashoffset:3.96851;stroke-opacity:1"
+ id="rect505569-6"
+ width="16.425486"
+ height="4.5705571"
+ x="35.203495"
+ y="19.261578" />
+ <rect
+ style="fill:#62c1a6;fill-opacity:1;stroke-width:1.68745;stroke-linecap:round;stroke-linejoin:round;stroke-dashoffset:3.96851"
+ id="rect505571-7"
+ width="16.425486"
+ height="4.5705571"
+ x="35.203495"
+ y="7.3229952" />
+ <rect
+ style="fill:#5253ff;fill-opacity:1;stroke:none;stroke-width:1.68745;stroke-linecap:round;stroke-linejoin:round;stroke-dashoffset:3.96851;stroke-opacity:1"
+ id="rect505573-5"
+ width="16.425486"
+ height="4.5705571"
+ x="35.203495"
+ y="13.292264" />
+ <rect
+ style="fill:#fdbe4b;fill-opacity:1;stroke-width:1.68745;stroke-linecap:round;stroke-linejoin:round;stroke-dashoffset:3.96851"
+ id="rect505575-3"
+ width="16.425486"
+ height="4.5705571"
+ x="35.203495"
+ y="31.2001" />
+ <rect
+ style="fill:#ffebd8;fill-opacity:1;stroke-width:1.68745;stroke-linecap:round;stroke-linejoin:round;stroke-dashoffset:3.96851"
+ id="rect505577-5"
+ width="16.425486"
+ height="4.5705571"
+ x="35.203495"
+ y="1.3536959" />
+ <rect
+ style="fill:#ea5177;fill-opacity:1;stroke-width:1.68745;stroke-linecap:round;stroke-linejoin:round;stroke-dashoffset:3.96851"
+ id="rect505579-6"
+ width="16.425486"
+ height="4.5705571"
+ x="35.203495"
+ y="25.230831" />
+ <rect
+ style="fill:#5253ff;fill-opacity:1;stroke-width:0.854237;stop-color:#000000"
+ id="rect139449"
+ width="21.419888"
+ height="2.6959896"
+ x="0"
+ y="4.6506395" />
+ <text
+ xml:space="preserve"
+ style="font-size:8.92015px;line-height:1.25;font-family:Nunito;-inkscape-font-specification:Nunito;fill:#ffebd8;fill-opacity:1;stroke-width:0.465437"
+ x="1.0047455"
+ y="5.9186983"
+ id="text505583"><tspan
+ sodipodi:role="line"
+ id="tspan505581"
+ style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:Genos;-inkscape-font-specification:'Genos Bold';fill:#ffebd8;fill-opacity:1;stroke-width:0.465437"
+ x="1.0047455"
+ y="5.9186983">base</tspan></text>
+ <text
+ xml:space="preserve"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:2.77241px;line-height:1.25;font-family:'Ubuntu Mono';-inkscape-font-specification:'Ubuntu Mono';fill:#241b2b;fill-opacity:1;stroke-width:0.0693104"
+ x="35.898914"
+ y="5.2289858"
+ id="text760289-2"><tspan
+ sodipodi:role="line"
+ id="tspan760287-9"
+ style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:'Ubuntu Mono';-inkscape-font-specification:'Ubuntu Mono';fill:#241b2b;fill-opacity:1;stroke-width:0.0693104"
+ x="35.898914"
+ y="5.2289858">#FFEBD8</tspan></text>
+ <text
+ xml:space="preserve"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:2.77241px;line-height:1.25;font-family:'Ubuntu Mono';-inkscape-font-specification:'Ubuntu Mono';fill:#241b2b;fill-opacity:1;stroke-width:0.0693104"
+ x="35.898914"
+ y="29.106121"
+ id="text776588-1"><tspan
+ sodipodi:role="line"
+ id="tspan776586-2"
+ style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:'Ubuntu Mono';-inkscape-font-specification:'Ubuntu Mono';fill:#241b2b;fill-opacity:1;stroke-width:0.0693104"
+ x="35.898914"
+ y="29.106121">#EA5177</tspan></text>
+ <text
+ xml:space="preserve"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:2.77241px;line-height:1.25;font-family:'Ubuntu Mono';-inkscape-font-specification:'Ubuntu Mono';fill:#241b2b;fill-opacity:1;stroke-width:0.0693104"
+ x="35.898914"
+ y="35.075394"
+ id="text776594-7"><tspan
+ sodipodi:role="line"
+ id="tspan776592-0"
+ style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:'Ubuntu Mono';-inkscape-font-specification:'Ubuntu Mono';fill:#241b2b;fill-opacity:1;stroke-width:0.0693104"
+ x="35.898914"
+ y="35.075394">#FDBE4B</tspan></text>
+ <text
+ xml:space="preserve"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:2.77241px;line-height:1.25;font-family:'Ubuntu Mono';-inkscape-font-specification:'Ubuntu Mono';fill:#241b2b;fill-opacity:1;stroke-width:0.0693104"
+ x="35.898914"
+ y="11.198285"
+ id="text776600-9"><tspan
+ sodipodi:role="line"
+ id="tspan776598-3"
+ style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:'Ubuntu Mono';-inkscape-font-specification:'Ubuntu Mono';fill:#241b2b;fill-opacity:1;stroke-width:0.0693104"
+ x="35.898914"
+ y="11.198285">#62C1A6</tspan></text>
+ <text
+ xml:space="preserve"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:2.77241px;line-height:1.25;font-family:'Ubuntu Mono';-inkscape-font-specification:'Ubuntu Mono';fill:#241b2b;fill-opacity:1;stroke-width:0.0693104"
+ x="35.898899"
+ y="17.167553"
+ id="text776606-6"><tspan
+ sodipodi:role="line"
+ id="tspan776604-0"
+ style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:'Ubuntu Mono';-inkscape-font-specification:'Ubuntu Mono';fill:#241b2b;fill-opacity:1;stroke-width:0.0693104"
+ x="35.898899"
+ y="17.167553">#5253FF</tspan></text>
+ <text
+ xml:space="preserve"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:2.77241px;line-height:1.25;font-family:'Ubuntu Mono';-inkscape-font-specification:'Ubuntu Mono';fill:#241b2b;fill-opacity:1;stroke-width:0.0693104"
+ x="35.898899"
+ y="23.136864"
+ id="text776612-6"><tspan
+ sodipodi:role="line"
+ id="tspan776610-2"
+ style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:'Ubuntu Mono';-inkscape-font-specification:'Ubuntu Mono';fill:#241b2b;fill-opacity:1;stroke-width:0.0693104"
+ x="35.898899"
+ y="23.136864">#A74DB7</tspan></text>
+ <rect
+ style="fill:#241b2b;fill-opacity:1;stroke-width:0.804465;stroke-linecap:round;stroke-linejoin:round;stroke-dashoffset:3.96851"
+ id="rect1513"
+ width="22.842838"
+ height="24.595718"
+ x="0"
+ y="12.445947" />
+ <text
+ xml:space="preserve"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:7.96591px;line-height:1.25;font-family:Ubuntu;-inkscape-font-specification:Ubuntu;white-space:pre;inline-size:72.6149;fill:#ffebd8;fill-opacity:1;stroke-width:0.552217"
+ x="1294.8667"
+ y="533.25824"
+ id="text505587"
+ transform="matrix(0.30350091,0,0,0.27302238,-392.31391,-133.47593)"><tspan
+ x="1294.8667"
+ y="533.25824"
+ id="tspan162357">
+</tspan><tspan
+ x="1294.8667"
+ y="543.21562"
+ id="tspan162359">Impedit eos </tspan><tspan
+ x="1294.8667"
+ y="553.17302"
+ id="tspan162361">voluptatem iure qui </tspan><tspan
+ x="1294.8667"
+ y="563.13042"
+ id="tspan162363">quae. Voluptatem </tspan><tspan
+ x="1294.8667"
+ y="573.08782"
+ id="tspan162365">incidunt et aut iste </tspan><tspan
+ x="1294.8667"
+ y="583.04521"
+ id="tspan162367">sapiente odit. Eius </tspan><tspan
+ x="1294.8667"
+ y="593.00261"
+ id="tspan162369">repellat quasi ut </tspan><tspan
+ x="1294.8667"
+ y="602.96001"
+ id="tspan162371">mollitia eum..
+</tspan><tspan
+ x="1294.8667"
+ y="612.91741"
+ id="tspan162373">
+</tspan><tspan
+ x="1294.8667"
+ y="622.8748"
+ id="tspan162375">
+</tspan></text>
+ <text
+ xml:space="preserve"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:2.77241px;line-height:1.25;font-family:'Ubuntu Mono';-inkscape-font-specification:'Ubuntu Mono';fill:#ffebd8;fill-opacity:1;stroke-width:0.0693104"
+ x="11.987244"
+ y="36.20343"
+ id="text829466"><tspan
+ sodipodi:role="line"
+ id="tspan829464"
+ style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:'Ubuntu Mono';-inkscape-font-specification:'Ubuntu Mono';fill:#ffebd8;fill-opacity:1;stroke-width:0.0693104"
+ x="11.987244"
+ y="36.20343">#241B2B</tspan></text>
+ <text
+ xml:space="preserve"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:2.77241px;line-height:1.25;font-family:'Ubuntu Mono';-inkscape-font-specification:'Ubuntu Mono';fill:#ffebd8;fill-opacity:1;stroke-width:0.0693104"
+ x="11.987244"
+ y="11.793408"
+ id="text6490"><tspan
+ sodipodi:role="line"
+ id="tspan6488"
+ style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:'Ubuntu Mono';-inkscape-font-specification:'Ubuntu Mono';fill:#ffebd8;fill-opacity:1;stroke-width:0.0693104"
+ x="11.987244"
+ y="11.793408">#030714</tspan></text>
+ </g>
+</svg>
diff --git a/styleguide-website/svg/color-shemes-gradients.svg b/styleguide-website/svg/color-shemes-gradients.svg
new file mode 100644
index 0000000..b7cddd2
--- /dev/null
+++ b/styleguide-website/svg/color-shemes-gradients.svg
@@ -0,0 +1,350 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ width="200"
+ height="140"
+ viewBox="0 0 52.916665 37.041664"
+ version="1.1"
+ id="svg160177"
+ inkscape:version="1.1.2 (0a00cf5339, 2022-02-04, custom)"
+ sodipodi:docname="color-shemes-gradients.svg"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:svg="http://www.w3.org/2000/svg">
+ <sodipodi:namedview
+ id="namedview160179"
+ pagecolor="#505050"
+ bordercolor="#eeeeee"
+ borderopacity="1"
+ inkscape:pageshadow="0"
+ inkscape:pageopacity="0"
+ inkscape:pagecheckerboard="0"
+ inkscape:document-units="mm"
+ showgrid="false"
+ units="px"
+ inkscape:snap-page="true"
+ inkscape:zoom="4.4296549"
+ inkscape:cx="90.300487"
+ inkscape:cy="98.653282"
+ inkscape:window-width="3840"
+ inkscape:window-height="2064"
+ inkscape:window-x="0"
+ inkscape:window-y="34"
+ inkscape:window-maximized="1"
+ inkscape:current-layer="layer1" />
+ <defs
+ id="defs160174">
+ <linearGradient
+ inkscape:collect="always"
+ xlink:href="#media-dark"
+ id="linearGradient35176"
+ gradientUnits="userSpaceOnUse"
+ gradientTransform="matrix(0.62788129,0,0,0.20637033,-837.90571,-92.998093)"
+ x1="1274.2083"
+ y1="270.42169"
+ x2="1274.2083"
+ y2="449.97531" />
+ <linearGradient
+ inkscape:collect="always"
+ id="media-dark">
+ <stop
+ style="stop-color:#020613;stop-opacity:1"
+ offset="0"
+ id="stop305514" />
+ <stop
+ style="stop-color:#332a39;stop-opacity:1"
+ offset="1"
+ id="stop305516" />
+ </linearGradient>
+ <linearGradient
+ inkscape:collect="always"
+ xlink:href="#media-dark"
+ id="linearGradient40832"
+ x1="-92.328003"
+ y1="54.340496"
+ x2="-54.779396"
+ y2="54.340496"
+ gradientUnits="userSpaceOnUse"
+ gradientTransform="matrix(1.057606,0,0,1,104.24502,-32.79364)" />
+ <linearGradient
+ inkscape:collect="always"
+ xlink:href="#linearGradient6418"
+ id="linearGradient40816"
+ x1="-92.328003"
+ y1="42.401913"
+ x2="-54.779396"
+ y2="42.401913"
+ gradientUnits="userSpaceOnUse"
+ gradientTransform="matrix(1.057606,0,0,1,104.24502,-32.79364)" />
+ <linearGradient
+ inkscape:collect="always"
+ id="linearGradient6418">
+ <stop
+ style="stop-color:#223a33;stop-opacity:1"
+ offset="0"
+ id="stop6414" />
+ <stop
+ style="stop-color:#0a161f;stop-opacity:1"
+ offset="1"
+ id="stop6416" />
+ </linearGradient>
+ <linearGradient
+ inkscape:collect="always"
+ xlink:href="#linearGradient4191"
+ id="linearGradient40824"
+ x1="-92.328003"
+ y1="48.371181"
+ x2="-54.779396"
+ y2="48.371181"
+ gradientUnits="userSpaceOnUse"
+ gradientTransform="matrix(1.057606,0,0,1,104.24502,-32.79364)" />
+ <linearGradient
+ inkscape:collect="always"
+ id="linearGradient4191">
+ <stop
+ style="stop-color:#0a2b34;stop-opacity:1"
+ offset="0"
+ id="stop4187" />
+ <stop
+ style="stop-color:#0d0313;stop-opacity:1"
+ offset="1"
+ id="stop4189" />
+ </linearGradient>
+ <linearGradient
+ inkscape:collect="always"
+ xlink:href="#linearGradient6897"
+ id="linearGradient40848"
+ x1="-92.328003"
+ y1="66.279022"
+ x2="-54.779396"
+ y2="66.279022"
+ gradientUnits="userSpaceOnUse"
+ gradientTransform="matrix(1.057606,0,0,1,104.24502,-32.79364)" />
+ <linearGradient
+ inkscape:collect="always"
+ id="linearGradient6897">
+ <stop
+ style="stop-color:#323325;stop-opacity:1"
+ offset="0"
+ id="stop6893" />
+ <stop
+ style="stop-color:#06120d;stop-opacity:1"
+ offset="1"
+ id="stop6895" />
+ </linearGradient>
+ <linearGradient
+ inkscape:collect="always"
+ xlink:href="#linearGradient197559"
+ id="linearGradient40840"
+ x1="-92.328003"
+ y1="60.30975"
+ x2="-54.779396"
+ y2="60.30975"
+ gradientUnits="userSpaceOnUse"
+ gradientTransform="matrix(1.057606,0,0,1,104.24502,-32.79364)" />
+ <linearGradient
+ inkscape:collect="always"
+ id="linearGradient197559">
+ <stop
+ style="stop-color:#3a1b35;stop-opacity:1"
+ offset="0"
+ id="stop197555" />
+ <stop
+ style="stop-color:#0b0321;stop-opacity:1"
+ offset="1"
+ id="stop197557" />
+ </linearGradient>
+ </defs>
+ <g
+ inkscape:label="Layer 1"
+ inkscape:groupmode="layer"
+ id="layer1">
+ <rect
+ style="fill:url(#linearGradient35176);fill-opacity:1;stroke-width:0.956619;stroke-linecap:round;stroke-linejoin:round;stroke-dashoffset:3.96851"
+ id="rect35102"
+ width="52.916668"
+ height="37.041668"
+ x="-52.916668"
+ y="-37.041668"
+ inkscape:export-filename="/home/betalars/Development/congress/bridging-bubbles-design/draft/metabals_background.png"
+ inkscape:export-xdpi="237.57231"
+ inkscape:export-ydpi="237.57231"
+ transform="scale(-1)" />
+ <rect
+ style="fill:#a74bd7;fill-opacity:1;stroke:none;stroke-width:0.946487;stroke-linecap:round;stroke-linejoin:round;stroke-dashoffset:3.96851;stroke-opacity:1"
+ id="rect35106"
+ width="5.1675649"
+ height="4.5705571"
+ x="1.4308134"
+ y="19.261576" />
+ <rect
+ style="fill:#62c1a6;fill-opacity:1;stroke-width:0.946487;stroke-linecap:round;stroke-linejoin:round;stroke-dashoffset:3.96851"
+ id="rect35108"
+ width="5.1675649"
+ height="4.5705571"
+ x="1.4308134"
+ y="7.3229942" />
+ <rect
+ style="fill:#5253ff;fill-opacity:1;stroke:none;stroke-width:0.946487;stroke-linecap:round;stroke-linejoin:round;stroke-dashoffset:3.96851;stroke-opacity:1"
+ id="rect35110"
+ width="5.1675649"
+ height="4.5705571"
+ x="1.4308134"
+ y="13.292262" />
+ <rect
+ style="fill:#fdbe4b;fill-opacity:1;stroke-width:0.946487;stroke-linecap:round;stroke-linejoin:round;stroke-dashoffset:3.96851"
+ id="rect35112"
+ width="5.1675649"
+ height="4.5705571"
+ x="1.4308134"
+ y="31.2001" />
+ <rect
+ style="fill:#ea5177;fill-opacity:1;stroke-width:0.946487;stroke-linecap:round;stroke-linejoin:round;stroke-dashoffset:3.96851"
+ id="rect35116"
+ width="5.1675649"
+ height="4.5705571"
+ x="1.4308134"
+ y="25.230829" />
+ <text
+ xml:space="preserve"
+ style="font-size:8.92015px;line-height:1.25;font-family:Nunito;-inkscape-font-specification:Nunito;fill:#ffebd8;fill-opacity:1;stroke-width:0.465437"
+ x="1.0049254"
+ y="5.9186974"
+ id="text35120"><tspan
+ sodipodi:role="line"
+ id="tspan35118"
+ style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:Genos;-inkscape-font-specification:'Genos Bold';fill:#ffebd8;fill-opacity:1;stroke-width:0.465437"
+ x="1.0049254"
+ y="5.9186974">gradients</tspan></text>
+ <rect
+ style="fill:#241b2b;fill-opacity:1;stroke:none;stroke-width:0.946487;stroke-linecap:round;stroke-linejoin:round;stroke-dashoffset:3.96851;stroke-opacity:1"
+ id="rect40790"
+ width="5.1675649"
+ height="4.5705571"
+ x="46.310005"
+ y="19.261576" />
+ <rect
+ style="fill:#162829;fill-opacity:1;stroke-width:0.946487;stroke-linecap:round;stroke-linejoin:round;stroke-dashoffset:3.96851"
+ id="rect40792"
+ width="5.1675649"
+ height="4.5705571"
+ x="46.310005"
+ y="7.3229942" />
+ <rect
+ style="fill:#0d1727;fill-opacity:1;stroke:none;stroke-width:0.946487;stroke-linecap:round;stroke-linejoin:round;stroke-dashoffset:3.96851;stroke-opacity:1"
+ id="rect40794"
+ width="5.1675649"
+ height="4.5705571"
+ x="46.310005"
+ y="13.292262" />
+ <rect
+ style="fill:#1c2219;fill-opacity:1;stroke-width:0.946487;stroke-linecap:round;stroke-linejoin:round;stroke-dashoffset:3.96851"
+ id="rect40796"
+ width="5.1675649"
+ height="4.5705571"
+ x="46.310005"
+ y="31.2001" />
+ <rect
+ style="fill:#230f2b;fill-opacity:1;stroke-width:0.946487;stroke-linecap:round;stroke-linejoin:round;stroke-dashoffset:3.96851"
+ id="rect40798"
+ width="5.1675649"
+ height="4.5705571"
+ x="46.310005"
+ y="25.230829" />
+ <rect
+ style="fill:url(#linearGradient40832);fill-opacity:1;stroke:none;stroke-width:2.6238;stroke-linecap:round;stroke-linejoin:round;stroke-dashoffset:3.96851;stroke-opacity:1"
+ id="rect40800"
+ width="39.711632"
+ height="4.5705571"
+ x="6.5983739"
+ y="19.261576" />
+ <rect
+ style="fill:url(#linearGradient40816);fill-opacity:1;stroke-width:2.6238;stroke-linecap:round;stroke-linejoin:round;stroke-dashoffset:3.96851"
+ id="rect40802"
+ width="39.711632"
+ height="4.5705571"
+ x="6.5983739"
+ y="7.3229942" />
+ <rect
+ style="fill:url(#linearGradient40824);fill-opacity:1;stroke:none;stroke-width:2.6238;stroke-linecap:round;stroke-linejoin:round;stroke-dashoffset:3.96851;stroke-opacity:1"
+ id="rect40804"
+ width="39.711632"
+ height="4.5705571"
+ x="6.5983739"
+ y="13.292262" />
+ <rect
+ style="fill:url(#linearGradient40848);fill-opacity:1;stroke-width:2.6238;stroke-linecap:round;stroke-linejoin:round;stroke-dashoffset:3.96851"
+ id="rect40806"
+ width="39.711632"
+ height="4.5705571"
+ x="6.5983739"
+ y="31.2001" />
+ <rect
+ style="fill:url(#linearGradient40840);fill-opacity:1;stroke-width:2.6238;stroke-linecap:round;stroke-linejoin:round;stroke-dashoffset:3.96851"
+ id="rect40808"
+ width="39.711632"
+ height="4.5705571"
+ x="6.5983739"
+ y="25.230829" />
+ <text
+ xml:space="preserve"
+ style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-size:2.77241px;line-height:1.25;font-family:Ubuntu;-inkscape-font-specification:'Ubuntu Semi-Bold';fill:#62c1a6;fill-opacity:1;stroke-width:0.0693104"
+ x="7.0843053"
+ y="11.198284"
+ id="text77327"><tspan
+ sodipodi:role="line"
+ id="tspan77325"
+ style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-family:Ubuntu;-inkscape-font-specification:'Ubuntu Semi-Bold';fill:#62c1a6;fill-opacity:1;stroke-width:0.0693104"
+ x="7.0843053"
+ y="11.198284">green</tspan></text>
+ <text
+ xml:space="preserve"
+ style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-size:2.77241px;line-height:1.25;font-family:Ubuntu;-inkscape-font-specification:'Ubuntu Semi-Bold';fill:#5253ff;fill-opacity:1;stroke-width:0.0693104"
+ x="7.0843053"
+ y="17.198198"
+ id="text78321"><tspan
+ sodipodi:role="line"
+ id="tspan78319"
+ style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-family:Ubuntu;-inkscape-font-specification:'Ubuntu Semi-Bold';fill:#5253ff;fill-opacity:1;stroke-width:0.0693104"
+ x="7.0843053"
+ y="17.198198">blue</tspan></text>
+ <text
+ xml:space="preserve"
+ style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-size:2.77241px;line-height:1.25;font-family:Ubuntu;-inkscape-font-specification:'Ubuntu Semi-Bold';fill:#a74bd7;fill-opacity:1;stroke-width:0.0693104"
+ x="7.0843053"
+ y="23.106981"
+ id="text78325"><tspan
+ sodipodi:role="line"
+ id="tspan78323"
+ style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-family:Ubuntu;-inkscape-font-specification:'Ubuntu Semi-Bold';fill:#a74bd7;fill-opacity:1;stroke-width:0.0693104"
+ x="7.0843053"
+ y="23.106981">main <tspan
+ style="font-style:italic;font-variant:normal;font-weight:300;font-stretch:normal;font-family:Ubuntu;-inkscape-font-specification:'Ubuntu Light Italic';fill:#a74bd7;fill-opacity:1"
+ id="tspan82689">inverted</tspan></tspan></text>
+ <text
+ xml:space="preserve"
+ style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-size:2.77241px;line-height:1.25;font-family:Ubuntu;-inkscape-font-specification:'Ubuntu Semi-Bold';fill:#ea5177;fill-opacity:1;stroke-width:0.0693104"
+ x="7.0843053"
+ y="29.038954"
+ id="text78329"><tspan
+ sodipodi:role="line"
+ id="tspan78327"
+ style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-family:Ubuntu;-inkscape-font-specification:'Ubuntu Semi-Bold';fill:#ea5177;fill-opacity:1;stroke-width:0.0693104"
+ x="7.0843053"
+ y="29.038954">purple</tspan></text>
+ <text
+ xml:space="preserve"
+ style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-size:2.77241px;line-height:1.25;font-family:Ubuntu;-inkscape-font-specification:'Ubuntu Semi-Bold';fill:#fdbe4b;fill-opacity:1;stroke-width:0.0693104"
+ x="7.0843053"
+ y="35.197639"
+ id="text78333"><tspan
+ sodipodi:role="line"
+ id="tspan78331"
+ style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-family:Ubuntu;-inkscape-font-specification:'Ubuntu Semi-Bold';fill:#fdbe4b;fill-opacity:1;stroke-width:0.0693104"
+ x="7.0843053"
+ y="35.197639">yellow</tspan></text>
+ </g>
+</svg>
diff --git a/styleguide-website/svg/color-shemes-light.svg b/styleguide-website/svg/color-shemes-light.svg
new file mode 100644
index 0000000..6114fdb
--- /dev/null
+++ b/styleguide-website/svg/color-shemes-light.svg
@@ -0,0 +1,282 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ width="200"
+ height="140"
+ viewBox="0 0 52.916665 37.041664"
+ version="1.1"
+ id="svg160177"
+ inkscape:version="1.1.2 (0a00cf5339, 2022-02-04, custom)"
+ sodipodi:docname="color-shemes-light.svg"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:svg="http://www.w3.org/2000/svg">
+ <sodipodi:namedview
+ id="namedview160179"
+ pagecolor="#505050"
+ bordercolor="#eeeeee"
+ borderopacity="1"
+ inkscape:pageshadow="0"
+ inkscape:pageopacity="0"
+ inkscape:pagecheckerboard="0"
+ inkscape:document-units="mm"
+ showgrid="false"
+ units="px"
+ inkscape:snap-page="true"
+ inkscape:zoom="3.1322391"
+ inkscape:cx="108.22929"
+ inkscape:cy="130.25826"
+ inkscape:window-width="3840"
+ inkscape:window-height="2064"
+ inkscape:window-x="0"
+ inkscape:window-y="34"
+ inkscape:window-maximized="1"
+ inkscape:current-layer="layer1" />
+ <defs
+ id="defs160174">
+ <linearGradient
+ inkscape:collect="always"
+ xlink:href="#linearGradient304514"
+ id="linearGradient18286"
+ gradientUnits="userSpaceOnUse"
+ gradientTransform="matrix(0.62788367,0,0,0.20637031,-837.90869,-55.956421)"
+ x1="1274.2083"
+ y1="270.42169"
+ x2="1274.2083"
+ y2="449.97531" />
+ <linearGradient
+ inkscape:collect="always"
+ id="linearGradient304514">
+ <stop
+ style="stop-color:#fff0e0;stop-opacity:1;"
+ offset="0"
+ id="stop304510" />
+ <stop
+ style="stop-color:#d0c8c3;stop-opacity:1;"
+ offset="1"
+ id="stop304512" />
+ </linearGradient>
+ </defs>
+ <g
+ inkscape:label="Layer 1"
+ inkscape:groupmode="layer"
+ id="layer1">
+ <rect
+ style="fill:url(#linearGradient18286);fill-opacity:1;stroke-width:0.956621;stroke-linecap:round;stroke-linejoin:round;stroke-dashoffset:3.96851"
+ id="rect18212"
+ width="52.916668"
+ height="37.041664"
+ x="-52.916668"
+ y="0"
+ inkscape:export-filename="/home/betalars/Development/congress/bridging-bubbles-design/draft/metabals_background.png"
+ inkscape:export-xdpi="237.57231"
+ inkscape:export-ydpi="237.57231"
+ transform="scale(-1,1)" />
+ <rect
+ style="fill:#fceede;fill-opacity:1;stroke-width:1.08854;stroke-linecap:round;stroke-linejoin:round;stroke-dashoffset:3.96851"
+ id="rect18214"
+ width="27.771074"
+ height="37.04166"
+ x="-1.2715658e-06"
+ y="0" />
+ <rect
+ style="fill:#57c0a2;fill-opacity:1;stroke-width:0.823885;stop-color:#000000"
+ id="rect135667"
+ width="19.924774"
+ height="2.6959896"
+ x="-1.2715658e-06"
+ y="4.6506386" />
+ <text
+ xml:space="preserve"
+ style="font-size:8.92015px;line-height:1.25;font-family:Nunito;-inkscape-font-specification:Nunito;fill:#0e0e0f;fill-opacity:1;stroke-width:0.465437"
+ x="1.0047594"
+ y="5.9186974"
+ id="text18230"><tspan
+ sodipodi:role="line"
+ id="tspan18228"
+ style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:Genos;-inkscape-font-specification:'Genos Bold';fill:#0e0e0f;fill-opacity:1;stroke-width:0.465437"
+ x="1.0047594"
+ y="5.9186974">light</tspan></text>
+ <rect
+ style="fill:#ded6e5;fill-opacity:1;stroke-width:0.805852;stroke-linecap:round;stroke-linejoin:round;stroke-dashoffset:3.96851"
+ id="rect18256"
+ width="22.921667"
+ height="24.595716"
+ x="-1.2715658e-06"
+ y="12.445946" />
+ <text
+ xml:space="preserve"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:7.96591px;line-height:1.25;font-family:Ubuntu;-inkscape-font-specification:Ubuntu;white-space:pre;inline-size:72.6149;fill:#0e0e0f;fill-opacity:1;stroke-width:0.552217"
+ x="1294.8667"
+ y="533.25824"
+ id="text18276"
+ transform="matrix(0.30350091,0,0,0.27302238,-392.31391,-133.47593)"><tspan
+ x="1294.8667"
+ y="533.25824"
+ id="tspan162034">
+</tspan><tspan
+ x="1294.8667"
+ y="543.21562"
+ id="tspan162036">Impedit eos </tspan><tspan
+ x="1294.8667"
+ y="553.17302"
+ id="tspan162038">voluptatem iure qui </tspan><tspan
+ x="1294.8667"
+ y="563.13042"
+ id="tspan162040">quae. Voluptatem </tspan><tspan
+ x="1294.8667"
+ y="573.08782"
+ id="tspan162042">incidunt et aut iste </tspan><tspan
+ x="1294.8667"
+ y="583.04521"
+ id="tspan162044">sapiente odit. Eius </tspan><tspan
+ x="1294.8667"
+ y="593.00261"
+ id="tspan162046">repellat quasi ut </tspan><tspan
+ x="1294.8667"
+ y="602.96001"
+ id="tspan162048">mollitia eum..
+</tspan><tspan
+ x="1294.8667"
+ y="612.91741"
+ id="tspan162050">
+</tspan><tspan
+ x="1294.8667"
+ y="622.8748"
+ id="tspan162052">
+</tspan></text>
+ <text
+ xml:space="preserve"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:2.77241px;line-height:1.25;font-family:'Ubuntu Mono';-inkscape-font-specification:'Ubuntu Mono';fill:#0e0e0f;fill-opacity:1;stroke-width:0.0693104"
+ x="11.987243"
+ y="36.367378"
+ id="text18280"><tspan
+ sodipodi:role="line"
+ id="tspan18278"
+ style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:'Ubuntu Mono';-inkscape-font-specification:'Ubuntu Mono';fill:#0e0e0f;fill-opacity:1;stroke-width:0.0693104"
+ x="11.987243"
+ y="36.367378">#DED6E5</tspan></text>
+ <text
+ xml:space="preserve"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:2.77241px;line-height:1.25;font-family:'Ubuntu Mono';-inkscape-font-specification:'Ubuntu Mono';fill:#0e0e0f;fill-opacity:1;stroke-width:0.0693104"
+ x="11.987243"
+ y="11.793407"
+ id="text18284"><tspan
+ sodipodi:role="line"
+ id="tspan18282"
+ style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:'Ubuntu Mono';-inkscape-font-specification:'Ubuntu Mono';fill:#0e0e0f;fill-opacity:1;stroke-width:0.0693104"
+ x="11.987243"
+ y="11.793407">#FCEEDE</tspan></text>
+ <rect
+ style="fill:#9945c5;fill-opacity:1;stroke:none;stroke-width:1.68745;stroke-linecap:round;stroke-linejoin:round;stroke-dashoffset:3.96851;stroke-opacity:1"
+ id="rect493419"
+ width="16.425486"
+ height="4.5705571"
+ x="35.203499"
+ y="19.261578" />
+ <rect
+ style="fill:#57c0a2;fill-opacity:1;stroke-width:1.68745;stroke-linecap:round;stroke-linejoin:round;stroke-dashoffset:3.96851"
+ id="rect493421"
+ width="16.425486"
+ height="4.5705571"
+ x="35.203499"
+ y="13.292264" />
+ <rect
+ style="fill:#5152e6;fill-opacity:1;stroke:none;stroke-width:1.68745;stroke-linecap:round;stroke-linejoin:round;stroke-dashoffset:3.96851;stroke-opacity:1"
+ id="rect493423"
+ width="16.425486"
+ height="4.5705571"
+ x="35.203499"
+ y="7.3229957" />
+ <rect
+ style="fill:#f6b237;fill-opacity:1;stroke-width:1.68745;stroke-linecap:round;stroke-linejoin:round;stroke-dashoffset:3.96851"
+ id="rect493425"
+ width="16.425486"
+ height="4.5705571"
+ x="35.203499"
+ y="31.2001" />
+ <rect
+ style="fill:#0e0e0f;fill-opacity:1;stroke-width:1.68745;stroke-linecap:round;stroke-linejoin:round;stroke-dashoffset:3.96851"
+ id="rect493427"
+ width="16.425486"
+ height="4.5705571"
+ x="35.203506"
+ y="1.3536961" />
+ <rect
+ style="fill:#ea4a72;fill-opacity:1;stroke-width:1.68745;stroke-linecap:round;stroke-linejoin:round;stroke-dashoffset:3.96851"
+ id="rect493429"
+ width="16.425486"
+ height="4.5705571"
+ x="35.203499"
+ y="25.230831" />
+ <text
+ xml:space="preserve"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:2.77241px;line-height:1.25;font-family:'Ubuntu Mono';-inkscape-font-specification:'Ubuntu Mono';fill:#ffebd8;fill-opacity:1;stroke-width:0.0693104"
+ x="35.898903"
+ y="5.2289863"
+ id="text803503"><tspan
+ sodipodi:role="line"
+ id="tspan803501"
+ style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:'Ubuntu Mono';-inkscape-font-specification:'Ubuntu Mono';fill:#ffebd8;fill-opacity:1;stroke-width:0.0693104"
+ x="35.898903"
+ y="5.2289863">#0E0E0F</tspan></text>
+ <text
+ xml:space="preserve"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:2.77241px;line-height:1.25;font-family:'Ubuntu Mono';-inkscape-font-specification:'Ubuntu Mono';fill:#241b2b;fill-opacity:1;stroke-width:0.0693104"
+ x="35.898903"
+ y="29.106121"
+ id="text803507"><tspan
+ sodipodi:role="line"
+ id="tspan803505"
+ style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:'Ubuntu Mono';-inkscape-font-specification:'Ubuntu Mono';fill:#241b2b;fill-opacity:1;stroke-width:0.0693104"
+ x="35.898903"
+ y="29.106121">#EA4A72</tspan></text>
+ <text
+ xml:space="preserve"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:2.77241px;line-height:1.25;font-family:'Ubuntu Mono';-inkscape-font-specification:'Ubuntu Mono';fill:#241b2b;fill-opacity:1;stroke-width:0.0693104"
+ x="35.898903"
+ y="35.07539"
+ id="text803511"><tspan
+ sodipodi:role="line"
+ id="tspan803509"
+ style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:'Ubuntu Mono';-inkscape-font-specification:'Ubuntu Mono';fill:#241b2b;fill-opacity:1;stroke-width:0.0693104"
+ x="35.898903"
+ y="35.07539">#F6B237</tspan></text>
+ <text
+ xml:space="preserve"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:2.77241px;line-height:1.25;font-family:'Ubuntu Mono';-inkscape-font-specification:'Ubuntu Mono';fill:#241b2b;fill-opacity:1;stroke-width:0.0693104"
+ x="35.898903"
+ y="17.167553"
+ id="text803515"><tspan
+ sodipodi:role="line"
+ id="tspan803513"
+ style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:'Ubuntu Mono';-inkscape-font-specification:'Ubuntu Mono';fill:#241b2b;fill-opacity:1;stroke-width:0.0693104"
+ x="35.898903"
+ y="17.167553">#57C0A2</tspan></text>
+ <text
+ xml:space="preserve"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:2.77241px;line-height:1.25;font-family:'Ubuntu Mono';-inkscape-font-specification:'Ubuntu Mono';fill:#241b2b;fill-opacity:1;stroke-width:0.0693104"
+ x="35.898903"
+ y="11.198286"
+ id="text803519"><tspan
+ sodipodi:role="line"
+ id="tspan803517"
+ style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:'Ubuntu Mono';-inkscape-font-specification:'Ubuntu Mono';fill:#241b2b;fill-opacity:1;stroke-width:0.0693104"
+ x="35.898903"
+ y="11.198286">#5152E6</tspan></text>
+ <text
+ xml:space="preserve"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:2.77241px;line-height:1.25;font-family:'Ubuntu Mono';-inkscape-font-specification:'Ubuntu Mono';fill:#241b2b;fill-opacity:1;stroke-width:0.0693104"
+ x="35.898903"
+ y="23.136871"
+ id="text803523"><tspan
+ sodipodi:role="line"
+ id="tspan803521"
+ style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:'Ubuntu Mono';-inkscape-font-specification:'Ubuntu Mono';fill:#241b2b;fill-opacity:1;stroke-width:0.0693104"
+ x="35.898903"
+ y="23.136871">#9945C5</tspan></text>
+ </g>
+</svg>
--
GitLab