厳選・オープン・無料

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

写真を駆動するパレット。中立的な背景、深いcharcoalのタイポグラフィ、控えめなグレーが、製品画像のためのクリーンで Elevated なキャンバスを生み出します。

03

タイポグラフィ

geometric-sans

すべてのナビゲーションとラベルは、トラッキング付きの大文字変換を使用 · 見出しは Tight なline-heightの重めのウェイトのジオメトリックsans-serifを使用 · 本文テキストは読みやすさのために、generousなletter-spacingを持つ通常ウェイトを使用 · テキストは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

モーダルオーバーレイ用のスムーズなopacityトランジション（0.3秒） · ローディング状態のStroke-dashoffsetアニメーション · すべてのインタラクティブ要素は、hover状態に0.2秒のトランジションを使用 · シネマティックな印象のため、画像トランジションに0.5〜1秒の持続時間を使用

インタラクティブ要素への微妙なopacityの低減または色の変化。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）を使用し、写真がすべてのカラーを提供します。タイポグラフィはジオメトリックsans-serif（Europa Groteskファミリー）のみで、大文字のナビゲーションラベル、48px/1.0のタイトな見出しスペース、0.4pxのletter-spacingを持つ14pxの本文テキストを用います。主要なUIパターンには、ピル-shaped ボタン（border-radius 9999px）、オーバーレイされた大きなテキストを持つフルブリード写真ヒーロー、インセットボーダーを持つクリーンな入力フィールドが含まれます。3つの重要な禁止事項：装飾的なスクリプトフォントを決して使用せず、グラデーションやテクスチャオーバーレイを写真に決して追加せず、UI要素に明るいネオンや彩度の高いアクセントカラーを決して使用しないこと。

このセンスを AI エージェントへ

この設計の機械可読な仕様——カラー・タイポ・モーションまで——をそのまま AI エージェントに渡せます。

OpenDesign スキル ↗ · このパック（エージェント用） ↗

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