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.
Ayarlar
Scale önizleme
Spacing & radius
Base unit ile spacing scale ve radius tokenları oluştur.
Spacing ayarları
Spacing scale
Border radius
Shadow generator
Her seviye için blur, spread ve opacity'yi ayarla.
Shadow rengi
Component preview
Primary renk ve token ayarlarını değiştir — tüm state'ler ve türev renkler otomatik hesaplanır.
Token ayarları
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.
Buttons
variants
sizes
states
Badges
Primary Beta Neutral Active Pending Failed
Form inputs
Controls
Dark mode
Notifications
Auto-save
Email notifications
SMS alerts
Weekly digest
Alert
ℹ
New version available
v2.4.1 is ready. Review the changelog before deploying to production.
Progress
Storage used72%
Onboarding3 / 5
API quota40%
Cards
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.
503
Modal
Değişiklikleri kaydet
✕
Bu işlemi onaylıyor musunuz? Yaptığınız değişiklikler kalıcı olarak kaydedilecek.
Dropdown
Seçim yapın
Profil ayarları
Yeni proje
Çıkış yap
Tooltip
Dosyayı sil
Klavye kısayolu: ⌘K
Pro özellik
Avatar
AK
md
JS
sm
MZ
lg
AK
JS
MZ
+4
group
Table
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
Tabs
Genel bakış
Analitik
Raporlar
Ayarlar
Seçili sekmenin içeriği burada görüntülenir.
Radio
Aylık faturalandırma
Yıllık faturalandırma %20 indirim
Kurumsal (yakında)
Textarea
En az 20 karakter giriniz.
Breadcrumb
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ı!