厳選・オープン・無料

Typology

クリーンな成分と科学的精度に焦点を当てた、ミニマルでプレミアムなスキンケアブランド。

01

デザイン DNA

モダンな薬局とハイエンドなエディトリアル・マガジンの融合。

02

カラー

モノクロームの抑制とハイコントラストのタイポグラフィにより、クリニカルな純粋さを喚起します。

03

タイポグラフィ

grotesque-sans · monospace

• display64px · 500
• h148px · 500
• h232px · 500
• body15px · 400
• small13px · 400
• micro10px · 400

ナビゲーションおよびユーティリティ・テキストは常に大文字です。 · 見出しは狭いトレッキングと重みのあるウェイトを使用します。 · 本文はクリーンで中立的なサンセリフの外観を維持します。

04

余白

一貫した4pxベースグリッドと、エアリーでプレミアムな印象を与える十分な余白。

05

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

薄い1pxの黒またはダークグレーのボーダーで、分離やボタンに節度をもって使用します。

rgba(0, 0, 0, 0.3) 0px 30px 70px 0px

06

レイアウト

フルワイドの写真ヒーローを先頭に、クリーンで構造化されたグリッドを用いた製品ディスカバリー。

07

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

ボタンやリンクのホバーステートに対する滑らかなトランジション。 · 繊細なインタラクティブフィードバックのためのTransformベースのアニメーション。

トランジションを伴う、繊細な背景色または不透明度の変化。 · 主に色の変化による、即座のビジュアルフィードバック。

08

コンポーネント

• button 大文字テキストを配置したハイコントラストの矩形。プライマリは黒背景に白テキスト、セカンダリは白背景に黒ボーダー。
• card 高品質な製品画像と正確なタイポグラフィを用いた、クリーンでボーダーレスのカード。
• chip N/A - 画面に表示されているスクリーンショットには該当なし。
• input N/A - 画面に表示されているスクリーンショットには該当なし。
• hero 重ね合わせによる左揃えテキストを持つ、フルブリードでインパクトの強い写真。

09

文体と禁止事項

• トーン クリニカルで、直接的かつ洗練されている。
• 見出し 短く、太字で断定的な表現。大文字が一般的。
• CTA 行動を促す明確な表現。常に大文字。

• 丸みを帯びた、おしゃべりな形状は使用しない — スクリーンショットには鋭い幾何学的な矩形と四角形が示されています。
• 鮮やかで彩度の高いアクセントカラーは使用しない — スクリーンショットには厳格なモノクローム・パレットが示されています。
• 装飾的またはスクリプトフォントは使用しない — スクリーンショットにはクリーンで機能的なグロテスク・サンセリフが示されています。
• 多くのボーダーやボックスでインターフェースを雑然とさせない — スクリーンショットには十分な余白を持つクリーンでボーダーレスのレイアウトが示されています。
• everywhereに重いドロップシャドウを使用しない — スクリーンショットには1つだけの繊細で深いシャドウが節度をもって使用されていることが示されています。
• プライマリナビゲーションやCTAに小文字を使用しない — スクリーンショットにはこれらの要素に一貫した大文字スタイルが示されています。
• 避ける: 過度にカジュアルまたはおしゃべりな言葉遣い。
• 避ける: 感嘆符の過剰な使用。
• 避ける: 曖昧または絵的文字のようなマーケティング用語。

10

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

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

11

System Prompt

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