Allocatus Style Guide

 

Logos

 

SVG

allocatus-negative

Allocatus blue

 

allocatus-positive

Allocatus silver

 

allocatuslogo

Allocatus transparent

 

PNG

allocatus-negative-icon

Allocatus Quadrat 318 x 318

 

allocatus-positive-icon

Allocatus Quadrat transparent 318 x 318 

 

favicon

Allocatus Favicon 33 x 32 

Clean 6 Modul-Library

https://www.helpfulhero.com/clean6/module-library

 

Colors

Why are on this website different colors than in the software itself? https://holert.atlassian.net/wiki/spaces/AL/pages/808321025/UX+UI+Design#Colors

Primary (Allocatus-blue): #102d7b
 
Secondary (Baby-blue): #39a3f5
 
Background #1 (Light grey): #FAFAFA 
 
Background #2 (Grey): #425b76 
 
Font-Color: #444444 

Typography

Fonts, sizes, colors, and all that good stuff. A great resource for keeping your type sizing looking tight is to reference Type Scale.

 

H1 Heading

Montserrat Medium 63px | 30px - Normal - Line Height 1,2

H2 Heading

Montserrat Medium 42px | 30px - Normal - Line Height 1,3

H3 Heading

Montserrat Medium 32px | 25px - Normal - Line Height 1,3

H4 Heading

Montserrat Medium 22px | 20px - None - Line Height 1,3
H5 Heading
Montserrat Medium 18px - Uppercase - Line Height 1,3
H6 Heading
Montserrat Regular 16px | 16px - Normal - Line Height 1,1

 

Paragrah

Paragrah of text lorem ipsum dolor amet cornhole mixtape raw denim, vexillologist wayfarers four loko aesthetic pinterest offal trust fund viral cred meggings photo booth kinfolk. Marfa iceland godard shoreditch kogi banjo viral listicle. Knausgaard tbh vinyl tumblr distillery godard literally direct trade. VHS next level raclette kinfolk shabby chic street art bushwick kickstarter drinking vinegar pinterest craft beer tote bag hella chillwave. Bitters paleo whatever iceland. Tofu messenger bag vaporware, godard quinoa letterpress art party.

Montserrat Regular 18px | 16px - None - Line Height 1,5

 

Bullet points

  • Everyone loves bullet points
  • Everyone loves bullet points
  • Everyone loves bullet points
Montserrat Regular 16px | 16px - None - Line Height 1,2

 

Blockquote

This is a Blockquote example poutine la croix tacos master cleanse truffaut. Pinterest banh mi heirloom, polaroid gastropub microdosing messenger bag cred try-hard freegan. 

Montserrat Regular 24px | 18px - None - Line Height 1,2

Buttons & CTAs

You can set up various buttons style to help visually communicate primary, secondary, and tertiary actions you want a visitor to take. 

Demo vereinbaren  

Class: cta-primary 

30 Tage testen  

Class: cta-secondary

10 Tricks herunterladen

Class: cta-tertiary

Forms