精选 · 开放 · 免费

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

模态覆盖层的平滑不透明度过渡（0.3s） · 加载状态的 Stroke-dashoffset 动画 · 所有交互元素在 hover 状态使用 0.2s 过渡 · 图片过渡时长 0.5-1 秒以营造电影感

交互元素具有微妙的不透明度降低或颜色偏移，保持在 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