Sizes

Size utilities

Padding utilities

• Use default tailwind utilities here
• Component specific variables can be found here

Margin utilities

• Use default tailwind utilities here
• Component specific variables can be found here

Responsive helpers

• h-fun-region - dynamic margins for different container sizes
• fun-grid-gap - dynamic gaps for 12-column grids

Interactive elements heights

• h-fun-sm - fixed height for small things
• h-fun-md - fixed height for medium things
• h-fun-lg - fixed height for large things

Common components and their sizes

Medium (uses h-fun-md: 36px)

Use as default unless the component is in a heaer or inside another component like accordion or dropdown menu.

Small (uses h-fun-sm: 26px)

Use when an element is nested inside another component ex: an accordion, dropdown.

Large (uses h-fun-lg: 40px)

Only meant for usage in header component or any marketing pages that require big elements.