Markenelemente

Unser Branding

Farben, Logos und Richtlinien für eine konsistente Darstellung der Lyndara-Marke – damit unser Auftritt überall stimmig bleibt.

Farbpalette

Klick auf einen Farbton kopiert den HEX-Wert.

Akzentfarben

Hintergrundfarben

Textfarben

Discord & Status

Logos

Lade die passende Variante herunter. Helle Logos gehören auf dunkle Flächen, dunkle auf helle.

  • Lyndara – Wortmarke

    Wortmarke

    Volles Logo „Lyndara Network" – für dunkle Hintergründe.

    Download
  • Lyndara – Icon „L"

    Icon „L"

    Kurzform für Avatare, Favicons & enge Flächen – dunkler Hintergrund.

    Download

Verwendungsrichtlinien

Erlaubt

  • Originalproportionen beibehalten
  • Ausreichend Freiraum um das Logo lassen
  • Auf kontrastreichem Hintergrund platzieren
  • Transparente Originaldateien verwenden

Nicht erlaubt

  • Logo verzerren oder stauchen
  • Logofarben verändern oder umfärben
  • Logo drehen oder kippen
  • Schatten, Glow oder Effekte hinzufügen

Typografie & Flächen

Poppins

Body & UI – Standardschrift der Website

Minecraft

Dekorativ – thematische Akzente

Press Start 2P

Pixel-Akzente – sparsam einsetzen

Panel-Pattern

Ruhige, opake Inhaltsfläche mit feiner Kontur. Nur bedienbare Karten dürfen sich beim Hover anheben (2–3 px).

CSS
.panel {
  background: linear-gradient(180deg, var(--bg-elevated), var(--bg-secondary));
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--space-6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035), var(--shadow-card);
}

/* Nur bedienbare Karten heben sich an */
.panel--interactive:hover {
  border-color: var(--border-hover);
  transform: translateY(-2px);
}

UI-Komponenten

Live-Vorschau der Standard-UI-Elemente – konsistent auf der gesamten Website einzusetzen.

Buttons

Hinweise

Information

Neutrale Hinweise nutzen die Markenfarbe.

Achtung

Warnungen nutzen die Statusfarbe, nicht nur Farbe als Signal.

Wichtig

Kritische Hinweise erhalten Titel, Icon und Text.

Panels

Ruhige Fläche

Für Dokumentation, Daten und Informationskarten – ohne Bewegung.

Bedienbare KarteHebt sich bei Hover leicht an und zeigt den Fokus klar.

Abstände & Radien

Border-Radius-Skala – für konsistente Rundungen im gesamten Design-System.

  • 8pxTags, Listeneinträge
  • 12pxButtons, Eingabefelder
  • 16pxKarten, Panels, Dialoge
  • 9999pxFilter-Chips, Pills

Ton & Sprache

Wie wir schreiben – damit unsere Kommunikation überall einheitlich klingt.

  • Freundlich & direkt

    Wir sprechen Spieler auf Augenhöhe an – kein Amtsdeutsch, keine Distanz.

    Besser: „Tritt unserem Discord bei!"

    Vermeiden: „Es wird um Beitritt zum Discord-Server gebeten."

  • Community-first

    Wir sind kein Unternehmen, wir sind eine Gemeinschaft – das spürt man beim Lesen.

    Besser: „Gemeinsam bauen wir etwas Großes."

    Vermeiden: „Die Nutzerzahl wird kontinuierlich ausgebaut."

  • Enthusiastisch, nicht reißerisch

    Echte Begeisterung – kein übertriebener Hype, keine Clickbait-Sprache.

    Besser: „Neue Season, neue Möglichkeiten – wir freuen uns!"

    Vermeiden: „KRASSE NEW SEASON!! UNBEDINGT SPIELEN!!"