Style Guide

TL;DR

• Read the latest style guide PDF
• Download the latest design package (all assets + PDF style guide)
• Glyph level blinking lights example
• Icon set (lucide)
• See the announcement blogpost
• Make your own posters and animations in accordance with style guide rules. Props to o1y!
• Contact the design team: 39c3-design@cccv.de

39C3's Design Concept

The design concept and example images are under CC0, so you are free to use them in your own creations. Kario is free to use for the 39C3 only.If you’d like to use the font for commercial use outside of 39C3, please get in touch with the font designer, Bernd Volmer, or obtain a license from his type foundry Show me Fonts. Officer Sans is free to use for the 39C3 and personal use. If you’d like to use the font for commercial use outside of 39C3, please get in touch with the font designer, Hannes von Döhren.

CSS

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

@font-face {
    font-family: 'KarioDuplexVar';
    src: URL('fonts/Kario39C3Var-Roman.ttf') format('truetype');
    src: URL('fonts/Kario39C3VarWEB-Roman.woff') format('woff');
    src: URL('fonts/Kario39C3VarWEB-Roman.woff2') format('woff2');
}

@font-face {
    font-family: 'OfficerSansCond';
    src: URL('fonts/OfficerSansCondWeb-Regular.woff') format('woff');
    src: URL('fonts/OfficerSansCondWeb-Regular.woff2') format('woff2');
}

@font-face {
    font-family: 'OfficerSansCond';
    font-weight: bold;
    font-style: italic;
    src: URL('fonts/OfficerSansCondWeb-BoldItalic.woff') format('woff');
    src: URL('fonts/OfficerSansCondWeb-BoldItalic.woff2') format('woff2');
}

@font-face {
    font-family: 'OfficerSansCond';
    font-weight: bold;
    src: URL('fonts/OfficerSansCondWeb-Bold.woff') format('woff');
    src: URL('fonts/OfficerSansCondWeb-Bold.woff2') format('woff2');
}

@font-face {
    font-family: 'OfficerSansCond';
    font-style: italic;
    src: URL('fonts/OfficerSansCondWeb-Italic.woff') format('woff');
    src: URL('fonts/OfficerSansCondWeb-Italic.woff2') format('woff2');
}

@font-face {
    font-family: 'OfficerSans';
    src: URL('fonts/OfficerSansWeb-Regular.woff') format('woff');
    src: URL('fonts/OfficerSansWeb-Regular.woff2') format('woff2');
}

@font-face {
    font-family: 'OfficerSans';
    font-weight: bold;
    font-style: italic;
    src: URL('fonts/OfficerSansWeb-BoldItalic.woff') format('woff');
    src: URL('fonts/OfficerSansWeb-BoldItalic.woff2') format('woff2');
}

@font-face {
    font-family: 'OfficerSans';
    font-weight: bold;
    src: URL('fonts/OfficerSansWeb-Bold.woff') format('woff');
    src: URL('fonts/OfficerSansWeb-Bold.woff2') format('woff2');
}

@font-face {
    font-family: 'OfficerSans';
    font-style: italic;
    src: URL('fonts/OfficerSansWeb-Italic.woff') format('woff');
    src: URL('fonts/OfficerSansWeb-Italic.woff2') format('woff2');
}

:root {
    --color-dark: #141414;
    --color-neutral: #faf5f5;
    --color-primary: #00ff00;
    --color-secondary: #9673ff;
    --color-additional-01: #ff3719;
    --color-additional-02: #66f2ff;

    --color-primary-tint-01: #009900;
    --color-primary-tint-02: #00be00;
    --color-primary-tint-03: #00d300;
    --color-primary-tint-04: #00ea00;
    --color-primary-tint-05: #a3ff90;
    --color-primary-tint-06: #ccffbe;
    --color-primary-tint-07: #ebffe5;

    --color-secondary-tint-01: #4d2eed;
    --color-secondary-tint-02: #5c33f4;
    --color-secondary-tint-03: #7952fe;
    --color-secondary-tint-04: #b69dfe;
    --color-secondary-tint-05: #d4c4fe;
    --color-secondary-tint-06: #efe7ff;
}

@keyframes font_weight_wave {
    from {
        font-weight: 10;
    } to {
        font-weight: 100;
    }
}

Changelog

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

• Version 2 (2025-11-09): Bugfix release
  • Fix a bug in Kario 39C3 Variable font where small wdth variation would produce slanted character.
  • Fix Pantone value for neon-orange. It ought to read 805 instead of ~804~.
  • Add a page to explain how to use the style guide in print.
• Version 1 (2025-10-31): Initial Release