Design System Experiment — Same content, different design language

歐兜邁 / オートバイ / autobike — 台語的機車,日語的外來語,一台兩輪的東西跑出了三種語言。這個網站也是,什麼都裝一點,沒有固定車道。

小專案

做著玩的東西,有的有用,有的純粹好玩。

Japanese Quiz
日文單字與文法的互動測驗,用 Markdown 管理題庫。
learning
Threads to Markdown
把 Threads 貼文轉成 Markdown 格式保存。
coming soon
X Thread to Markdown
把 X (Twitter) thread 轉成 Markdown 格式保存。
coming soon

Coffee Chat

如果你想聊聊,不管是品味、AI、創業、或任何你正在想的事,歡迎約一杯咖啡。

Let me know how I can help you.

預約 Coffee Chat

Nike 設計特色

Nike 的設計語言以大膽、極端對比著稱。以下用這個頁面的內容,展示三個標誌性的設計模式。

Massive Uppercase Display

Nike 標誌性的巨大全大寫標題 — 96px、字重 500、行高 0.90。像體育場記分板一樣的壓迫感,字母幾乎要碰在一起。Oswald 模擬 Nike 的 Futura ND Condensed 效果。

JUST DO IT.
MOVE FORWARD.
Oswald 500 96px Line-height 0.90 Uppercase

Flat Elevation

Nike 的卡片完全不使用陰影 — 零 box-shadow。用背景色差異(#FAFAFA vs #FFFFFF)和邊界來建立層次,保持絕對扁平。

Nike Card
Zero Shadow
background: #FAFAFA / box-shadow: none
Typical Card
With Shadow
background: #FFF / box-shadow: 0 4px 12px

Pill vs Sharp

Nike 的設計刻意製造對比 — 按鈕是圓潤的膠囊形(30px radius),但產品圖片是完全銳利的直角(0px radius)。這不是偶然,而是精心設計的視覺張力。

Pill Buttons — 30px Radius
Shop Now Explore
Product Images — 0px Radius
Full Bleed
border-radius: 0 / sharp edges