Skip to main content


Read all spacing variables

Default spacing scale

Ravenbright spacing variable is defined globally and begin with the prefix ---rbrh-spacing-{value}. This variable can be used and customized on various components.



To use the spacing, you can place the CSS variables inside component selector.

.btn-secondary {
/*Apply the spacing variables*/
padding: var(--rbrh-spacing-4);


To modify the spacing value, you can edit these variables in CSS-variables:

--rbrh-spacing-0: 0rem;
--rbrh-spacing-1: 0.125rem;
--rbrh-spacing-2: 0.25rem;
--rbrh-spacing-3: 0.5rem;
--rbrh-spacing-4: 0.75rem;
--rbrh-spacing-5: 1rem;
--rbrh-spacing-6: 1.25rem;
--rbrh-spacing-7: 1.5rem;
--rbrh-spacing-8: 1.75rem;
--rbrh-spacing-9: 2rem;
--rbrh-spacing-10: 2.5rem;
--rbrh-spacing-12: 3rem;
--rbrh-spacing-14: 3.5rem;
--rbrh-spacing-16: 4rem;
--rbrh-spacing-18: 4.5rem;
--rbrh-spacing-20: 5rem;
--rbrh-spacing-22: 5.5rem;
--rbrh-spacing-24: 6rem;


Checkout the complete tutorial on how to customize & add new design variable in CSS variables