Variables

Design tokens for consistent spacing, sizing, and styling across components.

Variable Categories

Height

Component height values:

Size	Default	Usage
small	32px	Icon buttons, compact inputs
medium	40px	Standard buttons, inputs, list items
large	100px	Hero sections, large cards

Radius

Border radius values:

Size	Default	Usage
small	16px	Subtle rounding for cards, inputs
medium	20px	Standard button rounding, modal corners
large	100px	Fully rounded (pills), avatars, FABs

Padding

Internal spacing values:

Size	Default	Usage
small	12px	Compact components, dense lists
medium	16px	Standard buttons, cards, modals
large	24px	Page margins, section spacing

Stroke

Border width values:

Size	Default	Usage
small	0.5px	Subtle dividers, hairline borders
medium	1px	Standard borders, input outlines
large	2px	Emphasized borders, focus rings

Gap

Spacing between elements:

Size	Default	Usage
small	4px	Tight groupings, icon-to-text spacing
medium	8px	Standard list item gaps, form spacing
large	12px	Section separators, card grids

Usage

With Multinaire Components

const { variables } = useMultinaireTheme();

<MultinaireContainer
  padding={variables.padding.medium}
  borderRadius={{variables.radius.medium}}
  gap={{variables.gap.medium}}
>
  {/* Content */}
</MultinaireContainer>

Direct Access

const { variables } = useMultinaireTheme();

<View
  style={{
    padding: variables.padding.medium,
    borderRadius: variables.radius.medium,
    gap: variables.gap.small,
  }}
>
  {/* Content */}
</View>

Configuration

{
  "variables": {
    "height": {
      "small": 32,
      "medium": 40,
      "large": 100
    },
    "radius": {
      "small": 16,
      "medium": 20,
      "large": 100
    },
    "padding": {
      "small": 12,
      "medium": 16,
      "large": 24
    },
    "stroke": {
      "small": 0.5,
      "medium": 1,
      "large": 2
    },
    "gap": {
      "small": 4,
      "medium": 8,
      "large": 12
    }
  }
}

Design Guidelines

1. Use medium as the default - It provides comfortable spacing for most use cases
2. Use small for density - When you need to fit more content
3. Use large for emphasis - Hero sections, prominent calls to action
4. Maintain consistency - Use the same size variant for related elements