Skip to content
Harness Design System Harness Design System Harness Design System

Spacings

Our design system enforces specific token usage for spacing and sizing properties to maintain visual consistency across light and dark themes.

Spacing Properties

For spacing-related properties, only design system tokens (cn-4xs through cn-4xl) should be used. This ensures consistent spacing that adapts properly to theme changes. Full list can be found in the Available spacing tokens section.

Required for:

  • Padding: p-*, px-*, py-*, pt-*, pr-*, pb-*, pl-*
  • Margin: m-*, mx-*, my-*, mt-*, mr-*, mb-*, ml-*
  • Gap: gap-*, gap-x-*, gap-y-*
  • Positioning: top-*, right-*, bottom-*, left-*, inset-*
  • Text indent: indent-*
  • Space between: space-x-*, space-y-*

Available spacing tokens:

cn-4xs, cn-3xs, cn-2xs, cn-xs, cn-sm, cn-md, cn-lg, cn-xl, cn-2xl, cn-3xl, cn-4xl

// ✅ Correct - using design system tokens
<Layout.Horizontal className="p-cn-md m-cn-sm gap-cn-lg">
  <Button className="px-cn-xl">Button</Button>
</Layout.Horizontal>


// ❌ Won't work - using default Tailwind spacing
<Layout.Horizontal className="p-4 m-2 gap-8">
  <Button className="px-12">Button</Button>
</Layout.Horizontal>

Size Properties

For size-related properties, you can use both design system tokens and default Tailwind tokens. This flexibility allows for precise control when needed.

Flexible for:

  • Width: w-*, min-w-*, max-w-*
  • Height: h-*, min-h-*, max-h-*
  • Size: size-*
// ✅ Both are acceptable
<Layout.Vertical className="w-64 h-cn-2xl min-w-fit max-h-40">
  <Text>Using Tailwind defaults</Text>
</Layout.Vertical>

Percentage-Based Properties

Properties that accept percentage values use standard Tailwind utilities without restriction.

Standard Tailwind for:

  • Fractional widths: w-1/2, w-1/3, w-2/3, w-full
  • Fractional heights: h-1/2, h-full
  • Responsive grid columns: grid-cols-*, col-span-*
  • Flex properties: flex-1, flex-auto, flex-grow, flex-shrink
// ✅ Standard Tailwind for percentages
<Layout.Horizontal className="w-full">
  <Layout.Horizontal className="w-1/3 flex-shrink-0">Sidebar</Layout.Horizontal>
  <Layout.Horizontal className="flex-1">Main Content</Layout.Horizontal>
</Layout.Horizontal>


<Layout.Grid className="grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
  <Text>Responsive grid</Text>
</Layout.Grid>

Practical Example

Here’s a complete example combining all three categories:

Quick Reference

Property TypeToken UsageExamples
Spacing (padding, margin, gap, position)Design system onlyp-cn-md, m-cn-sm, gap-cn-lg, top-cn-xs
Sizing (width, height, size)Both design system and Tailwindw-64, h-cn-header, size-12
Percentages (fractional, flex, grid)Standard Tailwindw-1/2, flex-1, grid-cols-3

Best Practices

  1. Always use design system spacing tokens for padding, margin, gap, and positioning
  2. Choose appropriate size tokens based on your needs - use design tokens for theme-aware sizes, Tailwind defaults for fixed dimensions
  3. Use standard Tailwind for all percentage-based and responsive sizing