مُولِد نظام المسافات انشئ نظامًا متسقًا للمسافات مع وحدة أساسية قابلة للتخصيص ومضاعفات.

يستخدم مقياس المسافات وحدة أساسية مضروبة في سلسلة من العوامل لإنشاء قيم مسافة متسقة ومناسبة. الوحدات الأساسية الأكثر شيوعًا هي 4px (المستخدمة بواسطة Tailwind CSS و Material Design) و 8px (المستخدمة بواسطة العديد من أنظمة التصميم). وحدة أساسية 4px تخلق سيطرة دقيقة: 4، 8، 12، 16، 20، 24، 32، 40 ، الخ. وحدة أساسية 8px تخلق قفزات أكبر: 8، 16، 24، 32، 40، 48 ، الخ. خصائص CSS المخصصة (المتغيرات) لتخزين القيم لإعادة الاستخدام: --space-1: 0.25rem. يمكن استخدامها في هامش وتركيب وفجوات وأي خاصية مسافة أخرى. باستخدام وحدة rem، يتم ضمان تسلسل المسافات مع حجم الخط الرئيسي ، والحفاظ على النسب عند تغيير المستخدم لحجم النص. توفر الخطوة نصفية (0.5x) زيادة صغيرة للت調ات الدقيقة. المتغيرات الكبيرة (16x، 20x، 24x) تتعامل مع مسافات القسم والفجوات الكبيرة في التصميم.