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 | Tailwind Classes | Description |
---|---|---|---|
#ddbcb0 | text-women, bg-women, border-women | Women main color | |
#5b6770 | text-men, bg-men, border-men | Men main color | |
#191919 | text-black, bg-black, border-black | Brand Black | |
#ffffff | text-white, bg-white, border-white | White Color | |
#b81d71 | text-brand, bg-brand, border-brand | Brand Primary | |
#ecf8ff | text-blue-50, bg-blue-50, border-blue-50 | ||
#b7c9d3 | text-blue-100, bg-blue-100, border-100 | ||
#5282a7 | text-blue-200, bg-blue-200, border-blue-200 | ||
#8b9d82 | text-sustainability, bg-sustainability, border-sustainability | Sustainability Color | |
#9fd6aa | text-success-primary, bg-success-primary, border-success-primary | Success Messages | |
#def1e2 | text-success-secondary, bg-success-secondary, border-success-secondary | Success Messages | |
#ea8b8b | text-error-primary, bg-error-primary, border-error-primary | Error Messages | |
#fde4e4 | text-error-secondary, bg-error-secondary, border-error-secondary | Error Messages | |
#f5f5f5 | text-gray-50, bg-gray-50, border-gray-50 | Backgrounds | |
#ebebeb | text-gray-100, bg-gray-100, border-gray-100 | Backgrounds | |
#d5d5d5 | text-gray-200, bg-gray-200, border-gray-200 | Borders, Backgrounds | |
#c4c4c4 | text-gray-300, bg-gray-300, border-gray-300 | Borders | |
#a7a7a7 | text-gray-400, bg-gray-400, border-gray-400 | Progressbar, Swatches | |
#8c8c8c | text-gray-450, bg-gray-450, border-gray-450 | Disabled Buttons | |
#787878 | text-gray-500, bg-gray-500, border-gray-500 | Link Hover State | |
#515151 | text-gray-600, bg-gray-600, border-gray-600 | Pager Hover State | |
#3b3b3b | text-gray-700, bg-gray-700 | Default Hyvä templates (not used) |
Breakpoints
Breakpoint | Tailwind | Examples | Available Types |
---|---|---|---|
410px | xxs | xxs:m-0, max-xxs:pt-5 | Min / Max |
480px | xs | xs:m-5, max-xs:pt-5 | Min / Max |
640px | sm | sm:block, max-sm:hidden | Min / Max |
768px | md | md:block, max-md:hidden | Min / Max |
1024px | lg | lg:block, max-lg:hidden | Min / Max |
1280px | xl | xl:block, max-xl:hidden | Min / Max |
1440px | bp-2xl | bp-2xl:block, max-2xl:hidden | Min / Max |
1600px | bp-3xl | bp-3xl:block | Min |
1920px | bp-4k | bp-4k:block | Min |
Special Breakpoints
Breakpoint | Tailwind | Examples |
---|---|---|
(min-width: 768px) and (max-height: 959px) | pdp-md | pdp-md:m-0 |
(min-width: 768px) and (min-height: 960px) | pdp-lg | pdp-lg:m-5 |
(min-width: 768px) and (max-height: 1366px) | stores-tablet | stores-tablet:block |
(any-hover: none) | touch | touch:block |
(any-hover: hover) | no-touch | no-touch:block |
(any-hover: none), (any-hover: hover) and (max-width: 1279px) | nav-mobile | nav-mobile:block |
(any-hover: hover) and (min-width: 1280px) | nav-desktop | nav-desktop:block |
Grid System
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 |
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 |
Ein kleines Bächlein namens Duden fließt durch ihren Ort |
H4 | h4 |
Ein kleines Bächlein namens Duden |
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. |
Check list | ul |
|
Unordered list | ul |
|
Ordered list | ol |
|
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
Featured Products
Amasty Custom Forms
Accordion
Hallo. Ich bin ein kleiner Blindtext.
Hallo. Ich bin ein kleiner Blindtext. Und zwar schon so lange ich denken kann. Es war nicht leicht zu verstehen, was es bedeutet, ein blinder Text zu sein: Man ergibt keinen Sinn. Wirklich keinen Sinn. Man wird zusammenhangslos eingeschoben und rumgedreht – und oftmals gar nicht erst gelesen. Aber bin ich allein deshalb ein schlechterer Text als andere? Na gut, ich werde nie in den Bestsellerlisten stehen. Aber andere Texte schaffen das auch nicht. Und darum stört es mich nicht besonders blind zu sein. Und sollten Sie diese Zeilen noch immer lesen, so habe ich als kleiner Blindtext etwas geschafft, wovon all die richtigen und wichtigen Texte meist nur träumen.
Small-Letter
dieser text hat eigentlich gar keinen wirklichen inhalt. aber er hat auch keine relevanz, und deswegen ist das egal. er dient lediglich als platzhalter. um mal zu zeigen, wie diese stelle der seite aussieht, wenn ein paar zeilen vorhanden sind. ob sich der text dabei gut fühlt, weiß ich nicht. ich schätze, eher nicht, denn wer fühlt sich schon gut als platzhalter. aber irgendwer muss diesen job ja machen und deshalb kann ich es nicht ändern . ich könnte dem text höchstens ein bisschen gut zureden, dass er auch als platzhalter eine wichtige rolle spielt und durchaus gebraucht wird. könnte mir vorstellen, dass ihm das gut tut. denn das gefühl gebraucht zu werden tut doch jedem gut, oder? klar, er ist austauschbar. das darf ich ihm natürlich nicht verraten.
Blindtexte müssen nicht langweilig sein
Namens paarmal nie Tundra Doge Afrika, erhielt Diele Bar siech patrouillierendem Adorno, bindend nur falls, gen Zitze B auflegendem äst adlige Habsburg was zus Most C da Pfand sein geschimmert biegt.
Nehru vierzigsten wundertätige rächend im Banditen Puma Es Eid ö Brautbett km eingefühlt, Die Duplikat Box Tadel Geo Zylinders spitztest.