Spacing & Layout
4px 基礎單位的間距系統，搭配 12 欄 responsive grid。品牌特質：精準、清晰、有意圖的留白。
Space Scale
基礎單位 4px，每一級都有明確用途。
--space-000px--space-10.25rem4px--space-20.5rem8px--space-30.75rem12px--space-41rem16px--space-61.5rem24px--space-82rem32px--space-123rem48px--space-164rem64px--space-246rem96px--space-328rem128px--space-4812rem192pxGrid System
12 欄 responsive grid。最大寬度 1440px，內容寬度 1200px。
| Token | Value |
|---|---|
--grid-max-width | 1440px |
--grid-content-width | 1200px |
--grid-columns | 12 |
--grid-gutter | 24px (desktop) |
--grid-gutter-mobile | 16px (mobile) |
--grid-margin | 64px (desktop) |
--grid-margin-tablet | 40px (tablet) |
--grid-margin-mobile | 24px (mobile) |
12-column grid preview
1
2
3
4
5
6
7
8
9
10
11
12
span 12
span 6
span 6
span 4
span 4
span 4
3
3
3
3
css
/* 12-column grid usage */
.grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: var(--grid-gutter); /* 24px desktop */
max-width: var(--grid-max-width); /* 1440px */
margin: 0 auto;
padding: 0 var(--grid-margin); /* 64px desktop */
}
/* Responsive */
@media (max-width: 768px) {
.grid {
gap: var(--grid-gutter-mobile); /* 16px */
padding: 0 var(--grid-margin-mobile); /* 24px */
}
}
/* Column spans */
.col-6 { grid-column: span 6; }
.col-4 { grid-column: span 4; }
.col-12 { grid-column: span 12; }Breakpoints
5 個響應式斷點。注意：CSS custom properties 不能用在 @media 中，這些值用作參考。
| Name | Value | Usage |
|---|---|---|
--bp-sm | 640px | Small phones landscape |
--bp-md | 768px | Tablets portrait |
--bp-lg | 1024px | Tablets landscape / small desktops |
--bp-xl | 1280px | Standard desktops |
--bp-2xl | 1440px | Large desktops (design max) |
Border Radius
從 Logo 的外圓內方特質萃取。數位端以矩形為主，圓形用於強調。
--radius-none0Default — rectangular--radius-sm4pxCards, inputs--radius-md8pxButtons--radius-lg16pxContainers--radius-full9999pxIcon A, tags