返回總覽
間距
間距量表、圓角與最大寬度 Token，確保佈局的一致性與節奏感。
間距量表
基於 4px 基準的間距量表，用於 margin、padding 與 gap。
| Token | 值 | 預覽 |
|---|---|---|
| spacing-0 | 0 | |
| spacing-1 | 0.25rem | |
| spacing-2 | 0.5rem | |
| spacing-3 | 0.75rem | |
| spacing-4 | 1rem | |
| spacing-5 | 1.25rem | |
| spacing-6 | 1.5rem | |
| spacing-8 | 2rem | |
| spacing-10 | 2.5rem | |
| spacing-12 | 3rem | |
| spacing-16 | 4rem | |
| spacing-20 | 5rem | |
| spacing-24 | 6rem | |
| spacing-px | 1px | |
| spacing-0.5 | 0.125rem | |
| spacing-1.5 | 0.375rem | |
| spacing-2.5 | 0.625rem |
圓角
統一的圓角值，從無圓角到全圓。
| Token | 值 | 預覽 |
|---|---|---|
| radius-none | 0 | |
| radius-sm | 8px | |
| radius-md | 12px | |
| radius-lg | 16px | |
| radius-xl | 20px | |
| radius-full | 9999px |
最大寬度
容器與內容區域的最大寬度限制。
| Token | 值 | 預覽 |
|---|---|---|
| max-w-container | 1024px | 1024px |
| max-w-content | 768px | 768px |
| max-w-wide | 1200px | 1200px |
使用方式
Tailwind CSS
<!-- 間距 -->
<div className="p-4 mb-8 gap-6">間距示範</div>
<!-- 圓角 -->
<div className="rounded-sm">8px 圓角</div>
<div className="rounded-md">12px 圓角</div>
<div className="rounded-lg">16px 圓角</div>
<!-- 最大寬度 -->
<div className="max-w-[1024px]">容器寬度</div>CSS Custom Properties
border-radius: var(--radius-md);
padding: var(--spacing-4);