Design files have been placed in a Google Drive folder.

Logo

The logo has been made in Illustrator, the vector files can be found in the Google Drive.

Color palette

The colors have not been translated to any other color space such as CMYK, PMS, ... If needed, with the right (print) testing, feel free to add these additional color spaces. Within the Creative Cloud app, a .ase file has been uploaded in the Google Drive that can be used. This file can be imported in Illustrator for example. In the Swatches panel, you can click on the hamburger icon, go to Open Swatch Library > Other Library and select the .ase file. The color library will be shown and ready to use. This way you can ensure you're using the right colors.

• Dark: #0B1147 - used for background on the website.
• Purple dark: #331F9F
• Purple light: #7C6DF1
• Yellow: #FCDC3A
• Mint: #A3F7E9
• Pink: #E598C9
• Red: #DF7668

Little sidenote: would be very helpful if there was a way to add these colors as global styles in the Vue framework on the frontend. This way, errors could be avoided. For example:

$color-dark: #0B1147;
$color-purpleDark: #331F9F;
$color-purpleLight: #7C6DF1;
$color-yellow: #FCDC3A;
$color-mint: #A3F7E9;
$color-pink: #E598C9;
$color-red: #DF7668;

Fonts

For fonts we have used Montserrat throughout the whole website. To see specific typography, you can visit the live website or take a look at our screen designs on Figma. You can use Montserrat freely under the Open Font License, download link can be found on Google Fonts.

Badges

Template

To create new badges, you can start from the existing Illustrator file in the Google Drive file, a template has been made as well, which has the right artboard and shape size for each shape. There are a few guidelines you can follow:

1. Only use colors from the color palette, white can be used as well if necesarry.
2. Don't use the dark color as a background for the badges, the website itself uses this color for its background.
3. Strokes are used in the dark color.
4. Strokes width is 5pt (on the artboard sizes from the template files).
5. Illustrations are simple and do not contain highlights, shadows.

Shapes

There are four different shapes the badges can be portrayed in. Note that all those shapes have the same height. The width varies a little, the hexagon is smaller whilst the triangle has a bigger width.

• Circle
• Square
• Triangle
• Hexagon

Screendesigns

Screendesigns can be viewed on Figma. This Figma is a view-only file and is the final design which was made during osoc20. If you can want to contribute further on these files, you can duplicate the Figma file and share the new file.

Social Media

During osoc20, we created several social media accounts, however besides the general design (colors), there are no guidelines described. Feel free to contribute to specific guidelines so our social media looks magical!