厳選・オープン・無料

Allcapstype

印象的なネオンマゼンタのシグネチャーを持つ、クリーンでタイポグラフィ中心のフォウンドリーサイト。

01

デザイン DNA

タイポグラフィが芸術となる、清廉なギャラリー。

02

カラー

単一の強烈なネオンマゼンタのアクセントを持つ、高コントラストモノクロム。

03

タイポグラフィ

grotesque-sans · monospaced

• display432px · 500
• heading32px · 400
• body12px · 400

UIテキストには幅広いトラッキングを使用し、洗練された、空気感のある印象を維持。 · フォントウェイトは400と500に厳密に限定し、統一感のあるモダンな外観を実現。 · ディスプレイタイポグラフィは、特に大きく表現力豊かに配置。

04

余白

水平方向の余裕のあるギャップを持つ非対称リズム。

05

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

なし。区切りには余白とカラーに依存。

06

レイアウト

フルワイドのヒーローセクションに、タイプスペシメンのグリッドが続く。

07

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

インタラクティブ要素のための、滑らかな透明度とトランスフォームのトランジション。 · ホバー時の微細なスケールまたはカラーの変化。

微細なカラーの変化または透明度の変化。 · 即座のビジュアルフィードバック。

08

コンポーネント

• button ネオンマゼンタの背景を持つ、ハイコントラストのピル型ボタン。
• card タイポグラフィに焦点を当てたタイプスペシメンを提示するミニマリストカード。
• chip スタイルのカウントやメタデータ用の、小さくクリーンなタグ。
• input ボーダーレスのミニマリスト入力フィールド。
• hero 柔らかなネオンマゼンタのグロー効果を持つ、支配的なディスプレイタイプ。

09

文体と禁止事項

• トーン プロフェッショナルで洗練され、わずかに遊び心がある。
• 見出し 太字でディスプレイ中心、しばしばネオングロー付き。
• CTA 直接的で行動を促す（例：「購入する」）。

• ダーク背景をプライマリサーフェスとして使用しない — スクリーンショットは明るいホワイトキャンバスを示している。
• ネオンマゼンタのアクセントを大きなテキストブロックに適用しない — これは小さなインタラクティブ要素とヒーローのグローに限定される。
• ほとんどのコンポーネントに角丸を使用しない — スクリーンショットは主に四角または非常にわずかに角丸の要素を示している。
• ディプス用にドロップシャドウを使用しない — デザインはフラットなサーフェスとカラーのコントラストに依存。
• 小さく詰まったタイポグラフィを使用しない — デザインは大規模さと豊かな余白を優先。
• 複雑なマルチカラーグラデーションを使用しない — パレットは厳密にモノクロムに単一のアクセントを加えたもの。
• 避ける: 過度にカジュアルまたは会話的な言葉遣いを避ける。
• 避ける: 不要なテキストでインターフェースを雑踏させない。
• 避ける: 複数の競合するアクセントカラーを使用しない。

10

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

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

11

System Prompt

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