厳選・オープン・無料

Spindrift

ラスティックな写真とクリーンでモダンなタイポグラフィを融合させた、プレミアムDTC飲料ブランド。

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

オリジナル: https://www.drinkspindrift.com

📦 パックの中身を見る →

01

デザイン DNA

オーガニックフレッシュナチュラルクリスププレミアム飲料

ラスティック・モダンな美学を持つ高級オーガニックジュースバ。

02

カラー

#6bbc37Accent
#ffffffInk
#363638Ink soft
#215212BG
#f5f5f5BG soft
#f9f6f0BG quiet
rgba(33, 82, 18, 1.0)Line

大地的・オーガニックなパレットで、深い緑とクリスプなホワイトが主導します。

03

タイポグラフィ

geometric-sans · humanist-sans

ディスプレイと本文のタイポグラフィには、ジオメトリック・サンスとヒューマニスト・サンスカテゴリを使用します。 · 見出しにはタイトなトラッキングを適用し、モダンでコンパクトな印象を実現します。 · 太字ウェイトは原則として使用せず、サイズの差で階層構造を表現します。

04

余白

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

クリーンな4pxベースグリッドを採用し、エディトリアルなフローのために垂直方向に十分な余白を設けます。

05

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

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

クリーンでミニマルで、主にプライマリグリーンカラーを使用して、微細なアクセントを加えます。

0px 1px 2px 0px rgba(0, 0, 0, 0.24) · 0px 0px 2px 2px rgb(204, 204, 204)

06

レイアウト

1280container
12columns
24pxgutter
768 / 1024breakpoints

画像とホワイトスペースを優先した、センタリングされた単一カラムに焦点を当てたレイアウトです。

07

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

300msmicro
400mssmall
600msmedium
cubic-bezier(0.77, 0, 0.175, 1)easing

UI要素の状態変化に対するスムーズなトランジション。 · ページセクションに対する微細な出現アニメーション。

インタラクティブ要素上の微細なカラーシフトや不透明度の変化。 · 状態変化による即時的なビジュアルフィードバック。

08

コンポーネント

09

文体と禁止事項

10

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

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

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

11

System Prompt

Spindriftは、自然でオーガニックな美学を持つプレミアムDTC飲料ブランドです。ビジュアル言語は、深い緑（#215212）のパレットを主軸とし、暖かみのあるオフホワイト（#f9f6f0）と鮮やかなライムのアクセント（#6bbc37）で構成されています。タイポグラフィはクリーンでモダンで、ジオメトリック・サンスとヒューマニスト・サンスカテゴリを使用し、タイトなトラッキングを適用します。重要な要素には、フルブリードの写真背景、ピルシェイプのボタン、そして余裕のあるホワイトスペースが含まれます。重要なルール：冷たくクリニカルなホワイトは使用しないこと；重く複雑なドロップシャドウは避けること；プライマリアクションには決してシャープな直角ボタンを使用しないこと。

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

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

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

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