# Ripple Tasarım Sistemi ## Ripple Tasarım Sistemi Arayüz Önizlemesi Hazırlık notlarını okuyun, hazır olduğunuzu işaretleyin ve tamamlanmamış bir sonraki adıma doğrudan geçin. ## Ripple Tasarım Sistemi Tasarım Referansı Bu çalışma için incelenen, yayımlanmış Ripple tasarım belgeleri: varsayılan renk rolleri, aralıklar, yazı boyutu/satır yüksekliği çiftleri ve odak renkleri. Bunlar tasarım referanslarıdır; yerel bir Ripple sürümünün pakete dahil olduğu iddiası değildir. ### Yayımlanmış renk rolleri | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | --rpl-clr-primary | #0052C2 | Belgelenmiş varsayılan Ripple paleti; tema değerleri farklı olabilir. Tema uygularken rol adını koruyun. | | --rpl-clr-primary-alt | #003174 | Belgelenmiş varsayılan Ripple paleti; tema değerleri farklı olabilir. Tema uygularken rol adını koruyun. | | --rpl-clr-accent | #0095EC | Belgelenmiş varsayılan Ripple paleti; tema değerleri farklı olabilir. Tema uygularken rol adını koruyun. | | --rpl-clr-accent-alt | #E6F5FD | Belgelenmiş varsayılan Ripple paleti; tema değerleri farklı olabilir. Tema uygularken rol adını koruyun. | | --rpl-clr-neutral-0 | #FFFFFF | Belgelenmiş varsayılan Ripple paleti; tema değerleri farklı olabilir. Tema uygularken rol adını koruyun. | | --rpl-clr-neutral-100 | #F5F5F5 | Belgelenmiş varsayılan Ripple paleti; tema değerleri farklı olabilir. Tema uygularken rol adını koruyun. | | --rpl-clr-neutral-200 | #E6E6E6 | Belgelenmiş varsayılan Ripple paleti; tema değerleri farklı olabilir. Tema uygularken rol adını koruyun. | | --rpl-clr-neutral-700 | #333333 | Belgelenmiş varsayılan Ripple paleti; tema değerleri farklı olabilir. Tema uygularken rol adını koruyun. | | --rpl-clr-neutral-800 | #1A1A1A | Belgelenmiş varsayılan Ripple paleti; tema değerleri farklı olabilir. Tema uygularken rol adını koruyun. | | --rpl-clr-type-default | #1A1A1A | Belgelenmiş varsayılan Ripple paleti; tema değerleri farklı olabilir. Tema uygularken rol adını koruyun. | | --rpl-clr-link | #0052C2 | Belgelenmiş varsayılan Ripple paleti; tema değerleri farklı olabilir. Tema uygularken rol adını koruyun. | | --rpl-clr-link-visited | #9F46B1 | Belgelenmiş varsayılan Ripple paleti; tema değerleri farklı olabilir. Tema uygularken rol adını koruyun. | ### Yayımlanmış aralık ölçeği | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | --rpl-sp-1 | 4px | Belgelenmiş aralık adımı. Sonraki adımlar, sıra numarasının dörtle çarpılmasıyla hesaplanmaz. | | --rpl-sp-2 | 8px | Belgelenmiş aralık adımı. Sonraki adımlar, sıra numarasının dörtle çarpılmasıyla hesaplanmaz. | | --rpl-sp-3 | 12px | Belgelenmiş aralık adımı. Sonraki adımlar, sıra numarasının dörtle çarpılmasıyla hesaplanmaz. | | --rpl-sp-4 | 16px | Belgelenmiş aralık adımı. Sonraki adımlar, sıra numarasının dörtle çarpılmasıyla hesaplanmaz. | | --rpl-sp-5 | 20px | Belgelenmiş aralık adımı. Sonraki adımlar, sıra numarasının dörtle çarpılmasıyla hesaplanmaz. | | --rpl-sp-6 | 24px | Belgelenmiş aralık adımı. Sonraki adımlar, sıra numarasının dörtle çarpılmasıyla hesaplanmaz. | | --rpl-sp-7 | 28px | Belgelenmiş aralık adımı. Sonraki adımlar, sıra numarasının dörtle çarpılmasıyla hesaplanmaz. | | --rpl-sp-8 | 32px | Belgelenmiş aralık adımı. Sonraki adımlar, sıra numarasının dörtle çarpılmasıyla hesaplanmaz. | | --rpl-sp-9 | 40px | Belgelenmiş aralık adımı. Sonraki adımlar, sıra numarasının dörtle çarpılmasıyla hesaplanmaz. | | --rpl-sp-10 | 48px | Belgelenmiş aralık adımı. Sonraki adımlar, sıra numarasının dörtle çarpılmasıyla hesaplanmaz. | | --rpl-sp-11 | 56px | Belgelenmiş aralık adımı. Sonraki adımlar, sıra numarasının dörtle çarpılmasıyla hesaplanmaz. | | --rpl-sp-12 | 64px | Belgelenmiş aralık adımı. Sonraki adımlar, sıra numarasının dörtle çarpılmasıyla hesaplanmaz. | | --rpl-sp-13 | 80px | Belgelenmiş aralık adımı. Sonraki adımlar, sıra numarasının dörtle çarpılmasıyla hesaplanmaz. | | --rpl-sp-14 | 120px | Belgelenmiş aralık adımı. Sonraki adımlar, sıra numarasının dörtle çarpılmasıyla hesaplanmaz. | ### Yazı rolleri ve yedek yazı tipi | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | rpl-type-font-family | VIC, Arial, Helvetica, sans-serif | Yayımlanmış yazı rollerindeki boyut/satır yüksekliği çiftleri. Bağımsız örnek, VIC yazı tipini değil, belgelenmiş Arial yedeğini kullanır. | | rpl-type-h1 | 32/36px small · 56/60px large · 700 | Yayımlanmış yazı rollerindeki boyut/satır yüksekliği çiftleri. Bağımsız örnek, VIC yazı tipini değil, belgelenmiş Arial yedeğini kullanır. | | rpl-type-h2 | 24/32px small · 32/40px large · 700 | Yayımlanmış yazı rollerindeki boyut/satır yüksekliği çiftleri. Bağımsız örnek, VIC yazı tipini değil, belgelenmiş Arial yedeğini kullanır. | | rpl-type-h3 | 20/28px small · 24/32px large · 700 | Yayımlanmış yazı rollerindeki boyut/satır yüksekliği çiftleri. Bağımsız örnek, VIC yazı tipini değil, belgelenmiş Arial yedeğini kullanır. | | rpl-type-p | 16/24px | Yayımlanmış yazı rollerindeki boyut/satır yüksekliği çiftleri. Bağımsız örnek, VIC yazı tipini değil, belgelenmiş Arial yedeğini kullanır. | | rpl-type-p-small | 14/20px | Yayımlanmış yazı rollerindeki boyut/satır yüksekliği çiftleri. Bağımsız örnek, VIC yazı tipini değil, belgelenmiş Arial yedeğini kullanır. | ### Odak kontrastı | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | --rpl-clr-focus | #FF9E1B | Yayımlanmış odak renkleri. Örnek, Ripple yardımcı sınıflarını içe aktarmak yerine kendi odak CSS uygulamasını kullanır. | | --rpl-clr-focus-contrast | #1A1A1A | Yayımlanmış odak renkleri. Örnek, Ripple yardımcı sınıflarını içe aktarmak yerine kendi odak CSS uygulamasını kullanır. | | --rpl-clr-dark | #1A1A1A | Yayımlanmış odak renkleri. Örnek, Ripple yardımcı sınıflarını içe aktarmak yerine kendi odak CSS uygulamasını kullanır. | ## Ripple Tasarım Sistemi Eksiksiz Kılavuzu 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ı. ## Ripple Tasarım Sistemi Temelleri ve Çalışma Zamanı Kapsamı ### Tasarım referansını bileşen çalışma zamanından ayırın > Referans, yayımlanmış Ripple tasarım sistemini açıklar. Bu atölye zaman çizelgesi, seçili değerlerin özgün ve eksiksiz bir HTML, CSS ve JavaScript yorumudur. Ripple Vue bileşenlerini çalıştırmaz, belgelenmemiş bir paket aynası kullanmaz ve Victoria Hükûmeti hizmeti olduğunu iddia etmez. Bu sınır önizlemede açıkça belirtilir ve indirilebilir kaynakta da korunur. ### Yerel entegrasyon yolunu bilinçli seçin Ripple, Vue odaklı bir paket yolu ve temel paketi üzerinden yalnızca stilleri içeren bir yol sunar. Resmî kurulum için GitHub Packages erişimi gerekir. Yalnızca stilleri içeren yolda da işaretleme ve davranış uygulamaya aittir. Bu dağıtımı entegre ederken resmî erişim talimatlarını izleyin ve seçtiğiniz sürümü sabitleyin; aşağıdaki bağımsız çalışma için kimlik doğrulama veya paket kurulumu gerekmez. ## Ripple Tasarım Sistemi Renk Rolleri ve Klavye Odağı ### Marka ve içerik arasındaki ayrımı koruyun Zaman çizelgesinin başlığında koyu birincil değer, kenarında vurgu rengi, okuma metninde ise nötr metin rolü kullanılır. Sağlanan kaynakta bunlar ayrı CSS değişkenleridir. Özgün durum panelinde açık vurgu yüzeyi kullanılır. Referans, gelecekte bir tema değişikliğinde birbiriyle ilgisiz onaltılık renk sabitleri yerine amaçlanan ilişkiyi güncelleyebilmek için rol adlarını da değerlerle birlikte içerir. ### Klavye odağını belirgin biçimde farklı gösterin Odak rengi, varsayılan mavinin başka bir tonu değil; koyu içerikle birlikte kullanılan turuncudur. Özgün düğme ve özet odak kuralı, yüzeyi değiştirir ve koyu bir dış çizgi çizer. Onay kutusu odağında dış çizgi kullanılır. Bu, yayımlanmış odak rengi yaklaşımının bir uygulamasıdır; örneğin Ripple’ın yerel odak araçlarını içe aktardığı veya olası her tema için erişilebilirlik sağladığı anlamına gelmez. ## Ripple Tasarım Sistemi Aralıkları ve Duyarlı Tipografi ### Gerçek aralık dizisini kullanın Kaynakta okuma ritmi için 8, 16, 24, 32 ve 48px değerlerinden oluşan adlandırılmış adımlar kullanılır. Eksiksiz referansta daha büyük adımlar da yer alır; dizi, indeksin basit bir katı olmaktan çıkar. Bu nedenle rpl-sp-9, 36px değil 40px değerindedir. Tanımlanan ızgara aralığı ve bölüm dolgusu, farklı yerleşim rollerine hizmet ederken aynı ölçek değerlerini bilinçli olarak paylaşır. ### Yazı tipi sınırını açıkça belirtin Ripple, VIC için Arial ve Helvetica yedeklerini belgeler. Bu çalışma VIC yazı tipi dosyası sağlamaz ve açıkça Arial kullanır. Başlık, örnekteki 992px kesme noktasında 32/36px’ten 56/60px’e geçerken gövde metni 16/24px olarak kalır. Bu yazı tipi boyutu ve satır yüksekliği değerleri belgelenmiş referanslardır; zaman çizelgesinin düzeni özgündür ve piksel düzeyinde aynı yerel bileşen olarak tanımlanmamalıdır. ## Ripple Tasarım Sistemi Zaman Çizelgesi İçeriği ve Aşamalı Ayrıntılandırma ### Her aşamaya farklı bir görev verin İlk aşama kararı tanımlar, ikincisi katılımı hazırlar, üçüncüsü ise bir eylemi kaydeder. Göreli zaman etiketleri, resmî bir son tarih veya hizmet taahhüdü uydurmadan sıralamayı belirtir. Her aşamada görünür kalan kısa bir özet ve yerel bir details öğesinde sunulan ek hazırlık notları bulunur. Görsel işaretçiler özel olsa da aşamalar sıralı liste olarak kalır. - Göreli zaman, atölye akışının sırasını belirtir. - Görünür özetler her aşamanın amacını açıklar. - Genişletilebilir notlar ikincil ayrıntıları içerir. - Hazır olma durumu, açıkça bir onay kutusu eylemiyle belirtilir. ### Okumayı hazır olma durumuyla karıştırmayın Hazırlık notlarını genişletmek bir aşamayı tamamlandı olarak işaretlemez. Ayrı onay kutusu hazır olma durumunu kaydeder ve ilerleme sayısı yalnızca işaretlenen öğelerden hesaplanır. Böylece kullanıcıların yalnızca okuyarak bir işi yanlışlıkla tamamlaması önlenir. Kaynakta tüm öğeler ve durum mantığının tamamı bulunur; dolayısıyla bu ayrım incelenebilir ve düzenlenebilir. ## Ripple Tasarım Sistemi İlerlemesi, Sonraki Adım ve Sıfırlama ### Sonraki eylemi mevcut duruma göre belirleyin Tamamlanmamış sonraki adıma git, işaretlenmemiş ilk aşamayı bulur, notlarını genişletir ve odağı onay kutusuna taşır. Okuyucu daha önce o aşamayı açmış olsa bile aşamayı atlamaz. Üç onay kutusunun tümü işaretlendiğinde sonraki adım düğmesi devre dışı kalır ve durum mesajı tüm hazırlık adımlarının hazır olduğunu belirtir. Bir öğenin işaretini kaldırmak bu eylemi yeniden kullanılabilir hâle getirir. ### İlgili tüm durumları birlikte sıfırlayın Sıfırlama, üç onay kutusunun işaretini kaldırır, notları kapatır, ilerleme öğesini günceller ve odağı ilk onay kutusuna döndürür. Tamamlandı bandını ekranda bırakmaz veya uzak bir kaydın silindiği izlenimini vermez. Bu yerel çalışma için durum bilinçli olarak bellekte tutulur; ekranda görünen açıklama da kaydedilmediğini veya gönderilmediğini belirtir. ## Ripple Tasarım Sistemi Eksiksiz Kaynak ve Doğrulama ### Bağımsız çalışmayı başlatın Sağlanan eksiksiz belgeyi index.html olarak kaydedip bulunduğu dizini sunun. Belge kendi belirteçlerini, işaretlemesini, okunabilir örnek içeriğini ve etkileşim kodunu içerir; bu nedenle harici çalışma zamanı veya yazı tipi isteği gerekmez. Gerçek bir hizmet geliştirmeden önce yerel Ripple API’lerini, sürüm seçeneklerini ve yetkili marka öğelerini kontrol etmek için kaynaklardaki bağlantılara başvurun. 1. Eksiksiz HTML örneğini index.html olarak kaydedin. 2. Dizini yerel olarak sunun. 3. Sonraki adıma odaklanmayı, tamamlanmayı ve sıfırlamayı klavyeyle sınayın. 4. Ayrı bir yerel Ripple entegrasyonu için resmî paket erişimini kullanın ve sürümleri sabitleyin. ### Durum geçişinin tamamını doğrulayın İlk öğeyi hazır olarak işaretleyin, sonraki adım eylemini kullanın ve notları genişletilmiş ikinci onay kutusuna odağın taşındığını doğrulayın. Tüm öğeleri tamamlayın, sonraki adım eyleminin devre dışı kaldığını onaylayın; ardından bir öğenin işaretini kaldırıp eylemin yeniden kullanılabilir olduğunu doğrulayın. Sıfırlayın ve hem ilerlemeyi hem de açılır notları kontrol edin. Telefon genişliğinde durum paneli zaman çizelgesinin altına geçer ve tüm denetimler kullanılabilir kalır. ## Ripple Tasarım Sistemi Bileşen Örnekleri ### index.html — eksiksiz atölye zaman çizelgesi Tüm belirteç değerleri, duyarlı stiller, içerik, ilerleme ve odak davranışı çalıştırılabilir tek bir belgede. ``` Workshop planning timeline

OpenDesign · Workshop practice

Make room for a useful conversation

A short planning timeline for a team workshop. Mark what is ready and jump to the next unfinished step.

Your preparation timeline

  1. One week before

    Define the decision

    Agree on the question the workshop should answer and the people who need to take part.

    Preparation notes
    • Write a one-sentence outcome.
    • Invite people with different perspectives on the decision.
    • Explain what is already decided and what is still open.

  2. Two days before

    Prepare for participation

    Share a short agenda and offer a way to contribute before the session.

    Preparation notes
    • Send readable material in advance.
    • Check access needs and remote participation.
    • Choose someone to capture decisions.

  3. On the day

    Leave with a next step

    Close with a clear decision, an owner and a date to review what happens next.

    Preparation notes
    • Leave time to compare different views.
    • Record unanswered questions separately.
    • Read back the agreed action before closing.

An original OpenDesign HTML/CSS study using published Ripple color, spacing and type values. It uses Arial, Ripple’s documented fallback, and does not run the Ripple Vue components or supply the VIC font. The checklist stays in this page and is not saved or sent.

``` Kod referansı - Bu, özgün uygulama kodudur; Ripple Vue bileşeninin kaynağı değildir. - Harici çalışma zamanı, yazı tipi isteği, hesap veya veri gönderimi gerekmez. ## Ripple Tasarım Sistemi Aracısı Kurulumu ### Uygulamaya Başlangıç Noktası Bu komut, kendi içinde eksiksiz olan yorumu sunar. Yerel Ripple için Kaynaklar bölümünde bağlantısı verilen resmî GitHub Packages erişimini ve Vue veya yalnızca stilleri içeren kurulum yolunu izleyin. ``` # Save the complete example as index.html in an empty directory. python3 -m http.server 8000 # Open http://localhost:8000/ ``` ### Projeniz İçin Bir İstem ``` Sağlanan belgeden eksiksiz ve özgün atölye zaman çizelgesini oluşturun. Ripple’ın belgelenmiş rol değerlerini ve aralıklarını, açıkça belirtilen Arial yedeğini, okuma ve hazır olma durumlarının birbirinden ayrılmasını, tamamlanmamış sonraki adım odağını, tamamlanmayı ve tam sıfırlamayı koruyun. Sonucu yerel bir Ripple Vue uygulaması olarak değil, HTML/CSS yorumu olarak etiketleyin. ``` ## Ripple Tasarım Sistemi Kaynakları ve Kapsamı Yayımlanmış Ripple tasarım değerlerini ve belgelenmiş Arial yedeğini kullanan bir OpenDesign HTML/CSS yorumudur. Bu önizleme Ripple Vue bileşenlerini çalıştırmaz ve VIC yazı tipi varlıklarını içermez. - Renk rolleri Varsayılan palet ve içerik rolleri. - Boşluklar Yayımlanmış aralık dizisinin tamamı. - Tipografi VIC, yedek yazı tipleri ve duyarlı yazı tipi boyutu eşleşmeleri. - Odak durumları Turuncu/koyu odak görünümü. - Yalnızca stilleri içeren yerel kurulum Paket erişimi ve yalnızca stilleri içeren kurulumun sorumlulukları. - Tasarım belirteçleri Rol adları ve tema ilişkileri. ## Ripple Tasarım Sistemi İlgili Kaynaklar ### Scottish Government tasarım sistemi İskoç Hükümeti’nin duyarlı tipografi, aralık ve renk rollerini, sınırı aşan metni koruyan ve düzeltme olanağı sunan yerel bir karakter sayacı alanında uygulayın. ### Singapore Government tasarım sistemi Güncel SGDS Web Components bileşenlerini gerçek duyarlı belirteçler, gündüz ve gece temaları ve yerel planı senkronize tutan yerel, sınırlandırılmış miktarlarla kullanın. ### Decanter Decanter’ın Tailwind ön ayarı, duyarlı tipografi ölçeği ve esnek ekran kenarlarıyla akademik editoryal sayfalar oluşturun. Çalışan konu filtreleri ve genişletilebilir özetler içeren özgün etkinlik kartlarını keşfedin. - [Uygulama başvurusu](https://www.ripple.sdp.vic.gov.au/design-system/design/design-tokens/) - [Kaynak](https://www.ripple.sdp.vic.gov.au/design-system/styles/colour/) - [Kaynak](https://www.ripple.sdp.vic.gov.au/design-system/styles/spacing/) - [Kaynak](https://www.ripple.sdp.vic.gov.au/design-system/styles/typography/) - [Kaynak](https://www.ripple.sdp.vic.gov.au/design-system/styles/focus-state/) - [Kod referansı](https://www.ripple.sdp.vic.gov.au/design-system/design/design-tokens/) - [Renk rolleri Varsayılan palet ve içerik rolleri.](https://www.ripple.sdp.vic.gov.au/design-system/styles/colour/) - [Boşluklar Yayımlanmış aralık dizisinin tamamı.](https://www.ripple.sdp.vic.gov.au/design-system/styles/spacing/) - [Tipografi VIC, yedek yazı tipleri ve duyarlı yazı tipi boyutu eşleşmeleri.](https://www.ripple.sdp.vic.gov.au/design-system/styles/typography/) - [Odak durumları Turuncu/koyu odak görünümü.](https://www.ripple.sdp.vic.gov.au/design-system/styles/focus-state/) - [Yalnızca stilleri içeren yerel kurulum Paket erişimi ve yalnızca stilleri içeren kurulumun sorumlulukları.](https://www.ripple.sdp.vic.gov.au/design-system/develop/usage/css-only/) - [Tasarım belirteçleri Rol adları ve tema ilişkileri.](https://www.ripple.sdp.vic.gov.au/design-system/design/design-tokens/)