← Milifix 首頁

01

敘事與引用

長篇脈絡中的引用區塊:帶狀、內聯、拉页摘句。此區元件已用在作品集內容頁,樣式與站內一致。

設計不是裝飾,而是讓意圖在混亂裡仍能被人看見的方式。

Studio note

較短的內聯引用,適合夹在段落之間,不搶走主敘事的節奏。

Inline

把一句話放大,讓讀者在滑動時仍能記住核心訊息。

Editorial

02

標籤與層級

區塊小標、技術標籤列、段落分隔線。尚未接入主流程,僅於實驗室預覽。

Section kicker

Eyebrow 放在主標題上方,建立視覺層級與編輯節奏。

No line

  • Astro
  • TypeScript
  • Motion
  • Content
  • Static
  • i18n

03

資料與流程

數字亮點與步驟軌跡,適合案例頁、後台示意或 Onboarding 說明。

36 Pages built Static routes
3 Locales en / zh / ja
Iterations 設計即迭代
  1. Brief
  2. Structure
  3. Motion
  4. Ship
回到 Milifix

04

媒體框

漸層邊框容器,slot 可替換為圖片、影片或互動內容。

16:9 · placeholder
1:1

05

動態帶

橫向無縫捲動標籤;若系統開啟「減少動態效果」會改為靜態換行。

06

技術質感

毛玻璃卡片與終端機區塊,適合文件站、Changelog 或開發者向落地頁。

Frosted panel

內文放 slot:可放簡介、重點條列或 CTA。邊框為漸層描邊,內層含 backdrop-filter。

portfolio — zsh
$ astro build
✓ 37 static pages
✓ astro check passed

$ git status
On branch main — working tree clean