厳選・オープン・無料

Jones Road

手間がかからない、肌を優先したメイクアップ必需品に焦点を当てた、クリーンでエディトリアルな美学を持つプレミアム、ミニマルなビューティーブランド。

01

デザイン DNA

ハイエンドでミニマルな美容必需品を厳選したギャラリー。

02

カラー

ハイコントラストのモノクロ基調に、インタラクティブなハイライトやバッジ用の単一で鮮やかなマジェンタアクセントを加える。

03

タイポグラフィ

transitional-serif · grotesque-sans · monospaced-sans

• display48px · 400
• body16px · 400
• label14px · 700

エレジャントでハイコントラストな見出しにはトランジショナルセリフを使用。 · 本文テキストや主要なインターフェース要素にはクリーンなグロテスクサンを使用。 · ブランドロゴや強力なCTAには、boldでワイドなグロテスクサンを使用。 · ラベルやボタンには、大文字と広めのレタースペーシングを適用。

04

余白

ゆったりとしたパディングとホワイトスペースが、プレミアムで息の通ったレイアウトを生み出します。

05

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

最小限に留め、薄い1pxのsolid黒またはマジェンタのラインをセパレーションやハイライトに使用。

rgba(0,0,0,0.25) 0px 5.78px 5.78px 0px

06

レイアウト

中央揃えのコンテンツを持つフルワイドヒーローセクションから、構造化されたマルチカラム製品グリッドへと展開。

07

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

コンテンツ読み込み時のスムーズなフェードイントランジション。 · インタラクティブ要素のopacityベースのhoverステート。

ボタンやリンクの微かなopacity低減やカラー変更。 · カラー変更や微かなスケールによる即時のビジュアルフィードバック。

08

コンポーネント

• button 黒背景に白の大文字テキスト、シャープな角、広めのレタースペーシング。セカンダリアクションにはマジェンタバリアント。
• card 最小限のボーダーを持つクリーンな白背景で、高品質な製品写真に焦点を当てる。
• chip ボトムに薄いボーダーを持つ大文字ラベル。アクティブステートではマジェンタに切り替え。
• input 黒ボーダーを持つシンプルなラインスタイルインプットで、ミニマルな美学を維持。
• hero セリフの見出し、サンセリフの説明文、目立つ黒CTAボタンを持つ大規模なフォトグラフィックヒーロー。

09

文体と禁止事項

• トーン 自信に満ち、洗練され、率直。
• 見出し シンプルさと品質を強調するエレジャントなセリフの見出し。
• CTA 大胆で大文字、アクション导向、広めのレタースペーシング。

• プライマリボタンに角丸を使用しない — スクリーンショットではシャープな長方形のボタン形状が示されています。
• 製品カードにドロップシャドウを追加しない — スクリーンショットではフラットでボーダーレスなカードが示されています。
• 複数のアクセントカラーを使用しない — スクリーンショットでは単一のマジェンタアクセントのみが示されています。
• スクリプトや手書きフォントを使用しない — スクリーンショットではセリフとサンセリフのカテゴリのみが示されています。
• 重い背景パターンを使用しない — スクリーンショットではクリーンな白やオフホワイトの背景が示されています。
• 小さく穷屈なスペーシングを使用しない — スクリーンショットではゆったりとしたパディングとホワイトスペースが示されています。
• 避ける: 雑然としたレイアウト
• 避ける: 過度にデコレーティブな要素
• 避ける: ネオンや高彩度のパレット

10

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

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

11

System Prompt

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