精選 · 開放 · 免費

Rains

結合北歐極簡設計與大膽編輯攝影的頂級雨具品牌。

fashionecommerce
Rains 網站截圖
↓ 下載設計系統包 (47 MB)在 OpenDesign 中開啟

原站: https://www.rains.com

📦 瀏覽包內檔案 →

01

設計氣質 DNA

頂級雨具斯堪地那維亞極簡主義戶外時尚編輯式電商

一家流線型的斯堪地那維亞時尚品牌，結合簡潔字體與電影感攝影，以及功能性雨具裝備。

02

色彩

#10100FInk
#2D2D2DInk soft
#E3E3E3BG
#FFFFFFBG soft
#F5F5F5BG quiet
#B3B3B2Muted
rgba(239, 239, 239, 1)Line

以攝影為導向的色盤，搭配中性背景、深炭灰色調文字，以及柔和灰色系，為產品影像創造簡潔、精緻的基底。

03

字型

geometric-sans

所有導覽與標籤採用大寫轉換並增加字間距 · 標題使用粗體幾何無襯線字體，行距緊湊 · 內文採用常規字重，字間距寬鬆以提升可讀性 · 文字鮮少超過 16px，維持編輯式網格美感

04

間距

4px
8px
12px
16px
20px
24px
32px
48px

以 8px 為基準單位，搭配 4px 增量，用於緊湊的 UI 元素與充裕留白，為編輯式攝影提供呼吸空間

05

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

sm · 4px
md · 8px
lg · 12px
pill · 9999px

1px solid rgb(239, 239, 239) 用於分隔線與輸入框狀態，1px solid rgb(45, 45, 45) 用於作用中元素

0px 0px 0px 1px rgba(0,0,0,1) inset 用於輸入框邊框 · 1px 2px 8px 0px rgba(0,0,0,0.35) 用於浮動元素

06

版面

1280container
12columns
24pxgutter
768 / 1024breakpoints

全版寬幅攝影主視覺搭配覆蓋式字型，下方過渡至網格式產品區塊

07

動效與互動

180msmicro
300mssmall
500msmedium
cubic-bezier(0.4, 0, 0.6, 1)easing

Modal 視窗覆蓋採用平滑 opacity 過渡 (0.3s) · 載入狀態使用 stroke-dashoffset 動畫 · 所有互動元素在 hover 狀態下使用 0.2s 過渡 · 圖像切換使用 0.5-1 秒時長以營造電影感

互動元素在 hover 時輕微降低 opacity 或變色，過渡時間維持在 0.2s · 透過背景顏色變化或邊框強調提供即時視覺回饋

08

組件

09

文案語氣與禁用清單

10

包內真實截圖

Rains — 桌面首屏（hero）
桌面首屏（hero）
Rains — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Rains — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Rains — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Rains — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Rains — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Rains — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Rains — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Rains — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Rains — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Rains — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Rains — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Rains — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Rains — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Rains — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Rains — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Rains — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Rains — 移动首屏
移动首屏

擷取自真實頁面 · 真 computed styles

11

System Prompt

Rains.com 是一家頂級的斯堪地那維亞雨具品牌，結合北歐極簡設計與大膽的編輯攝影。網站採用中性色盤（背景 #E3E3E3，主要墨色 #10100F，柔和墨色 #2D2D2D，啞光色 #B3B3B2），所有色彩來自攝影。字型完全採用幾何無襯線字體（Europa Grotesk 字族），導覽標籤大寫，標題緊湊排版為 48px/1.0，內文為 14px 搭配 0.4px 字間距。關鍵 UI 模式包括藥丸形按鈕（border-radius 9999px）、全版出血攝影主視覺搭配覆蓋式大字型，以及簡潔的輸入框搭配內嵌邊框。三大禁忌：絕不使用裝飾性手寫體字型，絕不在攝影上添加漸層或質感覆蓋，絕不在 UI 元素中使用鮮豔霓虹或飽和強調色。

把這份品味接進你的 Agent

把這套設計的機器可讀規格——色彩、字體、動效，整套 DNA——直接交給你的 AI Agent。

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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