厳選・オープン・無料

Redbrick Coffee

エレガントなセリフタイポグラフィと大胆な赤のブランディングを、クリーンなホワイトキャンバスの上で融合させた、洗練されたコーヒーブランド。

01

デザイン DNA

洗練されたエディトリアル美学を持つプレミアムコーヒーのロースター。

02

カラー

支配的なブランドレッドを、クリーンなホワイトおよびライトグレーの基盤に対して配した、高コントラストのペアリング。

03

タイポグラフィ

didone-serif · geometric-sans

• display105px · 400
• heading30px · 400
• body20px · 400

ディスプレイ用タイポグラフィには、エレガントで伝統的なインパクトを与える高コントラストのDidoneセリフを採用。 · 本文タイポグラフィには、モダンな可読性を実現するクリーンな幾何学サンセリフを採用。 · ナビゲーションリンクと本文は、洗練された印象のために標準ウェイトで設定。

04

余白

4pxグリッドをベースとし、空気感のあるプレミアムな印象のために手寬いpaddingを採用。

05

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

セクションを定義するために、ブランドレッドまたはライトグレーの細い1pxボーダー。

06

レイアウト

手寬いホワイトスペースと交互のフルワイズセクションを持つ、クリーンでグリッドベースのレイアウト。

07

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

インタラクティブ要素の滑らかな色と背景のトランジション。 · 動的コンテンツの段階的なフェードイン。

リンクの微妙な色やテキスト装飾の変化。 · 標準的なリンクナビゲーションと製品選択。

08

コンポーネント

• button 赤のテキストベースのナビゲーションリンク。最小限の、またはソリッドボタンスタイルは見られません。
• card ソフトなグレーの背景と、画像に対する目立つ角丸を持つ製品カード。
• hero 片側に巨大なセリフタイポグラフィ、もう片側に丸みのある画像を持つ、大胆な分割画面ヒーロー。

09

文体と禁止事項

• トーン 自信に満ち、親しみやすく、やや手工芸的。
• 見出し ブランドのプレミアムなポジショニングを定義する、大きくエレガントなセリフの声明。
• CTA デザインを圧迫せずにユーザーを導く、シンプルで直接的なテキストリンク。

• ブランド名を小文字にしない — スクリーンショットでは「REDBRICK」とすべて大文字。
• ネオンや高彩度のアクセントカラーを使用しない — スクリーンショットでは制御された伝統的なレッド。
• 過度に複雑な幾何学パターンを使用しない — スクリーンショットではクリーンなホワイトスペースとシンプルなソリッド背景。
• 要素に重いボックスシャドウを使用しない — スクリーンショットではフラットな、ボーダーや背景で定義されたサーフェス。
• カジュアルで丸みのあるサンセリフディスプレイフォントを使用しない — スクリーンショットでは見出しにエレガントなDidoneセリフ。
• 多くの小さなアイコンでインターフェースを雑踏にしない — スクリーンショットではミニマルでテキストに焦点を当てたナビゲーション。
• 避ける: 重いドロップシャドウ
• 避ける: 明るくぶつかり合うネオンカラー
• 避ける: 過度に詰め込まれたレイアウト
• 避ける: 攻撃的な大文字テキスト

10

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

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

11

System Prompt

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