---
version: alpha
name: "Swiss"
description: "Schwarz, Weiß und ein Signalrot auf einem strengen Raster. Swiss folgt dem Internationalen Typografischen Stil: große Grotesk, ein striktes Raster, eckige Ecken und viel Weiß. Rot ist die einzige Farbe und taucht nur an wenigen, präzisen Stellen auf."
colors:
  primary: "#D70015"
  on-primary: "#FFFFFF"
  secondary: "#0A0A0A"
  tertiary: "#7A7A7A"
  neutral: "#595959"
  surface: "#FFFFFF"
  on-surface: "#0A0A0A"
typography:
  display-lg:
    fontFamily: "Archivo"
    fontSize: 88px
    fontWeight: 700
    lineHeight: 0.95
    letterSpacing: -0.035em
  headline-lg:
    fontFamily: "Archivo"
    fontSize: 56px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: -0.025em
  headline-md:
    fontFamily: "Archivo"
    fontSize: 32px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: -0.015em
  headline-sm:
    fontFamily: "Archivo"
    fontSize: 20px
    fontWeight: 700
    lineHeight: 1.25
  body-md:
    fontFamily: "Archivo"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
  body-sm:
    fontFamily: "Archivo"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.01em
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

Swiss folgt dem Internationalen Typografischen Stil: große Grotesk, ein striktes Raster, eckige Ecken und viel Weiß. Rot ist die einzige Farbe und taucht nur an wenigen, präzisen Stellen auf.

## Colors

- **primary (#D70015):** Signalrot, nur für die Hauptaktion und wichtige Hervorhebungen.
- **on-primary (#FFFFFF)**
- **secondary (#0A0A0A):** Schwarz, als massive Fläche für Kontrastabschnitte.
- **tertiary (#7A7A7A):** Mittelgrau für Sekundärdaten.
- **neutral (#595959):** Neutralgrau für Bildunterschriften und Labels.
- **surface (#FFFFFF):** Reinweiß. Der Dunkelmodus ist reines Schwarz.
- **on-surface (#0A0A0A)**

## Typography

Durchgehend Archivo: Fett in sehr großen Größen mit enger Laufweite für Überschriften, Regular in 16px für Fließtext. Kleine Labels dürfen in Versalien mit weiter Laufweite stehen.

## Layout

Ein striktes 12-Spalten-Raster bis 1440px mit 16px Spaltenabstand und einer Abstandseinheit von 8px. Richte alles am Raster aus und lass Spalten bewusst leer.

## Shapes

Überall eckige Ecken (0px Radius). Haarfeine 1px-Rahmen; keine Schatten.

## Components

Buttons sind massive rote oder schwarze Rechtecke. Die Navigation ist reiner Text. Tabellen und Listen verwenden nur horizontale Linien.

## Do's and Don'ts

- Mach die Überschrift zum größten Element der Seite.
- Lass im Raster bewusst Spalten leer.
- Runde keine Ecken ab und füge keine Schatten hinzu.
- Verwende Rot nicht zur Dekoration.