---
version: alpha
name: "Noir"
description: "Schwarz, Knochenweiß und eine riesige Serifenschrift. Das Werk ist die einzige Farbe. Noir nimmt die Farbe weg, damit die Arbeit sprechen kann: schwarze Seiten, knochenweiße Schrift, eine riesige Instrument Serif für Namen und Projekttitel und eckige Bildrahmen. Am besten wirkt es im Dunkelmodus; der knochenweiße Hellmodus passt zu druckähnlichen Case Studies."
colors:
  primary: "#0E0E0E"
  on-primary: "#F4F2EE"
  secondary: "#6E6A63"
  tertiary: "#A39D93"
  neutral: "#5F5C57"
  surface: "#F4F2EE"
  on-surface: "#0E0E0E"
typography:
  display-lg:
    fontFamily: "Instrument Serif"
    fontSize: 120px
    fontWeight: 400
    lineHeight: 0.9
    letterSpacing: -0.03em
  headline-lg:
    fontFamily: "Instrument Serif"
    fontSize: 72px
    fontWeight: 400
    lineHeight: 0.95
    letterSpacing: -0.02em
  headline-md:
    fontFamily: "Instrument Serif"
    fontSize: 40px
    fontWeight: 400
    lineHeight: 1.05
    letterSpacing: -0.01em
  headline-sm:
    fontFamily: "Instrument Serif"
    fontSize: 22px
    fontWeight: 400
    lineHeight: 1.3
  body-md:
    fontFamily: "Manrope"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
  body-sm:
    fontFamily: "Manrope"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0.08em
rounded:
  sm: 0px
  md: 0px
  lg: 0px
  xl: 4px
spacing:
  xs: 8px
  sm: 16px
  md: 32px
  lg: 48px
  xl: 96px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.lg}"
    padding: "{spacing.md}"
---

## Overview

Noir nimmt die Farbe weg, damit die Arbeit sprechen kann: schwarze Seiten, knochenweiße Schrift, eine riesige Instrument Serif für Namen und Projekttitel und eckige Bildrahmen. Am besten wirkt es im Dunkelmodus; der knochenweiße Hellmodus passt zu druckähnlichen Case Studies.

## Colors

- **primary (#0E0E0E):** Schwarz im Hellmodus und Knochenweiß im Dunkelmodus, für Buttons, Links und das aktive Projekt.
- **on-primary (#F4F2EE)**
- **secondary (#6E6A63):** Warmes Dunkelgrau für sekundäre Textblöcke und die zweite Datenreihe.
- **tertiary (#A39D93):** Steingrau für Bildplatzhalter, Indexnummern und eine dritte Reihe.
- **neutral (#5F5C57):** Warmes Mittelgrau für Bildunterschriften, Credits und Jahreszahlen.
- **surface (#F4F2EE):** Knochenweiß im Hellmodus mit reinweißen Karten; der Dunkelmodus ist fast reines Schwarz.
- **on-surface (#0E0E0E)**

## Typography

Instrument Serif im Schnitt 400 für Überschriften, bis 120px mit Zeilenhöhe 0.9 und enger Laufweite; Manrope in 16px mit Zeilenhöhe 1.6 für Fließtext. Kleine 12px-Labels haben 0.08em Laufweite.

## Layout

Ein 12-Spalten-Raster bis 1440px mit schmalem Spaltenabstand von 16px und einer 8px-Abstandseinheit. Projektbilder laufen groß und dürfen das Raster brechen; Text bleibt in schmalen Spalten mit 56 Zeichen.

## Shapes

Eckige Ecken (0px Radius) an Bildern und Buttons. 1px-Haarlinien in warmem Grau; keine Schatten.

## Components

Eine Indexliste der Projekte mit Jahr und Rolle, ganzbreite Bildfolgen, Textlink-Buttons mit Pfeil und ein minimaler Header mit Name, Arbeiten und Kontakt.

## Do's and Don'ts

- Eröffne jede Seite mit einem riesigen Serifen-Titel.
- Nummeriere Projekte und nenne Jahr, Kunde und Rolle.
- Füge keine Akzentfarbe hinzu; die Bilder liefern die Farbe.
- Setze Bilder nicht in abgerundete oder mit Schatten versehene Rahmen.