厳選・オープン・無料

Athletic Brewing

プレミアムノンアルコールビールのための、大胆で自然を模したEコマース体験。

01

デザイン DNA

ビールを醸造する、プレミアムアウトドアライフスタイルブランド

02

カラー

大胆でエネルギッシュなコミュニケーションのための、深いネイビーと明るい黄のハイコントラストな組み合わせ。

03

タイポグラフィ

condensed-sans · geometric-sans

• display64px · 900
• display-sm40px · 900
• body16px · 400
• caption12px · 400

すべての見出しは大文字変換を使用 · 要素間の垂直間隔を広々と保つ · テキストと背景の間の高いコントラストを確保

04

余白

製品が息づけるための、広々とした空気感のある余白。

05

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

1px solid rgb(0, 58, 93)

rgba(0, 0, 0, 0.08) 0px 4px 16px 0px · rgba(0, 0, 0, 0.04) 0px 2px 10px 5px

06

レイアウト

目立つトップナビゲーションとフルワイドのプロモーションバナーを備えた、中心配置のコンテンツ。

07

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

ホバーステート用の迅速な100msトランジション · 可視性の変化に対する200msのease-in-out · 背景色の変化に対する300msトランジション

インタラクティブな要素上の、微妙な色の変化または影の増加。 · ボタンの微細なインタラクションによる即時フィードバック。

08

コンポーネント

• button ハイコントラストのプライマリボタン（黄背景、ネイビーテキスト）で、ピルシェイプ（カプセル型）の角丸。
• card 画像にフォーカスした製品カードで、明確なバッジ（例：「ベストセラー」）付き。
• chip 製品属性に使用する、小さなピルシェイプのタグ。
• input 標準のボーダースタイリングを用いた、クリーンでミニマルなフォームフィールド。
• hero 太いタイポグラフィと高品質の写真を用いた、大きな分割レイアウトまたはフルブリードのセクション。

09

文体と禁止事項

• トーン 自信に満ち、活動的で、ミッション重視。
• 見出し 大胆で、命令的で、しばしばすべて大文字。
• CTA 直接的で行動を促す（例：「GET RUN WILD」や「FIND IN STORE」）。

• 見出しに細い、またはライトなフォントウェイトを使用しない — スクリーンショットでは太い900ウェイトのタイポグラフィが使用されている
• くすんだ、パステルカラーパレットを使用しない — スクリーンショットでは高彩度のネイビー、シアン、黄が使用されている
• ボタンに角丸四角形または柔らかい角を使用しない — スクリーンショットでは極端なピルシェイプの角丸が使用されている
• 詰まったパディングの、小さく密集したレイアウトを使用しない — スクリーンショットでは広々とした余白と大きなタッチターゲットが使用されている
• 装飾的なセリフフォントを使用しない — スクリーンショットではクリーンでアスレティックなサンセリフが使用されている
• ダークモードをプライマリテーマとして使用しない — スクリーンショットでは明るい背景に暗いテキストが使用されている
• 避ける: 受動的または過度にフォーマルな言葉遣い
• 避ける: 製品と無関係な複雑な専門用語
• 避ける: 過度に散らかった、または忙しないビジュアルレイアウト

10

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

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

11

System Prompt

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