- Work in progress
- This style guide is still under development.
- Not all resources may be available yet, explanations and examples
- may be missing and things may change without notice.
-
Color Guide
The design consists of two sets of colors: lightmode and darkmode.
diff --git a/styleguide/demopage/index.html b/styleguide/demopage/index.html
index 0a18eb3..c005f6f 100644
--- a/styleguide/demopage/index.html
+++ b/styleguide/demopage/index.html
@@ -100,15 +100,6 @@
- Work in progress
- This style guide is still under development.
This page contains examples for various text-components and fonts, as
@@ -241,7 +232,7 @@
- Work in progress
- This style guide is still under development.
+ We wanted images to (optionally) have a glitchy, distorted appearance.
+ To achieve this, we apply two effects to an image. Firstly, bright
+ vertical edges in an image are highlighted by adding a parallel line
+ in our primary color to their left and in our secondary color to their
+ right hand side. Secondly, the image gets distorted by offsetting
+ different parts of the image horizontally, seemingly by random
+ amounts, but it is actually somewhat osscilating.
+
+ This page utilizes a small bit of Javascript to add an SVG filter to
+ an image of your choice. The resulting image will then be previewed
+ further below and can be downloaded using a button at the end of the
+ page. Not all browsers' canvas implementations generate the same
+ outcome, especially firefox tends to create wrong results, so we
+ recommend using a chromium based browser for creating these exports.
+
Work in progress
- This style guide is still under development. Very rough draft!
To add the glow to something of a given height (or fontsize), here
diff --git a/styleguide/iconography/index.html b/styleguide/iconography/index.html
index bffde2b..cd2d3ae 100644
--- a/styleguide/iconography/index.html
+++ b/styleguide/iconography/index.html
@@ -100,16 +100,6 @@
- Work in progress
- This style guide is still under development.
Icons can help with conveying meaning or to help with directions. In
@@ -156,47 +146,75 @@
>
+ This page contains an overview of all currently designed icons.
- Work in progress
- This style guide is still under development.
This page and subpages are meant to guide you through our design.
diff --git a/styleguide/logo/index.html b/styleguide/logo/index.html
index db7c66f..4ffa366 100644
--- a/styleguide/logo/index.html
+++ b/styleguide/logo/index.html
@@ -100,16 +100,6 @@
- Work in progress
- This style guide is still under development.
One of the primary design elements of any design is of course its
diff --git a/styleguide/typography/index.html b/styleguide/typography/index.html
index 8d6f882..ae08f6a 100644
--- a/styleguide/typography/index.html
+++ b/styleguide/typography/index.html
@@ -100,16 +100,6 @@
- Work in progress
- This style guide is still under development.
The design contains multiple typefaces, which are intended to be used
- Not all resources may be available yet, explanations and examples
- may be missing and things may change without notice.
- Demopage
- Not all resources may be available yet, explanations and examples
- may be missing and things may change without notice.
- Image Generator
+ Glow
+ This page is still under development.
Not all resources may be available yet, explanations and examples
may be missing and things may change without notice.
Glow
- Darkmode
- Not all resources may be available yet, explanations and examples
- may be missing and things may change without notice.
- Iconography
Icon Overview
+
+ Back to the Iconography
+
- Not all resources may be available yet, explanations and examples
- may be missing and things may change without notice.
- Styleguide Easterhegg 2025
- Not all resources may be available yet, explanations and examples
- may be missing and things may change without notice.
- Logo
- Not all resources may be available yet, explanations and examples
- may be missing and things may change without notice.
- Typography