큐레이션 · 오픈 · 무료

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)

입력 필드 테두리를 위한 inset 0px 0px 0px 1px rgba(0,0,0,1) · 플로팅 요소를 위한 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.3초) · 로딩 상태를 위한 Stroke-dashoffset 애니메이션 · 모든 인터랙티브 요소는 hover 상태에서 0.2초 전환 사용 · 시네마틱 느낌을 위한 0.5~1초 이미지 전환

인터랙티브 요소에 부드러운 불투명도 감소 또는 색상 변화. 0.2초 전환 내에서 유지 · 배경 색상 변화 또는 보더 포인트를 통한 즉각적인 시각적 피드백

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의 타이트한 헤드라인 간격, 0.4px 자간의 14px 본문 텍스트를 사용합니다. 핵심 UI 패턴은 알약 형태 버튼(border-radius 9999px), 오버레이된 대형 텍스트의 풀블리드 이미지 히어로, inset 테두리의 깔끔한 입력 필드입니다. 세 가지 중요 지침: 장식적 스크립트 폰트를 절대 사용하지 않기, 이미지에 그라데이션 또는 텍스처 오버레이를 절대 추가하지 않기, UI 요소에 화려한 네온 또는 과포화된 포인트 컬러를 절대 사용하지 않기.

이 감각을 당신의 에이전트에

이 디자인의 기계 판독 가능한 사양——색상·타이포·모션까지——을 그대로 AI 에이전트에 전달하세요.

OpenDesign 스킬 ↗ · 이 팩 (에이전트용) ↗

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