Das Atelier Design-System

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

# 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

<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 — jede Farbe mit ihrer Rolle.
• Typography — die verwendeten Variablenachsen von Bricolage ernst genommen.
• Komponenten — Schaltflächen, Karten, Aufrufe, der Oracle-Launcher.
• Bewegung — atmen, verblassen, kein Blinken.