Color shades
Renk seç → otomatik 50–900 shade ölçeği oluştur. Kontrast oranlarını gör.
Typography scale
Font seç, base size ve ratio ayarla → tam type scale oluşur.
Spacing & radius
Base unit ile spacing scale ve radius tokenları oluştur.
Shadow generator
Her seviye için blur, spread ve opacity'yi ayarla.
Component preview
Primary renk ve token ayarlarını değiştir — tüm state'ler ve türev renkler otomatik hesaplanır.
Türetilmiş renk tokenları
500 brand
Seçtiğin ana renk. Buton background, aktif state'ler, link rengi.
600 hover
Hover state rengi. Butona mouse gelince background bu renge geçer.
700 active
Pressed/active state. Butona tıklandığında kullanılır.
50 tint
Çok açık arka plan. Alert, banner, bilgi kutuları için zemin rengi.
100 tint2
Badge background, secondary buton zemini, chip arka planı.
200 border
Input hover border'ı, outline buton çerçevesi, kart border'ı.
text
Açık tint zemin üzerindeki metin rengi. Badge yazısı, secondary buton etiketi.
Tek bir renk seçerken sistem bu 7 tokeni otomatik hesaplar.
Primary Beta Neutral Active Pending Failed
Dark mode
Notifications
Auto-save
Email notifications
SMS alerts
Weekly digest
New version available
v2.4.1 is ready. Review the changelog before deploying to production.
Storage used72%
Onboarding3 / 5
API quota40%
New feature
Component tokens
Adjust the controls above to see every component update in real time.
API requests
48,291
requests / day
↑ 12.4% vs last week
Connection error
Database unreachable. Check network config.
Değişiklikleri kaydet
Bu işlemi onaylıyor musunuz? Yaptığınız değişiklikler kalıcı olarak kaydedilecek.
Seçim yapın
Profil ayarları
Yeni proje
Çıkış yap
Dosyayı sil
Klavye kısayolu: ⌘K
Pro özellik
AK
md
JS
sm
MZ
lg
AK
JS
MZ
+4
group
Ad Soyad Rol Durum Tarih
Jordan Rivera Designer Aktif 12 Nis 2026
Elif Şahin Developer Bekliyor 8 Nis 2026
Mert Demir PM Pasif 3 Nis 2026
Genel bakış
Analitik
Raporlar
Ayarlar
Seçili sekmenin içeriği burada görüntülenir.
Aylık faturalandırma
Yıllık faturalandırma %20 indirim
Kurumsal (yakında)
En az 20 karakter giriniz.
Ana Sayfa Projeler Design System Components
Dashboard / Ayarlar / Profil
Component Builder
Kendi component'ini tanımla — token sistemi ve döküman sayfası otomatik oluşturulsun.
Yeni Component
Token sistemi ve döküman otomatik üretilir
Temel Bilgiler
Renk Token'ları
Background
Foreground
Border
Yapı
Kurallar & Erişilebilirlik
Eklenen Componentler
🧩
Henüz component yok
Formu doldurup ekle,
döküman'a otomatik yansır.
Döküman
Design system dökümanını tek bir HTML dosyası olarak export et.
Export tokens
Tüm tokenlar — renkler, tipografi, spacing, gölge, bileşenler.
CSS Variables
Figma Variables
Tailwind v4
Tailwind v3

        
Kopyalandı!