Portal>UI-System

bytehaus Komponenten Referenz

System-Komponenten, Tailwind-Klassen und UI-Design-Tokens gemäß des Corporate Designs.

Typografie

Primary Font (Bai Jamjuree) - Überschriften

Display Hero (70px Bold)

Bestform IT

Heading 1 (30px Bold)

Übersicht & Berichte

Heading 2 (20px Bold)

Kunden und Verträge

Heading 3 (18px Semibold)

Systemdetails

Primary Font (Bai Jamjuree) - Body & UI Text

Body Default (16px / Regular / Leading 24px)

Bytehaus ist ein IT-Dienstleister, dessen visuelle Identität auf einer Kombination aus Electric Green und Deep Violet basiert.

Body Small (14px)

Die primäre Schriftart ist Bai Jamjuree, die für Überschriften im fetten Schnitt und für Fließtext verwendet wird.

Label Bold (18px Bold)

WICHTIGER HINWEIS: ALLE KPI-REPORTING DATEN SIND SCHREIBGESCHÜTZT.

Cards & Elevation

Klasse: .glassmorphismRadius: 12px

Standard Panel-Karte

Nutzt Hintergrundunschärfe, semi-transparente Oberflächen und feine, kontrastoptimierte Rahmen. Wechselt automatisch die Deckkraft und Schattenstärke je nach aktivem Theme-Modus.

Klasse: .glow-cardInteractive

Glow-Interaktions-Karte

Fügt einen weichen Aufwärts-Effekt (TranslateY) und eine farbige Schatten-Aura (Vivid Purple in Light, Electric Green in Dark) beim Hovern hinzu. Ideal für navigierbare Kacheln.

Buttons (Corporate Design)

Hauptaktionen & Landing CTAs

.btn-filled-green

.btn-outlined-purple

Portal Header & Navigation Aktionen

.btn-filled-purple-header

.btn-outlined-header

Status & Badges

Normal / OK

Warnung

Kritisch / Störung

MGD-RMM-CLIENT Prio 1

Tab-Menü

Interaktive Demo (Mit Badges & Active-State)

Aktuell ausgewählter Tab-Inhalt: Meldungen & Alarme (5 offene Alarme)

Verwendung (<TabMenu> Komponente)

<script setup lang="ts">
const activeTab = ref('alerts')
const tabs = [
  { id: 'alerts', name: 'Meldungen & Alarme', badge: 5, badgeColor: 'bg-rose-500' },
  { id: 'licenses', name: 'Lizenzen' },
  { id: 'unmapped', name: 'Whitespots (Ohne EDR)', badge: 12, badgeColor: 'bg-rose-500' }
]
</script>

<template>
  <div class="border-b border-[var(--border-color)]">
    <TabMenu :tabs="tabs" v-model="activeTab" />
  </div>
</template>

Tabellen & Listen

Daten-Tabelle im Premium-Design (Mit Hovers & Badges)

Aktuelle Geräteprobleme (Demo)

Kunde	Gerät	Problem	Severity
Musterkunde GmbH	dev-machine-01	Trojan.Win32.GenericGefunden in Downloads/malicious.exe	Kritisch
Beispiel AG	server-dc-01	Windows Update ausstehendNeustart seit mehr als 30 Tagen ausstehend	Warnung

HTML & Tailwind Struktur (Tabelle)

<div class="glassmorphism rounded-xl border border-[var(--border-color)] shadow-sm overflow-hidden">
  <div class="px-6 py-4 border-b border-[var(--border-color)] flex justify-between items-center bg-[var(--bg-nested)]">
    <h2 class="text-sm font-semibold text-gray-900 dark:text-white">Titel</h2>
  </div>
  <div class="overflow-x-auto">
    <table class="w-full text-sm text-left">
      <thead class="text-xs text-gray-500 dark:text-slate-400 bg-[var(--bg-nested)] uppercase border-b border-[var(--border-color)]">
        <tr>
          <th scope="col" class="px-6 py-3 font-semibold">Spalte 1</th>
          <th scope="col" class="px-6 py-3 font-semibold text-center">Spalte 2</th>
        </tr>
      </thead>
      <tbody>
        <tr class="border-b border-[var(--border-color)] hover:bg-[var(--bg-nested)]/50 transition">
          <td class="px-6 py-4 font-medium text-gray-900 dark:text-white">Wert 1</td>
          <td class="px-6 py-4 text-center">Wert 2</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>