• Deutsch: Dieses Seite ist noch nicht ins Deutsche übersetzt worden.

Style Guide

TL;DR

40C3's Design Concept

The design concept and assets are under CC0, so you are free to use them in your own creations. The used fonts, Jersey 10 and Hack have their own licenses. Those are included in the fonts folder.

CSS

You can include the following CSS to get started with the style guide:

@font-face {
    font-family: 'jersey10';
    src: URL('fonts/jersey-10-latin-400-normal.ttf') format('truetype');
    src: URL('fonts/jersey-10-latin-400-normal.woff') format('woff');
    src: URL('fonts/jersey-10-latin-400-normal.woff2') format('woff2');
}

@font-face {
    font-family: 'Hack';
    src: URL('fonts/Hack.ttf') format('truetype');
}

@font-face {
    font-style: italic;
    font-family: 'Hack';
    src: URL('fonts/Hack-Italic.ttf') format('truetype');
}

@font-face {
    font-weight: bold;
    font-family: 'Hack';
    src: URL('fonts/Hack-Bold.ttf') format('truetype');
}

@font-face {
    font-weight: bold;
    font-style: italic;
    font-family: 'Hack';
    src: URL('fonts/Hack-BoldItalic.ttf') format('truetype');
}


:root {
    --color-dark: #001300;
    --color-neutral: #ebedf0;
    --color-primary: #75b44b;
    --color-additional-01: #15ada3;
    --color-additional-02: #9fa4e8;
    --color-additional-03: #c892d6;
    --color-additional-04: #ee5da2;
    --color-additional-05: #ea6f82;
    --color-additional-06: #f88a30;
    --color-additional-07: #ffbc40;

}

Changelog

In case we need to fix mistakes or add additional content to the style guide, you’ll find those changes here: