7onicDESIGN SYSTEM

Spacing

4pxベースユニットで設計されたスペーシングシステム。コンポーネントとレイアウト全体で一貫したリズムを提供します。

4

4px ベースユニット

0〜12pxは2px刻み（微調整用）、12px以降は4pxの倍数で構成されています。

Spacing Scale

クリックしてコピー。0pxから96pxまでの完全なスペーシングスケール（0〜12pxは2px刻み、12px以降は4px刻み）

Visual Scale

2px
gap-0.5
4px
gap-1
6px
gap-1.5
8px
gap-2
10px
gap-2.5
12px
gap-3
16px
gap-4
20px
gap-5
24px
gap-6

Component Spacing

各コンポーネントの推奨スペーシング値

Padding
Gap

Button

Button
16px|8px gap|16px
Padding X
16pxpx-4
Padding Y
autoh-*
Gap
8pxgap-2

Input

Placeholder...
12/16px| content |12/16px
Padding X
12/16pxpx-3/4
Padding Y
autoh-*

Card

12px
Padding X
16→24pxpx-4 sm:px-6
Header Top
20→24pxpt-5 sm:pt-6
Section Gap
12→16pxpb-3 sm:pb-4
Footer Gap
8pxgap-2

Modal

24px
24px
Padding
24pxp-6
Footer Gap
12pxgap-3

Badge

Badge
8px|4px gap|8px
Height
24pxh-6
Padding X
8pxpx-2
Gap (アイコン/ドット)
4pxgap-1

Alert

16px|10px gap|16px
Padding
16pxp-4
Gap (アイコン↔コンテンツ)
10pxgap-2.5

Layout Spacing

ページやセクションのレイアウトに推奨されるスペーシングパターン。プリミティブトークンとレスポンシブブレイクポイントを組み合わせて使用します。

Symmetric

Default

X = Y 同一パディング。ダッシュボード、アプリ向け

Mobile16px
Tablet24px
Desktop32px
Large40px
Paddingp-4 md:p-6 lg:p-8 xl:p-10
BreakpointPadding
Mobile16px
Tablet (md)24px
Desktop (lg)32px
Large (xl)40px

Reading

Y > X 縦余白が大きい。文書、ブログ向け

Mobile16/20
Tablet24/32
Desktop32/40
Large40/48
Padding Xpx-4 md:px-6 lg:px-8 xl:px-10
Padding Ypy-5 md:py-8 lg:py-10 xl:py-12
BreakpointXY
Mobile16px20px
Tablet (md)24px32px
Desktop (lg)32px40px
Large (xl)40px48px

Section

ページ内の大きなセクション間（レスポンシブ）

Mobile16px
Tablet24px
Desktop32px
Gap (セクション間)gap-4 md:gap-6 lg:gap-8
BreakpointGap
Mobile16px
Tablet (md)24px
Desktop (lg)32px

Element

セクション内の要素間

16px
16px
Gap (要素間)
16pxgap-4

Inline

横並びの要素間

Item
Item
Item
8px gap between items
Gap (インライン)
8pxgap-2

Interactive Demo

p-1

4px

p-2

8px

p-4

16px

p-6

24px

p-8

32px