Local CSS spacing token generator

একটি সামঞ্জস্যপূর্ণ CSS স্পেসিং স্কেল তৈরি করুন

ভিজ্যুয়াল স্পেসিং টোকেন তৈরি করতে একটি বেস ইউনিট এবং অনুপাত সেট করুন, তাদের ছন্দের পূর্বরূপ দেখুন এবং CSS ভেরিয়েবলগুলি অনুলিপি করুন।

rem uses this root

প্রস্তুত

Spacing token preview

--space-1
4pxvar(--space-1)
--space-2
5pxvar(--space-2)
--space-3
6.25pxvar(--space-3)
--space-4
7.81pxvar(--space-4)
--space-5
9.77pxvar(--space-5)
--space-6
12.21pxvar(--space-6)
--space-7
15.26pxvar(--space-7)
--space-8
19.07pxvar(--space-8)
:root {
  --space-1: 4px;
  --space-2: 5px;
  --space-3: 6.25px;
  --space-4: 7.81px;
  --space-5: 9.77px;
  --space-6: 12.21px;
  --space-7: 15.26px;
  --space-8: 19.07px;
}

কিছু আপলোড হয় না। প্রসেসিং এই ব্রাউজার ট্যাবেই থাকে।

Why use a spacing scale?

A small set of related values makes padding, gaps, and margins easier to review across a product.

A linear ratio keeps steps predictable while leaving room between compact and spacious layouts.

Use the preview to judge rhythm, then use the custom properties with var(--space-3) in your CSS.

Spacing scale questions

What ratio should I start with?

1.25 creates gentle steps, while 1.5 creates stronger separation for larger layouts.

When should I use rem?

Use rem when spacing should follow the document's root font size; use px when the design calls for fixed values.

Are these design tokens?

Yes. The output is a small CSS custom property set that can act as a shared spacing vocabulary.