# ServiceTitan Anvil Tasarım Sistemi

## ServiceTitan Anvil Tasarım Sistemi Arayüz Önizlemesi

Açık/koyu görünümü değiştirin, mevcut personeli seçin ve eşzamanlı yerel planı inceleyin.

## ServiceTitan Anvil Tasarım Sistemi Tasarım Referansı

@servicetitan/hammer-token 3.5.0 çekirdek tema dışa aktarımları ve Anvil2 tema oluşturma belgeleri.

### Anlamsal açık/koyu eşleşmeleri

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| BackgroundColorDefault | light #ffffff / dark #1a1a1a | Ana uygulama yüzeyi. |
| BackgroundColorDefaultHover | light #f9f9f9 / dark #292929 | Üzerine gelme yüzeyi. |
| BackgroundColorPrimary | light #0265dc / dark #70b1ff | Birincil eylem dolgusu. |
| BackgroundColorPrimaryHover | light #1d4ca3 / dark #9ecaff | Yerel birincil üzerine gelme rolü. |
| BackgroundColorPrimaryFaint | light #fafcff / dark #000b19 | Seçili, düşük vurgulu yüzey. |
| ForegroundColorSubdued | light #707070 / dark #c4c4c4 | Yardımcı metin. |
| ForegroundColorOnPrimary | light #ffffff / dark #1a1a1a | Birincil dolguyla eşleşen metin. |
| ForegroundColorPrimary | light #0265dc / dark #70b1ff | Etkileşimli ön plan. |
| BorderColorSubdued | light #e6e6e6 / dark #404040 | Düşük vurgulu sınırlar. |
| BorderColorPrimary | light #0265dc / dark #9ecaff | Etkileşimli sınır. |
| StatusColorInfo | light #0265dc / dark #70b1ff | Bilgilendirici durum. |
| StatusColorDanger | light #d62100 / dark #ff5b3d | Acil müdahale gerektiren durum. |
| StatusColorSuccess | light #077e50 / dark #0bd085 | Yerel inceleme tamamlandı. |
| StatusColorWarning | light #ffbe00 / dark #ffe278 | Kritik olmayan uyarı. |
### İlkel geometri ve duyarlı değerler

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| BreakpointSm | 640px | Yayımlanmış ilkel değer; gerçek uygulama rollerini anlamsal/bileşen takma adları belirler. |
| BreakpointMd | 768px | Yayımlanmış ilkel değer; gerçek uygulama rollerini anlamsal/bileşen takma adları belirler. |
| BreakpointLg | 1024px | Yayımlanmış ilkel değer; gerçek uygulama rollerini anlamsal/bileşen takma adları belirler. |
| BreakpointXl | 1280px | Yayımlanmış ilkel değer; gerçek uygulama rollerini anlamsal/bileşen takma adları belirler. |
| BreakpointXxl | 1536px | Yayımlanmış ilkel değer; gerçek uygulama rollerini anlamsal/bileşen takma adları belirler. |
| DurationDefault | 200ms | Yayımlanmış ilkel değer; gerçek uygulama rollerini anlamsal/bileşen takma adları belirler. |
| DurationInstant | 0ms | Yayımlanmış ilkel değer; gerçek uygulama rollerini anlamsal/bileşen takma adları belirler. |
| DurationFast | 100ms | Yayımlanmış ilkel değer; gerçek uygulama rollerini anlamsal/bileşen takma adları belirler. |
| DurationSlow | 300ms | Yayımlanmış ilkel değer; gerçek uygulama rollerini anlamsal/bileşen takma adları belirler. |
| Radius0 | 0rem | Yayımlanmış ilkel değer; gerçek uygulama rollerini anlamsal/bileşen takma adları belirler. |
| Radius1 | 0.1875rem | Yayımlanmış ilkel değer; gerçek uygulama rollerini anlamsal/bileşen takma adları belirler. |
| Radius2 | 0.375rem | Yayımlanmış ilkel değer; gerçek uygulama rollerini anlamsal/bileşen takma adları belirler. |
| Radius3 | 0.5625rem | Yayımlanmış ilkel değer; gerçek uygulama rollerini anlamsal/bileşen takma adları belirler. |
| Radius4 | 0.75rem | Yayımlanmış ilkel değer; gerçek uygulama rollerini anlamsal/bileşen takma adları belirler. |
| Radius5 | 0.9375rem | Yayımlanmış ilkel değer; gerçek uygulama rollerini anlamsal/bileşen takma adları belirler. |
| Radius6 | 1.125rem | Yayımlanmış ilkel değer; gerçek uygulama rollerini anlamsal/bileşen takma adları belirler. |
| Radius7 | 1.3125rem | Yayımlanmış ilkel değer; gerçek uygulama rollerini anlamsal/bileşen takma adları belirler. |
| Radius8 | 1.5rem | Yayımlanmış ilkel değer; gerçek uygulama rollerini anlamsal/bileşen takma adları belirler. |
### ThemeProvider geçersiz kılma sözleşmesi

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| theme.semantic | semantic token overrides | BackgroundColorPrimary gibi bir rolü değiştirin. |
| theme.component | component token overrides | Değişikliği ButtonPrimaryBackgroundColor gibi bir bileşen rolüyle sınırlandırın. |
| value | default/light token value | Açık görünüm değerini sağlayın. |
| extensions.appearance.dark.value | dark appearance value | Eşleşen koyu görünümü belirtin. |
| CSS output | --a2-<kebab-case-name> | ThemeProvider, belirteç anahtarını CSS değişkenine dönüştürür. |
| Primitive cascade | resolved at build time | Çalışma zamanında bir ilkeli geçersiz kılmak, anlamsal takma adları yeniden hesaplamaz. |
## ServiceTitan Anvil Tasarım Sistemi Tam 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ı.

## ServiceTitan Anvil Tasarım Sistemi Üç Katmanlı Belirteç Mimarisi

### İlkel değerleri anlamsal rollerin altında tutun

> Anvil2; ham ilkelleri, anlamsal rolleri ve bileşene özgü takma adları birbirinden ayırır. Bir ürün genellikle her denetimde ilkel bir maviyi kullanmak yerine arayüzdeki anlamı açıklayan rolü seçmelidir. Referans tablosunda dışa aktarılan kesin değerler ve bunların koyu görünümdeki karşılıkları yer alır; böylece tema değişikliği eşleşmiş değerler olarak incelenebilir.

### Çalışma zamanında takma adların yeniden hesaplanmasını beklemeyin

Resmî tema oluşturma kılavuzunda, ilkel başvuruların derleme sırasında çözümlendiği belirtilir. Bir ilkel değerin çalışma zamanı sağlayıcısı üzerinden değiştirilmesi anlamsal katmanı otomatik olarak yeniden oluşturmaz. Uygulamanın renklerini değiştirmek için ilgili anlamsal rolü, tek bir bileşeni değiştirmek içinse bileşen katmanını geçersiz kılın. Böylece temanın yalnızca bir kısmının değişip ilişkili denetimlerin tutarsız kalması önlenir.

## ServiceTitan Anvil Tasarım Sistemi Açık ve Koyu Görünüm

### Ön plan ve arka plan değişikliklerini eşleştirin

Birincil eylem, BackgroundColorPrimary değerini ForegroundColorOnPrimary ile birlikte kullanır. Açık görünümde mavi arka plan üzerinde beyaz metin, koyu görünümdeyse daha açık mavi arka plan üzerinde koyu renkli bir etiket kullanılır. Yalnızca dolguyu değiştirmek tutarsız bir eşleşmeye yol açar. Tam HTML çalışması, ThemeProvider olduğu iddiasında bulunmadan bu değerleri göstermek için color-scheme anahtarıyla birlikte light-dark() kullanır.

### Durum tonlarını yazılı bir anlamla birlikte kullanın

Anvil2, renk ailelerine durum anlamları atar. Yerel incelemede bir başarı rolü kullanılır, ancak tam olarak ne olduğu yine de belirtilir. Müsait olmayan teknisyen metinle etiketlenir ve devre dışı bırakılmış bir radyo düğmesiyle gösterilir. Hizmet ziyaretinin görevlendirildiğini ima etmek için yeşil ton kullanılmaz; örnek hiçbir zaman bir görevlendirme arka ucuna bağlanmaz.

## ServiceTitan Anvil Tasarım Sistemi Hizmet Ataması ve Durum

### Müsaitlik, sonraki seçimi belirlesin

Bir teknisyen seçildiğinde başlangıç saati seçenekleri o kişinin kurgusal müsaitliğine göre güncellenir. Müsait olmayan kişi görünür kalır, ancak seçilemez. Bu, iki denetim arasındaki bir bağımlılıktır; bu nedenle ilk denetimin değişmesi, ikinci denetimin başka bir kişiye ait bir saatte kalması yerine geçerli bir değerle sıfırlanmasını gerektirir.

### Planlamayı uygulamadan ayırın

Atamanın incelenmesi yerel bir plan kaydeder ve herhangi bir ziyaretin görevlendirilmediğini açıkça belirtir. Üretim iş akışında, işlemi tamamlamadan önce izin kontrolleri, güncel bir program yanıtı ve çakışma yönetimi gerekir. Örnek, çalıştırılıp uyarlanabilecek eksiksiz bir etkileşim sunarken bu sınırı da görünür tutar.

## ServiceTitan Anvil Tasarım Sistemi Operasyonel Yoğunluk ve Okunabilirlik

### İş bağlamını seçime yakın tutun

Kompakt bir iş özeti; görevi, süreyi, bölgeyi ve önceliği içerir. Teknisyen seçenekleri okunabilir bir dikey liste oluşturur; önerilen ziyaret ise ayrı bir panelde gösterilir. Arayüzde nötr sınırlar ve ölçülü vurgu renkleri kullanılır, böylece seçim ve birincil eylem kolayca fark edilir. Program çubuklarının açıklayıcı örnek olduğu etiketlenmiştir; esas alınması gereken gerçek zaman seçicisidir.

### Mobilde okuma sırasını koruyun

768px altında önerilen ziyaret, iş ve teknisyen listesinin ardından gelir. Denetimler tam boyutlarını korur, etiketler de doğal biçimde satır kaydırır. Önizlemede sabit yükseklikte görünüm alanı panelleri kullanılmadığından kısa içeriğin altında büyük ve boş bir alan oluşmaz. Tek sütunlu düzen, geniş düzenle aynı karar sırasını izler.

## ServiceTitan Anvil Tasarım Sistemi Yerel Entegrasyon ve Tam HTML Alternatifi

### Belgelenmiş sağlayıcı yapısını kullanın

Anvil2 ThemeProvider, value ve dark görünüm uzantılarını içeren anlamsal ve bileşen belirteci geçersiz kılmalarını kabul eder. Kılavuzda, herkese açık belgelerden alınmış eksiksiz bir sağlayıcı örneği aşağıda yer alır. Bu, yerel olarak çalıştırılan bağımsız HTML örneğinden farklı, yerel bir entegrasyon referansıdır.

### Doğrulanmamış bir paket çalışma zamanı olduğunu iddia etmeyin

Bu sayfada çalışan bir HTML uygulaması ve doğrulanmış belirteç verileri sunulur. Yerel sağlayıcı örneği ayrı bir entegrasyon referansıdır; önizlemede gösterilen çalışma zamanı değildir. React bileşenlerini kullanmaya başlarken birbiriyle uyumlu bir Anvil2 sürümü kurun, gerekli stilleri ekleyin ve yerel HTML denetimlerini değiştirmeden önce bileşen API'lerini doğrulayın.

## ServiceTitan Anvil Tasarım Sistemi Erişilebilirlik ve Durum Doğrulaması

### Yerel form anlambilimini kullanın

Teknisyenler yerel radyo düğmeleriyle etiketlenir, başlangıç saati etiketli bir seçim alanıdır ve görünüm denetimi aria-pressed özelliğini sunar. İnceleme mesajı bir durum bölgesidir. Radyo düğmesi seçimini tarayıcının yerel klavye modeli yönetir; görünür odak stili ise seçim veya üzerine gelme stilinden bağımsız kalır.

### Onaydan sonra değişiklikleri denetleyin

Teknisyen veya saat değiştirildiğinde eski inceleme geri bildirimi temizlenir. Görünüm değiştirildiğinde seçili teknisyen ve saat korunur; çünkü görsel temanın değişmesi bir planı silmemelidir. Testlerde yalnızca bir düğmenin tıklanabildiğini denetlemek yerine, devre dışı seçimin ve dar ekranda taşmanın yanı sıra her iki geçiş de ele alınmalıdır.

## ServiceTitan Anvil Tasarım Sistemi Araca Devir ve Uygulama

### Tam durum modeliyle başlayın

Davranışı incelemek için HTML örneğinin tamamını kaydedip çalıştırın. Belirteçlerden türetilen açık/koyu eşleşmeleri CSS üst kısmında, tanımlı müsaitlik verileri ise betikte görülebilir. Yerel bir React uygulaması, doğrulanmış Anvil2 denetimlerini kullanırken aynı durum geçişlerini koruyabilir.

1. HTML örneğinin tamamını çalıştırın.

2. İkinci teknisyeni seçin ve başlangıç saati seçeneklerinin değiştiğini doğrulayın.

3. Planı inceleyin, ardından saati değiştirip geri bildirimin temizlendiğini doğrulayın.

4. Görünümü değiştirin ve mevcut seçimin korunduğunu doğrulayın.

### Gerçek veri gerektirenleri belirtin

Temsilciye, bağımlı zaman listesini, devre dışı personel üyesini, incelemenin geçersiz kılınmasını ve görünüm davranışını korumasını söyleyin. Gerçek bir veri sözleşmesi olmadığı sürece örnek işi ve personeli değiştirmeyin. Yalnızca düğme etiketini değiştirerek yerel incelemeyi başarılıymış gibi göstermeyin.

- Gerçek bir sevk işlemi yapmadan önce uygunluğu kontrol edin.

- Anlamsal geçersiz kılmaları bileşen geçersiz kılmalarından ayrı tutun.

- Açık ve koyu ön plan/arka plan çiftlerini test edin.

## ServiceTitan Anvil Tasarım Sistemi Bileşen Örnekleri

### Eksiksiz yerel atama örneği

Özgün HTML/CSS/JavaScript; belirteçlerden türetilen görünümler ve bağımlı form durumu.

```
<!doctype html>
<html lang="en">
  <meta charset="utf-8" /><meta
    name="viewport"
    content="width=device-width,initial-scale=1"
  /><title>Dispatch assignment study</title
  ><style>
    :root {
      color-scheme: light;
      --surface: light-dark(#fff, #1a1a1a);
      --hover: light-dark(#f9f9f9, #292929);
      --text: light-dark(#040404, #fff);
      --muted: light-dark(#707070, #c4c4c4);
      --line: light-dark(#e6e6e6, #404040);
      --action: light-dark(#0265dc, #70b1ff);
      --on-action: light-dark(#fff, #1a1a1a);
      --faint: light-dark(#fafcff, #000b19);
      --success: light-dark(#077e50, #0bd085);
    }
    * {
      box-sizing: border-box;
    }
    body {
      margin: 0;
      padding: 24px;
      background: var(--surface);
      color: var(--text);
      font:
        16px/1.5 system-ui,
        sans-serif;
    }
    h1 {
      font-size: 28px;
      margin: 8px 0;
    }
    h2 {
      font-size: 20px;
      margin: 0 0 16px;
    }
    p {
      margin: 8px 0 16px;
    }
    .small {
      font-size: 13px;
      color: var(--muted);
    }
    header {
      display: flex;
      justify-content: space-between;
      gap: 24px;
      border-bottom: 1px solid var(--line);
      padding-bottom: 24px;
    }
    button,
    select {
      font: inherit;
      color: inherit;
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: 4px;
      padding: 10px 16px;
      min-height: 44px;
    }
    button {
      cursor: pointer;
    }
    button:hover {
      background: var(--hover);
    }
    button:focus-visible,
    select:focus-visible,
    input:focus-visible {
      outline: 3px solid var(--action);
      outline-offset: 3px;
    }
    main {
      display: grid;
      grid-template-columns: 1.4fr 1fr;
      gap: 24px;
      margin-top: 24px;
    }
    .board {
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 24px;
    }
    .job {
      padding: 16px;
      background: var(--faint);
      border-left: 4px solid var(--action);
      margin-bottom: 24px;
    }
    .job strong {
      display: block;
    }
    .people {
      display: grid;
      gap: 12px;
    }
    .person {
      display: grid;
      grid-template-columns: 24px 1fr auto;
      gap: 12px;
      padding: 16px;
      border: 1px solid var(--line);
      border-radius: 4px;
      align-items: center;
    }
    .person:has(:checked) {
      border-color: var(--action);
      background: var(--faint);
    }
    input {
      accent-color: var(--action);
      width: 18px;
      height: 18px;
    }
    .person small {
      display: block;
      color: var(--muted);
    }
    .person:has(:disabled) {
      background: var(--hover);
    }
    .timeline {
      display: flex;
      gap: 4px;
      margin: 20px 0;
    }
    .timeline span {
      height: 40px;
      flex: 1;
      background: var(--line);
      border-radius: 4px;
    }
    .timeline .open {
      background: var(--action);
    }
    .timeline-label {
      display: flex;
      justify-content: space-between;
      font-size: 13px;
      color: var(--muted);
    }
    label[for="time"] {
      display: block;
      margin: 16px 0 8px;
    }
    .primary {
      background: var(--action);
      color: var(--on-action);
      border-color: var(--action);
      margin-top: 24px;
    }
    .primary:hover {
      filter: brightness(0.95);
      background: var(--action);
    }
    #feedback {
      color: var(--success);
      padding-top: 16px;
    }
    footer {
      border-top: 1px solid var(--line);
      padding-top: 16px;
      margin-top: 24px;
      font-size: 13px;
      color: var(--muted);
    }
    @media (max-width: 767px) {
      body {
        padding: 16px;
      }
      main {
        grid-template-columns: 1fr;
      }
      .board {
        padding: 16px;
      }
      header {
        display: block;
      }
      header button {
        margin-top: 8px;
      }
      .person {
        grid-template-columns: 24px 1fr;
      }
      .person > span:last-child {
        grid-column: 2;
      }
    }
  </style>
  <body>
    <header>
      <div>
        <div class="small">SERVICE OPERATIONS / LOCAL PLANNING STUDY</div>
        <h1>Assign a service visit</h1>
        <p>Match a sample job with an available technician.</p>
      </div>
      <div>
        <button id="theme" aria-pressed="false">Dark appearance</button>
      </div>
    </header>
    <main>
      <section class="board">
        <h2>Job and technician</h2>
        <div class="job">
          <strong>Sample job #204 · Heating inspection</strong
          ><span>90 minutes · North district · Routine priority</span>
        </div>
        <div class="people" id="people"></div>
      </section>
      <aside class="board">
        <h2>Proposed visit</h2>
        <p id="technician"></p>
        <label for="time">Available start time</label
        ><select id="time"></select>
        <div class="timeline" aria-hidden="true">
          <span></span><span class="open"></span><span class="open"></span
          ><span></span><span></span><span></span>
        </div>
        <div class="timeline-label">
          <span>08:00</span><span>Illustrative day</span><span>17:00</span>
        </div>
        <p class="small">
          The time list is the source of available choices. The bars are a
          decorative schedule summary.
        </p>
        <button id="assign" class="primary">Review assignment</button>
        <p id="feedback" role="status"></p>
      </aside>
    </main>
    <footer>
      Original HTML using Anvil2 Hammer token 3.5.0 light/dark roles. Fictional
      technicians and schedules; no dispatch service connected.
    </footer>
    <script>
      const staff = [
        {
          id: "alex",
          name: "Alex Morgan",
          skill: "Heating specialist",
          slots: ["09:00", "11:00"],
        },
        {
          id: "sam",
          name: "Sam Rivera",
          skill: "General maintenance",
          slots: ["13:00", "15:00"],
        },
        { id: "lee", name: "Lee Chen", skill: "Unavailable today", slots: [] },
      ];
      let selected = "alex";
      const $ = (id) => document.getElementById(id);
      function update() {
        const p = staff.find((s) => s.id === selected);
        $("technician").textContent = p.name + " · " + p.skill;
        $("time").replaceChildren(...p.slots.map((t) => new Option(t, t)));
        $("feedback").textContent = "";
      }
      $("people").replaceChildren(
        ...staff.map((p) => {
          const l = document.createElement("label");
          l.className = "person";
          const input = document.createElement("input");
          input.type = "radio";
          input.name = "technician";
          input.checked = p.id === selected;
          input.disabled = p.slots.length === 0;
          input.onchange = () => {
            selected = p.id;
            update();
          };
          const text = document.createElement("span");
          text.innerHTML = `<strong>${p.name}</strong><small>${p.skill}</small>`;
          const availability = document.createElement("span");
          availability.textContent = p.slots.length
            ? p.slots.length + " start times"
            : "Unavailable";
          l.append(input, text, availability);
          return l;
        }),
      );
      $("time").onchange = () => {
        $("feedback").textContent = "";
      };
      $("assign").onclick = () => {
        $("feedback").textContent =
          "Local plan: " +
          staff.find((s) => s.id === selected).name +
          " at " +
          $("time").value +
          ". No visit has been dispatched.";
      };
      $("theme").onclick = () => {
        let dark = $("theme").getAttribute("aria-pressed") !== "true";
        $("theme").setAttribute("aria-pressed", dark);
        document.documentElement.style.colorScheme = dark ? "dark" : "light";
      };
      update();
    </script>
  </body>
</html>
```

Kod referansı

- index.html olarak kaydedin; modern tarayıcılar light-dark() işlevini destekler. Bu, yerel Anvil2 çalışma zamanı değildir.

### ThemeProvider entegrasyon referansı

Eksiksiz bir React girdisinde belgelenen anlamsal geçersiz kılma biçimi. Yüklü Anvil2 sürümüne göre doğrulayın.

```
import React from 'react';
import { createRoot } from 'react-dom/client';
import { ThemeProvider } from '@servicetitan/anvil2';

const theme = {
  semantic: {
    BackgroundColorPrimary: {
      value: '#7c3aed',
      extensions: { appearance: { dark: { value: '#a78bfa' } } },
    },
  },
};

function App() {
  return (
    <ThemeProvider theme={theme}>
      <main>
        <h1>Theme integration check</h1>
        <div style={{ background: 'var(--a2-background-color-primary)', padding: 24 }}>
          <span style={{ color: 'var(--a2-foreground-color-on-primary)' }}>
            Primary role with the provider’s matching foreground role
          </span>
        </div>
      </main>
    </ThemeProvider>
  );
}
createRoot(document.getElementById('root')).render(<App />);
```

Kod referansı

- Bu sağlayıcı referansı resmî belgelere göre kontrol edilmiştir; yukarıdaki çalışan örnek bağımsız bir HTML uygulamasıdır.

## ServiceTitan Anvil Tasarım Sistemi Temsilci Kurulumu

### Uygulamaya Başlangıç Noktası

Çalıştırılan örnek için Anvil2 paketi gerekmez. Ayrı ThemeProvider örneği, uyumlu bir yerel kurulum gerektirir.

```
# Save the complete HTML example as index.html
python3 -m http.server 8080
# Open http://localhost:8080
```

### Projeniz İçin Bir İstem

```
Anvil2 anlamsal rollerini kullanarak bir hizmet atama arayüzü oluşturun. Eksiksiz örnekteki açık/koyu ön plan çiftlerini, teknisyene bağlı zaman seçeneklerini, uygun olmayan personelin devre dışı bırakılmasını ve incelemenin geçersiz kılınmasını koruyun. Özgün HTML ile doğrulanmış bir Anvil2 React kurulumu arasında açıkça seçim yapın. Arka uç yanıtı olmadan sevk işleminin gerçekleştiğini iddia etmeyin.
```

## ServiceTitan Anvil Tasarım Sistemi Kaynakları ve Kapsamı

ServiceTitan Anvil2 için bir OpenDesign kılavuzu. Belirteç değerleri, herkese açık Hammer token 3.5.0 sürümünden çıkarılmıştır. Çalışan örnek özgün HTML uygulamasıdır; Anvil2 React çalışma zamanı değildir. Tüm teknisyenler ve uygunluk bilgileri kurgusaldır.

- Tema oluşturma Belirteç katmanları, geçersiz kılmalar ve görünüm değerleri.

- Renkler Durum rolleri ve etkileşim rengi yönergeleri.

- Boşluklar Aralık ölçeği ve yardımcı program entegrasyonu.

- Boyutlandırma Boyutlandırma temelleri.

- Kitaplık mimarisi Anvil2 paketi ve kitaplık sınırları.

## ServiceTitan Anvil Tasarım Sistemi İlgili Kaynaklar

### Siemens iX

Açık bir önem derecesi sözlüğü, temaya duyarlı renk rolleri ve iX Event List API ile endüstriyel olayları inceleyin. Bu kılavuz, incelenmiş bir kaydı giderilmiş bir makine alarmıyla karıştırmadan yerel bir ekipman defteri oluşturur.

### Sprout Social Seeds

Karma seçim, filtrelenmiş boş durumlar ve geri alma özelliklerine sahip eksiksiz bir editoryal inceleme kuyruğunda Seeds’in gerçek herkese açık renk, boşluk, ürün tipografisi ve kenarlık belirteçlerini inceleyin.

### SumUp Circuit

Tam ve doğru anlamsal belirteçler, yerel doğrulama özellikleri, eksiksiz bir satıcı ürün düzenleyicisi ve resimli bir müşteri tarafı önizlemesi içeren Circuit kılavuzu.


- [Uygulama başvurusu](https://anvil.servicetitan.com/docs/web/foundations/theming)
- [Kaynak](https://anvil.servicetitan.com/docs/web/foundations/theming)
- [Kaynak](https://anvil.servicetitan.com/docs/web/foundations/sizing)
- [Kod referansı](https://anvil.servicetitan.com/docs/web/foundations/theming)
- [Tema oluşturma Belirteç katmanları, geçersiz kılmalar ve görünüm değerleri.](https://anvil.servicetitan.com/docs/web/foundations/theming)
- [Renkler Durum rolleri ve etkileşim rengi yönergeleri.](https://anvil.servicetitan.com/docs/web/foundations/colors)
- [Boşluklar Aralık ölçeği ve yardımcı program entegrasyonu.](https://anvil.servicetitan.com/docs/web/foundations/spacing)
- [Boyutlandırma Boyutlandırma temelleri.](https://anvil.servicetitan.com/docs/web/foundations/sizing)
- [Kitaplık mimarisi Anvil2 paketi ve kitaplık sınırları.](https://anvil.servicetitan.com/docs/library-architecture)