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 | TANNE | #005538
PRIMARY | KLEE | #008939
PRIMARY | GRASHALM | #8ABD24
PRIMARY | HIMMEL | #0BA1DD
PRIMARY | SAND | #F5F1E9
PRIMARY | SONNE | #FFF17A
PRIMARY | NACHT | #113535
PRIMARY | HIGHLIGHT | #E4F400
PRIMARY | TRENNER | #A7D1A7
Stefan Schmidt
Mitglied des Deutschen Bundestages
Mein Werdegang
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
Solor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
Farbpalette für eine grüne Website
Pistazie
Waldgrün
Salbei
Elfenbeinweiß
Moosgrün
Erdbraun
CTA-Beispiel
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
