DESIGN
Schrift | Farben | Elemente
Überschriften – Platzhaltertext zur Überprüfung der Headlines
Headline 1 Lorem ipßüm Lorem ipsum Headline 1
Headline 2 Lorem ipßüm Lorem ipsum Headline 2
Headline 3 Lorem ipßüm Lorem ipsum Headline 3
Headline 4 Lorem ipßüm Lorem ipsum Headline 4
Headline 5 Lorem ipßüm Lorem ipsum Headline 5
Headline 6 Lorem ipßüm Lorem ipsum Headline 6
Preformatted Lorem ipßüm Lorem ipsum Preformatted
FLIESSTEXT – PLATZHALTERTEXT ZUR SCHRIFTARTPRÜFUNG
PT Sans 400
Dies ist ein speziell entwickelter Platzhaltertext zur visuellen Prüfung von Schriftarten auf deutschsprachigen Webseiten.**
Er enthält alle relevanten Sonderzeichen, Umlaute (ä, ö, ü, Ä, Ö, Ü), das Eszett (ß) sowie verschiedene typografische Zeichen und Satzzeichen, um eine fehlerfreie, vollständige und konsistente Darstellung im Frontend zu gewährleisten – unabhängig von Browser oder Gerät.
JUNGVONBERG setzt diesen Text gezielt ein, um unschöne Überraschungen beim Go-Live zu vermeiden und während der Design- und Entwicklungsphase realistische Inhalte zu simulieren, solange der finale Content noch nicht vorliegt.
Durch den Einsatz dieses Textes wird sichergestellt, dass alle Schriftschnitte, Zeichenabstände und Umbrüche bereits vor der Content-Integration überprüft und optimiert werden können.
Beispieltext zur Darstellungstestung:
Äqüör büßüf gräblör schnüfäx düwön pläßör.
Übär flößig räußt Göbär durch’s knäußige Vlümpferland.
Mäßig ärzlüch, öbärragend süß – gröbz!
Frößibäl schnütz: „Ölgürk? Äußerst üblich!“
Lämör, Gänßüb, Höpläß & Müßflör ärßen großzüg.
Tüpfliß grölz; knörzlich dümpf!
Zahlzeichen: 1234567890
Sonderzeichen: — !?.,;:„“‚’“-()[]{}§%&@*+~#^<>|\
Umlaute: ä ö ü Ä Ö Ü
Eszett: ß
Typografietest: é è ê ñ ç € µ © ® ™
Farben – Individuelles Farbkonzept
| CSS-Variable | Bedeutung |
| color-primary | Hauptfarbe (z. B. für Buttons) |
| color-secondary | Zweitfarbe (z. B. für Akzente) |
| color-background | Hintergrundfarbe |
| color-surface | Oberfläche (Cards, Modals etc.) |
| color-text | Haupttextfarbe |
| color-text-muted | Weniger wichtiger Text |
| color-border | Rahmenfarbe |
| color-error | Fehlermeldungen |
| color-success | Erfolgsmeldungen |
:root {
/* === Basisfarben === */
–color-primary: #3498db; /* Hauptfarbe (z. B. Buttons, Links) */
–color-secondary: #9b59b6; /* Zweitfarbe (z. B. Highlights) */
–color-accent: #e67e22; /* Akzentfarbe (z. B. Call to Action, Icons) */
/* === Hintergrundfarben === */
–color-background: #ffffff; /* Haupt-Hintergrundfarbe */
–color-surface: #f5f5f5; /* Flächen (z. B. Cards, Panels) */
/* === Textfarben === */
–color-text: #222222; /* Standard-Text */
–color-text-muted: #777777; /* Unwichtigerer Text */
–color-text-on-primary: #ffffff; /* Text auf Primärfarbe (z. B. Buttontext) */
–color-text-on-accent: #ffffff; /* Text auf Akzentfarbe */
/* === Rahmen / Linien === */
–color-border: #e0e0e0;
/* === Invertierte Farben für Dark Mode oder Kontrastflächen === */
–color-background-inverted: #121212;
–color-surface-inverted: #1e1e1e;
–color-text-inverted: #f5f5f5;
–color-border-inverted: #333333;
–color-primary-inverted: #5dade2; /* z. B. aufgehellte Variante für Dark Mode */
–color-accent-inverted: #f39c12;
–color-text-on-primary-inverted: #000000;
–color-text-on-accent-inverted: #000000;
}
PRIMARY | HAUPTFARBE | #121212
PRIMARY | HAUPTFARBE | #121212
PRIMARY | HAUPTFARBE | #121212
PRIMARY | HAUPTFARBE | #121212
PRIMARY | HAUPTFARBE | #121212
PRIMARY | HAUPTFARBE | #121212
BUTTON – Gestaltung der CTA Buttons
Ihr Titel
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Ihr Titel
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text 8F8F8F in the module Advanced settings.
Ihr Titel
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
TRENNER – Design der Modultrenner
LOGIN – Anmelden zur Websitepflege
