Mey Styleguide

Quality Claim

Variant CSS Class Description
Speaking Quality.

.quality-claim

font-size: 34px, letter-spacing: 5px

Colors

Color Hex Less Variable Description Usage
#ddbcb0 @color-brand-women Women main color tbc
#5b6770 @color-brand-men Men main color tbc
#191919 @color-black Brand Black Logo, Text, buttons, icons, etc.
#b81d71 @color-brandprimary Brand Primary Sale, strike prices, store finder map marker
#5282a7 @color-customer-primary Customer color 1 Customer account benefits
#b7c9d3 @color-customer-secondary Customer color 2 Contentblocks that are not customer account related; my account, mails

Message Colors

Color Hex Less Variable Description
#9fd6aa @color-success Success Messages
#ebebeb @color-notification Info Messages
#ea8b8b @color-error Error Messages

Other Colors

Color Hex Less Variable Description Usage
#000000 @color-deep-black Deep Black
#ffffff @color-white White Main page background color; buttons etc.
#a7a7a7 @color-grey Grey
#515151 @color-darkgrey Dark Grey Text link hover / active
#d5d5d5 @color-mediumgrey Medium Grey Borders of form elements & tables; form labels; inactive main menu items
#ebebeb @color-boxgrey Box Grey Background color for benefits slider; info messages
#c1c1c1 @color-swatchgrey Swatch Grey Swatches (color, sizes)
#f5f5f5 @color-lightgrey Light Grey Background color for several layout block elements.

Breakpoints

Breakpoint Less Variable Abbreviation Grid Example Class
320px @screen__xxs
480px @screen__xs
640px @screen__s sm .g-col-sm-6
768px @screen__m md .g-col-md-3
1024px @screen__l lg .g-col-lg-8
1280px @screen__desktop
1440px @screen__xl xl .g-col-xl-3

Maximum width of centered layout container: 1600px

Grid System

.g-col-12 .g-col-sm-6 .g-col-lg-4 .g-col-xl-3
.g-col-12 .g-col-sm-6 .g-col-lg-4 .g-col-xl-3
.g-col-12 .g-col-sm-6 .g-col-lg-4 .g-col-xl-3
.g-col-12 .g-col-sm-6 .g-col-lg-12 .g-col-xl-3
.g-col-12 .g-col-md-6 .g-col-xl-4
.g-col-12 .g-col-md-6 .g-col-xl-4
.g-col-12 .g-col-xl-4
.g-col-6
.g-col-6

We use Bootstrap 4 Grid System with custom prefixes for class names.

Fonts

Font Example
CircularXX-Regular Subset

Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks oder Handgloves, um Schriften zu testen. Manchmal Sätze, die alle Buchstaben des Alphabets enthalten - man nennt diese Sätze »Pangrams«.

Sehr bekannt ist dieser: The quick brown fox jumps over the lazy old dog. Oft werden in Typoblindtexte auch fremdsprachige Satzteile eingebaut (AVAIL® and Wefox™ are testing aussi la Kerning), um die Wirkung in anderen Sprachen zu testen. In Lateinisch sieht zum Beispiel fast jede Schrift gut aus.

Quod erat demonstrandum. Seit 1975 fehlen in den meisten Testtexten die Zahlen, weswegen nach TypoGb. 204 § ab dem Jahr 2034 Zahlen in 86 der Texte zur Pflicht werden. Nichteinhaltung wird mit bis zu 245 € oder 368 $ bestraft.

Genauso wichtig in sind mittlerweile auch Âçcèñtë, die in neueren Schriften aber fast immer enthalten sind. Ein wichtiges aber schwierig zu integrierendes Feld sind OpenType-Funktionalitäten. Je nach Software und Voreinstellungen können eingebaute Kapitälchen, Kerning oder Ligaturen (sehr pfiffig) nicht richtig dargestellt werden. Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks

äÄöÖüÜß

© Mey

CircularXX-Bold Subset

Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks oder Handgloves, um Schriften zu testen. Manchmal Sätze, die alle Buchstaben des Alphabets enthalten - man nennt diese Sätze »Pangrams«.

Sehr bekannt ist dieser: The quick brown fox jumps over the lazy old dog. Oft werden in Typoblindtexte auch fremdsprachige Satzteile eingebaut (AVAIL® and Wefox™ are testing aussi la Kerning), um die Wirkung in anderen Sprachen zu testen. In Lateinisch sieht zum Beispiel fast jede Schrift gut aus.

Quod erat demonstrandum. Seit 1975 fehlen in den meisten Testtexten die Zahlen, weswegen nach TypoGb. 204 § ab dem Jahr 2034 Zahlen in 86 der Texte zur Pflicht werden. Nichteinhaltung wird mit bis zu 245 € oder 368 $ bestraft.

Genauso wichtig in sind mittlerweile auch Âçcèñtë, die in neueren Schriften aber fast immer enthalten sind. Ein wichtiges aber schwierig zu integrierendes Feld sind OpenType-Funktionalitäten. Je nach Software und Voreinstellungen können eingebaute Kapitälchen, Kerning oder Ligaturen (sehr pfiffig) nicht richtig dargestellt werden. Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks

äÄöÖüÜß

© Mey

CircularXX-BoldItalic Subset

Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks oder Handgloves, um Schriften zu testen. Manchmal Sätze, die alle Buchstaben des Alphabets enthalten - man nennt diese Sätze »Pangrams«.

Sehr bekannt ist dieser: The quick brown fox jumps over the lazy old dog. Oft werden in Typoblindtexte auch fremdsprachige Satzteile eingebaut (AVAIL® and Wefox™ are testing aussi la Kerning), um die Wirkung in anderen Sprachen zu testen. In Lateinisch sieht zum Beispiel fast jede Schrift gut aus.

Quod erat demonstrandum. Seit 1975 fehlen in den meisten Testtexten die Zahlen, weswegen nach TypoGb. 204 § ab dem Jahr 2034 Zahlen in 86 der Texte zur Pflicht werden. Nichteinhaltung wird mit bis zu 245 € oder 368 $ bestraft.

Genauso wichtig in sind mittlerweile auch Âçcèñtë, die in neueren Schriften aber fast immer enthalten sind. Ein wichtiges aber schwierig zu integrierendes Feld sind OpenType-Funktionalitäten. Je nach Software und Voreinstellungen können eingebaute Kapitälchen, Kerning oder Ligaturen (sehr pfiffig) nicht richtig dargestellt werden. Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks

äÄöÖüÜß

© Mey

Bota Regular

Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks oder Handgloves, um Schriften zu testen. Manchmal Sätze, die alle Buchstaben des Alphabets enthalten - man nennt diese Sätze »Pangrams«.

Sehr bekannt ist dieser: The quick brown fox jumps over the lazy old dog. Oft werden in Typoblindtexte auch fremdsprachige Satzteile eingebaut (AVAIL® and Wefox™ are testing aussi la Kerning), um die Wirkung in anderen Sprachen zu testen. In Lateinisch sieht zum Beispiel fast jede Schrift gut aus.

Quod erat demonstrandum. Seit 1975 fehlen in den meisten Testtexten die Zahlen, weswegen nach TypoGb. 204 § ab dem Jahr 2034 Zahlen in 86 der Texte zur Pflicht werden. Nichteinhaltung wird mit bis zu 245 € oder 368 $ bestraft.

Genauso wichtig in sind mittlerweile auch Âçcèñtë, die in neueren Schriften aber fast immer enthalten sind. Ein wichtiges aber schwierig zu integrierendes Feld sind OpenType-Funktionalitäten. Je nach Software und Voreinstellungen können eingebaute Kapitälchen, Kerning oder Ligaturen (sehr pfiffig) nicht richtig dargestellt werden. Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks

äÄöÖüÜß

© Mey

Bota Bold

Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks oder Handgloves, um Schriften zu testen. Manchmal Sätze, die alle Buchstaben des Alphabets enthalten - man nennt diese Sätze »Pangrams«.

Sehr bekannt ist dieser: The quick brown fox jumps over the lazy old dog. Oft werden in Typoblindtexte auch fremdsprachige Satzteile eingebaut (AVAIL® and Wefox™ are testing aussi la Kerning), um die Wirkung in anderen Sprachen zu testen. In Lateinisch sieht zum Beispiel fast jede Schrift gut aus.

Quod erat demonstrandum. Seit 1975 fehlen in den meisten Testtexten die Zahlen, weswegen nach TypoGb. 204 § ab dem Jahr 2034 Zahlen in 86 der Texte zur Pflicht werden. Nichteinhaltung wird mit bis zu 245 € oder 368 $ bestraft.

Genauso wichtig in sind mittlerweile auch Âçcèñtë, die in neueren Schriften aber fast immer enthalten sind. Ein wichtiges aber schwierig zu integrierendes Feld sind OpenType-Funktionalitäten. Je nach Software und Voreinstellungen können eingebaute Kapitälchen, Kerning oder Ligaturen (sehr pfiffig) nicht richtig dargestellt werden. Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks

äÄöÖüÜß

© Mey

We use subsets of Circular Webfonts for saving bandwidth and improving performance.

Text elements

Element HTML Tag Example
H1 h1

Das Layout ist fertig, der Text lässt auf sich warten.

H2 h2

The quick brown fox jumps over the lazy old dog

H3 h3 - h6

Ein kleines Bächlein namens Duden fließt durch ihren Ort

Paragraph p

Manchmal benutzt man Worte wie Hamburgefonts.

Bold text strong

The quick brown fox jumps over the lazy old dog

Advanced text em

Ein wichtiges aber schwierig zu integrierendes Feld sind OpenType-Funktionalitäten.

Unordered list ul
  • Weit hinten, hinter den Wortbergen,
  • fern der Länder Vokalien und Konsonantien
    • leben die Blindtexte.
    • Abgeschieden wohnen sie in Buchstabhausen
  • an der Küste des Semantik
Ordered list ol
  1. Weit hinten, hinter den Wortbergen,
  2. fern der Länder Vokalien und Konsonantien
    • leben die Blindtexte.
    • Abgeschieden wohnen sie in Buchstabhausen
  3. an der Küste des Semantik

Headlines H4 - H6 have same styling like H3.

Text examples

Verführerische Dessous für die Festtage.

Black is Beautiful

Mit Schwarz landen Sie garantiert immer einen Volltreffer. Gerade zur dunklen Jahreszeit ist der All-Time-Favourit unter den Farben besonders beliebt. Kombiniert mit hochwertiger Spitze und verführerischen Transparenzen ist die schwarze Wäsche quasi das Äquivalent zum klassischen "kleinen Schwarzen". So können Sie einen klassischen, zeitlosen, verführerischen Look erschaffen, der niemals aus der Mode kommt. Mit anschmiegsamen Dessous aus unserer Serie Luxurious sind Sie ein echter Eyecatcher - nicht nur für die Festtage.

Ein Negligé kann sowohl ein verführerisches Outfit für einen romantischen Abend, ein elegantes Nachthemd oder auch das sexy Unterkleid unter Ihrem Outfit sein, bei dem verführerisch die hochwertige Spitze hervorscheint. Ein Negligé zeigt nicht zuviel, aber auch nicht zu wenig Haut.

Icons

  • Search
  • Heart
  • User
  • Bag
  • Sort
  • Filter
  • Down
  • Up
  • Left
  • Right
  • Plus
  • Close
  • Refresh
  • Check
  • Marker
  • Facebook
  • Instagram
  • Twitter
  • YouTube
  • Pinterest

Forms

Buttons & Links

Pagebuilder Buttons

Pagebuilder Button Link Types

Template Buttons

Warenkorb anzeigen
Alternative Text

Hero Teaser Element

Lorem ipsum dolor

Content Slider

Hero Slider

Headline

Mit etwas Text.

Amasty Custom Forms

Images with aligned Buttons

center alignment
left alignment
right alignment