Skip to content

Style Guide

Color Palette

#005FF3

#000C52

#1F2446

#8D8F9D

#F7F8FE

#12BECC

#F58080

#FCAB79

#FFD266

#6A00E5

Typography

Headings

Home Page H1

Homepage H1, 120pt Roc Grotesk 100px line height, 0px kerning

Mobile Homepage H1

Homepage H1, 60pt Roc Grotesk 60px line height

H1

H1, 60pt Roc Grotesk 60px line height

Mobile H1

H1, 40pt Roc Grotesk 60px line height

H2

H2 - 34px Roc Grotesk, Medium 30px line height

Mobile H2

H2 Mobile - 30px Roc Grotesk, Medium 30px line height

H3

H3 - 30px Roc Grotesk, Medium 30px line height

Mobile H3

H3 Mobile - 24px Roc Grotesk, Medium 28px line height

H4

H4 - 24px Roc Grotesk, Medium 30px line height

Mobile H4

H4 Mobile - 20px Roc Grotesk, Medium 24px line height

Body Copy

Quote - 30px Roc Grotesk, Medium 35px line height

Regular Body Copy - Roc Grotesk 16px Regular - 24px Line Height. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam

Small/Mobile Body Copy - Roc Grotesk 14px Regular - 24px Line Height. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam

Lists

  • Unordered Bulleted List - Regular Body Copy
  • Unordered Bulleted List - Regular Body Copy
  • Unordered Bulleted List - Regular Body Copy
  • Unordered Bulleted List - Regular Body Copy
    • Unordered Bulleted Sub-List - Small Body Copy
    • Unordered Bulleted Sub-List - Small Body Copy
    • Unordered Bulleted Sub-List - Small Body Copy
  1. Numbered List - Regular Body Copy
  2. Numbered List - Regular Body Copy
    1. Numbered List - Regular Body Copy
  3. Numbered List - Regular Body Copy
  4. Numbered List - Regular Body Copy

UI Elements

Button Styles

Default

Load More

Hover

Load More

Focus

Load More

Disabled

Load More

Working Button

Load More

Dark Background

Default

Load More

Hover

Load More

Focus

Load More

Disabled

Load More

Working Button

Load More

Link Styles

Other Interactive Elements

Default

Department for Immunology

Hover

Department for Immunology

Post Blocks

Default

23.12.22 LIT scientist receives 1.250 million euros for a Reinhart Koselleck project.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo…

Hover

23.12.22 LIT scientist receives 1.250 million euros for a Reinhart Koselleck project.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo…

Default

TREG Therapy

Vestibulum venenatis lacus a metus vulputate, eu posuere orci laoreet. Suspendisse commodo risus a mauris malesuada mattis. Cras dui odio, venenatis non condimentum ac, tincidunt eu purus. Nam rhoncus, purus sed dictum tempor, lacus sem luctus nisl, vitae consectetur justo enim ut arcu. Mauris sed nulla a turpis cursus porta quis id erat.

Load More

Hover

TREG Therapy

Vestibulum venenatis lacus a metus vulputate, eu posuere orci laoreet. Suspendisse commodo risus a mauris malesuada mattis. Cras dui odio, venenatis non condimentum ac, tincidunt eu purus. Nam rhoncus, purus sed dictum tempor, lacus sem luctus nisl, vitae consectetur justo enim ut arcu. Mauris sed nulla a turpis cursus porta quis id erat.

Load More

Forms

Text Input Elements

Form Field

Form Field Active

Form Field with Focus

Form Field with Error Message

Helpful Warning Message

Completed Form Field

Success

Message Field

Dropdown

Radio Buttons

Check Box