FOUNDATIONS · SPACING & RADIUS

留白是版面的呼吸

以 4 為基礎的間距尺度,圓角克制——紙張不會太圓。

SPACE

間距尺度

xxs4pxFLiPERSpace.xxs

xs8pxFLiPERSpace.xs

sm12pxFLiPERSpace.sm

md16pxFLiPERSpace.md

lg20pxFLiPERSpace.lg

xl24pxFLiPERSpace.xl

xxl32pxFLiPERSpace.xxl

WHY雜誌版面靠一致的節奏建立秩序;七個刻度就足以應付所有情境。

RADIUS

圓角

sm · 4px

FLiPERRadius.sm

md · 6px

FLiPERRadius.md

lg · 8px

FLiPERRadius.lg

xl · 12px

FLiPERRadius.xl

LAYOUT GRID

版面網格與閱讀寬度

範圍	欄位 / 寬度	間距
文件版面	max-width 896px；側欄 270px	桌面內距 40px；手機 20px
長文	約 672px；單欄閱讀	段落行高 1.9；段間 24–32px
範例與比較	窄螢幕 1 欄；640px 起 2 欄	欄距 24px
封面拆解	1024px 起主欄 + 260px 註解	欄距 40px
章節節奏	章節之間 64px	標題與內容 20px

網格服從內容。窄螢幕先改成單欄，再讓代幣名稱換行；表格與程式碼允許局部橫向捲動，不讓整頁超出視窗。

CSS

.doc { max-width: 896px; margin-inline: auto; padding-inline: 20px; }
.reading { max-width: 672px; }
.comparison { display: grid; gap: 24px; }
@media (min-width: 640px) {
  .doc { padding-inline: 40px; }
  .comparison { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

ELEVATION

柔和陰影，只為承托紙張

Level 0

結構與一般區塊

Level 1

封面卡與重複項目

Level 2

完整封面，少量使用

陰影是深度，不是裝飾。一般章節維持平面；封面卡使用低對比柔影，完整封面才使用較大的承托陰影。暗色模式以細線建立輪廓，不加橘色光暈；互動焦點與 elevation 是兩回事。

CSS

--elevation-card: 0 8px 24px -12px color-mix(in srgb, var(--ink) 16%, transparent);
--elevation-cover: 0 30px 60px -30px color-mix(in srgb, var(--ink) 35%, transparent);
/* dark: card 以 border 維持辨識；不可使用彩色 glow */

CSS

複製

CSS

--space-xxs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px;
--space-lg: 20px; --space-xl: 24px; --space-xxl: 32px;
--radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 12px;