# SumUp Circuit-Designsystem

## Vorschau der SumUp Circuit-Designsystemoberfläche

Teste fehlerhafte Beträge, ändere den Artikelnamen, schalte das Notizfeld um und prüfe eine lokale Momentaufnahme.

## Referenz für das SumUp Circuit-Designsystem

Natives @sumup/circuit-ui 8.15.0 mit hellem CSS aus @sumup/design-tokens 7.3.1; ursprünglicher lokaler Artikeleditor.

### Helle Händleroberflächen und Text

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| --cui-bg-normal | #fff | Semantische Referenz für das helle Händler-Theme; verwende eine Oberflächenfarbe nicht als Vordergrundfarbe, ohne das vorgesehene Farbpaar zu prüfen. |
| --cui-bg-subtle | #f0f1f5 | Semantische Referenz für das helle Händler-Theme; verwende eine Oberflächenfarbe nicht als Vordergrundfarbe, ohne das vorgesehene Farbpaar zu prüfen. |
| --cui-bg-strong | #000 | Semantische Referenz für das helle Händler-Theme; verwende eine Oberflächenfarbe nicht als Vordergrundfarbe, ohne das vorgesehene Farbpaar zu prüfen. |
| --cui-bg-accent-strong | #0f131a | Semantische Referenz für das helle Händler-Theme; verwende eine Oberflächenfarbe nicht als Vordergrundfarbe, ohne das vorgesehene Farbpaar zu prüfen. |
| --cui-fg-normal | #0f131a | Semantische Referenz für das helle Händler-Theme; verwende eine Oberflächenfarbe nicht als Vordergrundfarbe, ohne das vorgesehene Farbpaar zu prüfen. |
| --cui-fg-subtle | #6a737c | Semantische Referenz für das helle Händler-Theme; verwende eine Oberflächenfarbe nicht als Vordergrundfarbe, ohne das vorgesehene Farbpaar zu prüfen. |
| --cui-fg-on-strong | #fff | Semantische Referenz für das helle Händler-Theme; verwende eine Oberflächenfarbe nicht als Vordergrundfarbe, ohne das vorgesehene Farbpaar zu prüfen. |
| --cui-fg-success | #018850 | Semantische Referenz für das helle Händler-Theme; verwende eine Oberflächenfarbe nicht als Vordergrundfarbe, ohne das vorgesehene Farbpaar zu prüfen. |
| --cui-fg-danger | #de331d | Semantische Referenz für das helle Händler-Theme; verwende eine Oberflächenfarbe nicht als Vordergrundfarbe, ohne das vorgesehene Farbpaar zu prüfen. |
| --cui-border-normal | #aeb6be | Semantische Referenz für das helle Händler-Theme; verwende eine Oberflächenfarbe nicht als Vordergrundfarbe, ohne das vorgesehene Farbpaar zu prüfen. |
### Abstandseinheiten

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| --cui-spacings-bit | 4px | Benannte Abstände, übernommen aus dem angehefteten Export von CSS. |
| --cui-spacings-byte | 8px | Benannte Abstände, übernommen aus dem angehefteten Export von CSS. |
| --cui-spacings-kilo | 12px | Benannte Abstände, übernommen aus dem angehefteten Export von CSS. |
| --cui-spacings-mega | 16px | Benannte Abstände, übernommen aus dem angehefteten Export von CSS. |
| --cui-spacings-giga | 24px | Benannte Abstände, übernommen aus dem angehefteten Export von CSS. |
| --cui-spacings-tera | 32px | Benannte Abstände, übernommen aus dem angehefteten Export von CSS. |
| --cui-spacings-peta | 40px | Benannte Abstände, übernommen aus dem angehefteten Export von CSS. |
| --cui-spacings-exa | 48px | Benannte Abstände, übernommen aus dem angehefteten Export von CSS. |
| --cui-spacings-zetta | 56px | Benannte Abstände, übernommen aus dem angehefteten Export von CSS. |
### Eckenradien

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| --cui-border-radius-bit | 4px | Wähle die Form passend zur Rolle des Steuerelements oder der Oberfläche. |
| --cui-border-radius-byte | 8px | Wähle die Form passend zur Rolle des Steuerelements oder der Oberfläche. |
| --cui-border-radius-kilo | 12px | Wähle die Form passend zur Rolle des Steuerelements oder der Oberfläche. |
| --cui-border-radius-mega | 16px | Wähle die Form passend zur Rolle des Steuerelements oder der Oberfläche. |
| --cui-border-radius-circle | 100% | Wähle die Form passend zur Rolle des Steuerelements oder der Oberfläche. |
| --cui-border-radius-pill | 999999px | Wähle die Form passend zur Rolle des Steuerelements oder der Oberfläche. |
### Schriftfamilien und Schriftschnitte

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| --cui-font-stack-default | aktiv-grotesk, Helvetica, Arial, system-ui, sans-serif, "Segoe UI", Roboto, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" | Das Beispiel nutzt verfügbare Fallbacks; es lädt Aktiv Grotesk nicht herunter. |
| --cui-font-stack-mono | Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace | Das Beispiel nutzt verfügbare Fallbacks; es lädt Aktiv Grotesk nicht herunter. |
| --cui-font-weight-regular | 400 | Das Beispiel nutzt verfügbare Fallbacks; es lädt Aktiv Grotesk nicht herunter. |
| --cui-font-weight-bold | 700 | Das Beispiel nutzt verfügbare Fallbacks; es lädt Aktiv Grotesk nicht herunter. |
### Zustände der primären Aktion

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| --cui-bg-accent-strong | #0f131a | Behalte separate Zustände für normal, Hover, gedrückt und deaktiviert bei. |
| --cui-bg-accent-strong-hovered | #3b3f46 | Behalte separate Zustände für normal, Hover, gedrückt und deaktiviert bei. |
| --cui-bg-accent-strong-pressed | #6a737c | Behalte separate Zustände für normal, Hover, gedrückt und deaktiviert bei. |
| --cui-bg-accent-strong-disabled | rgba(15, 19, 26, .4) | Behalte separate Zustände für normal, Hover, gedrückt und deaktiviert bei. |
### Öffentliche Props von Eingabefeld und Schaltfläche

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| Input.label | required string | Zweck des sichtbaren Felds. |
| Input.invalid | boolean | Natives Fehlerstyling und Barrierefreiheitsstatus. |
| Input.validationHint | string | Zeige unter dem Steuerelement eine konkrete Anweisung an. |
| Button.variant | primary / secondary / tertiary | Aktionshierarchie in dieser angehefteten Version. |
| Button.size | s / m | Aktuelle Größenwerte in Version 8.15.0. |
| Button.stretch | boolean | Nutze für die lokale Prüfaktion die gesamte Breite des übergeordneten Elements. |
## Vollständiger Leitfaden zum SumUp Circuit-Designsystem

Ein praktischer Leitfaden zur Auswahl, Anwendung und Überprüfung dieses Systems für ein echtes Interface.

Umfassende Anleitung, Einstieg in die Implementierung und Links zu den Quellen.

## Zusammenstellung des Händlereditors für das SumUp Circuit-Designsystem

### Händlereingabe und Kundendarstellung trennen

> Der Artikeleditor und die kassenbonartige Vorschau zeigen zwei Ansichten desselben Zustands. In einem kurzen Formular wird der Artikel benannt, ein beispielhafter Betrag festgelegt und ausgewählt, ob ein Notizfeld für Kunden angezeigt wird. Die Vorschau veranschaulicht die Wirkung, ohne einen Bezahlvorgang zu starten oder Zahlungsinformationen anzufordern.

### Eine eigene Produktillustration verwenden

Die geometrische Druckgrafik ist eine eigens erstellte Illustration von CSS mit einer barrierefreien Beschreibung. Sie zeigt in der Kundenvorschau ein erkennbares Objekt statt eines leeren Bildrahmens und vermeidet zugleich ein vorgetäuschtes Händlerfoto oder ein kopiertes SumUp-Produktbild.

## SumUp Circuit Designsystem: semantisches Theme und Paketumfang

### Das exakt angeheftete Theme verwenden

Dieses Beispiel verwendet @sumup/circuit-ui 8.15.0 mit @sumup/design-tokens 7.3.1. Die Referenztabelle wird aus light.css dieses Pakets ausgelesen. Die aktuelle Upstream-Dokumentation ist inzwischen auf den Namespace @sumup-oss umgestellt; dies ist eine reproduzierbare Integration mit angehefteten Versionen und keine Behauptung, dass der ältere Namespace die neueste Version ist.

### Komponentenstile und Tokenstile laden

Der Einstiegspunkt React importiert sowohl das Stylesheet der Komponenten als auch die helle Token-Datei. Die Klassennamen der Komponenten reichen nicht aus, wenn ihre benutzerdefinierten Eigenschaften CSS nicht definiert wurden. Eine abgegrenzte dunkle Palette benötigt außerdem ein vollständiges Basistheme, das gemeinsame Werte außerhalb der Farben bereitstellt.

## Neutrale Oberflächen und Aktionskontrast im SumUp Circuit-Designsystem

### Den Artikel als Blickfang beibehalten

Der Editor verwendet eine weiße Oberfläche und einen dunklen Vordergrund, während die Kundenvorschau auf einem dezenten neutralen Hintergrund liegt. Die eigene Illustration bringt gezielt Farbe in das Artikelbild und lässt die native primäre Aktion gut lesbar und leicht auffindbar.

### Die Aktion in der Vorschau eindeutig als nicht interaktiv kennzeichnen

Die Fußzeile aus Kundensicht ist ein Textblock mit der Kennzeichnung „Nur Vorschau“ und keine deaktivierte Schaltfläche „Bezahlen“, die einen fast funktionierenden Bezahlvorgang suggeriert. Die einzige echte Aktion zum Absenden gehört zum Editor und prüft einen Artikel lokal. So verstehen Nutzer, wo die Interaktionsmöglichkeiten dieses Beispiels enden.

## Typografie und Fallbacks im SumUp Circuit-Designsystem

### Die Schriftarten des Themes transparent angeben

Der veröffentlichte Schriftartenstapel beginnt mit Aktiv Grotesk und umfasst Helvetica, Arial sowie System-Fallbacks. Dieses Offline-Beispiel lädt die zuerst genannte Schriftart nicht herunter. Die nativen Headline- und Body-Komponenten sorgen dennoch für die vorgesehene Hierarchie; die verfügbaren Schriftarten bestimmen die endgültige Form der Zeichen.

### Betrag und Währung zusammenhalten

Intl.NumberFormat formatiert den geprüften lokalen Betrag als Euro-Betrag. Der Preis wird stärker hervorgehoben als die Artikelbeschreibung und bleibt in der Kundenvorschau sichtbar. Bei einem fehlerhaften Entwurf wird ein Gedankenstrich angezeigt statt einer irreführenden Null oder eines nur teilweise geparsten Betrags.

## Abstände und abgerundete Oberflächen im SumUp Circuit-Designsystem

### Die benannte Abstufung verwenden

Die Token-Skala verwendet die Bezeichnungen bit, byte, kilo, mega und weitere größere Stufen. Dabei handelt es sich um Designbezeichnungen, nicht um Zweierpotenzen. Die Tabelle enthält die exakten Pixelwerte, damit Entwickler keine Skala aus der Namensmetapher ableiten müssen.

### Steuerungselemente bündig ausrichten, ohne die Hierarchie aufzuheben

Das Formular verwendet einen einheitlichen vertikalen Abstand und eine primäre Aktion über die gesamte Breite. Die Vorschau besteht aus einer größeren, abgerundeten Außenfläche und einem kleineren Kassenbon-Innenbereich. Auf dem Smartphone folgt die Vorschau auf das Formular; die Abstände werden verringert, bevor die Steuerelemente zusammengeschoben werden.

## Artikelvalidierung und Entwurfszustand im SumUp Circuit-Designsystem

### Vor der Formatierung die vollständige Zeichenfolge validieren

Die Anwendung akzeptiert ein bis fünf Ziffern vor dem Komma und bis zu zwei Nachkommastellen, sofern der Zahlenwert positiv ist. Dies ist eine eigens festgelegte Beispielregel. So wird verhindert, dass parseFloat Teilzeichenfolgen wie 24abc akzeptiert. Nach dem Absenden wird das erste ungültige native Input fokussiert.

### Bei jeder Änderung die veraltete Prüfung verwerfen

Änderungen am Namen, Betrag oder der Sichtbarkeit der Notiz machen die vorherige Momentaufnahme ungültig. Der Erfolgszustand enthält den geprüften Artikelnamen und Betrag und ist damit an einen konkreten Entwurf gebunden. Der Code speichert dieses Ergebnis weder in einem Backend noch erstellt er eine Zahlungsanforderung.

## Fehlerkorrektur und Bedeutung der Vorschau im SumUp Circuit-Designsystem

### Beide Feldfehler ausprobieren

Für Artikelname und Preis werden native Pflichtfeldkennzeichnungen, der ungültige Zustand und validationHint verwendet. Im Quellcode bleiben Referenzen auf die Eingabefelder erhalten, damit der Fokus zum ersten fehlerhaften Feld zurückkehrt. Die Fehlerbehandlung lässt sich testen, ohne echte Kunden- oder Kartendaten einzugeben.

1. Leere den Namen und sende das Formular ab, um den ersten Feldfehler zu sehen.

2. Probiere 24abc oder null aus und korrigiere den Betrag anschließend auf 24.50.

3. Prüfe den Eintrag lokal und bearbeite ein Feld, um die veraltete Momentaufnahme zu verwerfen.

### Illustration und statische Vorschau eindeutig kennzeichnen

Das Motiv hat eine kurze Beschreibung seiner Bildfunktion. Der Kundenhinweis ist ein erläuternder Platzhalter in einer ausdrücklich gekennzeichneten Vorschau, kein vorgetäuschtes bearbeitbares Eingabefeld. Die echte Checkbox zum Aktivieren des Hinweises befindet sich im Händlerformular und steuert, ob dieser Vorschauabschnitt angezeigt wird.

## SumUp Circuit-Designsystem React und CSS-Integration

### Die öffentlichen Peer-Abhängigkeiten und beide Stylesheets einbinden

Der Eintrag verwendet React 18 und die festgelegten Circuit-Komponenten. Token-, Icon-, Internationalisierungs- und Emotion-Peer-Abhängigkeiten entsprechen den Paketvorgaben. Der Code bindet light.css und styles.css explizit ein. Er setzt weder einen undokumentierten Provider noch eine verborgene Theme-Konfiguration auf Projektebene voraus.

- Komponentenstile von @sumup/circuit-ui 8.15.0.

- Vollständiges helles Theme von @sumup/design-tokens 7.3.1.

- React 18 und die deklarierten Peer-Abhängigkeiten des Komponentenpakets.

### Zahlungsdienste nur in einer echten Anwendung hinzufügen

Ein produktiver Zahlungsablauf benötigt eine eigene autorisierte Dienstintegration, eine validierte Währungsbehandlung und Serverantworten. Dieses Beispiel beschränkt sich bewusst auf die Überprüfung einer lokalen Darstellung. Diese Formulierung beim Wiederverwenden des Beispiels beibehalten, bis ein echter Transaktionsablauf vorhanden ist.

## SumUp Circuit-Designsystem: Komponentenbeispiele

### main.jsx — vollständiges, funktionsfähiges Beispiel

Bearbeite einen Artikel und prüfe die Vorschau aus Kundensicht. Der folgende Quelltext enthält den vollständigen React-Eintrag einschließlich aller Zustände und Validierungen.

```
import React, { useState, useRef } from "react";
import { createRoot } from "react-dom/client";
import { Input, Checkbox, Button, Headline, Body } from "@sumup/circuit-ui";
import "@sumup/design-tokens/light.css";
import "@sumup/circuit-ui/styles.css";
import "./circuit.css";
function App() {
  const [name, setName] = useState("Studio print"),
    [price, setPrice] = useState("24.00"),
    [note, setNote] = useState(true),
    [errors, setErrors] = useState({}),
    [review, setReview] = useState(null);
  const nameRef = useRef(),
    priceRef = useRef();
  const valid = /^\d{1,5}(\.\d{1,2})?$/.test(price) && Number(price) > 0;
  const amount = valid
    ? new Intl.NumberFormat("en-IE", {
        style: "currency",
        currency: "EUR",
      }).format(Number(price))
    : "—";
  function change(fn) {
    fn();
    setReview(null);
    setErrors({});
  }
  function submit(e) {
    e.preventDefault();
    const next = {};
    if (!name.trim()) next.name = "Enter an item name.";
    if (!valid)
      next.price = "Use a positive amount with up to two decimal places.";
    setErrors(next);
    if (next.name) {
      nameRef.current.focus();
      return;
    }
    if (next.price) {
      priceRef.current.focus();
      return;
    }
    setReview({ name: name.trim(), amount, note });
  }
  return (
    <main className="circuit-example">
      <header>
        <p className="eyebrow">MERCHANT TOOLS / LOCAL SPECIMEN</p>
        <Headline as="h1">Prepare a simple item</Headline>
        <Body>
          Review how an item could appear to a customer. This example never
          creates a payment link.
        </Body>
      </header>
      <div className="circuit-grid">
        <form onSubmit={submit} noValidate>
          <h2>Item details</h2>
          <Input
            ref={nameRef}
            label="Item name"
            required
            value={name}
            maxLength={80}
            invalid={!!errors.name}
            validationHint={
              errors.name || "Use a short name the customer can recognize."
            }
            onChange={(e) => change(() => setName(e.target.value))}
          />
          <Input
            ref={priceRef}
            label="Price in EUR"
            required
            inputMode="decimal"
            value={price}
            invalid={!!errors.price}
            validationHint={
              errors.price || "Example amount only; no charge will be made."
            }
            onChange={(e) => change(() => setPrice(e.target.value))}
          />
          <Checkbox
            label="Show a customer note field"
            checked={note}
            onChange={(e) => change(() => setNote(e.target.checked))}
          />
          <Button variant="primary" type="submit" stretch>
            Review item locally
          </Button>
          {review && (
            <div className="review" role="status">
              <strong>Item reviewed</strong>
              <p>
                {review.name} · {review.amount}
              </p>
              <small>
                Local snapshot only. No payment link or charge created.
              </small>
            </div>
          )}
        </form>
        <section className="preview-surface" aria-labelledby="preview-heading">
          <h2 id="preview-heading">Customer-side preview</h2>
          <div className="receipt">
            <div className="shop-mark" aria-hidden="true">
              N
            </div>
            <p className="shop-name">Northstar Studio</p>
            <div
              className="print-art"
              role="img"
              aria-label="Original geometric print illustration"
            >
              <i></i>
              <b></b>
              <span></span>
            </div>
            <h3>{name.trim() || "Your item name"}</h3>
            <p className="receipt-price">{amount}</p>
            {note && (
              <div className="note-placeholder">
                <span>Customer note</span>
                <p>A note field would appear here.</p>
              </div>
            )}
            <div className="preview-action">
              Preview only · checkout unavailable
            </div>
          </div>
        </section>
      </div>
      <footer>
        Native Circuit UI 8.15.0 components and design tokens 7.3.1. Original
        item editor and illustration by OpenDesign.
      </footer>
    </main>
  );
}
createRoot(document.getElementById("root")).render(<App />);
```

Code-Referenz

- Erstellen Sie ein Vite-Projekt React, behalten Sie <div id="root"></div> bei und laden Sie diese Datei als src/main.jsx.

### circuit.css — ursprüngliches responsives Layout

Anwendungslayout, das um die nativen Komponenten herum aufgebaut ist.

```
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--cui-bg-normal);
  color: var(--cui-fg-normal);
  font: 16px/1.5 var(--cui-font-stack-default);
}
.circuit-example {
  padding: 32px;
}
.circuit-example header {
  max-width: 720px;
  margin-bottom: 32px;
}
.eyebrow {
  font-size: 12px;
  letter-spacing: 0.08em;
  margin-bottom: 12px;
  color: var(--cui-fg-subtle);
}
.circuit-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 1fr);
  gap: 48px;
}
.circuit-example h2 {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 24px;
}
.circuit-example form {
  max-width: 540px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.circuit-example form h2 {
  margin: 0;
}
.preview-surface {
  background: var(--cui-bg-subtle);
  padding: 28px;
  border-radius: 16px;
}
.preview-surface > h2 {
  font-size: 14px;
  color: var(--cui-fg-subtle);
  text-align: center;
}
.receipt {
  max-width: 340px;
  margin: auto;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 20px #0000000d;
  padding: 24px;
}
.shop-mark {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #0f131a;
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 700;
  margin: auto;
}
.shop-name {
  text-align: center;
  font-size: 14px;
  margin: 12px 0 20px;
}
.print-art {
  height: 150px;
  background: #f5dfbb;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}
.print-art i {
  position: absolute;
  left: 24px;
  bottom: 0;
  width: 100px;
  height: 130px;
  border-radius: 60px 60px 0 0;
  background: #ce663d;
}
.print-art b {
  position: absolute;
  right: 20px;
  top: 20px;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: #385d50;
}
.print-art span {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 24px;
  background: #202e2a;
}
.receipt h3 {
  font-size: 20px;
  line-height: 1.3;
  margin: 20px 0 8px;
  overflow-wrap: anywhere;
}
.receipt-price {
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 24px;
}
.note-placeholder {
  padding: 12px;
  border: 1px solid #bfc6cf;
  border-radius: 8px;
  margin-bottom: 16px;
  font-size: 12px;
}
.note-placeholder span {
  font-weight: 700;
}
.note-placeholder p {
  margin: 4px 0 0;
  color: #4f5a65;
}
.preview-action {
  background: #e9edf2;
  text-align: center;
  border-radius: 999px;
  padding: 12px;
  font-size: 12px;
  color: #4f5a65;
}
.review {
  padding: 20px;
  background: #e7f5ef;
  border-radius: 8px;
}
.review p {
  margin: 8px 0;
}
.review small {
  font-size: 12px;
}
.circuit-example footer {
  font-size: 12px;
  color: var(--cui-fg-subtle);
  margin-top: 32px;
}
@media (max-width: 850px) {
  .circuit-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .circuit-example form {
    max-width: none;
  }
}
@media (max-width: 550px) {
  .circuit-example {
    padding: 20px 16px;
  }
  .preview-surface {
    padding: 20px;
  }
  .receipt {
    padding: 20px;
  }
}
```

Code-Referenz

- Speichern Sie die Datei neben main.jsx. Diese benutzerdefinierten Layoutregeln sind von der Token-Referenz der Bibliothek getrennt.

## SumUp Circuit-Designsystem: Einrichtung des Agents

### Ausgangspunkt für die Implementierung

Das Beispiel mit den festgelegten nativen Komponenten wurde gebündelt und lokal im Browser geprüft. Das Beispiel verwendet ausschließlich den lokalen Anwendungszustand.

```
npm create vite@latest circuit-item -- --template react
cd circuit-item
npm install
npm install react@18.3.1 react-dom@18.3.1 @sumup/circuit-ui@8.15.0 @sumup/design-tokens@7.3.1 @sumup/icons @sumup/intl@1 @emotion/react @emotion/styled @emotion/is-prop-valid
# Replace src/main.jsx and add src/circuit.css.
npm run dev
```

### Ein Prompt für dein Projekt

```
Erstelle einen Circuit-Artikeleditor mit den festgelegten nativen Steuerelementen und beiden erforderlichen Stylesheets. Validiere vollständige Betragsangaben, behalte die Währungsformatierung bei, setze nach Änderungen eine veraltete lokale Prüfung zurück und halte die Kundenvorschau klar von einem echten Bezahlvorgang getrennt. Verwende die ursprüngliche Illustration und die exakten semantischen Token-Rollen.
```

## SumUp Circuit-Designsystem: Quellen und Geltungsbereich

OpenDesign-Anwendungsleitfaden für eine festgelegte Generation des Circuit-Pakets. Illustration, Betrag und Artikel sind Beispiele. Dieser lokale Editor erstellt weder einen Zahlungslink noch eine Belastung oder eine Aktion für ein SumUp-Konto. Aktuelle Upstream-Pakete verwenden den neueren Namespace @sumup-oss.

- Circuit-Dokumentation Aktuelle Anleitungen zu Komponenten und Integration.

- Festgelegte helle Tokens Exakte Werte, die in diesem Beispiel verwendet werden.

- Circuit-Quelle Paketgenerationen, Komponenten-Props und aktueller Namespace.

## SumUp Circuit-Designsystem: Verwandte Ressourcen

### TDesign

Erstellen Sie einen kompakten Richtlinieneditor für API mit TDesign React: konkreten Theme-Rollen, einer zweipixeligen Größenskala, der Registrierung von Form-Feldern und einer typisierten Table-Komposition.

### Thumbtack Thumbprint

Erstelle eine Oberfläche zur Suche nach Dienstleistern mit den dokumentierten v2-Primitiven von Thumbprint: kompakte Anbieter-Karten, übersichtliche Vergleichsdetails, eindeutige Auswahlzustände und eine dauerhaft sichtbare Merkliste.

### Twilio Paste

Erstelle einen Benachrichtigungsentwurf mit dem Theme und den Button-Vorgaben von Paste, einer überprüften Abstands-Skala und einer klaren Unterscheidung zwischen dem Bearbeiten, Prüfen und tatsächlichen Senden einer Nachricht.


- [Implementierungsreferenz](https://circuit.sumup.com/)
- [Quelle](https://cdn.jsdelivr.net/npm/@sumup/design-tokens@7.3.1/light.css)
- [Quelle](https://github.com/sumup-oss/circuit-ui)
- [Code-Referenz](https://circuit.sumup.com/)
- [Circuit-Dokumentation Aktuelle Anleitungen zu Komponenten und Integration.](https://circuit.sumup.com/)
- [Festgelegte helle Tokens Exakte Werte, die in diesem Beispiel verwendet werden.](https://cdn.jsdelivr.net/npm/@sumup/design-tokens@7.3.1/light.css)
- [Circuit-Quelle Paketgenerationen, Komponenten-Props und aktueller Namespace.](https://github.com/sumup-oss/circuit-ui)