Design System Showcase

Dieses Dokument zeigt alle visuellen Bausteine des OpenHomeStack Design Systems. Nützlich zum Testen von Themes und neuen Seiten.

---

Tags & Badges

Tags gibt es in drei Varianten:

---

Status Badges

Zeigen Systemzustände an — mit farbigem Dot und semantisch passendem Hintergrund:

---

Meta Chips

Kleine Pill-Elemente für Metadaten — als statischer Chip oder klickbarer Link:

---

Buttons

---

Featured Card

Großes Card-Format mit Cover-Bild oben. Ohne image-Prop erscheint ein Warm-Gradient als Fallback. Mit eigenem Bild: image="/blog/covers/mein-artikel.jpg".

Mit eigenem Cover-Bild (Pfad zu /public/...):

---

Standard Card

Normale Karte für den Blog-Grid und die Sidebar — kein Cover.

---

List / Compact Card

Horizontales Format mit laufender Nummerierung — für Sidebar-Listen oder “Mehr lesen”-Bereiche.

---

Typografie

Die Display-Schrift ist Spectral (Serif), Fließtext läuft in Source Serif 4, UI-Elemente in DM Sans.

Heading H3

Heading H4

Normaler Fließtext-Absatz in Source Serif 4. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Fett — font-weight: 600, verwendet für Hervorhebungen im Fließtext.

Kursiv — für Zitate oder Nebenbemerkungen.

---

Code

Inline-Code: const theme = localStorage.getItem('hs-theme');

Ein längerer Code-Block:

// OpenHomeStack theme toggle
function applyTheme(theme: 'light' | 'dark') {
  document.documentElement.setAttribute('data-theme', theme);
  localStorage.setItem('hs-theme', theme);
}

const stored = localStorage.getItem('hs-theme');
const preferred = stored ?? (
  window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
);
applyTheme(preferred);

# Self-hosted fonts installieren
npm install @fontsource/spectral \
  @fontsource-variable/source-serif-4 \
  @fontsource-variable/dm-sans \
  @fontsource-variable/jetbrains-mono

---

Blockquote

Open-source software für zuhause bedeutet nicht Kompromisse — es bedeutet Kontrolle. Über deine Daten, deine Infrastruktur, dein Netz.

---

Links

Links im Fließtext: openhomestack.dev — terracotta underline on hover, sanfter Übergang via text-decoration-color.

---

Listen

Ungeordnet:

• Pi-hole für netzwerkweites Ad-Blocking
• Unbound als lokaler DNS-Resolver
• WireGuard VPN für sicheren Remote-Zugriff

Geordnet:

1. Raspberry Pi 5 kaufen
2. Raspberry Pi OS Lite installieren
3. Pi-hole via curl -sSL https://install.pi-hole.net | bash einrichten
4. Profit

---

Tabelle

Komponente	Token	Beispielwert
Primärfarbe	--brand-500	#C85C2D
Hintergrund	--bg	--stone-0
Schrift UI	--font-ui	DM Sans
Schrift Body	--font-body	Source Serif 4
Radius MD	--radius-md	8px
Shadow MD	--shadow-md	0 4px 16px …

---

Farbpalette

Brand — Terracotta

Accent — Amber

Neutral — Warm Stone

---

Trennlinie (HR)

Oben siehst du bereits mehrere <hr>-Elemente — gerendert als 1px solid var(--border) mit 2.5em Abstand oben und unten.