±8 Records – Style Guide

±8 Records

Style Guide / Typografie & Components

Übersicht über Headlines, Fließtext, Meta-Elemente und einige Kern-Components. Nutze diese Seite, um passende Klassen für neue Bereiche zu wählen.

Headlines

.p8-h1

p8-h1 – Main hero headline for big sections

Clamp-Größe, heavy uppercase Headline, ideal für große Hero-Header.

.p8-h2

p8-h2 – Section headline for major blocks

Sekundäre Ebene, auch in Grids oder Subsektionen gut.

.p8-h3

p8-h3 – Smaller section headline / card titles

Tertiäre Ebene, gut für Card-Titel oder Sidebars.

.p8-page-title

p8-page-title – Page / Archive Title

Wird aktuell für Seiten-Titel / Music-Page verwendet. Nutze das, wenn ein Seitenkopf konsistent zu Releases aussehen soll.

.p8-releaseartist

p8-releaseartist – Artist name above release title

Overline-ähnlich, aber größer. Perfekt für Artist-Namen im Kontext von Releases.

Fließtext & Copy

body (ohne Klasse)

Das ist normaler Body-Text ohne spezielle Klasse. Gut für Standard-Content, Blogtexte oder längere Beschreibungen.

.p8-body

p8-body – etwas kontrollierter Fließtext, an deine Token-Welt angepasst. Sinnvoll, wenn du Content-Blöcke außerhalb des Standard-WP-Contents baust.

.p8-lead

p8-lead – ideal für Einleitungstexte, kurze Intros oder Teaser über dem eigentlichen Content. Minimal größer und kräftiger.

.p8-small

p8-small – kleinere Copy für Fußnoten, rechtliche Hinweise oder Sub-Meta.

Meta, Overlines & Labels

.p8-overline

p8-overline – overline label above titles

Für Kategorien, „NEW RELEASE“, „UPCOMING GIGS“ etc. Oberhalb von Headlines.

.p8-meta

p8-meta – dezente Meta-Infos wie Datum, Label, Katalognummer.

Wird in Karten und Release-Infos genutzt.

span.published

Released: 2025-11-23

Spezielles Styling für Veröffentlichungsdatum im Overview-Kontext.

.p8-divider

Horizontale Linie passend zum Dark Theme. Ideal, um Bereiche subtil zu trennen.

Buttons & CTAs

.p8-btn (chips)
Default Button Button Large

Baseline-Buttons, ideal als kleine Pills, Filter oder sekundäre Actions.

.p8-btn.p8-btn–solid
Solid Button

Volle Flächenfarbe, besser für primäre Actions, z. B. „Buy“ oder „Listen“.

.p8-cta + Brand-Varianten
Spotify Apple Music Beatport Bandcamp

Große monochrome CTA-Leiste, nutzt Brandfarben nur bei .p8-cta--brand. Gut unter Tracklists oder im Hero.

Release Components

.p8-tracks (Tracklist)
  • 1. Opening Sequence 05:21
  • 2. Late Night Drive feat. Guest Artist 07:03
  • 3. Basement Echoes 06:11

Grid-basierte Tracklist mit Spalten für Nummer, Titel/Artist und Dauer.

.p8-releasecard (Overview Grid)
Demo Cover
Release Title / Catalog
Artist Name · 2025

Typische Release-Kachel aus der Overview. Nutzt Heading-Font + Meta-Style.

Artist Components

.pm8-artist-socials
🎵 SoundCloud 🎧 Mixcloud ⓕ Facebook

Social-Leiste für Artist-Detailseiten. Icons passen sich currentColor an.

.pm8-artist-dates
  • Dec 31 – Augsburg, Bunker
  • Jan 12 – Berlin, About Blank

Liste für Upcoming Dates / Gigs im Artist-Profil.

.pm8-artist-releases.layout-grid
Release 1
Release One
Release 2
Release Two
Release 3
Release Three
Release 4
Release Four

Grid der Releases innerhalb einer Artist-Seite. Kolonnenzahl steuerbar via --pm8-cols.

Diese Seite ist nur eine visuelle Referenz. Du kannst Sektionen duplizieren, rauswerfen oder neue Blöcke ergänzen, wenn neue Klassen dazukommen.

This is an example page. It’s different from a blog post because it will stay in one place and will show up in your site navigation (in most themes). Most people start with an About page that introduces them to potential site visitors. It might say something like this:

Hi there! I’m a bike messenger by day, aspiring actor by night, and this is my website. I live in Los Angeles, have a great dog named Jack, and I like piña coladas. (And gettin’ caught in the rain.)

…or something like this:

The XYZ Doohickey Company was founded in 1971, and has been providing quality doohickeys to the public ever since. Located in Gotham City, XYZ employs over 2,000 people and does all kinds of awesome things for the Gotham community.

As a new WordPress user, you should go to your dashboard to delete this page and create new pages for your content. Have fun!