厳選・オープン・無料

Regrocery

表現豊かなタイポグラフィと温かみのある写真を用い、サステナビリティを無理なく、かつ格調高く感じさせるプレミアム・ゼロウェイスト食料品プラットフォーム。

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

オリジナル: https://regrocery.co

📦 パックの中身を見る →

01

デザイン DNA

ゼロウェイストサステナビリティパッケージフリープレミアムクリーン

環境意識の高い消費者向けのハイエンドエディトリアルマガジン

02

カラー

#F74C25Accent
#211D1CInk
#F7F6F2BG
#EFEDF7BG soft
rgba(247, 76, 37, 1.0)Line

温かみのあるニュートラルカラーがクリーンでオーガニックな基盤を提供し、一方の高エネルギーなオレンジレッドがアクションを促進します。

03

タイポグラフィ

didone-serif · humanist-sans

ディスプレイおよび見出しレベルでは文字間隔をタイトにし、洗練されたモダンな印象を実現 · セリフフォントは、大きく表現力のある見出しにのみ使用 · サンセリフフォントは、すべての機能的およびナビゲーションテキストに使用

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

コンポーネント

09

文体と禁止事項

10

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

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

11

System Prompt

Regroceryは、洗練されたエディトリアル美学を持つプレミアム・ゼロウェイスト食料品プラットフォームです。温かみのあるオフホワイト(#F7F6F2)と薄いグレー(#EFEDF7)の背景に、大胆なオレンジレッド(#F74C25)のアクセントと深いブラウンブラック(#211D1C)のインクを対比させています。タイポグラフィは、クリーンなナビゲーションと本文テキストにサンセリフを、インパクトのある見出しに大きく表現力のあるディドン・セリフを組み合わせています。レイアウトは、たっぷりの余白とフルブリードの写真を重視しています。重要な制約事項:雑然としたレイアウトは決して使用しない;ディスプレイ見出しにサンセリフを使用しない;特徴的な温かみのあるオレンジレッドアクセントを汎用カラーで置き換えない;インタラクティブボタンに角を四角くしない;冷たく無機質なホワイト背景を避ける;汎用的な企業用のタイポグラフィや言語を使用しない。

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

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

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

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