Mey Styleguide
Logo
Default
Women
Men
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 |
|
| Ordered list | ol |
|
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
Forms
Content Slider
