Layout System

Responsive layouts, based on a spacing scale can help create natural and easily scannable user interfaces.

Layout presets are fully customizable via the use of variables. You can easily alter the spacing as desired.

Spacing Scale

furl uses a 17-step spacing scale with handcrafted defaults that work for any combination of device size and content.

Spacing scale variables

Variable name	Default value
--ls-0p	0px
--ls-25p	4px
--ls-50p	8px
--ls-75p	12px
--ls-100p	16px
--ls-150p	24px
--ls-200p	32px
--ls-250p	48px
--ls-300p	64px
--ls-350p	96px
--ls-400p	128px
--ls-450p	192px
--ls-500p	256px
--ls-600p	384px
--ls-700p	512px
--ls-800p	640px
--ls-900p	768px