---
version: alpha
name: "Mono"
description: "Schlichte weiße Seiten, Geist-Schrift und ein Kobaltblau, gebaut für Doku und Dev-Tools. Mono ist ein ruhiges System für Entwicklerprodukte: weiße Seiten, Geist und Geist Mono, Haarlinienrahmen und ein Kobaltblau für Links und Hauptaktionen. Codeblöcke, Tabellen und API-Referenzen stehen im Mittelpunkt, nicht am Rand."
colors:
  primary: "#2450E6"
  on-primary: "#FFFFFF"
  secondary: "#0F9F6E"
  tertiary: "#D97706"
  neutral: "#5D6470"
  surface: "#FFFFFF"
  on-surface: "#0B0C0E"
typography:
  display-lg:
    fontFamily: "Geist"
    fontSize: 60px
    fontWeight: 600
    lineHeight: 1.05
    letterSpacing: -0.025em
  headline-lg:
    fontFamily: "Geist"
    fontSize: 40px
    fontWeight: 600
    lineHeight: 1.1
    letterSpacing: -0.02em
  headline-md:
    fontFamily: "Geist"
    fontSize: 28px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: -0.01em
  headline-sm:
    fontFamily: "Geist"
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.3
  body-md:
    fontFamily: "Geist"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.55
  body-sm:
    fontFamily: "Geist"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.45
rounded:
  sm: 4px
  md: 6px
  lg: 8px
  xl: 12px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.lg}"
    padding: "{spacing.md}"
---

## Overview

Mono ist ein ruhiges System für Entwicklerprodukte: weiße Seiten, Geist und Geist Mono, Haarlinienrahmen und ein Kobaltblau für Links und Hauptaktionen. Codeblöcke, Tabellen und API-Referenzen stehen im Mittelpunkt, nicht am Rand.

## Colors

- **primary (#2450E6):** Kobaltblau für Links, primäre Buttons und den aktiven Eintrag in der Seitenleiste.
- **on-primary (#FFFFFF)**
- **secondary (#0F9F6E):** Smaragd für Erfolgszustände, hinzugefügte Zeilen in Diffs und die zweite Diagrammreihe.
- **tertiary (#D97706):** Bernstein für Warnungen, Hinweise auf veraltete Funktionen und eine dritte Reihe.
- **neutral (#5D6470):** Kühles Schiefergrau für Beschreibungen, Zeilennummern und Metadaten.
- **surface (#FFFFFF):** Reinweiß; Karten entsprechen der Seite und heben sich durch einen Rahmen ab. Der Dunkelmodus ist fast schwarz.
- **on-surface (#0B0C0E)**

## Typography

Durchgehend Geist: Semibold 600 für Überschriften von 60px Display bis 20px, Regular 400 in 16px mit Zeilenhöhe 1.55 für Fließtext. Geist Mono für Code, Befehle, Tasten und Versionsnummern.

## Layout

Der Inhalt sitzt auf einem 12-Spalten-Raster mit 1280px, 24px Spaltenabstand und einer 4px-Abstandseinheit. Doku-Seiten haben links eine Seitenleiste, eine Inhaltsspalte mit 72 Zeichen und rechts ein Inhaltsverzeichnis der Seite.

## Shapes

8px-Ecken an Karten, Codeblöcken, Eingabefeldern und Buttons. Hellgraue 1px-Rahmen trennen alles; keine Schatten.

## Components

Codeblöcke mit Kopieren-Button und Dateinamen-Tab, Hinweis- und Warnboxen, Installationsbefehle in Tabs (npm, pnpm, bun), Chips für Tastenkürzel und eine Suche mit Command-K.

## Do's and Don'ts

- Zeige oben auf jeder Seite ein funktionierendes Codebeispiel.
- Setze jeden Befehl, Pfad und jedes Flag in Geist Mono.
- Verwende Blau nur für Klickbares.
- Dekoriere nicht mit Verläufen, Illustrationen oder Leuchteffekten.