厳選・オープン・無料
Touchycoffee
大胆なタイポグラフィ、鮮やかなカラー、個性的で挑発的な人格を持つ、エネルギッシュで表現的なD2Cコーヒーブランド。
ConsumerExpressiveBold TypographyPlayfulProduct
01
デザイン DNA
センセーショナルボルドー職人的遊び心のある率直
少し個性的な近所のカフェの、目立つ手書き看板。
02
カラー
#000000Ink
#9f4920BG
#fce3e3BG soft
#d0eaf4BG quiet
#788c8cMuted
rgba(0,0,0,1.0)Line
太い背景ブロックと鋭い黒のテキストに依存する、ハイコントラストで鮮やか、かつ少し混沌としたパレット。
03
タイポグラフィ
display-script · monospaced
- display
120px · 400 - heading
50px · 400 - body
20px · 400
インタラクティブ要素とセクションラベルには、一貫してtext-transform: uppercaseを適用します。 · モノスペーステキストには、文字格子が見えるように、タイトで严格的な字間を維持します。 · ディスプレイタイポグラフィには、密集したインパクトのあるテキストブロックを創り出すために、タイトな行間を採用します。
04
余白
4px
8px
16px
20px
24px
30px
40px
60px
80px
厳密な数学的リズムではなく、大きく明確な間隔とパディングに依存する、ゆるくて不規則なリズム。
05
サーフェス (角丸 / 影 / 罫線)
sm · 4px
md · 20px
lg · 100px
pill · 100px
太い黒のストローク（2-3px）またはなし。無加工の、切り貼りのような美学を強調します。
3px 3px 0px 0px rgba(0,0,0,1.0)
06
レイアウト
1200container
12columns
20pxgutter
768 / 1024breakpoints
厳格なグリッド制約を無視し、互いにレイヤーされた太い非対称カラーブロック。
07
モーションとインタラクション
200msmicro
400mssmall
800msmedium
ease-outeasing
インタラクティブ要素に対する微妙なhoverスケールまたはフィルター。 · 表示/非表示モーダルに対する標準的なDOM要素transition。
標準のポインターカーソル。潜在的に微妙な明るさやスケールの変化を伴うことがあります。 · 即座のビジュアルフィードバック。しばしばCSS transitionを介して提供されます。
08
コンポーネント
- button 黒のソリッド背景に白の大文字モノスペーステキストを持つピル型。しばしば太いボーダーを伴います。
- card 丸みのある角と太い黒ボーダーを持つソリッドカラーブロック。独立したビジュアルアイランドとして機能します。
- chip スター評価に使用され、カラーブロック内にソリッドで分厚い星として描かれます。
- input シンプルなボーダー付きフィールドまたはインラインテキスト入力。モノスペースフォントを維持します。
- hero ビューポートを支配する巨大な、画面全体に広がるディスプレイスクリプトテキスト。
09
文体と禁止事項
- トーン 個性的、自信に満ち、大きく、ユーモラス。
- 見出し 短く、パンチがあり、しばしば巨大な、画面全体に広がるスクリプトテキストとして表示されます。
- CTA 「送信」や「閉じる」のような直接的で大文字のコマンド。太字のモノスペースフォントで設定されます。
- 細くエレガントなタイポグラフィを使用しないでください。スクリーンショットには、太く、大胆、モノスペースフォントと重厚なディスプレイスクリプトが示されています。
- 白い背景に依存しないでください。スクリーンショットには、茶色、ピンク、青などの大胆なソリッドカラーブロックが示されています。
- 微妙なグラデーションを使用しないでください。スクリーンショットには、すべての背景にフラットでソリッドなカラーフィルが示されています。
- 薄い1pxのボーダーを使用しないでください。スクリーンショットには、すべての要素に太い2-3pxの黒いボーダーが示されています。
- 小さく繊細なアイコンを使用しないでください。スクリーンショットには、分厚く、ソリッドで、手描きまたはオーバーサイズの星の形状が示されています。
- クリーンで空のグリッドを使用しないでください。スクリーンショットには、混沌とし、重なり合うテキストとカラフルなブロックが示されています。
- 標準的な文頭大文字を使用しないでください。スクリーンショットには、アグレッシブで広範に使用される大文字text-transformが示されています。
- 避ける: 微妙なグラデーションや、洗練された色彩パレットを避けます。
- 避ける: エレガントで繊細なセリフフォントや洗練されたタイポグラフィを避けます。
- 避ける: 大胆なカラーのコンテキストなしの、空の白色空間を避けます。
- 避ける: 遊び心のある重なり合わせなしの、標準的で退屈なグリッド配置を避けます。
- 避ける: 繊細で薄いボーダーや淡いドロップシャドウを避けます。
- 避ける: 深刻、企業的、または過度にフォーマルな口調を避けます。
10
パック内の実スクリーンショット
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏実ページから取得 · 実 computed styles
11
System Prompt
コーヒーブランド向けの表現的で遊び心のあるD2C eコマースインターフェースをデザインします。鮮やかなソリッド背景カラー（焦がしオレンジ、ソフトピンク、ライトブルーなど）と、鋭い黒のテキストとボーダーが特徴の、大胆で少し混沌とした美学を使用します。タイポグラフィが主役です：巨大で表現的なディスプレイスクリプトと、すべてのUI要素と本文テキストに対する厳格で大文字のモノスペースフォントをペアリングします。レイアウトは、クリーンで空のグリッドではなく、太い黒いストロークを持つ大胆で重なり合うカラーブロックに依存します。ボタンやカードなどのコンポーネントは、手で切り取られたような分厚い感触を持ち、しばしばピル形状または重厚な丸みのある角を使用します。洗練さ、微妙なグラデーション、繊細なタイポグラフィは避け、口調は大きく、個性的で挑発的です。重要な制約：テキストには厳密にモノスペースフォントを使用し、UI全体で大文字text-transformを維持し、背景には画像ではなくソリッドカラーブロックに依存します。
en · zh-CN · zh-TW · ja · ko