厳選・オープン・無料

Joyntcbd

ニッチなグラフィックストリートウェアのためのダークテーマECプラットフォーム。大胆で彩度の高いUIアクセントが特徴です。

01

デザイン DNA

ニッチでグラフィック要素の多いアパレルのための、ハイエナジーなデジタルブティック

02

カラー

高コントラストのダークプライマリパレットに、クリーンな白のコンテンツ背景、アクティブな要素のための鮮やかなブルーアクセントを調和させます。

03

タイポグラフィ

geometric-sans · humanist-sans

• display24px · 700
• body16px · 400
• caption12px · 600

大胆で表現力豊かなディスプレイテキストには、ジオメトリックサンセリフ（SharpGroteskスタイル）を使用します。 · 本文や標準的なUI要素には、ヒューマニストサンセリフ（Roobertスタイル）を使用します。 · ダーク背景上のテキストには、純白（#ffffff）を用いて高いコントラストを維持します。

04

余白

一貫した4pxグリッドに、標準的な8/16/24pxのガターを使用します。

05

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

1px solid rgba(233, 233, 236, 1)

0px 2px 4px 0px rgba(21, 21, 35, 0.2) · 0px 0px 10px 0px rgba(0, 0, 0, 0.4) · 0px -16px 16px 0px rgb(21, 21, 35)

06

レイアウト

固定ヘッダー、フルワイドのヒーロー/製品セクション、複数列の製品詳細レイアウトを持つ標準的なECカンプグラリュートです。

07

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

ホバー時の、繊細な不透明度とトランスフォームのトランジション（0.1s-0.15s ease-in-out）。 · 広範なインタラクティブステートに対する、標準的な'all'プロパティトランジション。

軽微なスケールや色の変化。通常、高速な100ms-150msのトランジションで実現します。 · ステートの変化による、即座の視覚フィードバック。

08

コンポーネント

• button プライマリアクションには角丸長方形（12px radius）、セカンダリタグやチップにはピルシェイプ（999px radius）を使用します。
• card クリーンな白背景のカードに、繊細なボーダーと適度なドロップシャドウを適用し、製品をディスプレイします。
• chip 製品のスタイルやカテゴリーに使用される、小さなピルシェイプのタグです。
• input 高コントラストのボーダーと目立つアイコンボタンを持つ、角丸の検索バーです。
• hero フルワイドで視覚的に密度の高いバナーセクション。写真と大胆なテキストオーバーレイを組み合わせます。

09

文体と禁止事項

• トーン 直接的で、取引的、そしてエネルギッシュです。
• 見出し 大胆で簡潔、強調のため大文字やミックスケースをよく使用します。
• CTA アクション指向で高コントラスト（例：ダークブルー上の白文字）。

• プレーンな白のヘッダーを使用しないこと。スクリーンショットではダークブルー/ネイビーのプライマリナビゲーションバーが示されています。
• すべての要素に鋭い角を使用しないこと。スクリーンショットでは12pxの角丸とピルシェイプのコンポーネントが混在しています。
• 単色パレットに依存しないこと。スクリーンショットでは、ダークと白の背景に対して鮮やかなブルーアクセント（#4e64df）が使われています。
• セリフや手書きフォントを使用しないこと。スクリーンショットではジオメトリックとヒューマニストサンセリフの厳密な階層が示されています。
• すべての場所に細い1pxボーダーを使用しないこと。スクリーンショットではエレベーションのために目立つ2pxボーダーと重厚なシャドウが使用されています。
• バックグラウンド全体を白にしないこと。スクリーンショットではダークテーマのヘッダー、 variousなオフホワイト（#f4f4f5）およびブルーティント（#f1f3fe）のセクションが使用されています。
• 避ける: 過度に詩的な言葉
• 避ける: 控えめなトーン
• 避ける: ミニマリストな専門用語

10

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

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

11

System Prompt

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