Design Tools
Generator Skala Jarak
Buat sistem jarak yang konsisten untuk desain Anda
Preset
4px
12
Pratinjau Visual
0
0rem
1
0.25rem
2
0.5rem
3
0.75rem
4
1rem
5
1.25rem
6
1.5rem
7
1.75rem
8
2rem
9
2.25rem
10
2.5rem
11
2.75rem
12
3rem
Tabel Skala
| Nama | px | rem | Variabel |
|---|---|---|---|
| 0 | 0px | 0rem | --space-0 |
| 1 | 4px | 0.25rem | --space-1 |
| 2 | 8px | 0.5rem | --space-2 |
| 3 | 12px | 0.75rem | --space-3 |
| 4 | 16px | 1rem | --space-4 |
| 5 | 20px | 1.25rem | --space-5 |
| 6 | 24px | 1.5rem | --space-6 |
| 7 | 28px | 1.75rem | --space-7 |
| 8 | 32px | 2rem | --space-8 |
| 9 | 36px | 2.25rem | --space-9 |
| 10 | 40px | 2.5rem | --space-10 |
| 11 | 44px | 2.75rem | --space-11 |
| 12 | 48px | 3rem | --space-12 |
:root {
--space-0: 0rem;
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-5: 1.25rem;
--space-6: 1.5rem;
--space-7: 1.75rem;
--space-8: 2rem;
--space-9: 2.25rem;
--space-10: 2.5rem;
--space-11: 2.75rem;
--space-12: 3rem;
}
Mengapa menggunakan Generator Skala Jarak?
- ✓100% Gratis - Tidak ada biaya tersembunyi atau fitur premium
- ✓Tanpa Daftar - Gunakan langsung tanpa membuat akun
- ✓Privasi Utama - Semua pemrosesan terjadi di browser Anda. Data Anda tidak pernah meninggalkan perangkat
- ✓Sangat Cepat - Hasil instan tanpa penundaan server
Cara Menggunakan
- Masukkan atau tempel teks Anda di area input di atas
- Alat akan memproses input Anda secara otomatis
- Salin hasilnya atau unduh sebagai file
Fitur
- ✓Multiple scale types (linear, geometric, fibonacci)
- ✓Base size configuration
- ✓Custom step count
- ✓Visual spacing preview
- ✓CSS, SCSS, and Tailwind output
- ✓Design system presets
Pertanyaan yang Sering Diajukan
Which spacing scale should I use?
Linear scales are simple, geometric scales grow exponentially, and Fibonacci scales follow natural proportions.