Style Guide
TL;DR
- Read the latest style guide PDF
- Download the latest design assets
-
Download the latest design package (all assets + PDF style guide)
- Contact the design team: 38c3-design@cccv.de
38C3's Design Concept
The designer dream team of Euler Void and Robokid // Luis F. Masallera has poured all their skill and enthusiasm into a splendour of colour and images that will brighten 38C3.
This style guide describes all the visual ideas behind 38C3’s design concept of elongating blob organisms against a backdrop of digital precision. It shows how logos, colours, fonts, icons and all the other graphic elements of the 38C3 design should work together.
On this page we provide a PDF with example images and descriptions and an archive of assets with all the fonts you need, ready-made lookup tables (LUTs) to help tint your images to fit the scheme, web banners, logos and icons (in vector and raster formats), as well as a few freshly hatched elongating blobs. For those who want to go beyond making static content, there are Blender files that allow you to render your own animations matching the design. You can also download both the PDF and the asset archive as a complete bundle.
The design concept and example images are under CC0, so you are free to use them in your own creations. The fonts and icons used are subject to their respective license terms, as included in the asset archive.
CSS
You can include the following CSS to get started with the style guide:
@font-face {
font-family: 'pilowlava';
src: URL('fonts/pilowlava/Fonts/webfonts/Pilowlava-Regular.woff2') format('woff2');
}
@font-face {
font-family: 'spacegrotesk';
src: URL('fonts/space-grotesk-1.1.4/webfont/SpaceGrotesk-Regular.woff2') format('woff2');
src: URL('fonts/space-grotesk-1.1.4/webfont/SpaceGrotesk-Bold.woff2') format('woff2');
src: URL('fonts/space-grotesk-1.1.4/webfont/SpaceGrotesk-Light.woff2') format('woff2');
src: URL('fonts/space-grotesk-1.1.4/webfont/SpaceGrotesk-Medium.woff2') format('woff2');
src: URL('fonts/space-grotesk-1.1.4/webfont/SpaceGrotesk-SemiBold.woff2') format('woff2');
}
@font-face {
font-family: 'space-mono';
src: URL('fonts/space-mono/SpaceMono-Regular.ttf') format('truetype');
}
@font-face {
font-family: 'uncut-sans';
src: URL('fonts/uncut-sans/Webfonts/UncutSans-Regular.woff2') format('woff2');
}
:root {
--color-primary: #FF5053;
--color-highlight: #FEF2FF;
--color-accent-a: #B2AAFF;
--color-accent-b: #6A5FDB;
--color-accent-c: #29114C;
--color-accent-d: #261A66;
--color-accent-e: #190B2F;
--color-background: #0F000A;
}
Changelog
In case we need to fix mistakes or add additional content to the style guide, you’ll find those changes here: