FLiPERDESIGN SYSTEM

FOUNDATIONS · MOTIFS

四個讓畫面成為一期刊物的記號

01 · HAIRLINE

細線 Hairline Rule

LIVE EXAMPLE

段落一

段落二

CSS
border-top: 1px solid var(--border);

WHY1px 的 border 色細線是結構的分隔,不搶戲,只劃界。

02 · DIAMOND

菱形裝飾 ◆

LIVE EXAMPLE
HTML
<div class="ornament"><span></span>◆<span></span></div>

WHY來自雜誌封面:兩條細線夾住一顆小菱形,用來收尾或分節。

03 · STRONG RULE

粗線 Strong Rule

LIVE EXAMPLE

SECTION

CSS
border-top: 2px solid rgba(0,0,0,.85); /* dark: rgba(255,255,255,.80) */

WHY黑 .85 / 白 .80 的 2px 粗線,是重大的章節斷點。一頁最多一兩條。

04 · MASTHEAD

刊頭 Masthead

LIVE EXAMPLE
FLiPER
KEEP EXPLORING · ISSUE 2026

WHY置中的 FLiPER 字標 + 細線 + 字距拉開的 kicker,讓任何畫面都像一期刊物。

COMPOSITION

何時停頓，何時劃界

Hairline 分隔同層資訊，Strong Rule 宣告大章節，◆ 給閱讀一個停頓；Masthead 只在一期內容的入口使用。它們不是每個容器都要加上的裝飾。

DO

讓記號服從章節結構；純裝飾 ◆ 使用 aria-hidden。

DON'T

同一斷點疊上細線、粗線與多顆菱形，或把細線當控制邊框。

HTML
<hr /> <!-- 語意分節 -->
<div aria-hidden="true">◆</div> <!-- 純裝飾 -->
<!-- 互動控制另有焦點樣式；記號本身沒有 hover / disabled -->