# Kiwi Orbit Tasarım Sistemi

## Kiwi Orbit Tasarım Sistemi Arayüz Önizlemesi

Yolcu sayısını ve ek hizmetleri değiştirin; tutar dökümünü inceleyin ve bir seçeneği düzenleyerek eski bir incelemeyi temizleyin.

## Kiwi Orbit Tasarım Sistemi Tasarım Referansı

defaultTheme ve derlenmiş Tailwind CSS ile yerel Orbit React bileşenleri 27.7.0; belirteç referansı 11.0.0.

### Ürün eylemi renkleri

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| buttonPrimaryBackground | #008F7B | Birincil eylem durumları referansı. Üzerine gelme, etkin ve odak rollerini birbirinden ayırın. |
| buttonPrimaryBackgroundHover | #007565 | Birincil eylem durumları referansı. Üzerine gelme, etkin ve odak rollerini birbirinden ayırın. |
| buttonPrimaryBackgroundActive | #006153 | Birincil eylem durumları referansı. Üzerine gelme, etkin ve odak rollerini birbirinden ayırın. |
| buttonPrimaryForeground | #FFFFFF | Birincil eylem durumları referansı. Üzerine gelme, etkin ve odak rollerini birbirinden ayırın. |
| buttonPrimaryForegroundHover | #FFFFFF | Birincil eylem durumları referansı. Üzerine gelme, etkin ve odak rollerini birbirinden ayırın. |
| buttonPrimaryForegroundActive | #FFFFFF | Birincil eylem durumları referansı. Üzerine gelme, etkin ve odak rollerini birbirinden ayırın. |
| buttonPrimaryBorderColorFocus | rgba(0, 143, 123, 0.5) | Birincil eylem durumları referansı. Üzerine gelme, etkin ve odak rollerini birbirinden ayırın. |
### Bileşen aralıkları

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| space50 | 2px | Yayımlanan belirteç paketindeki gerçek piksel aralığı adımları. |
| space100 | 4px | Yayımlanan belirteç paketindeki gerçek piksel aralığı adımları. |
| space150 | 6px | Yayımlanan belirteç paketindeki gerçek piksel aralığı adımları. |
| space200 | 8px | Yayımlanan belirteç paketindeki gerçek piksel aralığı adımları. |
| space300 | 12px | Yayımlanan belirteç paketindeki gerçek piksel aralığı adımları. |
| space400 | 16px | Yayımlanan belirteç paketindeki gerçek piksel aralığı adımları. |
| space500 | 20px | Yayımlanan belirteç paketindeki gerçek piksel aralığı adımları. |
| space600 | 24px | Yayımlanan belirteç paketindeki gerçek piksel aralığı adımları. |
| space800 | 32px | Yayımlanan belirteç paketindeki gerçek piksel aralığı adımları. |
| space1000 | 40px | Yayımlanan belirteç paketindeki gerçek piksel aralığı adımları. |
| space1200 | 48px | Yayımlanan belirteç paketindeki gerçek piksel aralığı adımları. |
### Köşe yarıçapları

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| borderRadius50 | 2px | Farklı yarıçap rolleri, denetimleri daha geniş seyahat yüzeylerinden ayırmaya yardımcı olur. |
| borderRadius100 | 4px | Farklı yarıçap rolleri, denetimleri daha geniş seyahat yüzeylerinden ayırmaya yardımcı olur. |
| borderRadius150 | 6px | Farklı yarıçap rolleri, denetimleri daha geniş seyahat yüzeylerinden ayırmaya yardımcı olur. |
| borderRadius200 | 8px | Farklı yarıçap rolleri, denetimleri daha geniş seyahat yüzeylerinden ayırmaya yardımcı olur. |
| borderRadius300 | 12px | Farklı yarıçap rolleri, denetimleri daha geniş seyahat yüzeylerinden ayırmaya yardımcı olur. |
| borderRadius400 | 16px | Farklı yarıçap rolleri, denetimleri daha geniş seyahat yüzeylerinden ayırmaya yardımcı olur. |
| borderRadiusNone | 0 | Farklı yarıçap rolleri, denetimleri daha geniş seyahat yüzeylerinden ayırmaya yardımcı olur. |
| borderRadiusFull | 9999px | Farklı yarıçap rolleri, denetimleri daha geniş seyahat yüzeylerinden ayırmaya yardımcı olur. |
### Gövde metni

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| fontSizeTextSmall | 13px | Yayımlanan gövde metni rolleri; özel sayfa başlıkları uygulama düzenlemesinin parçasıdır. |
| fontSizeTextNormal | 15px | Yayımlanan gövde metni rolleri; özel sayfa başlıkları uygulama düzenlemesinin parçasıdır. |
| fontSizeTextLarge | 16px | Yayımlanan gövde metni rolleri; özel sayfa başlıkları uygulama düzenlemesinin parçasıdır. |
| fontSizeTextExtraLarge | 18px | Yayımlanan gövde metni rolleri; özel sayfa başlıkları uygulama düzenlemesinin parçasıdır. |
### Ürün ve nötr yüzeyler

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| paletteCloudLight | #F5F7F9 | Ürün eylemi renginin çevresinde sakin yüzeyler ve okunaklı metinler kullanın. |
| paletteCloudNormal | #E8EDF1 | Ürün eylemi renginin çevresinde sakin yüzeyler ve okunaklı metinler kullanın. |
| paletteInkDark | #252A31 | Ürün eylemi renginin çevresinde sakin yüzeyler ve okunaklı metinler kullanın. |
| paletteInkLight | #657890 | Ürün eylemi renginin çevresinde sakin yüzeyler ve okunaklı metinler kullanın. |
| paletteInkNormal | #4F5E71 | Ürün eylemi renginin çevresinde sakin yüzeyler ve okunaklı metinler kullanın. |
| paletteProductLight | #E1F4F3 | Ürün eylemi renginin çevresinde sakin yüzeyler ve okunaklı metinler kullanın. |
| paletteProductNormal | #008F7B | Ürün eylemi renginin çevresinde sakin yüzeyler ve okunaklı metinler kullanın. |
| paletteProductDark | #007061 | Ürün eylemi renginin çevresinde sakin yüzeyler ve okunaklı metinler kullanın. |
## Kiwi Orbit Tasarım Sistemi Kapsamlı Kılavuz

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ı.

## Kiwi Orbit Tasarım Sistemi Seyahat Seçimi Düzeni

### Ek hizmetlerden önce rotayı gösterin

> Rota özeti, bagaj seçeneklerinden önce iki havalimanı kodunu, şehir adlarını ve kurgusal bir süreyi gösterir. Böylece kullanıcı ek hizmetleri karşılaştırırken satın alma bağlamı görünür kalır. Kesikli bağlantı çizgisi özgün bir CSS illüstrasyonudur; bir hava yolu rotasını göstermez ve gerçek bir hizmetle ilgili taahhüt içermez.

### Seçenekleri toplamdan ayırın

Yolcular ve bagaj bir tarafta, fiyat dökümü ise yanlarında yer alır. Aynı durum hem seçili denetimleri hem de tutarları belirler. Telefonda özet, belge sıralamasında seçeneklerin ardından gelir; böylece hangi girdilerin toplamı açıkladığı anlaşılır.

## Kiwi Orbit Tasarım Sistemi Ürün Rengi ve Geri Bildirim

### Ana eylemde ürün renk ailesini kullanın

Belirteç paketi, birbirinden farklı üzerine gelme ve etkin tonlarına sahip yeşil bir ürün eylem rengi sunar. Referansta, tahmini bir marka yeşiline dayanmak yerine düğme rolü için kesin değerler listelenir. Nötr bulut yüzeyler, her panelin inceleme eylemiyle rekabete girmesine yol açmadan seçilebilir ek hizmetleri çerçeveler.

### Geri bildirimi sonuca özel tutun

Yerel başarı uyarısı, “Seçim yerel olarak incelendi” der ve yolcu sayısını ve toplamı belirtir. Herhangi bir seçenek değiştiğinde uyarı temizlenir. Böylece önceki yeşil onay, düzenlenmiş yeni ek hizmetleri doğruluyormuş gibi görünmeye devam etmez.

## Kiwi Orbit Tasarım Sistemi Tipografi ve Fiyat Hiyerarşisi

### Açıklama metinlerinde yerel metin rollerini kullanın

Orbit, daha büyük seçeneklerin yanı sıra 13px küçük ve 15px normal gövde metni rolleri sunar. Örnek, yerel Text ve Heading bileşenlerini kullanırken rota kodları ve toplam özgün vurgulardır. Burada tarayıcı, belgelenmiş bir yedek yazı tipi dizisini kullanır; Kiwi.com marka yazı tipi arka planda indirilmez.

### Birimleri tutarların yanında tutun

Her bagaj fiyatında yolcu başına olduğu belirtilir. Dökümde seçilen her ek hizmetin ücreti yolcu sayısıyla çarpılır ve toplam, bileşen satırlarından daha belirgin gösterilir. Birim mobil ekranda da görünür kalmalıdır; kapsamı belirtilmeyen büyük ve dikkat çekici bir sayı kolayca yanlış anlaşılabilir.

## Kiwi Orbit Tasarım Sistemi Yarıçap ve Aralık Ölçekleri

### Denetimleri daha geniş yüzeylerden ayırın

Geçerli yarıçap ölçeğinde 2, 4, 6, 8, 12 ve 16px adımlarının yanı sıra none ve full değerleri bulunur. Özgün rota ve özet panellerinde 12px köşeler kullanılır; yerel denetimler ise kendi tema kurallarını korur. En büyük yarıçapı iç içe geçmiş her öğeye uygulamak, formun hiyerarşisini kaybetmesine yol açar.

### Seçenek satırını kaydırma sırasında bir arada tutun

Bir bagaj satırında yerel onay kutusu, destekleyici bagaj hakkı metni ve fiyat bir arada bulunur. Açıklama içeriğine esnek genişlik verilirken fiyatın okunaklı kalması sağlanır. Ana bölgelerden herhangi biri karşılaştırmayı destekleyemeyecek kadar daralmadan önce sayfa tek sütunlu düzene geçer.

## Kiwi Orbit Tasarım Sistemi Denetimli Onay Kutusu ve Seçim Alanı

### Bileşen etiketlerini ve bilgi alanlarını kullanın

Checkbox, görünür etiketini ve destekleyici bilgisini genel kullanıma açık özellikler aracılığıyla alır. Select bileşenine bir etiket ve bir ile dört yolcu arasındaki değerleri içeren açık seçenekler verilir. Bu yerel bileşimler, tıklanabilir bir div'i bagaj denetimi gibi göstermeden etkileşim ve etiketleme davranışlarını korur.

### Her ek hizmeti bağımsız olarak modelleyin

Kabin bagajı ve kayıtlı bagaj birbirinden bağımsız Boole değerleridir. Uygulama, birini seçmenin diğerinin seçimini otomatik olarak kaldırdığını varsaymaz. Bu, özellikle basit tutulmuş örnek bir kuraldır; gerçek bir hava yolunda, farklı bir model gerektiren karşılıklı dışlayıcı paketler veya yolcuya özel bagaj hakları olabilir.

## Kiwi Orbit Tasarım Sistemi Seçim Hesaplama ve İnceleme

### Toplamı tek bir formülden hesaplayın

Örnekte yolcu sayısı, taban ücretin seçilen kişi başı ek hizmetlerle toplamıyla çarpılır. Görünür seçeneklerden farklılaşabilecek ve bağımsız olarak düzenlenebilecek ayrı bir toplam değeri saklanmaz. Tüm fiyatlar ve bagaj hakları açıkça kurgusaldır; güncel Kiwi.com teklifleri değildir.

### İnceleme anlık görüntüsü alın

İnceleme; yolcu sayısını, bagaj seçimlerini ve toplamı birlikte kaydeder. Herhangi bir denetim değiştiğinde bu anlık görüntü temizlenir. Böylece örnek, yerel bir tıklamayı rezervasyon, ödeme, canlı müsaitlik kontrolü veya kesin fiyat teklifi gibi göstermeden durum tutarlılığını sergiler.

## Kiwi Orbit Tasarım Sistemi Erişilebilir Seçim Geri Bildirimi

### Etiketleri ve yeniden hesaplamayı birlikte denetleyin

Klavye veya işaretleme aygıtı kullanan bir kişi, yerel denetimleri kullanarak yolcu seçebilir ve iki bagaj seçeneğinden herhangi birini etkinleştirebilir. İnceleme sonucu bir durum bölgesinde gösterilir. İsteğe bağlı bagaj için geçersiz bir durum uydurulmaz: Her iki ek hizmetin de seçilmemesi, bu kurgusal ücret için geçerli bir durumdur.

1. İki yolcu seçin ve kabin bagajı ekleyin.

2. Kayıtlı bagaj ekleyin ve dökümdeki üç tutarı da doğrulayın.

3. Seçimi yerel olarak inceleyin, bir seçeneği değiştirin ve önceki başarı bildiriminin kaybolduğunu doğrulayın.

### Gizli sonuçlardan kaçının

Sayfada, formun üstünde ve toplamın yanında kurgusal kapsam açıklanır. Eylemin adı Satın Al veya Rezervasyon Yap değil, Yerel seçimi incele'dir. Tüm değişiklikler sayfada kalır ve gerektirmeyen bir tanıtım için kişisel yolcu bilgisi istenmez.

## Kiwi Orbit Tasarım Sistemi Sağlayıcı ve Derlenmiş Stiller

### Uyumlu kararlı sürümü kullanın

Bu örnekte React bileşenleri 27.7.0 ve belirteç referansları 11.0.0 sürümüne sabitlenmiştir. OrbitProvider, paketin defaultTheme'i ve derlenmiş lib/tailwind.css içe aktarılır. Bu stil dosyası eklenmezse React ağacı görüntülense bile yardımcı sınıfları temel alan bileşen stilleri eksik kalır.

- OrbitProvider ve paketin defaultTheme'i.

- components 27.7.0 sürümündeki derlenmiş lib/tailwind.css.

- Paketin derleme ortamı için Node.js 22 veya üzeri.

### Dağıtım gereksinimlerini açıkça belirtin

Paket, Node.js 22 veya üzeri gerektirir. Sağlanan Vite girişi, bu ortam ve sabitlenmiş bileşen paketiyle yeniden oluşturulabilir. Özgün CSS yalnızca seyahat düzenlemesini ele alır; yerel denetimler yayımlanan bileşen stillerini ve sağlayıcı davranışını korur.

## Kiwi Orbit Tasarım Sistemi Bileşen Örnekleri

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

Bagaj seçin ve örnek toplamı inceleyin. Aşağıdaki kaynak, tüm durum ve doğrulama mantığıyla birlikte React girişinin tamamıdır.

```
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import {
  OrbitProvider,
  Button,
  Checkbox,
  Select,
  Alert,
  Heading,
  Text,
} from "@kiwicom/orbit-components";
import defaultTheme from "@kiwicom/orbit-components/lib/defaultTheme";
import "@kiwicom/orbit-components/lib/tailwind.css";
import "./orbit.css";
function App() {
  const [travellers, setTravellers] = useState("1"),
    [cabin, setCabin] = useState(false),
    [checked, setChecked] = useState(false),
    [saved, setSaved] = useState(null);
  const count = Number(travellers),
    extras = (cabin ? 18 : 0) + (checked ? 32 : 0),
    total = count * (96 + extras);
  function update(fn) {
    fn();
    setSaved(null);
  }
  return (
    <OrbitProvider theme={defaultTheme}>
      <main className="trip">
        <header>
          <Text size="small">ORIGINAL TRAVEL SPECIMEN</Text>
          <Heading as="h1" type="title1">Choose what travels with you</Heading>
          <Text>
            Fictional one-way fare. Prices illustrate the interface, not a
            bookable flight.
          </Text>
        </header>
        <div className="trip-grid">
          <section>
            <div className="route">
              <div>
                <strong>PRG</strong>
                <span>Prague</span>
              </div>
              <div className="route-line">
                <span>1h 45m · direct</span>
                <i></i>
              </div>
              <div>
                <strong>AMS</strong>
                <span>Amsterdam</span>
              </div>
            </div>
            <div className="options">
              <Heading as="h2" type="title3">Travellers and baggage</Heading>
              <Select
                label="Travellers"
                ariaLabel="Travellers"
                value={travellers}
                options={[1, 2, 3, 4].map((n) => ({
                  value: String(n),
                  label: n + " adult" + (n === 1 ? "" : "s"),
                }))}
                onChange={(e) => update(() => setTravellers(e.target.value))}
              />
              <div className="bag-option">
                <div>
                  <Heading as="h3" type="title4">Personal item</Heading>
                  <Text size="small">
                    Fits under the seat · included in this example fare
                  </Text>
                </div>
                <strong>Included</strong>
              </div>
              <div className="bag-option">
                <Checkbox
                  label="Add cabin baggage"
                  info="One 10 kg bag per traveller · fictional allowance"
                  checked={cabin}
                  onChange={(e) => update(() => setCabin(e.target.checked))}
                />
                <strong>
                  €18<span>/ traveller</span>
                </strong>
              </div>
              <div className="bag-option">
                <Checkbox
                  label="Add checked baggage"
                  info="One 20 kg bag per traveller · fictional allowance"
                  checked={checked}
                  onChange={(e) => update(() => setChecked(e.target.checked))}
                />
                <strong>
                  €32<span>/ traveller</span>
                </strong>
              </div>
            </div>
          </section>
          <aside>
            <Heading as="h2" type="title3">Your example selection</Heading>
            <dl>
              <dt>Base fare × {count}</dt>
              <dd>€{96 * count}</dd>
              {cabin && (
                <>
                  <dt>Cabin baggage × {count}</dt>
                  <dd>€{18 * count}</dd>
                </>
              )}
              {checked && (
                <>
                  <dt>Checked baggage × {count}</dt>
                  <dd>€{32 * count}</dd>
                </>
              )}
            </dl>
            <div className="trip-total">
              <span>Total</span>
              <strong>€{total}</strong>
            </div>
            <Text size="small">
              All amounts are illustrative. No payment or reservation will be
              created.
            </Text>
            <Button
              fullWidth
              onClick={() => setSaved({ count, cabin, checked, total })}
            >
              Review local selection
            </Button>
            {saved && (
              <div role="status" className="trip-confirm">
                <Alert type="success" title="Selection reviewed locally">
                  {saved.count} traveller{saved.count === 1 ? "" : "s"} · €
                  {saved.total}. No booking created.
                </Alert>
              </div>
            )}
          </aside>
        </div>
        <footer>
          Native Orbit 27.7.0 components and compiled package styles. Original
          layout and fictional pricing logic by OpenDesign.
        </footer>
      </main>
    </OrbitProvider>
  );
}
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.

### orbit.css — özgün duyarlı düzenleme

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

```
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: #f5f7f9;
  color: #252a31;
  font:
    16px/1.5 Arial,
    sans-serif;
}
.trip {
  padding: 32px;
}
.trip header {
  max-width: 760px;
  margin-bottom: 28px;
}
.trip header h1 {
  margin: 8px 0 12px;
}
.trip-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr);
  gap: 24px;
}
.route,
.options,
.trip aside {
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e8edf1;
  padding: 24px;
}
.route {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 20px;
}
.route strong {
  font-size: 32px;
  display: block;
}
.route span {
  font-size: 14px;
  display: block;
  color: #4f5e71;
}
.route-line {
  flex: 1;
  text-align: center;
}
.route-line i {
  display: block;
  border-top: 2px dashed #bac7d5;
  margin-top: 12px;
}
.options > h3 {
  margin-bottom: 20px;
}
.options > div:first-of-type {
  margin-bottom: 12px;
}
.bag-option {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
  padding: 24px 0;
  border-top: 1px solid #e8edf1;
}
.bag-option:last-child {
  padding-bottom: 0;
}
.bag-option > strong {
  white-space: nowrap;
  font-size: 18px;
}
.bag-option > strong span {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: #657890;
}
.trip aside {
  align-self: start;
}
.trip dl {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  margin: 24px 0;
}
.trip dd {
  margin: 0;
  text-align: right;
  font-weight: 600;
}
.trip-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #bac7d5;
  padding: 20px 0;
}
.trip-total strong {
  font-size: 32px;
}
.trip aside > button {
  margin-top: 24px;
}
.trip-confirm {
  margin-top: 20px;
}
.trip footer {
  font-size: 12px;
  color: #657890;
  margin-top: 24px;
}
@media (max-width: 900px) {
  .trip-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 550px) {
  .trip {
    padding: 16px;
  }
  .route,
  .options,
  .trip aside {
    padding: 20px;
  }
  .route {
    gap: 12px;
  }
  .route strong {
    font-size: 28px;
  }
  .route-line span {
    font-size: 12px;
  }
  .bag-option {
    align-items: flex-start;
    gap: 12px;
  }
}
```

Kod referansı

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

## Kiwi Orbit Tasarım Sistemi Yapay Zekâ 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 orbit-trip -- --template react
cd orbit-trip
npm install
npm install react@18.3.1 react-dom@18.3.1 @kiwicom/orbit-components@27.7.0
# Use Node.js >=22. Replace src/main.jsx and add src/orbit.css.
npm run dev
```

### Projeniz İçin Bir İstem

```
Orbit yerel bileşenlerini ve derlenmiş stilleri kullanarak bir seyahat ek hizmetleri seçicisi oluşturun. Rota bağlamının, yolcu başına fiyatların, seçilen ek hizmetlerin ve toplamın tutarlı olmasını sağlayın. Kurgusal fiyatları ve yerel incelemeyi açıkça belirtin, düzenleme yapıldığında eski incelemeyi temizleyin ve rezervasyon veya ödeme işlevi olduğu izlenimini vermeyin.
```

## Kiwi Orbit Tasarım Sistemi Kaynaklar ve Kapsam

OpenDesign uygulama kılavuzu. Rota, süre, fiyatlar ve bagaj hakları kurgusaldır. Yerel Orbit denetimleri çalışır; uçuş araması, rezervasyon veya ödeme yapılmaz.

- Orbit Başlangıç Kılavuzu Geçerli bileşen ve belirteç sürümleri ile uygulama kaynakları.

- Orbit Bileşen Kaynağı Yerel özellikler, stiller ve paket gereksinimleri.

- Sabitlenmiş belirteç dışa aktarımı Ürün, yazı tipi, aralık ve yarıçap değerlerinin tam listesi.

## Kiwi Orbit Tasarım Sistemi İlgili Kaynaklar

### Maersk tasarım sistemi

Gerçek açık tema rolleri, başlık ve metin ölçekleri, iç içe yarıçaplar ve tanımlayıcı işleme yoluyla Maersk’in operasyonel arayüz dilini inceleyin. Örnek bir gönderi sorgulaması, canlı lojistik verilerine erişim iddiasında bulunmadan tam referans eşleştirmesini ve erişilebilir bir olay geçmişini gösterir.

### Microsoft Fluent 2

Gerçek anlamsal tasarım belirteçleri, web yazı tipi ve boşluk ölçekleri, denetimli sekmeler ve doğrulanmış erişim iletişim kutusuyla bir Fluent UI React v9 çalışma alanı oluşturun. Tema değerlerini karşılaştırın, bileşen anatomisini inceleyin ve eksiksiz React örneğini kullanmadan önce yerel bir etkileşimi deneyin.

### Monday Vibe

Vibe 4 tasarım belirteçleri ve React kontrolleriyle çalışan bir teslimat panosu oluşturun. Anlamsal eylem renklerini pano etiketlerinden, adlandırılmış boşluk adımlarını, yazı tipi kısaltmalarını ve yeni bir uygulamanın gerektirdiği açık CSS kurulumundan ayırt edin.


- [Uygulama başvurusu](https://orbit.kiwi/getting-started/)
- [Kaynak](https://cdn.jsdelivr.net/npm/@kiwicom/orbit-design-tokens@11.0.0/dist/index.js)
- [Kod referansı](https://orbit.kiwi/getting-started/)
- [Orbit Başlangıç Kılavuzu Geçerli bileşen ve belirteç sürümleri ile uygulama kaynakları.](https://orbit.kiwi/getting-started/)
- [Orbit Bileşen Kaynağı Yerel özellikler, stiller ve paket gereksinimleri.](https://github.com/kiwicom/orbit)
- [Sabitlenmiş belirteç dışa aktarımı Ürün, yazı tipi, aralık ve yarıçap değerlerinin tam listesi.](https://cdn.jsdelivr.net/npm/@kiwicom/orbit-design-tokens@11.0.0/dist/index.js)