Flowkit (Beta)Variables

Spacing

Foundational predefined REM-based set of variables called Spacing are used for margins, paddings, and gaps of components. This ensures consistent rhythm and layout behavior across the entire system.

Size Variables

All the base spacing values are defined using a simple valuex naming convention. You can think of x as a multiplier of the base unit (1rem = 16px).

VariableREM ValuePreview
0.25x0.25rem
0.5x0.5rem
0.75x0.75rem
1x1rem
1.25x1.25rem
1.5x1.5rem
1.75x1.75rem
2x2rem
3x3rem
4x4rem
5x5rem
6x6rem
7x7rem
8x8rem
Note

Variables can be remapped. For example, 0.25x might be set to 0.5rem based on your project’s scale. title=“Note”> To learn more about how rem works and why we use it, see the Units page.

Gap Variables

Used in flex and grid layouts. These use t-shirt sizing for consistent spacing across UI elements.

VariableSize Name
XXS GapXX Small
XS GapX Small
SM GapSmall
MD GapMedium
LG GapLarge
XL GapX Large
XXL GapXX Large

Utility Class Examples

These classes reuse the same size scale as the gap variables:

  • Icon SM
  • Flex Horizontal Flex Gap SM
  • Paragraph MD
  • Padding Bottom 1.5x
  • Margin Top 2x

These apply spacing using the same variables as above for consistency.