厳選・オープン・無料
Regrocery
表現豊かなタイポグラフィと温かみのある写真を用い、サステナビリティを無理なく、かつ格調高く感じさせるプレミアム・ゼロウェイスト食料品プラットフォーム。
ConsumerCleanPremiumPhotographicRefined
01
デザイン DNA
ゼロウェイストサステナビリティパッケージフリープレミアムクリーン
環境意識の高い消費者向けのハイエンドエディトリアルマガジン
02
カラー
#F74C25Accent
#211D1CInk
#F7F6F2BG
#EFEDF7BG soft
rgba(247, 76, 37, 1.0)Line
温かみのあるニュートラルカラーがクリーンでオーガニックな基盤を提供し、一方の高エネルギーなオレンジレッドがアクションを促進します。
03
タイポグラフィ
didone-serif · humanist-sans
- display
100px · 400 - heading
30px · 400 - body
20px · 400
ディスプレイおよび見出しレベルでは文字間隔をタイトにし、洗練されたモダンな印象を実現 · セリフフォントは、大きく表現力のある見出しにのみ使用 · サンセリフフォントは、すべての機能的およびナビゲーションテキストに使用
04
余白
4px
8px
10px
16px
20px
30px
40px
95px
写真とタイポグラフィが息づけるように、余白をたっぷりと配置
05
サーフェス (角丸 / 影 / 罫線)
sm · 4px
md · 8px
lg · 999px
pill · 999px
プライマリアクセントカラーの細い1pxソリッドボーダー
0px 0px 20px 0px rgba(0,0,0,0.05)
06
レイアウト
1280container
12columns
20pxgutter
768 / 1024breakpoints
大きな写真ヒーローエリアと中央または左揃えのテキストブロックを組み合わせた非対称な分割構成
07
モーションとインタラクション
220msmicro
400mssmall
800msmedium
cubic-bezier(0.22, 1, 0.36, 1)easing
hover状態における滑らかでオーガニックなトランジション · カスタムイージングを使用した背景色の遷移
インタラクティブ要素における微細な色の変化と背景の遷移 · すべてのクリック可能な項目にポインターカーソルを設定し、即座に視覚的な応答を提供
08
コンポーネント
- button 細いボーダーとハイコントラストなアクセントカラーを持つピルシェイプのボタン
- card オーガニックな形状でグリッドを崩す角丸の画像コンテナ
- hero フルブリードの没入感のある写真に、巨大なディスプレイタイポグラフィを重ねたもの
09
文体と禁止事項
- トーン 自信に満ち、洗練され、サステナビリティに焦点を当てたもの
- 見出し 表現豊かなセリフタイポグラフィを使用した、短くインパクトのあるフレーズ
- CTA 直接的でアクション重視で、しばしばピルシェイプのアウトラインボタンを使用
- 雑然としたレイアウトを使用しない — スクリーンショットではたっぷりの余白と大きな画像が示されています
- 見出しに純粋な幾何学的なサンセリフを使用しない — スクリーンショットでは表現力のあるディドン・セリフが示されています
- 生硬なプライマリカラーを使用しない — スクリーンショットでは特定の温かみのあるオレンジレッドアクセントが示されています
- ボタンに角を四角くしない — スクリーンショットではピルシェイプの角丸ボーダーが示されています
- ナビゲーションを隠さない — スクリーンショットではクリーンで永続的なトップバーが示されています
- 平坦で無機質な背景を使用しない — スクリーンショットでは温かみのあるオフホワイトと微細なグラデーションが示されています
- 避ける: 攻撃的なマーケティング用語
- 避ける: 雑然としたレイアウト
- 避ける: 汎用的な企業言語
- 避ける: 過度に複雑なインターフェース
10
パック内の実スクリーンショット
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏実ページから取得 · 実 computed styles
11
System Prompt
Regroceryは、洗練されたエディトリアル美学を持つプレミアム・ゼロウェイスト食料品プラットフォームです。温かみのあるオフホワイト(#F7F6F2)と薄いグレー(#EFEDF7)の背景に、大胆なオレンジレッド(#F74C25)のアクセントと深いブラウンブラック(#211D1C)のインクを対比させています。タイポグラフィは、クリーンなナビゲーションと本文テキストにサンセリフを、インパクトのある見出しに大きく表現力のあるディドン・セリフを組み合わせています。レイアウトは、たっぷりの余白とフルブリードの写真を重視しています。重要な制約事項:雑然としたレイアウトは決して使用しない;ディスプレイ見出しにサンセリフを使用しない;特徴的な温かみのあるオレンジレッドアクセントを汎用カラーで置き換えない;インタラクティブボタンに角を四角くしない;冷たく無機質なホワイト背景を避ける;汎用的な企業用のタイポグラフィや言語を使用しない。
en · zh-CN · zh-TW · ja · ko