Design System

Style Guide

這個作品集本身就是一套小型設計系統：所有頁面只用這裡的 token 與元件組成。

Color

  • primary--color-primary
  • primary-soft--color-primary-soft
  • accent--color-accent
  • warm--color-warm
  • success--color-success
  • text--color-text
  • text-muted--color-text-muted
  • text-subtle--color-text-subtle
  • bg--color-bg
  • surface--color-surface
  • gradient-brand--gradient-brand

Typography · LINE Seed

--text-display

Display 標題

--text-4xl

Heading 4XL 區塊標題

--text-3xl

Heading 3XL 章節

--text-2xl

Heading 2XL 卡片標題

--text-xl

Text XL 導言文字

--text-lg

Text LG 內文強調

--text-base

Text Base 內文：從品牌到介面，讓每個接觸點都說同一種語言。

--text-sm

Text SM 輔助說明

--text-xs

TEXT XS LABEL

Spacing · Radius · Elevation

--space-1
--space-2
--space-3
--space-4
--space-6
--space-8
--space-12
--space-16
--space-24
--radius-sm
--radius-md
--radius-lg
--radius-xl
--radius-pill
--shadow-sm
--shadow-md
--shadow-lg
--glass-shadow

Motion

滑過下方軌道看各時長與曲線。系統設定「減少動態」時全部歸零。

--dur-fast · --ease-out
--dur-base · --ease-spring
--dur-slow · --ease-out

Liquid Glass

.glass

模糊＋飽和＋漸層高光邊＋柔影。

.glass--strong

文字密集時提高不透明度。

interactive

hover 浮起、游標高光、微傾斜、按下回彈。

Button

Tag · Icon

NeutralPrimaryNo hash

Project Card

Live project 封面

Live project

可點擊：封面放大、箭頭推移、卡片浮起。

UIBrand
Coming soon

Coming soon

內容整理中：不可點、顯示佔位圖與徽章。

Systems

Case Study Blocks

Role
UI / UX Designer
Duration
3 Months

  1. Point with icon

    內文可用 這類記號插入行內圖示。

  2. Point

    每個說明條列共用同一種編號樣式。

  • IllustratorExcellent
  • PhotoshopExcellent
  • FigmaExcellent