Design System

Die Design System API ermöglicht die Verwaltung aller Design-Tokens und Style-Definitionen Ihrer Projekte.

Übersicht

Das CODEFLUSS Design System besteht aus folgenden Kategorien:

Kategorie	Beschreibung
Farben	Farbpaletten und Farbschemata
Typografie	Schriftarten und Schriftgrößen
Abstände	Spacing-Scales und Presets
Effekte	Schatten, Animationen, Hover-Effekte

Basis-Endpunkte

Methode	Endpunkt	Beschreibung
`GET`	`/api/v1/design-system/current`	Aktuelles Design System abrufen
`GET`	`/api/v1/design-system/drafts`	Design-Entwürfe auflisten
`POST`	`/api/v1/design-system/versions/create`	Neue Version erstellen
`POST`	`/api/v1/design-system/versions/restore`	Alte Version wiederherstellen
`POST`	`/api/v1/design-system/apply-template`	Template anwenden
`GET`	`/api/v1/design-system/apply-template`	Verfügbare Templates auflisten

Versionierung

Das Design System unterstützt ein Draft/Publish-Workflow:

┌─────────────┐    ┌─────────────┐    ┌─────────────┐
│   Draft     │───▶│   Review    │───▶│  Published  │
│  (Entwurf)  │    │  (Prüfung)  │    │  (Live)     │
└─────────────┘    └─────────────┘    └─────────────┘

Aktuelle Version abrufen

GET /api/v1/design-system/current?organizationId=org_xyz789

Response

{
  "success": true,
  "data": {
    "id": "ds_abc123",
    "organizationId": "org_xyz789",
    "version": "1.3.0",
    "status": "published",
    "publishedAt": "2026-01-20T10:00:00Z",
    "colors": { /* Farbdefinitionen */ },
    "typography": { /* Typografie-Definitionen */ },
    "spacing": { /* Spacing-Definitionen */ },
    "effects": { /* Effekt-Definitionen */ }
  }
}

Neue Version erstellen

POST /api/v1/design-system/versions/create

{
  "organizationId": "org_xyz789",
  "version": "1.4.0",
  "changelog": "Neue Akzentfarben hinzugefügt",
  "basedOnVersion": "1.3.0"
}

Version wiederherstellen

POST /api/v1/design-system/versions/restore

{
  "organizationId": "org_xyz789",
  "version": "1.2.0"
}

Templates

CODEFLUSS bietet vordefinierte Design-Templates:

Verfügbare Templates

GET /api/v1/design-system/apply-template?organizationId=org_xyz789

{
  "success": true,
  "data": [
    {
      "id": "tmpl_minimal",
      "name": "Minimal",
      "description": "Cleanes, minimalistisches Design",
      "preview": "https://cdn.codefluss.com/templates/minimal.png"
    },
    {
      "id": "tmpl_corporate",
      "name": "Corporate",
      "description": "Professionelles Unternehmensdesign",
      "preview": "https://cdn.codefluss.com/templates/corporate.png"
    },
    {
      "id": "tmpl_creative",
      "name": "Creative",
      "description": "Kreatives, farbenfrohes Design",
      "preview": "https://cdn.codefluss.com/templates/creative.png"
    }
  ]
}

Template anwenden

POST /api/v1/design-system/apply-template

{
  "organizationId": "org_xyz789",
  "templateId": "tmpl_corporate",
  "overrideExisting": false
}

Kategorien-Endpunkte

Alle Kategorien folgen dem gleichen CRUD-Muster:

Methode	Endpunkt	Beschreibung
`GET`	`/api/v1/design-system/{kategorie}`	Alle Einträge auflisten
`POST`	`/api/v1/design-system/{kategorie}`	Neuen Eintrag erstellen
`GET`	`/api/v1/design-system/{kategorie}/{id}`	Einzelnen Eintrag abrufen
`PUT`	`/api/v1/design-system/{kategorie}/{id}`	Eintrag aktualisieren
`DELETE`	`/api/v1/design-system/{kategorie}/{id}`	Eintrag löschen

Verfügbare Kategorien

colors – Farben
fonts – Schriftarten
font-families – Schriftfamilien
typography-scales – Typografie-Skalen
spacing-scales – Spacing-Skalen
spacing-presets – Spacing-Presets
border-radius – Eckenradius
shadows – Schatten
opacity – Transparenz-Stufen
transitions – Übergänge
timing-functions – Timing-Funktionen
animation-presets – Animations-Presets
hover-effects – Hover-Effekte
focus-rings – Fokus-Ringe
backdrop-effects – Hintergrund-Effekte
button-styles – Button-Stile
card-styles – Card-Stile
form-styles – Formular-Stile
section-styles – Section-Stile
grid-presets – Grid-Presets
breakpoints – Responsive Breakpoints

Beispiel: Farben verwalten

Alle Farben abrufen

curl -X GET "https://api.codefluss.com/v1/design-system/colors?organizationId=org_xyz789" \
  -H "Authorization: Bearer cf_live_abc123..."

Neue Farbe erstellen

curl -X POST "https://api.codefluss.com/v1/design-system/colors" \
  -H "Authorization: Bearer cf_live_abc123..." \
  -H "Content-Type: application/json" \
  -d '{
    "organizationId": "org_xyz789",
    "name": "brand-primary",
    "value": "#3b82f6",
    "category": "brand",
    "description": "Primäre Markenfarbe"
  }'

CSS-Export

Das Design System kann als CSS-Variablen exportiert werden:

:root {
  /* Farben */
  --color-brand-primary: #3b82f6;
  --color-brand-secondary: #8b5cf6;
  
  /* Typografie */
  --font-family-heading: 'Inter', sans-serif;
  --font-size-base: 16px;
  
  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  
  /* Schatten */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
}

Fehler

Code	Beschreibung
`400`	Ungültige Werte (z.B. falsches Farbformat)
`401`	Nicht authentifiziert
`403`	Keine Berechtigung
`404`	Design-Token nicht gefunden
`409`	Token-Name bereits vergeben

Nächste Schritte

Farben – Farbpalette definieren
Typografie – Schriften konfigurieren