i.AM Lab Web Style Guide

Some examples to visualise how to use the i.AM Lab styles on the website.

Font

Epilogue, 400 sans-serif Normal
+
‍Epilogue, 600 sans-serif semi bold (Use 'B' function in rich texts)


Use the 'italic' button to highlight something.

Font sizes
Home

Titles Home 9vw (use 'Hero Text Class')

Subpages

Titles 96/64/40px (use 'Project Details Title' class)

Subtitles 36/32/28px (use 'H4 BodyHeading' class)

This is a Body Text 24/20px. This is a Body Text 24/20px. This is a Body Text 24/20px. This is a Body Text 24/20px. This is a Body Text 24/20px. This is a Body Text 24/20px. This is a Body Text 24/20px. This is a Body Text 24/20px. This is a Body Text 24/20px. This is a Body Text 24/20px. This is a Body Text 24/20px.  (Use 'Paragraph' class)

This is a Title of a Body Text.
This is a Body Text. This is a Body Text. This is a Body Text. This is a Body Text. This is a Body Text. This is a Body Text. This is a Body Text. This is a Body Text. This is a Body Text. This is a Body Text. This is a Body Text. This is a Body Text.

Use the 'Abstand Fliesstext' symbol for spacing within text.

“Use 'quote text H4 for quotes. ”

Call to action

Lists | Bullet Points

Use bullet points in coral for a list

Line
Logo
Lab
Lab (Block)
Without Lab
Colors
Primary Colors

Background and shapes
Primarily used for backgrounds, and shapes in a presentation deck. Text Primary text color is black (on white or grey background). White text color is used occasionally (on black background), for example in a presentation deck.

Black
#000000

White
#FFFFFF

Light Coral is used for marking words, further explained in the Typography section.
‍
Graphic elements 
Light Coral and Petrol are used for components, graphic elements and hyperlink highlights (animation).

Secondary Colors

Founded on our own Colorverse follow-up project NFWe, we choose this contrast color concept as secondary colors:

Coral
#E87273

Petrol
#42948F

Additional Grey as Secondary Background Color:

normal Grey
#B6B6B6


light Grey
#DBDBDB

Spacing

Before and after Quote: Symbol called “Abstand Fliesstext”

Before and after standard text: Symbol called “Doppelter Abstand Fliesstext”


Before and after Picture or Illustration/Graphics:
Margin 60 above and below the picture