styling
We generally try to retain a certain style and temperature. Firstly, our UI is styled for dark mode in two temperatures: warm and cold. Warm is used for general purpose (e.g. homepage), while cold is targeting a more serious tone. There are always a few things to keep in mind when designing for the web:
- What am I trying to tell the viewer? Is this necessary?
- Can I explain this through an icon? Do I need text?
- Am I following the EU Accessibility Act?
- How does it look to a first-time visitor? Can I understand it without any context?
Additionally, we aim to use vanilla HTML, CSS and at most precompiled TypeScript. Avoid as much scripting as possible, because almost everything is possible with purely HTML and CSS. When scripting is truly necessary, try your best to make the site as accessible as possible for those with JavaScript disabled. This also means you shouldn't use any intricate frameworks like React or Angular. Pre-rendering on the server-side is our golden standard.
mobile design
Most website visitors come from a mobile device, but unfortunately they are commonly forgotten. To combat this issue, we have written strict mobile design guidelines.
1. Design with mobile in mind
The easiest way to develop for mobile is by keeping it in mind. By that, we mean to take the question "How would this look on mobile?" into consideration. For example: what happens to my navigation bar? Are the margins around my text too large? [...] But always: even if tempting, don't forget desktop users.
2. Mobile and desktop layout
The design will inevitably become more vertical. Avoid this "vertical" design language on desktop: use space effectively. Additionally, horizontal overflow immensely hurts your viewer experience. Find the causes and eliminate them as early as possible.
Browsers like Safari (since iOS 26) put their interaction elements fixed on the webpage rather than separated. Keep a little empty padding at the bottom to fix this issue.
3. App language
Our design language is based around warmth, orange and shiny things. This curates a specific feeling in the viewer that we want to intensify. Therefore, we aim to use mobile iOS app design language instead of website language.
interactions
Points of interaction can be buttons, secondary buttons, hyperlinks, icons, or even entire widgets. It is important to pick the right kind for the right job. Choice also lies within the temperature of the page: cold is very serious, warm is casual. We source our icons from FontAwesome. Icons should not be pixelated, as they are the contrast between the pixel Minecraft font and a smooth modern style.
Standard interaction behaviour is as follows: when linking to a different website entirely, it should
open in a new tab. This is always marked with a FontAwesome fa-arrow-up-right-from-square
icon.
buttons
The two kinds of buttons, primary and secondary, are mainly to be used in something that drags immediate attention, such as a navigation bar.
- Primary buttons are meant to be used sparingly and for things that are the most important on a page. Keeping mobile design into account, when a primary button is minimized to merely its icon, it should become a secondary button.
links & icons
widgets
font usage
colors
Mist
e1e1e1
Shiny
565051
Graphite
3e3e3e
Ash
0d0d0d
Coal
0b0606
Gold Ray
fff4d9
SnackBag
ffd979
Fire
ffb35c
Flame
f4aa59
Ember
140a0a
Powder
e9f1ff
Sea
dfe5f3
Blue
37457a
Slate
2b2a34