Tasarım belirteci oluşturucu
Asmantik renk, spacing, yarıçap ve tipografi jetonları canlı bir bileşen önizleme ile oluşturun. İhracat İhracatı CSS Özel özellikler veya JSONAI olmadan ücretsiz.
Tasarım jetonları
:root {
--color-accent: #c65324;
--color-background: #faf8f5;
--color-foreground: #292521;
--color-surface: #ffffff;
--color-on-accent: #000000;
--font-family: "Inter", sans-serif;
--radius-sm: 6px;
--radius-md: 12px;
--radius-lg: 24px;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-6: 24px;
--space-8: 32px;
--space-12: 48px;
--space-16: 64px;
}Dışa aktarılan metin İngilizce kalır; girdileriniz olduğu gibi korunur.
No signup. Hiçbir AI kredisi yok. Bu araç tarayıcınızda çıktınızı birleştirir.
Bir fikirden faydalı bir şey için.
- 01
Semantik renkler ve temel değerlerinizi ayarlayın.
- 02
Canlı örnekleme ve spacing ölçeği üretti.
- 03
Kopya kopya kopya CSS Değişkenler veya eşleşen JSON değerler.
Küçük bir bağlam.
Anlamsal belirteçler, tekrarlanan tasarım kararlarına ad verir. Bu araç seçimlerinizden küçük bir renk paleti ve aralık ölçeği oluşturur. CSS ve JSON çıktıları aynı değerleri kullanır. JSON çıktısı basit bir anahtar-değer belgesidir; belirli bir belirteç aktarım standardına uygunluk iddiası taşımaz.
İyi sorular.
Bunu mevcut temamla kullanabilir miyim?
Evet. Harita veya ihraç edilen jetonları temanızın kongrelerine yeniden adlandırmak, yerleşik bir sistemi körüne değiştirmek yerine.
Bu ışık ve karanlık temaları yaratır mı?
Bir seferde bir palet ihraç eder. Her paleti ayrı olarak oluşturun ve her modda kontrastı gözden geçirin.