スペーシング

/* カード内のパディング */
.card {
  padding: var(--spacing-md);
}

/* セクション間の余白 */
.section {
  margin-bottom: var(--spacing-2xl);
}

/* ボタンのパディング */
.button {
  padding: var(--spacing-sm) var(--spacing-md);
}

/* アイコンとテキストのギャップ */
.icon-text {
  display: flex;
  gap: var(--spacing-xs);
}

{/* パディング */}
<div className="p-md">
  <h2 className="mb-sm">タイトル</h2>
  <p className="mb-md">本文テキスト</p>
</div>

{/* マージン */}
<section className="mt-2xl mb-3xl">
  <div className="mx-lg">
    コンテンツ
  </div>
</section>

{/* ギャップ（Flexbox/Grid） */}
<div className="flex gap-sm items-center">
  <Icon name="check" />
  <span>アイコン付きテキスト</span>
</div>

<div className="grid grid-cols-3 gap-lg">
  <div>カード 1</div>
  <div>カード 2</div>
  <div>カード 3</div>
</div>

import { Stack, Box } from '@codeconnect-llc/design-system'

{/* 垂直スタック */}
<Stack direction="vertical" spacing="md">
  <Box>アイテム 1</Box>
  <Box>アイテム 2</Box>
  <Box>アイテム 3</Box>
</Stack>

{/* 水平スタック */}
<Stack direction="horizontal" spacing="sm" align="center">
  <Icon name="star" />
  <span>評価</span>
  <Badge>4.5</Badge>
</Stack>