厳選・オープン・無料

Drink818

エレガントで落ち着いた大地色のパレットと、セリフ体とモノスペック体のタイポグラフィの融合を特徴とするプレミアムテキーラブランドのサイト。

01

デザイン DNA

洗練された大地色の美学を持つ、ハイエンドのブティックテキーラブランドのウェブサイト。

02

カラー

温かみのあるクリーム色の背景、ダークのチャコール色のテキスト、およびサブセクションに使用する落ち着いたオリーブグリーンを用いた、大地色で洗練されたパレット。

03

タイポグラフィ

transitional-serif · monospaced

• display34px · 700
• body20px · 400

ナビゲーションおよび法的テキストには、全角大文字スタイルを採用。 · 洗練された外観のために、インターフェース全体に広い字送りを適用。 · 表現力のあるテキストにはトランジショナルセリフ体を、ほぼすべてのUI要素にはmonospaced体を使用。

04

余白

一貫した4pxのベースグリッドを、パディング、マージン、コンポーネント間隔に使用。

05

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

1px solid rgba(14, 17, 17, 0.12) をインプットフィールドおよび細かい区切り線に使用。

0px 9999px 0px 9999px rgba(0, 0, 0, 0.4) をモーダルオーバーレイに · 0px 0px 10px 3px rgba(122, 122, 122, 0.2) を軽い浮き上がり効果に

06

レイアウト

十分な縦方向の余白と大きなタイポグラフィを備えた、中央揃えの単一カラムレイアウト。

07

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

background-sizeおよびopacityの変更に対する滑らかなトランジション。 · カスタムcubic-bezierイージングを使用した、ページ要素のTransformベースのアニメーション。

インタラクティブ要素に対する、控えめなbackground-sizeまたはopacityのトランジション。 · 即座のフィードバックを伴う標準的なアクティブ状態。

08

コンポーネント

• button クリームまたはグリーンの塗りつぶし背景に、monospaced体の大文字テキスト、小さなborder-radius。
• card 目立ってはいませんが、十分なパディングを持つセクションブロックによって暗示されています。
• chip 存在しません。
• input monospaced体の大文字テキストに、薄いボーダーと控えめなborder-radius。
• hero 大きな画像背景または単色ブロックに、巨大で太字のセリフ体タイポグラフィ。

09

文体と禁止事項

• トーン 洗練され、自信に満ち、法的に正確。
• 見出し 太字、全角大文字、表現力豊かなセリフ体タイポグラフィ。
• CTA クリーンなmonospaced体を使用した、直接的で機能的な大文字。

• 明るく高彩度のアクセントカラーを使用しない — スクリーンショットは、オリーブグリーンとクリーム色を用いた落ち着いた大地色のパレットを示しています。
• UIに丸みのある幾何学的なサンセリフフォントを使用しない — スクリーンショットはトランジショナルセリフ体とmonospaced体を排他的に使用しています。
• 小さく窮屈な間隔を使用しない — スクリーンショットは、要素間に十分なパディングと大きな余白を示しています。
• コンテンツに複雑な複数カラムレイアウトを使用しない — スクリーンショットはクリーンな中央揃えの単一カラムレイアウトを示しています。
• プライマリナビゲーションまたはCTAに小文字テキストを使用しない — スクリーンショットは一貫して大文字を使用しています。
• プライマリUI要素の深度にドロップシャドウを使用しない — スクリーンショットはフラットカラーのみを使用し、オーバーレイに対してのみ非常に控えめなシャドウを使用しています。
• 避ける: 過度に遊び心のあるまたはカジュアルな言葉遣いは避ける。
• 避ける: 明るい高彩度のネオンカラーは避ける。
• 避ける: 十分な余白のない密集したテキストブロックは避ける。

10

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

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

11

System Prompt

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