33-design-system.md

title	OpenSIN Design System: Konsistenz überall
description	Ein Design System für alle OpenSIN-Tools. Konsistenz, die skaliert.
date	2026-04-04
author	OpenSIN Team
tags	design system opensin ui ux
category	Vergleich
readTime	8 Minuten

OpenSIN Design System: Konsistenz überall

Veröffentlicht: 02.04.2026
Autor: OpenSIN Team
Lesezeit: 5 Minuten

---

Warum ein Design System für Agenten?

100+ Agenten. 18 Teams. Dutzende Dashboards, APIs, CLIs, Bots. Ohne Design System: Chaos.

Mit Design System: Eine Sprache für alles.

---

Was drin ist

• Design Tokens — Colors, Spacing, Radius, Fonts, Shadows
• CSS Components — Buttons, Cards, Badges, Inputs, Tables, Grids
• Dark Cyberpunk Theme — #00ffaa / #aa00ff / #00aaff
• Responsive — Mobile bis Desktop
• Zero Dependencies — Pure CSS + Vanilla JS

---

Usage

<link rel="stylesheet" href="@opensin/design-system/css/base.css">
<link rel="stylesheet" href="@opensin/design-system/css/components.css">

<button class="os-btn os-btn--primary">Deploy Agent</button>
<div class="os-card"><h3>Agent Status</h3></div>
<span class="os-badge os-badge--success">Running</span>

---

Fazit

Ein Design System ist keine Vanity. Es ist Infrastruktur. Und Infrastruktur ist das, was OpenSIN von "coolem Projekt" zu "Production Platform" macht.

-> Design System auf GitHub