# Y1 bauen — fang hier an (Copy-Paste zuerst)

> Das ist der erzwungene Erst-Einstieg in die Marke Y1 (Y1 Digital AG). Lies ihn ganz, **bevor** du irgendetwas baust.
>
> **Die eine Regel:** Übernimm die Code-Blöcke unten **1:1** — nicht zusammenfassen, nicht „verbessern", nicht interpolieren. Schreib im Code **genau** die Variablennamen (`var(--g100)`, `var(--accent)` …), erfinde keine Farben, keine Größen, keine Variablennamen. Brauchst du etwas, das hier nicht steht, lade die passende Einzeldatei aus dem Nachschlag-Block unten — und wenn auch die fehlt, **frag nach**, statt zu erfinden.
>
> Kommt dieser Text bei dir nur zusammengefasst oder mit „…" gekürzt an, hast du ihn NICHT vollständig. Lade ihn dann erneut als rohen Markdown (`https://<host>/pilot-start.md`) und arbeite mit dem rohen Code.

---

## 0 · Das Fundament — immer zuerst einsetzen

Jede Y1-Oberfläche baut auf diesen CSS-Variablen und der Y1-Schrift auf. Setz diesen Block an den Anfang deines CSS und nutze danach nur noch `var(--…)` — nie ein rohes Hex-Literal.

```css
:root{
  --g100:#000000; --g90:#212121; --g80:#393939; --g70:#5c6361; --g60:#6d7573;
  --g50:#828d8c; --g40:#abb3b2; --g30:#d0d7d6; --g20:#dde3e2; --g10:#f1f3f4;
  --hover:#e8eceb; --white:#ffffff;
  --accent:#ff78ba; --accent-hover:#d6438c;
  --accent-20:#ffd6ea; --accent-10:#fff0f7;
  --red:#dd343e; --red-hover:#b81922; --green:#04a777; --orange:#f57a53;
  --sans:"TWK Everett",-apple-system,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  --mono:"TWK Everett Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --shadow-overlay:0 2px 6px rgba(0,0,0,.3);
}
body{font-family:var(--sans);color:var(--g100)}
:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
```

Das ist die **vollständige erlaubte Farbmenge.** Steht ein Wert nicht hier drin, gibt es ihn bei Y1 nicht — auch kein eigenes `--y1-*`. Schrift ist TWK Everett (`var(--sans)` für Text, `var(--mono)` für Code); zum Einbinden siehe `assets/machine/rules/04-typografie.md`.

---

## 1 · Der Primär-Button (übernimm diesen Block 1:1)

**Primär-Button = `var(--g100)` (schwarz) mit Text `var(--white)`.** Auf dunkler Fläche invertiert er zu weißer Fläche mit schwarzem Text (`--primary-inverse`). Schriftgröße **14 px**, Höhe **48 px**, **Radius 0**. Genau **ein** Primär-Button pro Ansicht; sein Label ist ein Verb. Das ist der vollständige Button — kopier ihn komplett, inklusive aller Zustände:

```html
<!-- One primary button per view; the label is a verb -->
<button type="button" class="y1-btn y1-btn--primary">Speichern</button>
<button type="button" class="y1-btn y1-btn--secondary">Abbrechen</button>
<button type="button" class="y1-btn y1-btn--ghost">Mehr anzeigen</button>
<button type="button" class="y1-btn y1-btn--danger">Endgültig löschen</button>

<!-- On dark surfaces: -->
<button type="button" class="y1-btn y1-btn--primary-inverse">Speichern</button>
<button type="button" class="y1-btn y1-btn--secondary-inverse">Abbrechen</button>

<!-- Optional: one icon, right edge, 16 px -->
<button type="button" class="y1-btn y1-btn--primary y1-btn--icon">Warenkorb ansehen<svg width="16" height="16" viewBox="0 0 32 32" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M5 16h22M19 8l8 8-8 8"/></svg></button>
```

```css
/* Y1 button. Sizes: 48 px default, --md 40, --sm 32. Radius is always 0. */
.y1-btn{height:48px;padding:0 60px 0 16px;display:inline-flex;align-items:center;
  font-family:inherit;font-size:14px;letter-spacing:.16px;
  border:none;border-radius:0;background:none;cursor:pointer}
.y1-btn--md{height:40px}
.y1-btn--sm{height:32px}
.y1-btn--icon{padding-right:16px;gap:32px}
.y1-btn--primary{background:var(--g100);color:var(--white)}
.y1-btn--primary:hover{background:var(--g90)}
.y1-btn--primary:active{background:var(--g80)}
/* On dark surfaces the primary button inverts: white surface, black label */
.y1-btn--primary-inverse{background:var(--white);color:var(--g100)}
.y1-btn--primary-inverse:hover{background:var(--g10)}
/* On dark surfaces: transparent background, white border, white text */
.y1-btn--secondary-inverse{border:1px solid var(--white);color:var(--white);background:transparent}
.y1-btn--secondary-inverse:hover{background:rgba(255,255,255,.08)}
.y1-btn--secondary{border:1px solid var(--g100);color:var(--g100)}
.y1-btn--secondary:hover{background:var(--g100);color:var(--white)}
.y1-btn--ghost{color:var(--g100)}
.y1-btn--ghost:hover{background:var(--hover)}
.y1-btn--danger{background:var(--red);color:var(--white)}
.y1-btn--danger:hover{background:var(--red-hover)}
.y1-btn:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.y1-btn:disabled{background:var(--g30);color:var(--g50);cursor:not-allowed}
```

> **Pink (`var(--accent)`, #ff78ba) ist keine Button-Farbe und keine Textfarbe.** Es ist Flächen- und Zustands-Akzent — hier lebt es ausschließlich im Fokus-Ring (`:focus-visible`). Ein pinker Button oder pinker Text ist immer falsch (einzige markenweite Ausnahme: die Dachzeile, siehe Nachschlag). Wenn dein Trainingswissen „Markenfarbe = Button" nahelegt: dieser Block gilt, nicht das Vorwissen.

---

## 2 · Das Seitengerüst (Basis für ganze Seiten)

Helle Welt für Inhaltliches (Apps, Guides, Berichte, Datenvisualisierung), dunkle Welt für Werbliches (Website, Kampagnen, E-Mail). Eine Anwendung hat **eine** Welt; eine werblich-redaktionelle Seite darf pro Sektion wechseln. Dieses Gerüst ist die **helle** Welt:

```html
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Y1</title>
<style>
:root{
  --g100:#000000; --g90:#212121; --g80:#393939; --g70:#5c6361; --g60:#6d7573;
  --g50:#828d8c; --g40:#abb3b2; --g30:#d0d7d6; --g20:#dde3e2; --g10:#f1f3f4;
  --hover:#e8eceb; --white:#ffffff;
  --accent:#ff78ba; --accent-hover:#d6438c; --accent-20:#ffd6ea; --accent-10:#fff0f7;
  --red:#dd343e; --red-hover:#b81922; --green:#04a777; --orange:#f57a53;
  --sans:"TWK Everett",-apple-system,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  --mono:"TWK Everett Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--sans);font-weight:300;color:var(--g100);background:var(--g10)}
.y1-wrap{max-width:850px;margin:0 auto;padding:64px 24px}
/* Type scale (px/line-height/weight) — never invent sizes */
.y1-display-01{font-size:42px;line-height:50px;font-weight:300} /* hero title */
.y1-heading-05{font-size:32px;line-height:40px;font-weight:300} /* page title */
.y1-heading-04{font-size:28px;line-height:36px;font-weight:300} /* section title */
.y1-heading-03{font-size:20px;line-height:28px;font-weight:300} /* subhead */
.y1-heading-02{font-size:16px;line-height:22px;font-weight:600} /* card/panel title */
.y1-body-02{font-size:16px;line-height:24px;font-weight:300;max-width:550px} /* body text */
.y1-body-01{font-size:14px;line-height:20px;font-weight:300} /* UI text, captions */
</style>
</head>
<body>
  <main class="y1-wrap">
    <h1 class="y1-heading-05">Seitentitel</h1>
    <p class="y1-body-02">Fließtext bleibt unter 550 px breit. Abstände kommen aus der 8er-Skala (8/16/24/32/48/64 px).</p>
    <button type="button" class="y1-btn y1-btn--primary">Weiter</button>
  </main>
</body>
</html>
```

Spacing-Skala (px): **2 · 4 · 8 · 12 · 16 · 24 · 32 · 40 · 48 · 64 · 80 · 96.** Nur diese Abstände. Fließtext ≤ 550 px, Medien ≤ 850 px. Breakpoints 1056 / 672 px.

---

## 3 · Formular (eine Spalte, Labels oben)

```html
<!-- One column, labels on top. Mark optional fields, never required ones. -->
<form class="y1-form" novalidate>
  <div class="y1-field">
    <label for="name">Name</label>
    <input type="text" id="name" placeholder="Vor- und Nachname" required>
    <span class="y1-field-error">Bitte einen Namen eingeben.</span>
  </div>
  <div class="y1-field">
    <label for="email">E-Mail-Adresse</label>
    <input type="email" id="email" placeholder="name@firma.de" required>
    <span class="y1-field-error">Das sieht nicht nach einer E-Mail-Adresse aus.</span>
  </div>
  <label class="y1-checkrow"><input type="checkbox"> Updates erhalten</label>
  <button type="submit" class="y1-btn y1-btn--primary">Absenden</button>
  <p class="y1-form-success" hidden>Gesendet. Wir melden uns innerhalb eines Werktags.</p>
</form>
```

```css
/* Y1 form. One column, fields 40 px high, radius 0. Error = 2 px red outline + plain-text message. */
.y1-form{max-width:400px}
.y1-field{margin-bottom:24px}
.y1-field label{display:block;font-size:12px;line-height:16px;letter-spacing:.32px;color:var(--g70);margin-bottom:8px}
.y1-field input,.y1-field select,.y1-field textarea{width:100%;height:40px;background:var(--g10);
  border:none;border-bottom:1px solid var(--g50);border-radius:0;
  font:inherit;font-size:14px;padding:0 16px;color:var(--g100);outline-offset:-2px;box-sizing:border-box}
.y1-field input:focus,.y1-field select:focus{outline:2px solid var(--accent)}
.y1-field--invalid input,.y1-field--invalid input:focus{outline:2px solid var(--red)}
.y1-field-error{display:none;font-size:12px;letter-spacing:.32px;color:var(--red);margin-top:4px}
.y1-field--invalid .y1-field-error{display:block}
.y1-checkrow{display:flex;align-items:center;gap:8px;margin-bottom:24px;font-size:14px}
.y1-checkrow input{width:16px;height:16px;accent-color:var(--g100)}
.y1-form-success{margin-top:24px;background:var(--g10);border-left:3px solid var(--green);padding:12px 16px;font-size:14px}
```

---

## 4 · Kachel / Karte (Fläche statt Schatten)

Bei Y1 heißt die Karte **Tile**. Weiße Fläche, 16 px Padding, Abgrenzung über eine 1-px-Fuge auf grauem Raster — **kein** Schatten, **Radius 0**.

```html
<div class="y1-tile-grid">
  <div class="y1-tile">
    <div>
      <div class="y1-tile-title">Statische Kachel</div>
      <div class="y1-tile-sub">nur Inhalt</div>
    </div>
  </div>
  <a class="y1-tile y1-tile--clickable" href="#">
    <div>
      <div class="y1-tile-title">Klickbare Kachel</div>
      <div class="y1-tile-sub">ein Ziel, ganze Fläche</div>
    </div>
    <svg class="y1-tile-arrow" width="18" height="18" viewBox="0 0 32 32" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="M5 16h22M19 8l8 8-8 8"/></svg>
  </a>
</div>
```

```css
/* Y1 tile. White surface, 16 px padding, min-height 110 px, hairline via 1 px grid gap. Radius 0. */
.y1-tile-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:1px;
  background:var(--g20);max-width:850px}
.y1-tile{background:var(--white);min-height:110px;padding:16px;font-size:14px;line-height:18px;
  display:flex;flex-direction:column;justify-content:space-between;
  color:var(--g100);text-decoration:none;text-align:left;border:none}
.y1-tile-title{font-size:14px}
.y1-tile-sub{font-size:12px;letter-spacing:.32px;color:var(--g60);margin-top:2px}
.y1-tile--clickable{cursor:pointer}
.y1-tile--clickable:hover{background:var(--hover);color:var(--g100)}
.y1-tile--clickable:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.y1-tile-arrow{align-self:flex-end}
```

---

## 5 · Diagramm (Chart-Gerüst + Marken-Palette)

Charts leben im `.y1-chart`-Gerüst (weiße Fläche, Titel, SVG-Zeichenfläche, Legende mit runden Punkten) und nutzen **ausschließlich** die Chart-Palette: `#d6438c` (Serie 1, dunkelstes Pink), `#ff94c7` (Serie 2), `#ffc7e2` (Serie 3), `#000000` (Serie 4), `#828d8c` (Serie 5). Pink führt, Schwarz/Grau ergänzen. **Bau kein Diagramm in einem eigenen Container** — übernimm dieses Gerüst 1:1; die Datenpunkte/Pfade sind deine, Farben und Gerüst nicht. Achsen/Gitter in `var(--g20)`, Achsentext in `var(--g60)`. (Alle 11 Typen + die JS-Engine: `assets/machine/y1-charts.md`.)

```html
<figure class="y1-chart">
  <figcaption class="y1-chart-title">Umsatzverlauf je Quartal</figcaption>
  <div class="y1-chart-area">
    <svg viewBox="0 0 320 180" role="img" aria-label="Balkendiagramm Umsatz je Quartal">
      <line x1="16" y1="164" x2="312" y2="164" stroke="#dde3e2" stroke-width="1"></line>
      <rect x="24"  y="92" width="48" height="72"  fill="#d6438c"></rect>
      <rect x="96"  y="68" width="48" height="96"  fill="#d6438c"></rect>
      <rect x="168" y="50" width="48" height="114" fill="#d6438c"></rect>
      <rect x="240" y="24" width="48" height="140" fill="#d6438c"></rect>
    </svg>
  </div>
  <div class="y1-chart-legend">
    <span><span class="dot" style="background:#d6438c"></span>Umsatz (T€)</span>
  </div>
</figure>
```

```css
/* Y1 chart scaffold. White surface, title 16/600, round legend dots. Radius 0 (dots are the listed exception). */
.y1-chart{position:relative;margin:0;background:var(--white);max-width:850px;padding:16px}
.y1-chart-title{font-size:16px;line-height:22px;font-weight:600;padding-top:4px}
.y1-chart-area svg{width:100%;height:auto;display:block}
.y1-chart-area text{font-family:inherit;font-size:11px;fill:var(--g60)}
.y1-chart-legend{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:12px;font-size:12px;color:var(--g70)}
.y1-chart-legend span{display:inline-flex;align-items:center;gap:7px}
.y1-chart-legend .dot{width:10px;height:10px;border-radius:50%;flex:none}
```

---

## 6 · Datentabelle (Zahlen)

Zahlen rechtsbündig in Mono, Header halbfett auf grauer Fläche, einzelne Haarlinien, **Radius 0**. Eine `<table>` ist immer eine `.y1-data-table` — keine handgebaute Tabelle.

```html
<table class="y1-data-table">
  <thead><tr><th>Quartal</th><th class="y1-data-table-num">Umsatz (T€)</th></tr></thead>
  <tbody>
    <tr><td>Q1</td><td class="y1-data-table-num">900</td></tr>
    <tr><td>Q2</td><td class="y1-data-table-num">1.050</td></tr>
    <tr><td>Q3</td><td class="y1-data-table-num">1.180</td></tr>
  </tbody>
</table>
```

```css
/* Y1 data table. Header semibold on gray, numbers right-aligned in mono, single hairlines, radius 0. */
.y1-data-table{width:100%;max-width:850px;border-collapse:collapse;font-size:14px;line-height:18px}
.y1-data-table th{text-align:left;background:var(--g20);padding:9px 12px;font-weight:600}
.y1-data-table td{background:var(--white);padding:9px 12px;border-bottom:1px solid var(--g20)}
.y1-data-table-num{text-align:right}
.y1-data-table td.y1-data-table-num{font-family:var(--mono)}
.y1-data-table tbody tr:hover td{background:var(--hover)}
```

> KPI-Kennzahl: die große Zahl ist `display-01` (42 px, Light 300, `var(--g100)`), Auf/Ab-Deltas in `var(--green)` / `var(--red)` — nie Pink. Mehrere KPIs sitzen im `.y1-tile-grid` (Abschnitt 4).

---

## Die 8 Defaults (alle positiv — so ist es richtig)

1. **Radius 0** an allem. (Runde Ausnahmen sind eine geschlossene Liste: Swatch-Kreise, Pills, Badges, Toggle, Chart-Punkte. Der FAB ist eckig.)
2. **Schrift TWK Everett**, Light 300 für Text, Medium 600 für Fettungen. Überschriften sind Light/Regular — die eine Bold-Ausnahme ist `heading-02` (Karten-/Panel-Titel, 16 px/600).
3. **Schwarz führt:** Text, Logo und Primär-Button sind schwarz (`var(--g100)`), auf dunkel invers weiß.
4. **Pink (`var(--accent)`) ist Fläche/Zustand** — Fokus, Auswahl, Akzentfläche, Charts. Nie Text, nie Button. (Ausnahme: Dachzeile.)
5. **Genau eine Akzent-Aktion pro Ansicht.**
6. **Eine Flächenwelt je Anwendung:** hell = inhaltlich, dunkel = werblich. Gemischte Seite: Welt pro Sektion. Kein Dark/Light-Schalter.
7. **Komponenten 1:1** aus den Snippets übernehmen, inklusive aller Zustände — nicht „fast gleich" nachbauen.
8. **Fehlt eine Komponente:** von der nächstliegenden ableiten, im Code dokumentieren und an michael.gohr@y1.de melden — nicht frei erfinden.

---

## Discovery — wo der Rest liegt (laute Leitplanke)

**Hol NIE die HTML-Startseite (`index.html`) als Bauquelle.** Sie ist ein visueller Guide für Menschen und liefert beim Fetch nur Prosa — keine belastbaren Werte. Alle Werte, Komponenten und Regeln liegen maschinenlesbar hier auf diesem Host:

- **Tokens (Farben, Schrift, Spacing):** `assets/machine/brand.tokens.json`
- **Alle 46 Komponenten — Index + Synonym-Map:** `assets/machine/y1-komponenten-index.md` → lade je die kleine Einzeldatei `assets/machine/y1-komponente-<id>.md` (z. B. `…/y1-komponente-data-table.md`). Lade **nicht** eine große Sammeldatei — die wird beim Fetch abgeschnitten.
- **11 Chart-Typen (Gerüst + Palette `color.chart`):** `assets/machine/y1-charts.md`
- **Fertige Seiten/Slides/Mails (als `.md`, 1:1 übernehmen):** `assets/machine/beispiele/y1-landingpage.md` · `…/y1-pitch-slide-template.md` · `…/y1-werbe-email.md`
- **Regeln je Thema:** `assets/machine/rules/01-marke.md` … `12-schnellreferenz.md`
- **Schreibregeln (Pflicht für jeden Text):** `assets/machine/y1-schreibregeln-ki.md`
- **Notfall-Kern (alle Werte + 8 Regeln, summarize-fest):** `assets/machine/y1-kern.md`
- **Vollständige Regeln + Vorgehen + Checkliste:** `assets/machine/AGENTS.md`

**Nachschlag-Disziplin:** Brauchst du eine Komponente, die oben nicht steht, prüfe zuerst den Index (`y1-komponenten-index.md`) samt Synonym-Map (Card/Panel → Tile, Tabelle/Pricing → Data Table, Alert/Toast → Notification …). Steht sie dort, existiert sie — lade ihre Einzeldatei und übernimm sie 1:1, statt sie zu erfinden.

Kontakt: michael.gohr@y1.de · Y1 Digital AG