厳選・オープン・無料

Poppi

大胆なカラーと遊び心のある幾何学模様を使う、エネルギッシュなポップアートインスパイアのDTC飲料ブランド。

01

デザイン DNA

活気のある、レトロにインスパイアされたジュースバーと現代のウェルネスブランドの融合。

02

カラー

活気のあるイエローベースにパンチの効いたホットピンクのアクセントを加えた、ハイコントラストで鮮やかなパレット。

03

タイポグラフィ

grotesque-sans

• display60px · 700
• h128px · 700
• body16px · 400

カジュアルで友好的なトーンのために、小文字のtextTransformを使用します。 · インパクトを与えるために、ディスプレイサイズにタイトな負の文字間隔を適用します。 · テキストと鮮やかな背景色の間に高いコントラストを維持します。

04

余白

柔軟なpadding（多くの場合16pxまたは32px）を採用し、主要セクション間にはより大きな垂直方向のギャップを設けます。

05

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

2px solid rgb(229, 231, 235) が入力フィールドやカードに頻繁に使用されています。

None: None · None: None · None: None

06

レイアウト

このモーダルビュー向けの、標準的な中央揃え単一カラムレイアウト。

07

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

background-color、color、box-shadowに対する滑らかなtransition。 · 要素の可視性に対する不透明度のフェード。

background-colorやbox-shadowの控えめな変化。しばしばtransitionを伴います。 · 色の変化やtransformを通じた、即座の視覚的フィードバック。

08

コンポーネント

• button （例：ピンクの）塗りつぶしの背景色と白いテキストを持つ、幅広のピル型ボタン。
• card コンポーネントは、しばしば鮮やかな塗りつぶしの背景色と丸みのある角を持ちます。
• chip 分析されたスクリーンショットでは目立っていません。
• input 塗りつぶしの背景色と控えめなボーダーを持つ、標準的な丸みのある入力フィールド。
• hero フルワイドの鮮やかなグラデーション背景に、大きなタイポグラフィと目立つ製品画像を配置。

09

文体と禁止事項

• トーン 遊び心があり、熱意に満ち、会話的です。
• 見出し 大胆で小文字、パンチが効いており、しばしばブランド独自のレトロフォントを使用します。
• CTA 直接的で友好的、行動を促すもの（例：「つながりを保つ」）。

• くすんだ、彩度の低い色を使用しないこと — スクリーンショットでは鮮やかなハイクロマのイエローとピンクが使用されています。
• 見出しに大文字テキストを使用しないこと — スクリーンショットではすべて小文字のタイポグラフィです。
• 主要コンポーネントにシャープで角張った角を使用しないこと — スクリーンショットでは大きなborder-radius（10pxから9999px）が使用されています。
• 控えめで拡散したシャドウを使用しないこと — スクリーンショットでは硬く実体のあるオフセットシャドウ（5px 5px 0px）が使用されています。
• ダークモードを使用しないこと — スクリーンショットでは明るく、ライトモードが主体のパレットです。
• この種のフォーカスされたモーダルに複雑なグリッドレイアウトを使用しないこと — スクリーンショットでは中央揃えの単一カラムレイアウトです。
• 避ける: フォーマルな言葉遣い
• 避ける: 複雑な専門用語
• 避ける: 厳しすぎるトーン

10

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

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

11

System Prompt

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