---
title: "Das Atelier Design-System"
description: "Eine neobotanische visuelle Sprache für das Nibiru-Framework – ein Lotus auf crememfarbem Papier, beleuchtet von Morgenschein."
---

Das **Atelier**-Designsystem ist die visuelle Sprache hinter dieser Website und der Nibiru-Marke. Es wird aus dem Lotus-Symbol im Brand-Logo und der warmen Kremfarbe gezogen, auf der das Wortmark steht. Das System wird als portables Design-Token bereitgestellt – CSS, SCSS, JSON und Tailwind – sodass jede Nibiru-Website, interne Tool oder Partnerprojekt den Stil annehmen kann, ohne ihn neu zu erfinden.

> Eine Lotus auf crememfarbiger Papier, beleuchtet von Morgenlicht.

## Fünf Prinzipien

1. **Eine Familie.** Jedes Textelement verwendet **Bricolage Grotesque** (variable Font, Google Fonts). Unterschiedliche Größen verwenden unterschiedliche optische-Größe-Achsenwerte — Anzeigegrößen sind zeichnerisch, Körperschriftengrößen sind ruhig. Keine Serifen, niemals.
2. **Kremig, nicht weiß.** Die Seite ist `#f5f1e8` — warmes Papier. Reines Weiß ist zu kalt. Reines Schwarz ist zu laut. Wir verwenden einen tiefen Indigo-Schwarz `#1f1b2e` für den Text anstelle dessen.
3. **Zwei Blätter, ein Goldblatt.** Marke-Violett `#7c70ab` und Marke-Himmelblau `#7db7dc` kommen direkt aus dem Lotus. Ein einzelner eingeschränkter Goldakkzent `#c9a96e` wird für Momente reserviert, die ihn verdienen.
4. **Redakteurische Abstände.** Generöser Whitespaces, asymmetrische Layouts, Atemende Absätze. Nähert sich einem veröffentlichten Monographie als einer SaaS-Landingpage.
5. **Reduzierte Bewegung.** Dinge bewegen sich langsam, wenn sie sich überhaupt bewegen. Der Held-Lotus atmet alle 18 Sekunden einmal. Kein Zittern, kein Flackern, kein Pulsieren.

## Die Token abrufen
```bash
# CSS custom properties
curl -O https://nibiru-framework.com/design-system/tokens.css

# SCSS variables and maps
curl -O https://nibiru-framework.com/design-system/tokens.scss

# Tailwind preset
curl -O https://nibiru-framework.com/design-system/tailwind.preset.js
```
Alle Token sind mit einem Namespace versehen (`--nibiru-*` / `nibiru.*` / `nibiru-*`).

## In 12 Zeilen annehmen
```html
<link rel="stylesheet" href="https://nibiru-framework.com/design-system/tokens.css">
<style>
  body  { background: var(--nibiru-paper); color: var(--nibiru-ink);
          font-family: var(--nibiru-font-text);
          font-variation-settings: var(--nibiru-fv-body);
          letter-spacing: var(--nibiru-tracking-body); }
  h1    { font-variation-settings: var(--nibiru-fv-display-hero);
          letter-spacing: var(--nibiru-tracking-display);
          font-size: var(--nibiru-text-hero); }
  .cta  { background: var(--nibiru-ink); color: var(--nibiru-paper);
          padding: 0.7rem 1.2rem;
          border-radius: var(--nibiru-radius-md); }
</style>
```
Das ist ausreichend, um die Marke zu wahren.

## Was hier dokumentiert ist

- [Palette](/de/design/palette/) — jede Farbe mit ihrer Rolle.
- [Typography](/de/design/typography/) — die verwendeten Variablenachsen von Bricolage ernst genommen.
- [Komponenten](/de/design/components/) — Schaltflächen, Karten, Aufrufe, der Oracle-Launcher.
- [Bewegung](/de/design/motion/) — atmen, verblassen, kein Blinken.
