# Semrush Intergalactic Tasarım Sistemi

## Semrush Intergalactic Tasarım Sistemi Arayüz Önizlemesi

Ölçek bağlamını kaybetmeden terimleri filtreleyin, yalnızca izlenen kayıtlarla sınırlandırın, metriği değiştirin ve seçili değerleri inceleyin.

## Semrush Intergalactic Tasarım Sistemi Tasarım Referansı

@semcore/ui 17.6.0 ve @semcore/theme 2.3.1 sürümlerinden yerel Intergalactic kontroller; özgün HTML çubuk karşılaştırması.

### Anlamsal açık tema rolleri

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| --intergalactic-bg-primary-neutral | oklch(1 0 0) | Sabitlenmiş temadaki geçerli anlamsal değer; OKLCH ifadeleri dâhil. |
| --intergalactic-bg-secondary-neutral | oklch(0.98 0.001 180) | Sabitlenmiş temadaki geçerli anlamsal değer; OKLCH ifadeleri dâhil. |
| --intergalactic-text-primary | oklch(0.1 0.03 137 / 0.899) | Sabitlenmiş temadaki geçerli anlamsal değer; OKLCH ifadeleri dâhil. |
| --intergalactic-text-secondary | oklch(0.088 0.026 147.7 / 0.583) | Sabitlenmiş temadaki geçerli anlamsal değer; OKLCH ifadeleri dâhil. |
| --intergalactic-border-primary | oklch(0.137 0.026 175.7 / 0.161) | Sabitlenmiş temadaki geçerli anlamsal değer; OKLCH ifadeleri dâhil. |
| --intergalactic-control-primary-info | oklch(0.23 0.01 140) | Sabitlenmiş temadaki geçerli anlamsal değer; OKLCH ifadeleri dâhil. |
| --intergalactic-control-primary-info-hover | oklch(0.32 0.007 140) | Sabitlenmiş temadaki geçerli anlamsal değer; OKLCH ifadeleri dâhil. |
| --intergalactic-control-primary-info-active | oklch(0 0 140) | Sabitlenmiş temadaki geçerli anlamsal değer; OKLCH ifadeleri dâhil. |
| --intergalactic-control-rounded | 6px | Sabitlenmiş temadaki geçerli anlamsal değer; OKLCH ifadeleri dâhil. |
### Metin boyutları

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| --intergalactic-fs-50 | 10px | Yayımlanmış metin boyutu adımı; bilgi hiyerarşisine uygun rolü seçin. |
| --intergalactic-fs-100 | 12px | Yayımlanmış metin boyutu adımı; bilgi hiyerarşisine uygun rolü seçin. |
| --intergalactic-fs-200 | 14px | Yayımlanmış metin boyutu adımı; bilgi hiyerarşisine uygun rolü seçin. |
| --intergalactic-fs-300 | 16px | Yayımlanmış metin boyutu adımı; bilgi hiyerarşisine uygun rolü seçin. |
| --intergalactic-fs-400 | 20px | Yayımlanmış metin boyutu adımı; bilgi hiyerarşisine uygun rolü seçin. |
| --intergalactic-fs-500 | 24px | Yayımlanmış metin boyutu adımı; bilgi hiyerarşisine uygun rolü seçin. |
| --intergalactic-fs-600 | 32px | Yayımlanmış metin boyutu adımı; bilgi hiyerarşisine uygun rolü seçin. |
| --intergalactic-fs-700 | 36px | Yayımlanmış metin boyutu adımı; bilgi hiyerarşisine uygun rolü seçin. |
| --intergalactic-fs-800 | 48px | Yayımlanmış metin boyutu adımı; bilgi hiyerarşisine uygun rolü seçin. |
### Boşluklar

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| --intergalactic-spacing-1x | 4px | Tema stil sayfasında adlandırılmış boşluk adımı. |
| --intergalactic-spacing-2x | 8px | Tema stil sayfasında adlandırılmış boşluk adımı. |
| --intergalactic-spacing-3x | 12px | Tema stil sayfasında adlandırılmış boşluk adımı. |
| --intergalactic-spacing-4x | 16px | Tema stil sayfasında adlandırılmış boşluk adımı. |
| --intergalactic-spacing-5x | 20px | Tema stil sayfasında adlandırılmış boşluk adımı. |
| --intergalactic-spacing-6x | 24px | Tema stil sayfasında adlandırılmış boşluk adımı. |
| --intergalactic-spacing-8x | 32px | Tema stil sayfasında adlandırılmış boşluk adımı. |
| --intergalactic-spacing-10x | 40px | Tema stil sayfasında adlandırılmış boşluk adımı. |
| --intergalactic-spacing-05x | 2px | Tema stil sayfasında adlandırılmış boşluk adımı. |
### Köşeler

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| --intergalactic-rounded-extra-small | 2px | Genel bir büyük köşe yarıçapı yerine bileşene uygun köşe yarıçapını kullanın. |
| --intergalactic-rounded-small | 4px | Genel bir büyük köşe yarıçapı yerine bileşene uygun köşe yarıçapını kullanın. |
| --intergalactic-rounded-medium | 6px | Genel bir büyük köşe yarıçapı yerine bileşene uygun köşe yarıçapını kullanın. |
| --intergalactic-rounded-large | 12px | Genel bir büyük köşe yarıçapı yerine bileşene uygun köşe yarıçapını kullanın. |
| --intergalactic-rounded-extra-large | 24px | Genel bir büyük köşe yarıçapı yerine bileşene uygun köşe yarıçapını kullanın. |
### Grafiğin ilk altı rengi

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| --intergalactic-chart-palette-order-1 | oklch(0.58 0.168 278.2) | Sıralı veri serisi rengi. Örnek, tek seri için ilk rolü kullanır. |
| --intergalactic-chart-palette-order-2 | oklch(0.82 0.15 170) | Sıralı veri serisi rengi. Örnek, tek seri için ilk rolü kullanır. |
| --intergalactic-chart-palette-order-3 | oklch(0.74 0.17 303) | Sıralı veri serisi rengi. Örnek, tek seri için ilk rolü kullanır. |
| --intergalactic-chart-palette-order-4 | oklch(0.82 0.18 80) | Sıralı veri serisi rengi. Örnek, tek seri için ilk rolü kullanır. |
| --intergalactic-chart-palette-order-5 | oklch(0.74 0.19 22) | Sıralı veri serisi rengi. Örnek, tek seri için ilk rolü kullanır. |
| --intergalactic-chart-palette-order-6 | oklch(0.82 0.088 272.1) | Sıralı veri serisi rengi. Örnek, tek seri için ilk rolü kullanır. |
## Semrush Intergalactic Tasarım Sistemi Eksiksiz 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ı.

## Semrush Intergalactic Tasarım Sistemi Analitik Çalışma Alanı Düzeni

### Karşılaştırmayı net bir soruya dayandırın

> Örnek, altı kurgusal anahtar kelimeyi seçilen tek bir metriğe göre karşılaştırır. Filtre, yalnızca izlenenleri gösterme seçeneği ve metrik düğmeleri sonucun üstünde yer alır. Ayrı bir inceleme paneli, seçili terimin her iki metriğini de göstererek kullanıcının sıralama görünümünü temel değerlerle karşılaştırmasını sağlar.

### Kurgusal verileri ölçüm verilerinden ayırın

Her sayı sabit bir örnek veri kümesinin parçasıdır ve temsilî olduğu belirtilir. Sayfa, arama hacmini veya zorluğu güncel bir Semrush ölçümü olarak sunmaz. Çubukların arkasında ağ sorgusu, analiz hesabı veya indirilmiş müşteri veri kümesi yoktur.

## Semrush Intergalactic Tasarım Sistemi Tema ve Tasarım Değişkeni Oluşturma

### Güncel tema paketini bilinçli kullanın

Çalışma zamanı, @semcore/ui 17.6.0 ve @semcore/theme 2.3.1 sürümlerini sabitler. Yerel bileşenler güncel tema paketini gerektirir ve giriş noktası light.css dosyasını içe aktarır. Tablo, ilgisiz eski onaltılık varsayılanlarla değiştirmek yerine bu stil sayfasındaki OKLCH değerlerini korur.

### Bileşen rollerini grafik rollerinden ayrı tutun

Yerel kontroller görünümünü Intergalactic stillerinden alırken, özgün çubuk karşılaştırması grafik paletindeki ilk seri rolünü kullanır. Seçim, dikkat dağıtmayan satır arka planı ve basılı durumu ile belirtilir. Seri rengi; her eylem veya hata rengi için gelişigüzel yeniden kullanılmamalıdır.

## Semrush Intergalactic Tasarım Sistemi Yoğun Sonuçlarda Tipografi

### Etiketleri, birimleri ve değerleri birlikte gösterin

Her çubuk satırında terim ve yazıyla belirtilmiş sayısal değer bulunur. Küçük eksen notu, ölçeğin örnek aramalar mı yoksa 100 üzerinden puan mı olduğunu belirtir. İnceleme paneli her iki birimi de yineler; böylece görsel olarak benzer çubuk uzunlukları, metriklerin birbirinin yerine kullanılabileceği izlenimini yaratmaz.

### Bağlamı gizlemeden kısa metin kullanın

Yerel giriş bileşeni, rahatça kullanılabilen bir filtre alanı sağlamak için büyük boyutu kullanır. Sonuç etiketleri kısa tutulurken çalışma alanı başlığı ve bölüm başlıkları daha büyüktür. Dar ekranda anahtar kelime, okunamaz bir parçaya kırpılmak yerine çubuk ve değerin üstüne taşınır.

## Semrush Intergalactic Tasarım Sistemi Grafik Ölçeği ve Sıralama

### Filtreleme sırasında ölçeği sabit tutun

Hacim grafiği her zaman en yüksek değer olarak 8,100'ü, zorluk grafiği ise 100'ü kullanır. Filtreleme, kalan en uzun çubuğu tam genişliğe uzatmaz. Bu tercih, kullanıcı kümeyi daralttığında karşılaştırmanın anlamını korur.

### Etkin metriğe göre sıralayın

Seçili metrik; azalan sıralamayı, çubuk genişliğini, sayısal etiketleri ve bölüm başlığını birlikte belirler. Hacim ve zorluk değerleri asla toplanmaz veya ortalaması alınmaz. Şeffaf örnek verileri ölçülmüş verilerle değiştirmeden önce gerçek bir ürün, metriklerin kaynağını ve zaman aralıklarını tanımlamalıdır.

## Semrush Intergalactic Tasarım Sistemi Yerel Giriş ve Onay Kutusu

### Bileşik giriş bileşeninin yapısını kullanın

Input dış bileşeni, Input.Value ise gerçekten düzenlenebilir kontrolü sağlar. onChange geri çağırması önce dize değerini alır; bu, standart bir DOM değişiklik olayı olarak ele alınmasından farklıdır. Görünür etiket, Value id değerine bağlanır.

### Boole ve metin filtrelerini birbirinden bağımsız tutun

Yerel Checkbox bileşeninin onChange geri çağırması, işaretli olma durumunu boole değeri olarak alır. Satırlar oluşturulurken metin filtresiyle yalnızca izlenenleri gösterme durumu birleştirilir; dolayısıyla ikisi de boş sonuç verebilir. Filtreleri sıfırlamak, seçili inceleme bağlamını koruyarak her iki kontrolü de eski hâline getirir.

## Semrush Intergalactic Tasarım Sistemi Seçili Ayrıntı ve Boş Durum

### Seçimi kimliğe bağlı tutun

Seçili terim, dizi sırasından bağımsız olarak saklanır. Bir çubuğa tıklamak bu terimi ve basılı durumunu günceller; inceleme paneli ise kaydın tüm bilgilerini bulur. Başka bir metriğe göre sıralama, inceleme panelinin fark ettirmeden farklı bir satır dizinine yönelmesine neden olamaz.

### Filtre dışında kalan seçimi açıklayın

Seçili terim artık görünmüyorsa inceleme paneli, yazılı bir açıklamayla kullanılabilir durumda kalır. Bu, filtreleme öncesi ve sonrası bir öğeyi karşılaştırırken yararlıdır. Boş sonuç alanı, boş bir grafik paneli göstermek yerine açık bir sıfırlama eylemi sunar.

## Semrush Intergalactic Tasarım Sistemi Erişilebilir Veri Karşılaştırması

### Grafiği renk kullanmadan anlaşılır kılın

Çubuklar, gerçek düğmelerin içindeki dekoratif span öğeleridir. Terim ve değer erişilebilir metni oluşturur; aria-pressed ise seçimi belirtir. Veriler, çubuk uzunluğunu veya seri rengini görmeden de anlaşılabilir. Klavye odağı, seçili satır biçiminden belirgin biçimde ayrıdır.

1. Difficulty seçeneğini belirleyin; yeniden sıralanan çubukları ve puan birimini inceleyin.

2. Eşleşmeyen bir terimi filtreleyin ve Filtreleri sıfırla'yı kullanın.

3. Bir terim seçin, filtreyle gizleyin ve seçimin korunduğunu açıklayan metni okuyun.

### Filtre kurtarma yolunu sınayın

Yerel giriş ve onay kutusu gerçek kontrollerini sunar. Metrik değiştirme düğmeleri basılı durumunu belirtir; özgün sıfırlama eylemi ise her iki filtreyi de temizler. Düzen, sonuç başlığını ve birim notunu görünür tutarak boş ve dolu durumlarda aynı bağlamı sağlar.

## Semrush Intergalactic Tasarım Sistemi Bileşen İçe Aktarımları ve Tema Kurulumu

### Bileşen giriş noktalarını içe aktarın

@semcore/ui kökü, tüm bileşenleri dışa aktarmak yerine bilinçli olarak hata verir. Bu kaynak; button, input ve checkbox bileşenlerini kendilerine ayrılmış giriş noktalarından, ayrıca @semcore/theme/light.css dosyasını içe aktarır. Eksiksiz giriş, örnek veri kümesini ve tüm türetme mantığını içerir.

- Ayrılmış @semcore/ui/button, input ve checkbox içe aktarımları.

- Sabitlenmiş @semcore/theme/light.css.

- Eksiksiz JSX içindeki özgün, sabit ölçekli çubuk ve örnek veri mantığı.

### Özel çubukları yerel D3 grafiği olarak adlandırmayın

Kontroller yerel Intergalactic bileşenleridir; çubuk karşılaştırması ise erişilebilir, özgün bir HTML ve CSS uygulamasıdır. Üretim gereksinimleri araç ipuçları, eksenler, fırça etkileşimi veya büyük veri kümeleri içeriyorsa bu küçük örneğin sahip olmadığı yetenekleri varmış gibi göstermeyin; bunun yerine uygun grafik bileşenini açıkça seçip entegre edin.

## Semrush Intergalactic Tasarım Sistemi Bileşen Örnekleri

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

Kurgusal bir anahtar kelime kümesini karşılaştırın. Aşağıdaki kaynak, tüm durum ve doğrulama mantığı dâhil eksiksiz React girişidir.

```
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import Button from "@semcore/ui/button";
import Input from "@semcore/ui/input";
import Checkbox from "@semcore/ui/checkbox";
import "@semcore/theme/light.css";
import "./intergalactic.css";
const data = [
  { term: "design tokens", volume: 8100, difficulty: 42, tracked: true },
  { term: "component library", volume: 6600, difficulty: 58, tracked: false },
  { term: "accessible forms", volume: 2900, difficulty: 31, tracked: true },
  {
    term: "responsive typography",
    volume: 1900,
    difficulty: 24,
    tracked: false,
  },
  { term: "semantic colors", volume: 1300, difficulty: 18, tracked: false },
  { term: "design system audit", volume: 720, difficulty: 36, tracked: true },
];
function App() {
  const [q, setQ] = useState(""),
    [tracked, setTracked] = useState(false),
    [metric, setMetric] = useState("volume"),
    [selected, setSelected] = useState("design tokens");
  const rows = data
    .filter((d) => d.term.includes(q.toLowerCase()) && (!tracked || d.tracked))
    .sort((a, b) => b[metric] - a[metric]);
  const max = metric === "volume" ? 8100 : 100;
  const item = data.find((d) => d.term === selected);
  return (
    <main className="research">
      <header>
        <p>RESEARCH WORKSPACE / FICTIONAL DATA</p>
        <h1>Compare a keyword set</h1>
        <span>
          Six authored sample records · figures are illustrative, not Semrush
          measurements
        </span>
      </header>
      <div className="research-toolbar">
        <div className="research-search">
          <label htmlFor="term-search">Filter keywords</label>
          <Input size="l">
            <Input.Value
              id="term-search"
              placeholder="Find a sample term"
              value={q}
              onChange={setQ}
            />
          </Input>
        </div>
        <Checkbox
          label="Tracked only"
          checked={tracked}
          onChange={setTracked}
        />
        <div
          className="metric-options"
          role="group"
          aria-label="Comparison metric"
        >
          <Button
            use={metric === "volume" ? "primary" : "secondary"}
            aria-pressed={metric === "volume"}
            onClick={() => setMetric("volume")}
          >
            Volume
          </Button>
          <Button
            use={metric === "difficulty" ? "primary" : "secondary"}
            aria-pressed={metric === "difficulty"}
            onClick={() => setMetric("difficulty")}
          >
            Difficulty
          </Button>
        </div>
      </div>
      <div className="research-grid">
        <section className="chart-panel">
          <div className="chart-heading">
            <h2>
              {metric === "volume"
                ? "Illustrative monthly volume"
                : "Illustrative difficulty score"}
            </h2>
            <span>{rows.length} terms</span>
          </div>
          <p className="axis-note">
            {metric === "volume"
              ? "Fixed scale: 0–8,100 sample searches"
              : "Fixed scale: 0–100 sample score"}
          </p>
          {rows.length ? (
            <div className="bars">
              {rows.map((r) => (
                <button
                  className={
                    "bar-row " + (r.term === selected ? "selected" : "")
                  }
                  key={r.term}
                  onClick={() => setSelected(r.term)}
                  aria-pressed={r.term === selected}
                >
                  <span className="bar-name">{r.term}</span>
                  <span className="bar-track" aria-hidden="true">
                    <i style={{ width: (r[metric] / max) * 100 + "%" }} />
                  </span>
                  <strong>{r[metric].toLocaleString("en-US")}</strong>
                </button>
              ))}
            </div>
          ) : (
            <div className="no-results">
              <h3>No matching terms</h3>
              <p>
                Clear the text and tracked filter to restore the full
                comparison.
              </p>
              <Button
                onClick={() => {
                  setQ("");
                  setTracked(false);
                }}
              >
                Reset filters
              </Button>
            </div>
          )}
          <p className="chart-note">
            Values are written beside every bar. Click a term to inspect both
            metrics.
          </p>
        </section>
        <aside>
          <h2>{item.term}</h2>
          <dl>
            <dt>Sample volume</dt>
            <dd>{item.volume.toLocaleString("en-US")}</dd>
            <dt>Sample difficulty</dt>
            <dd>{item.difficulty} / 100</dd>
            <dt>Tracking</dt>
            <dd>{item.tracked ? "Tracked" : "Not tracked"}</dd>
          </dl>
          <div className="inspector-note">
            <h3>Comparison context</h3>
            <p>
              The bar scale stays fixed when filters change. Difficulty and
              volume have separate units and are not added together.
            </p>
          </div>
          {!rows.some((r) => r.term === selected) && (
            <p className="retained">
              Selected term is outside the current filter; details are retained.
            </p>
          )}
        </aside>
      </div>
      <footer>
        Native Intergalactic Input, Checkbox and Button from @semcore/ui 17.6.0.
        Original accessible HTML bar comparison; no analytics service request.
      </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.

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

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

```
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  font:
    14px/1.5 Arial,
    sans-serif;
  color: var(--intergalactic-text-primary);
  background: #fff;
}
.research {
  padding: 28px;
}
.research header {
  border-bottom: 1px solid #e0e1e9;
  padding-bottom: 24px;
}
.research header p {
  font-size: 12px;
  color: #6c6e79;
  margin: 0 0 10px;
  letter-spacing: 0.07em;
}
.research h1 {
  font-size: 28px;
  margin: 0 0 8px;
}
.research header span {
  color: #6c6e79;
}
.research-toolbar {
  display: flex;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
  padding: 24px 0;
}
.research-search {
  min-width: 220px;
  flex: 1;
}
.research-search label {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
}
.metric-options {
  display: flex;
  gap: 8px;
}
.research-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(250px, 0.8fr);
  gap: 24px;
}
.chart-panel,
.research aside {
  border: 1px solid #c4c7cf;
  border-radius: 8px;
  padding: 24px;
  min-width: 0;
}
.chart-heading {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
}
.research h2 {
  font-size: 18px;
  margin: 0;
}
.chart-heading > span,
.axis-note,
.chart-note {
  font-size: 12px;
  color: #6c6e79;
}
.axis-note {
  margin: 8px 0 24px;
}
.bar-row {
  display: grid;
  grid-template-columns: 165px minmax(0, 1fr) 58px;
  align-items: center;
  gap: 12px;
  width: 100%;
  border: 0;
  background: white;
  text-align: left;
  padding: 12px 8px;
  border-radius: 4px;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.bar-row.selected {
  background: #f0e8ff;
}
.bar-name {
  font-size: 13px;
}
.bar-track {
  height: 18px;
  background: #f4f5f9;
  border-radius: 3px;
  overflow: hidden;
}
.bar-track i {
  display: block;
  height: 100%;
  background: var(--intergalactic-chart-palette-order-1);
  border-radius: 3px;
}
.bar-row strong {
  text-align: right;
  font-size: 12px;
}
.bar-row:focus-visible {
  outline: 2px solid #008ff8;
  outline-offset: 2px;
}
.chart-note {
  margin-top: 24px;
}
.research dl {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  margin: 24px 0;
}
.research dt {
  color: #6c6e79;
}
.research dd {
  margin: 0;
  font-weight: 600;
}
.inspector-note {
  padding: 16px;
  background: #f4f5f9;
  border-radius: 6px;
}
.inspector-note h3 {
  font-size: 14px;
  margin: 0 0 8px;
}
.inspector-note p {
  font-size: 12px;
  margin: 0;
}
.retained {
  font-size: 12px;
  margin: 16px 0 0;
}
.no-results {
  text-align: center;
  padding: 32px 16px;
}
.no-results h3 {
  font-size: 18px;
}
.research footer {
  font-size: 12px;
  color: #6c6e79;
  margin-top: 24px;
}
@media (max-width: 950px) {
  .research-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 550px) {
  .research {
    padding: 16px;
  }
  .chart-panel,
  .research aside {
    padding: 16px;
  }
  .research-toolbar {
    gap: 16px;
  }
  .research-search {
    flex-basis: 100%;
  }
  .bar-row {
    grid-template-columns: minmax(0, 1fr) 50px;
    gap: 8px;
  }
  .bar-name {
    grid-column: 1/-1;
  }
  .bar-track {
    grid-column: 1;
  }
  .metric-options {
    flex-wrap: wrap;
  }
}
```

Kod referansı

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

## Semrush Intergalactic Tasarım Sistemi Aracı 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 intergalactic-compare -- --template react
cd intergalactic-compare
npm install
npm install react@18.3.1 react-dom@18.3.1 @semcore/ui@17.6.0 @semcore/theme@2.3.1 @semcore/icon@17.3.0 @semcore/illustration
# Replace src/main.jsx and add src/intergalactic.css.
npm run dev
```

### Projeniz İçin Bir İstem

```
Yerel Intergalactic kontrolleri, özel içe aktarımları ve güncel tema tasarım değişkenlerini kullanan kompakt bir analitik karşılaştırma oluşturun. Birimleri, sabit ölçekleri, sıralamayı ve seçili kimliği tutarlı kılın. Metinsel değerler ve boş durumdan kurtarma seçeneği sunun. Ölçülmüş Semrush verisi olduğu izlenimi vermek yerine, örnek metrikleri ve özgün grafik kodunu doğru biçimde tanımlayın.
```

## Semrush Intergalactic Tasarım Sistemi Kaynakları ve Kapsamı

OpenDesign uygulama kılavuzu. Altı anahtar kelime kaydı ve tüm metrikler kurgusaldır. Yerel Intergalactic kontroller, özgün bir HTML grafiği çevreler; bu bir Semrush raporu veya yerel D3 grafik uygulaması değildir.

- Intergalactic Girişi Yerel giriş bileşiminin yapısı ve boyut kılavuzu.

- Intergalactic Tasarım Belirteçleri Semantik tasarım belirteci rolleri.

- Sabitlenmiş Tema Dışa Aktarımı Yerel örnekte kullanılan gerçek değerler.

- Resmî kaynak Bileşen kayıtları, herkese açık API'ler ve grafik kitaplıkları.

## Semrush Intergalactic Tasarım Sistemiyle İlgili Kaynaklar

### ServiceNow Horizon

Taslağı koruma, doğrulama, durum filtreleri ve kurtarma içeren eksiksiz bir yerel talep inceleme akışı üzerinden Horizon Workspace’in kesin aralık, yarıçap ve tipografi referanslarını keşfedin.

### ServiceTitan Anvil

Anvil2’yi üç katmanlı belirteç modeli, doğrulanmış açık/koyu rol değerleri ve teknisyen, saat ve inceleme durumlarını eşzamanlı güncelleyen eksiksiz bir hizmet atama etkileşimiyle somutlaştırın.

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


- [Uygulama başvurusu](https://developer.semrush.com/intergalactic/components/input/input)
- [Kaynak](https://cdn.jsdelivr.net/npm/@semcore/theme@2.3.1/lib/light.css)
- [Kod referansı](https://developer.semrush.com/intergalactic/components/input/input)
- [Intergalactic Girişi Yerel giriş bileşiminin yapısı ve boyut kılavuzu.](https://developer.semrush.com/intergalactic/components/input/input)
- [Intergalactic Tasarım Belirteçleri Semantik tasarım belirteci rolleri.](https://developer.semrush.com/intergalactic/style/design-tokens/design-tokens)
- [Sabitlenmiş Tema Dışa Aktarımı Yerel örnekte kullanılan gerçek değerler.](https://cdn.jsdelivr.net/npm/@semcore/theme@2.3.1/lib/light.css)
- [Resmî kaynak Bileşen kayıtları, herkese açık API'ler ve grafik kitaplıkları.](https://github.com/semrush/intergalactic)