UI Style Guide

01. Farben

Hauptfarbe 1 // Purple

#5B2182

Hauptfarbe 2 // Celestial

#009FE3

Sekundärfarbe 1 // Gold

#FED303

Sekundärfarbe 2 // Pink

#E7247E

Sekundärfarbe 3 // Fandango

#B5067F

Sekundärfarbe 4 // Chilli

#E53012

Sekundärfarbe 5 // Persimmon

#EA5D0B

Sekundärfarbe 6 // Lapis

#0057A2

02.Typography

Fonts/Font Weight

Nunito Sans (Black Italic)

Roboto (Medium)

Roboto (Bold)

Roboto (Black Italic)

Überschriften

H1 Überschrift mit Link

H2 Überschrift mit Link

H3 Überschrift mit Link

H4 Überschrift mit Link

H5 Überschrift mit Link

H6 Überschrift mit Link

Paragraph

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula Link eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Donec quam felis, ultricies nec, pellentesque eu, pretium Link quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac.

Listen // ungeornete Liste & geordnete Liste

Cum sociis natoque Link penatibus et magnis dis parturient montes
Donec pede justo, fringilla vel, aliquet nec, Link vulputate eget, arcu
In enim justo Link rhoncus ut imperdiet a venenatis vitae justo

Cum sociis natoque Link penatibus et magnis dis parturient montes
Nascetur ridiculus mus donec quam felis ultricies nec pellentesque eu
In enim justo Link rhoncus ut imperdiet a venenatis vitae justo

03.Icons und Logos

Icons

arrow-down

arrow-right

facebook

instagram

linked-in

list-plus

list-x

pintrest

programm_1

programm_2

snapchat

tiktok

twitter

xing

youtube

easy-speech

04. Button & Links

Standard buttons

Additional line

Standard Textlink

Donec quam felis, ultricies nec, pellentesque eu, pretium Standard Link im Text quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac.