精選 · 開放 · 免費

Swoosh Nike

一個極簡、以圖像為首的平台，用於探索與選購頂級球鞋。

01

設計氣質 DNA

為獨家球鞋發售策展的藝廊

02

色彩

以高對度的黑色搭配米白色，品牌紅僅在影像中點綴使用

03

字型

grotesque-sans

• display53px · 500
• headline20px · 500
• body16px · 500
• caption14px · 400
• label12px · 500

使用 Helvetica Now Text 或同等的 grotesque-sans 字體 · 主要文字維持中等字重（500） · 展示尺寸的字間距保持緊湊

04

間距

以 4px 為基準的一致性間距系統，搭配標準增量

05

表面 (圓角 / 陰影 / 邊線)

1px 細邊框，使用 rgba(17,17,17,0.1)

0px 4px 8px 0px rgba(17,17,17,0.06) · 0px 0px 24px 4px rgba(17,17,17,0.03) · 0px -1px 0px 0px rgb(229,229,229) inset

06

版面

四欄網格圖像卡片，文字置於下方

07

動效與互動

內容載入時的流暢淡入效果 · 細膩的背景過渡

細微的背景色變化或縮放效果 · 降低透明度提供即時的視覺回饋

08

組件

• button 藥丸形按鈕，黑色背景搭配白色文字
• card 以圖像為首的卡片，採用圓角設計，產品資訊置於下方
• chip 用於分類的簡潔文字標籤
• input 底部帶有邊框的簡潔文字輸入框
• hero 全寬影像搭配疊加文字或極簡背景

09

文案語氣與禁用清單

• 語氣 直接、資訊性強、聚焦於產品
• 標題風格 粗體且簡潔的產品名稱
• 按鈕文案 以行動為導向的按鈕文字，例如「進一步了解」

• 不使用漸層背景——截圖顯示為實色的米白色（#F5F5F5）或白色（#FFFFFF）背景
• 不使用裝飾性襯線字體——截圖顯示所有文字均採用 Helvetica Now（grotesque-sans）
• 不使用厚重的陰影——截圖顯示非常細微的陰影（透明度 0.06）或無陰影
• 產品文字不置中對齊——截圖顯示產品名稱與描述採用左對齊
• 不使用複雜的卡片佈局——截圖顯示為文字置於下方的簡潔圖像卡片
• 不使用多種強調色——截圖顯示為中性色調，品牌紅僅出現在產品影像中
• 避免: 過度熱情或促銷式的語言
• 避免: 複雜的技術性描述
• 避免: 非產品名稱一部分的非正式用語

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

en · zh-CN · zh-TW · ja · ko