Brand & Basis
Dieser Styleguide definiert die visuelle Sprache des Media Pentagon: Farben, Schriften, Buttons und typische UI-Elemente für das Hammer-Universum.
Media Pentagon steht für eine klare, modulare Struktur: Projekte, Produkte, Tipps & Tricks, Reseller und Monetarisierung. Der visuelle Auftritt kombiniert ein tiefes Royalblau mit warmem Gold – modern, hochwertig, eigenständig.
Farben · Gold & Blau
Primärfarben (Royalblau & Gold) plus neutrale Flächen für Panels und Hintergründe.
Schrift & Hierarchie
Moderne Systemschrift, klare Abstufung von Überschriften, Fließtext und Meta-Infos.
Media Pentagon – Projekte, Produkte, Partner
Einsatz: Hero-Titel, HauptüberschriftenDie fünf Seiten des Media Pentagon
Einsatz: Abschnittsüberschriften, Modul-TitelProjekte · Produkte · Tipps & Tricks · Reseller · Monetarisierung
Einsatz: Karten-Titel, Box-ÜberschriftenDer Fließtext ist gut lesbar, nicht zu klein, mit genügend Zeilenabstand. Ideal für Erklärungen, Feature-Listen und Projektbeschreibungen.
0.95rem · ~15–16 px · Einsatz: allgemeine TexteBereich · Status · Kategorie
Einsatz: Label, kleine Überschriften, KickerButtons & Badges
Standard-Buttons und Tags, die in allen Media-Pentagon-Modulen wiederverwendet werden können.
Panels & Karten
Beispiele für typische Bausteine: Dark-Panel für „Wow“-Effekte, Light-Panel für Content-Bereiche.