Spacing

Spacing is essential to layout structure, rhythm, and clarity. The Tendoo Design System uses a semantic, token-based spacing scale to ensure visual consistency across all UI components and screen sizes.

Our scale is built on a 4px base unit and uses descriptive token names — such as xs, sm, md, lg, xl — instead of raw pixel values.

Spacing Tokens

✅ Use semantic tokens (space.md, space.lg) rather than hardcoded values (16px, 24px) to improve flexibility and consistency.

Usage Guidelines

• Use space.md for most default padding or gaps between UI elements.
• Apply space.sm or space.xs for tight controls (e.g., icon + label, input + button).
• Use larger tokens (lg, xl, 2xl+) to separate sections or define layout breathing room.
• Avoid defining custom spacing values — stick to the system.

Example

<div className="p-lg space-y-md">
  <h2 className="text-xl font-semibold">Card Title</h2>
  <p className="text-base text-muted">
    This card uses semantic spacing tokens to define internal padding and
    element separation.
  </p>
</div>

Design Token Reference

// spacing.tokens.ts
export const spacing = {
  none: "0px",
  xs: "4px",
  sm: "8px",
  md: "16px",
  lg: "24px",
  xl: "32px",
  "2xl": "40px",
  "3xl": "48px",
  "4xl": "64px",
};

Semantic spacing tokens help ensure clean, consistent layouts — while making your code and design tools easier to read, update, and scale across devices.