厳選・オープン・無料

Wearechaiboy

現代的なティー・ブランドのための、ダークでプレミアムなエディトリアル・Eコマース体験。

01

デザイン DNA

モダンなティー・ブランドのためのハイファッション・マガジン・エディトリアル。

02

カラー

ブラックのキャンバスとホワイトのタイポグラフィによる、極端なハイコントラスト・モノクローム。ビジュアルの重みは写真に依存します。

03

タイポグラフィ

grotesque-sans

• display54px · 400
• body14px · 400
• small11px · 400

すべてのナビゲーションおよびユーティリティ・テキストに大文字を使用します。 · 大きなディスプレイ・サイズには、タイトなトラッキング（-1px）を適用します。

04

余白

タイトで意図的にデザイン。エディトリアル写真を強調するため、豊かなネガティブスペースを使用します。

05

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

1px solid #AFAFAF または 1px solid rgba(255,255,255,0.2)

06

レイアウト

厳格なヘッダー/フッター境界とスクロール・ティッカーテープを持つ、フルブリードの縦長キャンバス。

07

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

モーダル・オーバーレイおよびUI状態変化のための滑らかなopacityトランジション。 · プロモーション・メッセージのためのリニア・スクロール・ティッカーテープ。

インタラクティブ性を示す微細なカラー変化またはopacity変化。 · opacityまたはbackground-colorトランジションによる、即座のビジュアルフィードバック。

08

コンポーネント

• button ゴーストまたはアウトライン、微細なborder-radius。大文字テキストと透明なbackgroundを使用。
• card エッジ・トゥ・エッジの写真に依存する、最小限のUIを持つイメージ・フォーカス。
• chip 角丸の小さなアウトライン・バッジ。カテゴリ用。
• input モーダル・オーバーレイ内の、シンプルな下部ボーダーのみのテキストフィールド。
• hero 主要なビジュアル要素として機能する、フルスクリーンの没入型写真。

09

文体と禁止事項

• トーン 洗練された、プレミアムで、率直。
• 見出し 注目を集める、短くインパクトのある大文字のステートメント。
• CTA 控えめながら明確。ゴーストボタンまたはシンプルなアンダーライン・テキストをよく使用。

• 複数のブランドカラーを使用しない — スクリーンショットは黒、白、グレーの厳格なモノクローム・パレットを示しています。
• 装飾的またはスクリプト・フォントを使用しない — スクリーンショットはクリーンなグロテスク・サンセリフのみを使用しています。
• 重いドロップシャドウを使用しない — スクリーンショットは、エレベーションのないフラットなエッジ・トゥ・エッジの写真を示しています。
• 複雑な、複数色のグラデーションを使用しない — スクリーンショットはソリッドなブラック背景を示しています。
• ナビゲーションに小文字テキストを使用しない — スクリーンショットはヘッダーおよびフッターのすべてのテキストが大文字であることを示しています。
• 角丸のカード・ボーダーを使用しない — スクリーンショットはシャープで長方形のコンテナまたはフルブリードのイメージを示しています。
• 避ける: 複数のカラーの使用を避け、パレットを厳格なモノクロームに保ちます。
• 避ける: 装飾的またはスクリプト・フォントを使用せず、クリーンでモダンな美学を維持します。
• 避ける: 重いドロップシャドウまたは不必要なグラデーションを避けます。
• 避ける: 雑然としたレイアウトを避け、大きなイメージとネガティブスペースを優先します。
• 避ける: 遊び心のある、またはカジュアルなトーンのボイスを避けます。

10

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

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

11

System Prompt

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