# Porsche tasarım sistemi ## Porsche tasarım sistemi Arayüz önizlemesi Bir kaplama ve jant stili seçin, oturum özetini saklayın ve arayüzün açık/koyu modunu değiştirin. ## Porsche tasarım sistemi Tasarım referansı Porsche Design System v4 belgeleri; belirteç sayfalarında v4.8.0 gösterilir. Bu, belirli bir sürümün referansıdır; en son sürüm olduğu iddiasını taşımaz. Özgün kaplama renk örnekleri uygulama verileridir, resmî Porsche boya kodları değildir. ### Sabit boşluk | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | spacingStatic2Xs | 1px | Sabit boşluk belirteci. | | spacingStaticXs | 4px | Sabit boşluk belirteci. | | spacingStaticSm | 8px | Sabit boşluk belirteci. | | spacingStaticMd | 16px | Sabit boşluk belirteci. | | spacingStaticLg | 32px | Sabit boşluk belirteci. | | spacingStaticXl | 48px | Sabit boşluk belirteci. | | spacingStatic2Xl | 80px | Sabit boşluk belirteci. | ### Akışkan boşluk | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | spacingFluidXs | clamp(4px, 0.25vw + 3px, 8px) | Uyarlanan küçük aralık. | | spacingFluidSm | clamp(8px, 0.5vw + 6px, 16px) | Uyarlanan kompakt aralık. | | spacingFluidMd | clamp(16px, 1.25vw + 12px, 36px) | Örnek sayfanın dolgusu. | | spacingFluidLg | clamp(32px, 2.75vw + 23px, 76px) | Bölüm aralığı. | | spacingFluidXl | clamp(48px, 3vw + 38px, 96px) | Geniş boşluk. | | spacingFluid2Xl | clamp(80px, 7.5vw + 56px, 200px) | Büyük ölçekli kompozisyon boşluğu. | ### Renk rolleri | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | colorCanvas | light-dark(#fff,hsl(225 66.7% 1.2%)) | Sayfa tuvali. | | colorSurface | light-dark(hsl(240 10% 95%),hsl(240 2% 10%)) | İkincil yüzey. | | colorPrimary | light-dark(hsl(225 66.7% 1.2%),hsl(225 100% 99%)) | Birincil metin. | | colorFocus | light-dark(#1A44EA,#1A44EA) | Klavye odağı. | | colorContrastLow / colorContrastLower | Decorative only | Erişilebilirlik kurallarına uygun olmayan metin rolleri. | ### Tipografi ifadeleri | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | fontPorscheNext | 'Porsche Next','Arial Narrow',Arial,'Heiti SC',SimHei,sans-serif | Resmî aile ve yedek yazı tipleri. | | typescale2Xs | .75rem | Listelenen en küçük yazı tipi boyutu. | | typescaleXs | .875rem | Küçük meta veriler. | | typescaleSm | 1rem | Gövde metni temel çizgisi. | | typescaleMd | clamp(1.13rem, 0.21vw + 1.08rem, 1.33rem) | Akışkan tipografi. | | typescale2Xl | clamp(1.6rem, 1.56vw + 1.29rem, 3.16rem) | Akışkan büyük başlık. | | leadingNormal | calc(6px + 2.125ex) | Yazı tipine duyarlı satır yüksekliği. | | fontWeightNormal / Semibold / Bold | 400 / 600 / 700 | Kullanılabilir ağırlıklar. | ### Şekil | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | radiusXs / Sm / Md | 2px / 4px / 6px | Küçük şekiller. | | radiusLg | 8px | Kompakt etkileşimli kontroller. | | radiusXl | 12px | Standart etkileşimli kontroller. | | radius2Xl | 16px | Bildirimler. | | radius3Xl | 24px | Kutucuklar ve iletişim kutusu benzeri kapsayıcılar. | | radius4Xl | 32px | En büyük sabit köşe yarıçapı. | | radiusFull | calc(infinity * 1px) | Bağımsız kapsül göstergeleri. | ### Ekran genişliği eşikleri | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | breakpointXs | 480 | px ile kullanılan sayısal belirteç. | | breakpointSm | 760 | px ile kullanılan sayısal belirteç. | | breakpointMd | 1000 | px ile kullanılan sayısal belirteç. | | breakpointLg | 1300 | px ile kullanılan sayısal belirteç. | | breakpointXl | 1760 | px ile kullanılan sayısal belirteç. | | breakpoint2Xl | 1920 | px ile kullanılan sayısal belirteç. | ### Parçalı seçim sözleşmesi | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | value | string \| number | Seçili öğenin değeri. | | change event | detail: { value: string \| number } | Uygulama durumunu güncelleyin. | | columns | auto or 1–25; responsive values supported | Öğe ızgarasını denetleyin. | | noWrap | false by default | True değeri, kaydırılabilir tek satır oluşturur. | | state | none / error / success | Doğrulama biçimlendirmesi. | | disabled | Excludes value from form submission | Sıradan, seçili olmayan bir öğeden farklıdır. | ## Porsche 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ı. ## Porsche tasarım sistemi v4 temelini eksiksiz bir set olarak kullanın ### Artık genel değişkenler zorunludur > 4. sürümde bileşen stilleri genel CSS değişkenleri üzerine kurulur. Bu nedenle genel stil sayfasını içe aktarmak dekoratif bir sıfırlama değil, mimari bir gerekliliktir. Aynı içe aktarma normalleştirmeyi ve Porsche Next font-face tanımlarını da içerir. Bu referans, v4 bileşen ve belirteç sözleşmelerini bir arada tutar. Metin alanı sarmalayıcıları veya bileşen başına tema özellikleri kullanan eski örnekleri geçiş rehberine başvurmadan buraya taşımayın. Belgelerin kendisi sürümlendiğinden, bu sayfa zamansız bir API olduğu iddiasında bulunmak yerine kapsamını belirtir. Destekleyici belirtimi okuyun ## Porsche tasarım sistemi Renk şeması, eksiksiz rol çiftlerini seçer ### Arayüz rollerini kaplama örneklerinden ayırın Tuval, yüzey ve birincil ön plan belirteçleri light-dark() çiftleri içerir. CSS color-scheme özelliği hangi dalın kullanılacağını seçer. Uygulamanın modu sabit olup olmadığına veya kullanıcının tercihini izleyip izlemediğine bağlı olarak light, dark ya da light dark ayarını yapın. Bu örnekteki kaplama renkleri, bağımsız ve özgün renk örnekleridir. Arayüzün koyu moda geçirilmesi, seçili kaplamayı değil çevredeki yüzeyleri ve metni değiştirir. Kontrastı daha düşük renk rolleri dekorasyon içindir; bunları temel bir seçenek etiketinde kullanmak belirtecin amaçlanan sınırını ihlal eder. Destekleyici belirtimi okuyun ## Porsche tasarım sistemi Akışkan ritim ve sabit kontrol aralıkları bir arada kullanılır ### Boşluğun büyümesi gereken yerlerde clamp ifadeleri kullanın Porsche hem sabit hem de akışkan ölçekler sunar. Yerel örnekte sayfa dolgusu için orta boy akışkan ifade, seçenek alanındaki ilişkileri sabit tutmak içinse 16px ve 32px aralıklar kullanılır. Akışkan üst sınır, geniş ekranlarda boşluğun durmadan artmasını önler. Örnek, belgelenmiş kırılma noktalarından biri olan 760px altında geniş görsel ve kontroller düzeninden üst üste yığılmış bölümlere geçer. Yığma kararı uygulamanın kompozisyon tercihidir; kırılma noktası değeri ise sistem referansıdır. Destekleyici belirtimi okuyun ## Porsche tasarım sistemi Tipografi, sağlanan yazı tipine bağlıdır ### Satır yüksekliği ifadesi genel bir oran değildir Porsche Next için belgelenmiş bir yedek yazı tipi yığını ve küçük boyutları sabit, büyük boyutları akışkan olan bir tipografi ölçeği bulunur. leadingNormal, yazı tipinin x-yüksekliğine tepki veren ex birimleriyle sabit piksel ek değerini kullanır. Bunu keyfî bir 1.5 oranıyla değiştirmek amaçlanan ritmi bozar. Çevrimdışı yorumda, lisanslı yazı tipinin pakete eklendiği izlenimi yaratmak yerine yerel bir yedek yazı tipi ve rahatça okunabilir bir satır yüksekliği kullanılır. Yerel örnekte gerçek yazı tipi yüzü genel stil sayfasında tanımlanır. v4 tasarım dilinde başlıklar normal kalınlıktadır; hiyerarşi kurmak için daha büyük yazıların kalın olması gerekmez. Destekleyici belirtimi okuyun ## Porsche tasarım sistemi Kontroller ve kapsayıcılar farklı köşe yarıçapları kullanır ### Ana hiyerarşiyi on iki ve yirmi dört piksel belirler Standart etkileşimli köşe yarıçapı 12px, kart ve iletişim kutusu ailesininki 24px’tir. Kompakt kontrollerde 8px, bildirimlerde ise 16px kullanılır. En büyük yuvarlatmayı her öğeye uygulamak bu ilişkileri ortadan kaldırır. İlk önizlemede araç tasarımı geniş, 24px köşe yarıçaplı bir yüzeyde sergilenir ve kontrollerde 12px kullanılır. Araç silüeti, Porsche model görseli veya ürün fotoğrafı değil, özgün bir CSS çizimidir. Gerçek yapılandırma seçenekleri varmış izlenimi vermeden aynı kompozisyon malzeme seçici için de kullanılabilir. Destekleyici belirtimi okuyun ## Porsche tasarım sistemi Segmented control, sekme çubuğu değil seçim kontrolüdür ### Sabit değerler kullanın ve durumun tek bir sahibi olsun Her p-segmented-control-item bir value sağlar. Değişiklik olayı bu değeri event.detail içinde döndürür; örnek, özeti yeniden oluşturmadan önce değeri kaydeder. Grup, görünür bir etiket sunarak kaplama ve jant seçeneklerinin birbirinden ayırt edilebilir kalmasını sağlar. v4 API, duyarlı sütun sayısını ve isteğe bağlı, satır kaydırmayan bir kaydırma alanını destekler. Kısa seçenekler birlikte görünür kalabilir; uzun yerelleştirilmiş etiketler kırpılmak yerine satır kaydırmalı olarak gösterilmeli veya bilinçli olarak tasarlanmış bir kaydırma alanında sunulmalıdır. Devre dışı kontroller form verilerine dahil edilmez; bu örneği gerçek bir forma dönüştürürken bunu göz önünde bulundurun. 1. Kaplama ve jant değerlerini uygulama durumunda bir kez başlatın. 2. Grubun change olayından detail.value değerini okuyun. 3. Görsel tasarımı ve metinsel seçimi birlikte güncelleyin. 4. Düzenleme sonrasında daha önce kaydedilmiş özeti temizleyin. Destekleyici belirtimi okuyun ## Porsche tasarım sistemi Yerel bir seçim, tamamlanmış bir işlem değildir ### Düğme türlerini açıkça belirtin p-button varsayılan olarak submit türündedir. Örnekte type="button" ayarlanmıştır; çünkü bir kombinasyonu kaydetmek ve renk şemasını değiştirmek yerel etkileşimlerdir. Gezinme, uydurma bir hedefe yönlendiren düğmeyle değil Link bileşeniyle yapılmalıdır. Birincil eylem, gerçekleşeni tam olarak bildirir: mevcut sayfa oturumu için bir kombinasyon kaydedilmiştir. Sayfa yenilendikten sonra da saklanacağını, hesaba kaydedildiğini veya sipariş verildiğini iddia etmez. Bu sınırlı davranış, arayüz örneği için bilinçli olarak seçilmiş ve tamamlanmış bir kapsam sunar. - Birincil eylem mevcut yerel kombinasyonu kaydeder. - İkincil eylem arayüzün renk şemasını değiştirir. - Her iki eylemin de görünür etiketleri bulunur. - Bekleyen bir işlem yoksa yükleme simgesi gösterilmez. Destekleyici belirtimi okuyun ## Porsche tasarım sistemi Bileşenleri yükleyin ve ilk çizimi koruyun ### Yükleyici, stil sayfası ve derleyici birlikte çalışır Vite yapılandırması, resmi yükleyici parçasını belge gövdesine ekler. Ana giriş dosyası global stil sayfasını içe aktarır ve gerçek özel öğeleri oluşturur. Kapsamlı :not(:defined) kuralları, seçili bileşen etiketlerinin kaydedilmeden önce ekranda kısa süreliğine görünmesini önler. Belgelenen Vite kurulumu, bozuk olduğu belirtilen polyfill’i nedeniyle Lightning CSS’ın LightDark dönüşümünü hariç tutar. Bu hariç tutma önemlidir: token işlevinin yanlış biçimde derleme sırasında kaldırılması, bileşen işaretlemesi doğru olsa bile temayı bozabilir. Önerilen ön yüklemeler daha sonra belgelenen font, simge ve bileşen parçalarıyla eklenebilir. Destekleyici belirtimi okuyun ## Porsche tasarım sistemi Bileşen Örnekleri ### Tamamlanmış, bağımsız ve etkileşimli örnek Belgenin tamamını index.html olarak kaydedip tarayıcıda açın. v4 token rollerinin ve segmented control seçim davranışının özgün, çevrimdışı HTML/CSS yorumudur. Yerel PDS çalışma zamanı, uzaktan yüklenen fontlar, resmi model görselleri veya gerçek araç verileri kullanılmaz. ``` Original finish study
DESIGN STUDY / 01

A different point of view.

Explore two small choices in an original vehicle study. See how a restrained interface keeps the object at the center.

Original illustration · Not a Porsche model render
Finish
Wheel study

YOUR COMBINATIONChalk · Classic

``` Kod referansı - Kaplama ve jant seçimleri, özgün bir yapılandırıcı çizimini günceller. Bunlar Porsche ürün özellikleri değildir; yerel segmented-control olayları ayrı v4 örneğinde gösterilir. ### Oturumla sınırlı özet içeren, kontrollü iki seçim Yerel p-segmented-control öğeleri detail.value içeren change olayları yayar; p-button ise click olayını ve açıkça belirtilmiş bir türü kullanır. ``` import './style.css'; const paints={chalk:'#b9b6ae',blue:'#456171',red:'#9f2937'}; const names={chalk:'Chalk',blue:'Coastal blue',red:'Garnet'}; type Paint=keyof typeof paints; let paint:Paint='chalk',wheel='Classic'; document.querySelector('#app')!.innerHTML=`

Explore an original color study

This specimen is not a real vehicle configurator or order.

Chalk Coastal blue Garnet Classic Aero

Keep this combination Switch color scheme

`; function render(){document.querySelector('#swatch')!.style.background=paints[paint];document.querySelector('#summary')!.textContent=`${names[paint]} · ${wheel} wheel study`;document.querySelector('#saved')!.textContent='';} document.querySelector('#paint')!.addEventListener('change',e=>{const v=(e as CustomEvent<{value:string}>).detail.value;if(v in paints){paint=v as Paint;render();}}); document.querySelector('#wheel')!.addEventListener('change',e=>{wheel=String((e as CustomEvent<{value:string}>).detail.value);render();}); document.querySelector('#save')!.addEventListener('click',()=>{document.querySelector('#saved')!.textContent=`Kept for this page session: ${names[paint]}, ${wheel}. No order submitted.`;}); document.querySelector('#scheme')!.addEventListener('click',()=>{const root=document.documentElement;root.style.colorScheme=root.style.colorScheme==='dark'?'light':'dark';}); render(); ``` Kod referansı - Seçeneklerden herhangi biri değiştirilince önceki kayıtlı kombinasyon temizlenir. - Renk şeması özelliği sistem temasını kontrol eder; kaplama renk örnekleri özgün uygulama verileridir. - Örnek iletişim bilgisi toplamaz, araç rezervasyonu yapmaz veya sipariş göndermez. ## Porsche tasarım sistemi Agent Kurulumu ### Uygulamaya Başlangıç Noktası Belgelenen global stil sayfası ve yükleyici parçasıyla v4 yerel Web Component kurulumu. Çevrimdışı önizlemede uzaktan yüklenen fontlar veya paket çalışma zamanı yoktur; yerel paket derlemesi burada doğrulanmamıştır. ``` # In a new Vite vanilla-ts project: npm create vite@latest pds-specimen -- --template vanilla-ts cd pds-specimen npm install npm install @porsche-design-system/components-js@4 npm install --save-dev lightningcss // vite.config.ts import {defineConfig} from 'vite'; import {Features} from 'lightningcss'; import {getLoaderScript} from '@porsche-design-system/components-js/partials'; export default defineConfig({ plugins:[{name:'pds-loader',transformIndexHtml(html){ return html.replace('',getLoaderScript()+''); }}], css:{transformer:'lightningcss',lightningcss:{exclude:Features.LightDark}} }); /* src/style.css */ @import '@porsche-design-system/components-js'; html { color-scheme: light; } :is(p-button,p-segmented-control,p-segmented-control-item):not(:defined){visibility:hidden} main{max-width:60rem;margin:auto;padding:clamp(16px,1.25vw + 12px,36px)} .options{display:grid;gap:32px} .preview{padding:32px;border-radius:24px;margin-block:32px;border:1px solid currentColor} .actions{display:flex;gap:16px;flex-wrap:wrap} # Replace src/main.ts with the example below, then: npm run dev ``` ### Projeniz İçin Bir İstem ``` Zorunlu global stilleri, yükleyici parçasını, color-scheme özelliğini, gerçek akışkan aralıkları ve 12px kontrol/24px kapsayıcı köşe yarıçaplarını kullanan bir v4 PDS kompozisyonu oluşturun. Özgün iki örnek seçimi için segmented-control change olayındaki detail.value değerini, yerel eylemler içinse açıkça belirtilmiş type=button kullanın. Eski sarmalayıcı API’lerini karıştırmayın ve örneği gerçek bir araç yapılandırması gibi sunmayın. ``` ## Porsche tasarım sistemi Kaynaklar ve Kapsam PDS v4 kapsamındaki bağımsız OpenDesign referansı. Özgün çizimler ve kaplama adları Porsche araç özelliklerini, boya kodlarını veya mevcut seçenekleri belirtmez. Herhangi bir işlem yapılmaz. - v4’e geçiş Global stiller ve color-scheme değişiklikleri. - Vanilla JS kurulumu Yükleyici, stil sayfası ve Vite yapılandırması. - Boşluk belirteçleri Sabit ve akışkan ifadeler. - Renk belirteçleri Eşleştirilmiş roller ve dekoratif kullanım sınırları. - Yazı tipi token’ları Porsche Next, yazı boyutları ve satır yüksekliği. - Kenarlık token’ları Kontrol ve kapsayıcı köşe yarıçapları. - Kesme noktası token’ları Gerçek duyarlı eşikler. - Segmented control API Değerler, değişiklik olayları ve form davranışı. - Düğme API Türler, varyantlar ve bekleme durumu. ## Porsche tasarım sistemi İlgili Kaynaklar ### Red Hat PatternFly Bir operasyon çalışma alanı için PatternFly kullanın: anlamsal belirteç referansları, seçilebilir hizmet kartları, üç durumlu toplu seçim, kapsam incelemesi ve eksiksiz yerel React kodu. ### REI Cedar Yerel Vue kutucukları, gerçek belirteç değerleri, eksiksiz klavye gezinmesi ve duyarlı bir ürün düzeniyle somut bir Cedar sipariş karşılama seçicisi oluşturun. ### Sainsbury's tasarım sistemi Gerçek palet ve boyut referansları, erişilebilir radyo seçenekleri, güncellenen bir özet ve doğru yerel geri bildirimle eksiksiz bir koleksiyon zamanı akışına Sainsbury’s’in herkese açık tasarım yönergelerini uygulayın. - [Uygulama başvurusu](https://designsystem.porsche.com/v4/components/segmented-control/api/) - [Kaynak](https://designsystem.porsche.com/v4/tokens/spacing/) - [Kaynak](https://designsystem.porsche.com/v4/tokens/color/) - [Kaynak](https://designsystem.porsche.com/v4/tokens/font/) - [Kaynak](https://designsystem.porsche.com/v4/tokens/border/) - [Kaynak](https://designsystem.porsche.com/v4/tokens/breakpoint/) - [Kaynak](https://designsystem.porsche.com/v4/components/segmented-control/api/) - [Destekleyici belirtimi okuyun](https://designsystem.porsche.com/v4/news/migration-guide/porsche-design-system/) - [Destekleyici belirtimi okuyun](https://designsystem.porsche.com/v4/tokens/color/) - [Destekleyici belirtimi okuyun](https://designsystem.porsche.com/v4/tokens/spacing/) - [Destekleyici belirtimi okuyun](https://designsystem.porsche.com/v4/tokens/font/) - [Destekleyici belirtimi okuyun](https://designsystem.porsche.com/v4/tokens/border/) - [Destekleyici belirtimi okuyun](https://designsystem.porsche.com/v4/components/segmented-control/api/) - [Destekleyici belirtimi okuyun](https://designsystem.porsche.com/v4/components/button/api/) - [Destekleyici belirtimi okuyun](https://designsystem.porsche.com/v4/developing/vanilla-js/getting-started/) - [Kod referansı](https://designsystem.porsche.com/v4/components/segmented-control/api/) - [v4’e geçiş Global stiller ve color-scheme değişiklikleri.](https://designsystem.porsche.com/v4/news/migration-guide/porsche-design-system/) - [Vanilla JS kurulumu Yükleyici, stil sayfası ve Vite yapılandırması.](https://designsystem.porsche.com/v4/developing/vanilla-js/getting-started/) - [Boşluk belirteçleri Sabit ve akışkan ifadeler.](https://designsystem.porsche.com/v4/tokens/spacing/) - [Renk belirteçleri Eşleştirilmiş roller ve dekoratif kullanım sınırları.](https://designsystem.porsche.com/v4/tokens/color/) - [Yazı tipi token’ları Porsche Next, yazı boyutları ve satır yüksekliği.](https://designsystem.porsche.com/v4/tokens/font/) - [Kenarlık token’ları Kontrol ve kapsayıcı köşe yarıçapları.](https://designsystem.porsche.com/v4/tokens/border/) - [Kesme noktası token’ları Gerçek duyarlı eşikler.](https://designsystem.porsche.com/v4/tokens/breakpoint/) - [Segmented control API Değerler, değişiklik olayları ve form davranışı.](https://designsystem.porsche.com/v4/components/segmented-control/api/) - [Düğme API Türler, varyantlar ve bekleme durumu.](https://designsystem.porsche.com/v4/components/button/api/)