# SumUp Circuit Tasarım Sistemi

## SumUp Circuit Tasarım Sistemi Arayüz Önizlemesi

Hatalı tutarları deneyin, ürün adını değiştirin, not alanını açıp kapatın ve yerel bir özeti inceleyin.

## SumUp Circuit Tasarım Sistemi Tasarım Referansı

@sumup/design-tokens 7.3.1 açık CSS temasıyla yerel @sumup/circuit-ui 8.15.0; özgün yerel ürün düzenleyicisi.

### Satıcı açık temasının arka plan yüzeyleri ve metinleri

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| --cui-bg-normal | #fff | Anlamsal satıcı-açık teması referansı; bir yüzey rengini, amaçlanan eşleşmesini kontrol etmeden ön plan rengi olarak kullanmayın. |
| --cui-bg-subtle | #f0f1f5 | Anlamsal satıcı-açık teması referansı; bir yüzey rengini, amaçlanan eşleşmesini kontrol etmeden ön plan rengi olarak kullanmayın. |
| --cui-bg-strong | #000 | Anlamsal satıcı-açık teması referansı; bir yüzey rengini, amaçlanan eşleşmesini kontrol etmeden ön plan rengi olarak kullanmayın. |
| --cui-bg-accent-strong | #0f131a | Anlamsal satıcı-açık teması referansı; bir yüzey rengini, amaçlanan eşleşmesini kontrol etmeden ön plan rengi olarak kullanmayın. |
| --cui-fg-normal | #0f131a | Anlamsal satıcı-açık teması referansı; bir yüzey rengini, amaçlanan eşleşmesini kontrol etmeden ön plan rengi olarak kullanmayın. |
| --cui-fg-subtle | #6a737c | Anlamsal satıcı-açık teması referansı; bir yüzey rengini, amaçlanan eşleşmesini kontrol etmeden ön plan rengi olarak kullanmayın. |
| --cui-fg-on-strong | #fff | Anlamsal satıcı-açık teması referansı; bir yüzey rengini, amaçlanan eşleşmesini kontrol etmeden ön plan rengi olarak kullanmayın. |
| --cui-fg-success | #018850 | Anlamsal satıcı-açık teması referansı; bir yüzey rengini, amaçlanan eşleşmesini kontrol etmeden ön plan rengi olarak kullanmayın. |
| --cui-fg-danger | #de331d | Anlamsal satıcı-açık teması referansı; bir yüzey rengini, amaçlanan eşleşmesini kontrol etmeden ön plan rengi olarak kullanmayın. |
| --cui-border-normal | #aeb6be | Anlamsal satıcı-açık teması referansı; bir yüzey rengini, amaçlanan eşleşmesini kontrol etmeden ön plan rengi olarak kullanmayın. |
### Aralık birimleri

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| --cui-spacings-bit | 4px | Adlandırılmış aralık adımları, sabitlenmiş CSS dışa aktarımından alınmıştır. |
| --cui-spacings-byte | 8px | Adlandırılmış aralık adımları, sabitlenmiş CSS dışa aktarımından alınmıştır. |
| --cui-spacings-kilo | 12px | Adlandırılmış aralık adımları, sabitlenmiş CSS dışa aktarımından alınmıştır. |
| --cui-spacings-mega | 16px | Adlandırılmış aralık adımları, sabitlenmiş CSS dışa aktarımından alınmıştır. |
| --cui-spacings-giga | 24px | Adlandırılmış aralık adımları, sabitlenmiş CSS dışa aktarımından alınmıştır. |
| --cui-spacings-tera | 32px | Adlandırılmış aralık adımları, sabitlenmiş CSS dışa aktarımından alınmıştır. |
| --cui-spacings-peta | 40px | Adlandırılmış aralık adımları, sabitlenmiş CSS dışa aktarımından alınmıştır. |
| --cui-spacings-exa | 48px | Adlandırılmış aralık adımları, sabitlenmiş CSS dışa aktarımından alınmıştır. |
| --cui-spacings-zetta | 56px | Adlandırılmış aralık adımları, sabitlenmiş CSS dışa aktarımından alınmıştır. |
### Köşe yarıçapları

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| --cui-border-radius-bit | 4px | Biçimi, denetimin veya yüzeyin rolüne göre kullanın. |
| --cui-border-radius-byte | 8px | Biçimi, denetimin veya yüzeyin rolüne göre kullanın. |
| --cui-border-radius-kilo | 12px | Biçimi, denetimin veya yüzeyin rolüne göre kullanın. |
| --cui-border-radius-mega | 16px | Biçimi, denetimin veya yüzeyin rolüne göre kullanın. |
| --cui-border-radius-circle | 100% | Biçimi, denetimin veya yüzeyin rolüne göre kullanın. |
| --cui-border-radius-pill | 999999px | Biçimi, denetimin veya yüzeyin rolüne göre kullanın. |
### Yazı tipi aileleri ve kalınlıkları

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| --cui-font-stack-default | aktiv-grotesk, Helvetica, Arial, system-ui, sans-serif, "Segoe UI", Roboto, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" | Örnek, kullanılabilir yedekleri kullanır; Aktiv Grotesk'i indirmez. |
| --cui-font-stack-mono | Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace | Örnek, kullanılabilir yedekleri kullanır; Aktiv Grotesk'i indirmez. |
| --cui-font-weight-regular | 400 | Örnek, kullanılabilir yedekleri kullanır; Aktiv Grotesk'i indirmez. |
| --cui-font-weight-bold | 700 | Örnek, kullanılabilir yedekleri kullanır; Aktiv Grotesk'i indirmez. |
### Birincil eylem durumları

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| --cui-bg-accent-strong | #0f131a | Normal, üzerine gelme, basılı ve devre dışı durumlarını ayrı tutun. |
| --cui-bg-accent-strong-hovered | #3b3f46 | Normal, üzerine gelme, basılı ve devre dışı durumlarını ayrı tutun. |
| --cui-bg-accent-strong-pressed | #6a737c | Normal, üzerine gelme, basılı ve devre dışı durumlarını ayrı tutun. |
| --cui-bg-accent-strong-disabled | rgba(15, 19, 26, .4) | Normal, üzerine gelme, basılı ve devre dışı durumlarını ayrı tutun. |
### Girdi ve düğme herkese açık özellikleri

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| Input.label | required string | Alanın ne işe yaradığını belirtir. |
| Input.invalid | boolean | Yerel geçersiz stil ve erişilebilirlik durumu. |
| Input.validationHint | string | Denetimin altında belirli bir yönerge gösterin. |
| Button.variant | primary / secondary / tertiary | Bu sabitlenmiş sürümdeki eylem hiyerarşisi. |
| Button.size | s / m | 8.15.0 sürümündeki geçerli boyut değerleri. |
| Button.stretch | boolean | Yerel inceleme eylemini üst öğenin genişliğine yayacak şekilde doldurun. |
## SumUp Circuit Tasarım Sistemi Eksiksiz Rehber

Bu sistemi gerçek bir arayüz için seçmeye, uygulamaya ve gözden geçirmeye yönelik pratik bir kılavuz.

Eksiksiz yönlendirme, uygulama için başlangıç noktası ve kaynak bağlantıları.

## SumUp Circuit Tasarım Sistemi Satıcı Düzenleyicisi Düzenlemesi

### Satıcı girdisini müşteri sunumundan ayırın

> Ürün düzenleyicisi ve makbuz benzeri önizleme, aynı durumun iki görünümünü sunar. Kısa formda ürün adı belirtilir, örnek bir tutar girilir ve müşteri notu alanının gösterilip gösterilmeyeceği seçilir. Önizleme, ödeme bilgisi istemeden ve ödeme akışı oluşturmadan yapılan değişikliklerin etkisini gösterir.

### Özgün bir ürün çizimi kullanın

Geometrik baskı görseli, CSS tarafından oluşturulmuş ve erişilebilir bir açıklamayla sunulan özgün bir çalışmadır. Sahte bir satıcı fotoğrafı veya kopyalanmış bir SumUp ürün görseli kullanmak yerine, müşteri önizlemesinde tanınabilir bir nesne gösterir.

## SumUp Circuit Tasarım Sistemi Anlamsal Tema ve Paket Kapsamı

### Tam olarak sabitlenmiş temayı kullanın

Bu örnek @sumup/circuit-ui 8.15.0 ile @sumup/design-tokens 7.3.1'i kullanır. Referans tablosu bu paketin light.css dosyasından alınmıştır. Güncel üst kaynak belgeleri artık @sumup-oss ad alanını kullanıyor; bu, yinelenebilir ve sabitlenmiş bir entegrasyondur, eski ad alanının en yeni sürüm olduğu iddiası değildir.

### Bileşen stillerini ve belirteç stillerini yükleyin

React giriş noktası hem bileşen stil sayfasını hem de açık tema belirteç dosyasını içe aktarır. CSS özel özellikleri tanımlanmamışsa bileşen sınıf adları tek başına yeterli olmaz. Kapsamı belirlenmiş koyu bir paletin ortak renk dışı değerleri sağlayabilmesi için tam bir temel temaya da ihtiyacı vardır.

## SumUp Circuit Tasarım Sistemi Nötr Yüzeyler ve Eylem Kontrastı

### Görsel odağı ürünün üzerinde tutun

Düzenleyicide beyaz yüzey ve koyu ön plan kullanılırken müşteri önizlemesi hafif nötr bir arka plan üzerinde yer alır. Özgün çizim, ürün görseline kontrollü renk katar; yerel birincil eylemin okunaklı ve kolay bulunur kalmasını sağlar.

### Önizleme eyleminin etkileşimli olmadığını açıkça gösterin

Müşteri tarafındaki alt bilgi, neredeyse çalışır durumdaki bir ödeme akışı izlenimi veren devre dışı bir Pay düğmesi değil, yalnızca önizleme olduğunu belirten bir metin bloğudur. Gerçek gönderme eylemi yalnızca düzenleyicide bulunur ve yerel ürünü inceler. Böylece kullanıcılar örneğin gerçek etkileşim sınırını anlayabilir.

## SumUp Circuit Tasarım Sistemi Tipografi ve Yedekler

### Tema yığınını olduğu gibi belirtin

Yayımlanmış yazı tipi yığını Aktiv Grotesk ile başlar ve Helvetica, Arial ve sistem yedeklerini içerir. Bu çevrimdışı örnek ilk yazı tipini indirmez. Yerel Headline ve Body bileşenleri yine de amaçlanan hiyerarşiyi sunar; harf biçimlerini ise kullanılabilir yazı tipleri belirler.

### Tutarı ve para birimini birlikte tutun

Intl.NumberFormat, doğrulanmış yerel tutarı euro biçiminde gösterir. Fiyat, ürün açıklamasından daha belirgin biçimde sunulur ve müşteri önizlemesinde kalır. Hatalı bir taslak, yanıltıcı bir sıfır veya kısmen ayrıştırılmış bir tutar yerine uzun çizgi gösterir.

## SumUp Circuit Tasarım Sistemi Aralıklar ve Yuvarlatılmış Yüzeyler

### Adlandırılmış adım dizisini kullanın

Belirteç ölçeğinde bit, byte, kilo, mega ve daha büyük adlar kullanılır. Bunlar ikinin kuvvetlerini gösteren matematiksel değerler değil, tasarım etiketleridir. Tablo, geliştiricilerin adlandırma benzetmesinden hareketle yeni bir ölçek uydurmaması için kesin piksel değerlerini korur.

### Hiyerarşiyi bozmadan denetim kenarlarını hizalayın

Formda tutarlı bir dikey aralık ve tam genişlikte birincil eylem kullanılır. Önizlemede daha büyük, yuvarlatılmış bir dış yüzey ve daha küçük bir makbuz iç yüzeyi bulunur. Telefonda önizleme formun ardından gelir; denetimler sıkıştırılmadan önce iç boşluk azaltılır.

## SumUp Circuit Tasarım Sistemi Ürün Doğrulama ve Taslak Durumu

### Biçimlendirmeden önce dizgenin tamamını doğrulayın

Uygulama, pozitif bir sayısal değer için bir ila beş tam sayı basamağına ve en fazla iki ondalık basamağa izin verir. Bu, örnek için belirlenmiş bir kuraldır. parseFloat işlevinin 24abc gibi kısmi bir dizgeyi kabul etmesini önler ve gönderimden sonra geçersiz ilk yerel Input alanına odaklanır.

### Düzenlemede eski inceleme sonucunu temizle

Adın, tutarın veya notun görünürlüğünün değiştirilmesi önceki anlık görüntüyü geçersiz kılar. Başarılı durum, incelenen ürün adını ve tutarını içerdiğinden belirli bir taslağa bağlıdır. Kod bu sonucu bir arka uçta saklamaz veya ödeme isteği oluşturmaz.

## SumUp Circuit Tasarım Sistemi Input Hata Kurtarma ve Önizleme Anlamı

### Her iki alan hatasını da deneyin

Ürün adı ve fiyat alanlarında yerel required etiketleri, geçersiz durum ve validationHint kullanılır. Kaynak kodu, başarısız olan ilk alana yeniden odaklanmak için input referanslarını saklar. Gerçek müşteri veya kart bilgileri girilmeden hata kurtarma denenebilir.

1. İlk alan hatasını görmek için adı silip gönderin.

2. 24abc veya sıfır deneyin, ardından tutarı 24.50 olarak düzeltin.

3. Yerel olarak inceleyin, ardından eski anlık görüntüyü kapatmak için bir alanı düzenleyin.

### Çizimi ve statik önizlemeyi doğru biçimde etiketleyin

Görsel için kısa bir rol açıklaması vardır. Müşteri notu alanı, açıkça etiketlenmiş bir önizlemenin içindeki açıklayıcı bir yer tutucudur; sahte, düzenlenebilir bir giriş alanı değildir. Not ayarı için kullanılan gerçek onay kutusu satıcı formunda kalır ve önizleme alanının görünüp görünmeyeceğini denetler.

## SumUp Circuit Tasarım Sistemi React ve CSS Entegrasyonu

### Genel eş bağımlılıkları ve her iki stil sayfasını ekleyin

Giriş noktası, paket gereksinimleriyle uyumlu belirteç, simge, uluslararasılaştırma ve Emotion eş bağımlılıklarıyla birlikte React 18'i ve sabitlenmiş Circuit bileşenlerini kullanır. Kod, light.css ve styles.css dosyalarını açıkça içe aktarır. Belgelenmemiş bir sağlayıcıya veya proje düzeyinde gizli bir tema kurulumuna dayanmaz.

- @sumup/circuit-ui 8.15.0 bileşen stilleri.

- @sumup/design-tokens 7.3.1 tam açık tema.

- React 18 ve bileşen paketinin bildirdiği eş bağımlılıklar.

### Ödeme hizmetlerini yalnızca gerçek bir uygulamada ekleyin

Üretim ortamındaki bir ödeme akışı için yetkili bir hizmet entegrasyonu, doğrulanmış para birimi işleme ve sunucu yanıtları gerekir. Bu örnek, yerel bir sunumu inceleme aşamasında bilinçli olarak sonlanır. Gerçek bir işlem akışı oluşturulana kadar örneği yeniden kullanırken bu ifadeyi koruyun.

## SumUp Circuit Tasarım Sistemi Bileşen Örnekleri

### main.jsx — eksiksiz çalışan örnek

Bir ürünü düzenleyin ve müşteri tarafındaki önizlemesini inceleyin. Aşağıdaki kaynak kod, tüm durumları ve doğrulamayı içeren eksiksiz React girişidir.

```
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 />);
```

Kod referansı

- Bir Vite React projesi oluşturun, <div id="root"></div> öğesini koruyun ve bunu src/main.jsx dosyası olarak yükleyin.

### circuit.css — özgün, duyarlı düzen

Yerel bileşenlerin üzerine katmanlanan uygulama düzeni.

```
* {
  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;
  }
}
```

Kod referansı

- main.jsx dosyasının yanına kaydedin. Bu özel düzen kuralları, kitaplığın belirteç başvurusundan ayrı tutulmuştur.

## SumUp Circuit Tasarım Sistemi Ajan Kurulumu

### Uygulamaya Başlangıç Noktası

Sabitlenmiş yerel örnek pakete alındı ve tarayıcıda yerel olarak kontrol edildi. Örnek yalnızca yerel uygulama durumunu kullanır.

```
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
```

### Projeniz İçin Bir İstem

```
Sabitlenmiş yerel kontrolleri ve gerekli iki stil sayfasını kullanarak bir Circuit ürün düzenleyicisi oluşturun. Tutar dizgelerinin tamamını doğrulayın, para birimi biçimlendirmesini koruyun, düzenlemelerden sonra eski yerel inceleme sonucunu temizleyin ve müşteri tarafındaki önizlemeyi gerçek bir ödeme sayfasından ayrı tutun. Özgün çizimi ve anlamsal belirteç rollerini aynen kullanın.
```

## SumUp Circuit Tasarım Sistemi Kaynakları ve Kapsamı

OpenDesign uygulama kılavuzunun sabitlenmiş bir Circuit paket sürümüne uyarlanmış hâli. Çizim, tutar ve ürün örnek amaçlıdır. Bu yerel düzenleyici ödeme bağlantısı oluşturmaz, ücret tahsil etmez veya SumUp hesabında işlem yapmaz; güncel üst akış paketleri daha yeni @sumup-oss ad alanını kullanır.

- Circuit Belgeleri Güncel bileşen ve entegrasyon yönergeleri.

- Sabitlenmiş Açık Tema Belirteçleri Bu örnekte kullanılan kesin değerler.

- Circuit Kaynağı Paket sürümleri, bileşen özellikleri ve güncel ad alanı.

## SumUp Circuit Tasarım Sistemi İlgili Kaynaklar

### TDesign

TDesign React ile kompakt bir API ilke düzenleyicisi oluşturun: somut tema rolleri, iki piksellik boyut ölçeği, Form alanı kaydı ve tür denetimli bir Table bileşimi.

### Thumbtack Thumbprint

Thumbprint’in belgelenmiş v2 temel bileşenleriyle bir hizmet keşif arayüzü oluşturun: kompakt sağlayıcı kartları, okunaklı karşılaştırma ayrıntıları, belirgin seçim durumları ve sabit bir kısa liste.

### Twilio Paste

Paste’in tema ve düğme kurallarını, doğrulanmış boşluk ölçeğini kullanarak bir bildirim taslağı oluşturun. Düzenleme, gözden geçirme ve mesajı gerçekten gönderme aşamalarını net biçimde ayırt edin.


- [Uygulama başvurusu](https://circuit.sumup.com/)
- [Kaynak](https://cdn.jsdelivr.net/npm/@sumup/design-tokens@7.3.1/light.css)
- [Kaynak](https://github.com/sumup-oss/circuit-ui)
- [Kod referansı](https://circuit.sumup.com/)
- [Circuit Belgeleri Güncel bileşen ve entegrasyon yönergeleri.](https://circuit.sumup.com/)
- [Sabitlenmiş Açık Tema Belirteçleri Bu örnekte kullanılan kesin değerler.](https://cdn.jsdelivr.net/npm/@sumup/design-tokens@7.3.1/light.css)
- [Circuit Kaynağı Paket sürümleri, bileşen özellikleri ve güncel ad alanı.](https://github.com/sumup-oss/circuit-ui)