厳選・オープン・無料

Wovenwhisky

職人的伝統とクリーンでモダンなキュレーションを融合させた、上品でクラフト志向のウイスキー体験ブランド。

ProductPremiumCurationPhotographicCalm
Wovenwhisky のスクリーンショット
↓ デザインシステムをダウンロード (18 MB)OpenDesign で開く

オリジナル: https://wovenwhisky.com

📦 パックの中身を見る →

01

デザイン DNA

職人的クラフト特注ウイスキー体験

現代の薬局と高級ブティックスタジオの融合。

02

カラー

#232323Ink
#4A4A4AInk soft
#FFFFFFBG
#ECEDE5BG soft
rgba(35,35,35,1)Line

ダークチャコールを基盤とする温みのあるニュートラル。ビジュアルな温かみは高品質な写真に依存。

03

タイポグラフィ

transitional-serif · geometric-sans · monospaced

セクション見出しとUIラベルはすべて大文字にし、字間を十分に空ける。 · サイズとウェイトで严格的なタイポグラフィ階層を維持し、カラーは使用しない。 · 商品価格や技術詳細には、クリーンなモノスペースフォントを使用する。

04

余白

4px
8px
16px
24px
32px
48px
64px
96px

8px ベースライングリッド

05

サーフェス (角丸 / 影 / 罫線)

sm · 0px
md · 0px
lg · 0px
pill · 999px

1px〜2pxの実線ボーダー。主にプライマリインクカラーを使用し、鋭く定義の効いたエッジを実現。

06

レイアウト

1280container
12columns
24pxgutter
768 / 1024breakpoints

写真をフィーチャーしたヒーローに続き、構造化されたグリッドセクションを配置した、クリーンで中央揃えのレイアウト。

07

モーションとインタラクション

150msmicro
250mssmall
500msmedium
cubic-bezier(0.25, 0.0, 0.25, 1.0)easing

モーダルやドロップダウンメニューの微細なフェードインとトランスフォーム遷移。 · インタラクティブ要素のホバーステートにおける滑らかな不透明度遷移。

インタラクティブ要素に対する微細な不透明度の変化やカラー反転。 · 微細なスケーリングやカラー変化による即時フィードバック。

08

コンポーネント

09

文体と禁止事項

10

パック内の実スクリーンショット

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

実ページから取得 · 実 computed styles

11

System Prompt

これは、モダンミニマリズムとクラフトの伝統を融合させた、上品で職人気質のウイスキーブランドサイトです。デザインは高品質な写真と、温みのあるホワイト（#FFFFFF、#ECEDE5）とダークチャコール（#232323）からなる抑制の効いたカラーパレットに依存します。タイポグラフィは、ディスプレイ用にトランジショナルセリフを、本文やUI要素にジオメトリックサンセリフまたはモノスペースフォントを組み合わせ、大文字で広い字間を設けて使用することが多いです。重要な制約：角丸なしの鋭い長方形幾何学模様を維持し、雑然としたレイアウトは避け十分な余白を確保し、上品で落ち着いた雰囲気を損なうような明るく彩度の高いカラーは決して使用しない。

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

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

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

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