厳選・オープン・無料

Koox

大胆なタイポグラフィと抑制された自然のパレットを用いた、クリーンで製品ファーストのオーガニックジュースeコマース。

01

デザイン DNA

モダンな職人ジュースラボとクリーンなeコマースの融合

02

カラー

温かみのある大地色のアクセントカラーを用いた、高コントラストのミニマリズム。

03

タイポグラフィ

geometric-sans · grotesque-sans

• display56px · 900
• headline30px · 700
• body16px · 400

プライマリなCTAやセクション見出しには、太字の大文字を使用。 · ディスプレイテキストの行間は詰め、視覚的なインパクトを維持。

04

余白

4pxの基準を一貫させ、垂直間隔の変化によって明確な階層を確立。

05

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

構造的な明確化のため、シャープな1pxの实线ボーダー。

rgb(107, 18, 41) 5px 5px 0px 0px · rgba(0, 0, 0, 0.2) 0px 6px 27px 0px

06

レイアウト

中央揃えのコンテンツで、フルワイドのヒーローと、その下に3つの製品カードのグリッドを配置。

07

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

インタラクティブ要素に対する、スムーズなフェードおよびトランスフォームトランジション。

ボタンやリンクに対して、微細な不透明度またはトランスフォームの変化。 · 即座に応答し、軽微なシャドウ調整を適用。

08

コンポーネント

• button 大文字テキストを含む実線背景ブロックで、border-radiusなし、微細なオフセットシャドウ付き。
• card フルブリード画像に、中央揃えの太字白テキストオーバーレイを配置。
• chip 該当なし
• input 該当なし
• hero 全ビューポートの背景画像に、中央揃えの白テキストオーバーレイと目立つCTAボタンを配置。

09

文体と禁止事項

• トーン 自信に満ち、クリーンで率直。
• 見出し 太字、大文字、enefit主導。
• CTA 直接的、アクション指向、全角文字。

• スクリーンショットに示されているように、装飾的またはスクリプトのタイポグラフィを使用しない。太字でクリーンなジオメトリックサンセリフフォントが使用されている。
• スクリーンショットに示されているように、角丸や柔らかな形状を使用しない。シャープな1pxのボーダーでborder-radiusがない。
• スクリーンショットに示されているように、複雑なマルチカラーパレットを使用しない。白、黒、グレー、および一つの暖色アクセントで構成された抑制されたパレットが使用されている。
• スクリーンショットに示されているように、本文テキストを中央揃えにしない。ディスプレイテキストは中央揃えだが、製品レイアウトは構造化されている。
• スクリーンショットに示されているように、ダークモードやムーディな背景を使用しない。明るく白を基調とした背景に、高コントラストのインクが使用されている。
• スクリーンショットに示されているように、忙しいパターンやテクスチャを使用しない。クリーンなフォトグラフィとソリッドカラーブロックが使用されている。
• 避ける: 過度に装飾的またはスクリプトフォントを使用しない。
• 避ける: 複雑なグラデーションやシャドウを使用しない。
• 避ける: 競合要素の多い雑然としたレイアウトを使用しない。

10

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

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

11

System Prompt

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