厳選・オープン・無料

Magic Spoon

ディープパープルの色調と力強いタイポグラフィを用い、ノスタルジーと現代の健康を結びつける、大胆で遊び心のあるDTCセレアルブランド。

01

デザイン DNA

健康意識の高い大人たちのために再imaginedされた、活気に満ちたノスタルジックなセレアルブランド。

02

カラー

クリーンな白地に高コントラストのパープルアイデンティティ。プロダクトフォトグラフィから得た鮮やかなパステルでアクセントを加える。

03

タイポグラフィ

geometric-sans · humanist-sans

• display48px · 900
• heading24px · 700
• body16px · 400
• caption13px · 400

タイポグラフィは主にディスプレイと本文にPoppinsを使用し、ブランドロゴ要素にはMabryを使用します。 · 見出しとCTA（行動喚起）では、テキストを大文字に大きく変換します。 · 本文は読みやすさを確保するため、鮮やかなパレットに対して中立的な400ウェイトを維持します。

04

余白

標準4pxベースグリッド。ナビゲーションではタイトな間隔を、ヒーローセクションではゆとりのあるパディングを使用しています。

05

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

1px solid rgba(63,7,145,0.2)

rgba(0, 0, 0, 0.1) 0px 20px 60px 0px · rgba(0, 0, 0, 0.08) 0px 15px 50px 0px · rgba(0, 0, 0, 0.25) 0px 5px 15px 0px

06

レイアウト

標準的なeコマース構造：アンナウンスメントバー、固定ナビ、フルワイドのスプリットレイアウトを備えたヒーロー、その後にプロダクトグリッド。

07

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

クッキーコンセントなどのモーダルウィンドウへのスムーズなフェードインとスライドアップ。 · ヒーローセクションのプロダクトイメージに対する、フローティングするパララックスのような動き。 · ボタンのホバーステイトにおける、即座の背景とカラートランジション。

ボタンのカラーセンシバージョンや微妙な透明度の変化。高速な0.15秒の背景トランジションを伴います。 · 「BUILD YOUR OWN BUNDLE」のようなインタラクティブ要素の視覚的な押し込みやスケール変換。

08

コンポーネント

• button ソリッドなパープル塗りまたはパープルボーダー付き透過背景のピル型ボタン。大文字の太字タイポグラフィを使用します。
• card 柔らかな角丸（28px）と微妙なドロップシャドウを備えたプロダクトカード。しばしばフローティングするプロダクトイメージを含みます。
• chip 「BESTSELLER」のようなラベルに使用される、ソリッドな背景塗りの小さな丸いピル型バッジ。
• input クリーンな長方形の入力フィールド。微妙なボーダーを備え、フォーカス時にハイライト状態に変化します。
• hero 片側に巨大なタイポグラフィの見出し、もう片側に動的に配置されたフローティングプロダクトイメージを備えた、フルワイドのスプリットレイアウト。

09

文体と禁止事項

• トーン 自信に満ち、遊び心があり、健康意識が高い。
• 見出し 大胆で大文字、パワフルな言葉遣い。しばしば巨大なフォントサイズを使用し、ビジュアルヒエラルキーを支配します。
• CTA 行動を促す命令的な口調。オールキャップスのピル型ボタンで提示されます。

• 繊細なセリフフォントを使用しない — スクリーンショットには大胆な幾何学系およびヒューマニストサンセリフが示されています。
• レイアウトを厳格なグリッドに平坦化しない — スクリーンショットにはオーバーラップするフローティングプロダクトイメージが示されています。
• 単色または抑制的なカラースキームを使用しない — スクリーンショットには鮮やかなパープルとカラフルなプロダクト写真が示されています。
• 見出しに小文字やセンテンスケースに頼らない — スクリーンショットにはアグレッシブな大文字テキスト変換が示されています。
• インタラクティブ要素に鋭く角張ったコーナーを使用しない — スクリーンショットにはゆとりのあるピル形状が示されています。
• プライマリナビゲーションで色を避ける — スクリーンショットには暗い背景に鮮やかなテキストとアクセントが示されています。
• 避ける: 小さく繊細なセリフ字体。
• 避ける: 抑制的、単色、または完全にグレースケールのカラーパレット。
• 避ける: オーバーラップやフローティング要素のない、厳格でグリッドを多用したレイアウト。
• 避ける: 控えめで地味なブランディング。

10

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

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

11

System Prompt

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