Foundations

Colors

Primary

Die Primary Colors werden immer auf hellem Hintergrund verwendet. Tamron Blue sollte eher als Akzentfarbe verwendet werden. Beide Farben werden i.d.R. nicht als Hintergrundfarbe großer Flächen etc. verwendet, da dem Kunden die Designs sonst zu dunkel werden.

Tamron blue
Dark Grey

Secondary

Die Secondary Colors sind in den meisten Fällen als Hintergrundfarben oder ggf. Textfarben zu nutzen.

Grey
Light Grey 1
Light Grey 2
Light Grey 3
Light Yellow
Light Brown

Tertiary

Die Tertiary Colors sind die Ampelfarben für Check-, Warn-, und Fehlermeldungen und finden sonst keine Anwendung.

Success
Warning
Danger

Typography

Headings

Headline H1

Headline H2

Headline H3

Headline H4

Headline H5
Headline H6

Copy

Standard

Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Maecenas faucibus mollis interdum. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Etiam porta sem malesuada magna mollis euismod. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cras justo odio, dapibus ac facilisis in, egestas eget quam.

Small

Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Maecenas faucibus mollis interdum. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Etiam porta sem malesuada magna mollis euismod. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cras justo odio, dapibus ac facilisis in, egestas eget quam.

Large

Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Maecenas faucibus mollis interdum. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Etiam porta sem malesuada magna mollis euismod. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cras justo odio, dapibus ac facilisis in, egestas eget quam.

Buttons

link

Dropdown

Textlinks

Nulla vitae elit libero, a pharetra augue . Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac cursus commodo, a pharetra augue , ut fermentum massa justo sit amet risus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor a pharetra augue .

Storyblok URL Helper

fullSlugToUrlWithLocale

/de-DE/pages/test/123 = /de-DE/test/123
de-DE/pages/test/123 = de-DE/test/123
/en/pages/test/123 = /test/123
en/pages/test/123 = test/123
/en/pages/ = /
/en = /
/en-GB = /en-GB
/en-GB/test = /en-GB/test

fullSlugToUrlWithoutLocale

/de-DE/pages/test/123 = /test/123
de-DE/pages/test/123 = test/123
/en/pages/test/123 = /test/123

getLocaleFromFullSlug

/de-DE/pages/test/123 = de-DE
de-DE/pages/test/123 = de-DE
/en/pages/test/123 = en