Download

150 Designsysteme..

Marken-verankerte Designsysteme, die Plugins via `od.craft.requires` übernehmen können. Jedes liefert eigene Palette, Typografie, Motion und Voice; verbinde ein Projekt mit einem System und jedes Plugin-Output erbt dieselbe Identität.

Was ist ein Design-System?

Ein Design-System ist ein wiederverwendbares Set an Markenfundamenten – Farbpalette, Typografie, Abstände, Motion und Voice – das alle Screens konsistent hält. In Open Design ist jedes Design-System ein Plugin: Verknüpfe ein Projekt damit und dein Coding-Agent erbt Palette, Schrift, Motion und Voice automatisch, sodass alles, was er generiert, markenkonform bleibt.

Jedes System ist eine DESIGN.md-Datei

Jedes Designsystem hier ist eine einzige DESIGN.md – eine für Menschen und Agents lesbare Markdown-Spezifikation, die das visuelle Thema der Marke, die Farbrollen, die Typografie-Skala und die Interaktionssprache erfasst. Sie liegt in deinem Repo, wird in git versioniert und reist mit deinem Projekt.

Richte Claude Code, Cursor oder einen beliebigen Coding-Agent auf die Datei, und jede Komponente, Seite und jedes Asset, das er generiert, erbt dieselbe Identität. DESIGN.md ist ein offenes Apache-2.0-Format; Open Design ist die quelloffene, local-first Bibliothek und das Tooling darum herum.

# Design System Inspired by Linear

> Category: Productivity
> Focused, low-chrome workspace. Inter, tight grid, restrained color.

## 1. Visual Theme & Atmosphere
A calm, dense product surface where typography and spacing
carry the hierarchy and color is used sparingly for intent.

## 2. Color Palette & Roles
### Primary
- **Ink** (`#0d0e10`): Primary text and dark surfaces.
- **Violet** (`#5e6ad2`): Action and focus accent.
- **Surface** (`#f4f5f8`): Light canvas for content blocks.
Ein DESIGN.md-Auszug
  1. 01

    Wähle ein System

    Durchstöbere die Bibliothek oben und öffne ein beliebiges System, um die vollständige DESIGN.md zu lesen – Palette, Typografie, Motion und Tonalität.

  2. 02

    Füge es in dein Projekt ein

    Speichere die DESIGN.md im Wurzelverzeichnis deines Repos. Es ist reines Markdown – kein Build-Schritt, kein Konto, kein Export.

  3. 03

    Richte deinen Agent darauf

    Sag Claude Code oder Cursor, dass es der DESIGN.md folgen soll, und jede Ausgabe bleibt mit der Marke konsistent.

DESIGN.md ist ein offenes Format (Apache-2.0). Die Systeme von Open Design sind frei zum Lesen, Forken und Mitwirken auf GitHub.

Häufig gestellte Fragen

  • Was ist ein Designsystem?

    Ein Designsystem ist eine zentrale Quelle der Wahrheit für die visuelle Sprache einer Marke – Palette, Typografie, Abstände, Motion und Tonalität – damit sich jeder Screen und jedes Asset wie ein einziges, kohärentes Produkt anfühlt.

  • Was ist eine DESIGN.md-Datei?

    DESIGN.md ist ein offenes, Markdown-basiertes Format, um ein Designsystem so zu beschreiben, dass es sowohl Menschen als auch KI-Coding-Agents lesen können. Es erfasst Farbrollen, Typografie-Skala und Interaktionsmuster als reinen Text, den du in deinem Repo behältst.

  • Wie verwende ich eine DESIGN.md mit Claude Code oder Cursor?

    Speichere die Datei im Wurzelverzeichnis deines Projekts und sag deinem Agent, dass er ihr folgen soll. Open Design kann ein Projekt auch an ein System koppeln, sodass jede Plugin-Ausgabe automatisch dieselbe Identität erbt.

  • Sind diese Designsysteme kostenlos?

    Ja. Jedes System hier ist quelloffen und kostenlos zum Lesen, Herunterladen, Forken und Mitwirken. Open Design selbst ist Apache-2.0 und local-first.

  • Wie viele Designsysteme gibt es?

    150 und es werden mehr – von Consumer-Tech über Editorial bis hin zu experimentellen Stilen. Regelmäßig kommen neue Systeme hinzu, und du kannst auf GitHub dein eigenes beisteuern.

  • Kann ich meine eigene DESIGN.md erstellen?

    Ja – erstelle eine DESIGN.md von Hand oder lass Open Design eine aus einer Referenz-Website generieren und verwende sie dann projekt- und agentübergreifend wieder.