Mit Meta-Zeile und Button
Vollausbau: Meta, Headline, Body und Sekundär-Button. Die Meta-Zeile ist optional und nur zu setzen, wenn im Inhalt tatsächlich ein Datum oder eine Kategorie steht.
Mehr erfahrenDesign System
Alle Komponenten, aus drei gehosteten CSS-Dateien.
Diese Seite lädt ausschließlich tokens.css, base.css und layout.css von design.mgm-tp.com. Sichtbare Abweichung heißt: Fehler im Design System, nicht in der Seite.
Kennzahlen
3 Dateien
tokens · base · layout
8 Farben
Schmuckfarben
24 Assets
Font, Logos, Chroma
1 Domain
design.mgm-tp.com
Typografie
H1 – 2.5rem / 3.0rem / 900
H2 – 1.8rem / 2.0rem / 900
H3 – 1.5rem / 1.75rem / 900
H4 – 1.35rem / 1.6rem / 900
Subheadline – 1.25rem / 1.5rem / 900
Fließtext – 1.0rem / 1.4rem / 400. Gewicht kommt ausschließlich über font-weight, nie über font-variation-settings.
Label – 0.7rem / uppercase / letter-spacing 1px
Buttons
Intro
40 / 60 Grid mit Bulletliste
Der Lead-Text steht in 700, die Liste darunter hat quadratische Bullets und Trennlinien.
- Bullets sind 5×5px und niemals rund
- Erstes Item bekommt zusätzlich border-top
- Trennlinien in Gray 2 (#E0E3E7)
Features
Dreispaltiges Kartenraster auf Gray 3
01 – Tokens
Custom Properties
Farben, Typo-Skala, Abstände an genau einer Stelle.
02 – Base
Schrift & Buttons
Roboto Variable, drei Button-Varianten, Pfeil-Animation.
03 – Layout
Sektionen
Seitengerüst, Navigation, alle Sektionstypen, Footer.
04 – Fonts
CORS gesetzt
Ohne ACAO-Header blockt Firefox die Webfont.
05 – Chroma
14 Hintergründe
Petrol und Marine mit je 6 Varianten.
06 – TLS
Let's Encrypt
Auto-Renewal inkl. nginx-Reload-Hook.
Zweispaltige Liste
Standard für Inhaltslisten
Außen zwei Spalten, innen links ein kleines quadratisches Chromabild, rechts Meta (optional) + Headline + Body + Sekundär-Button (optional). Löst das Karten-Grid mit Großbild ab – dort dominierten die Bilder und der Text wurde zu schmal.
Ohne Meta, mit Zusatzzeile
Die Zusatzzeile unter dem Body nimmt Angaben wie Ort, Level oder Dateigröße auf.
Landshut · Hamburg · Remote
Zur Stelle
Nur Headline und Body
Minimalvariante ohne Meta und ohne Button – zum Beispiel für Benefits, bei denen es kein Linkziel gibt.
Bild ist immer quadratisch
9.5rem Spaltenbreite, aspect-ratio 1/1, object-fit cover. Unter 768px schrumpft die Bildspalte auf 6rem – Bild und Text bleiben nebeneinander.
DatenblattZweispaltige Liste
Dieselbe Komponente mit .on-dark
Meta-Tags
Kurzangaben als einzelne Blöcke
Ort, Level, Format, Kategorie, Dateityp – jede Angabe ein eigener Chip, KEINE Trennpunkte dazwischen. Weiß auf Gray 3 ergibt 4.56:1 und erfüllt damit die 4.5:1-Regel für kleinen Text. Gray 1 und Gray 2 kommen nicht in Frage: mit weißer Schrift nur 1.12:1 bzw. 1.29:1.
Meta-Tags
Auf dunklem Grund und auf Chroma
Über den .on-dark- bzw. .on-image-Kontext
wechseln die Chips auf Gray 4 – Gray 3 wäre auf der Features-Sektion unsichtbar,
die IST Gray 3. Weiß auf Gray 4: 7.03:1.
Ein Statement steht kursiv in 1.5rem, Hervorhebungen darin sind 700 und aufrecht – begrenzt auf 860px Breite.
Warum
Sticky linke Spalte
Die linke Spalte bleibt beim Scrollen stehen, die rechte läuft durch.
01
Nummern in Akzentfarbe
Die Nummer nutzt --color-accent, der Titel bleibt weiß.
02
Haarlinien als Trenner
rgba(255,255,255,0.15), letztes Item ohne Linie.
03
Erstes Item ohne padding-top
Damit die Oberkante mit der linken Spalte fluchtet.
Ablauf
Schritte nebeneinander
Kreis in Akzentfarbe, Verbindungslinie in Gray 2, letzter Schritt ohne Linie.
1
Vhost
nginx-Serverblock für die Subdomain.
erledigt
2
TLS
Zertifikat plus automatische Erneuerung.
erledigt
3
Assets
Font, Logos, Favicon, Chroma-Bilder.
erledigt
4
CSS
tokens, base und layout ausgeliefert.
erledigt
Kontakt
Chroma-Hintergrund mit hellem Button
Der Primär-A-Button bekommt auf Bild eine weiße Outline und darf niemals auf volle Breite gestreckt werden.
Bullets sind hier weiß
Hinweistext in 0.875rem unter dem Button.