厳選・オープン・無料

Quentinhocde

インタラクティブ開発者のための、ハイコントラストでタイポグラフィ主導のポートフォリオサイト。

01

デザイン DNA

クリエイティブ・テクノロジストのためのモダンでブラータリストなポスターとなるデジタルポートフォリオ。

02

カラー

アクセントカラーのない厳格なモノクロームで、階層はタイポグラフィのスケールとウェイトのみに完全に依存します。

03

タイポグラフィ

geometric-sans · grotesque-sans

• display-xl144px · 700
• display-lg97px · 700
• body16px · 400
• caption10px · 400

大きなディスプレイテキストには、タイトでネガティブな文字間隔を使用し、コンパクトでインパクトのある外観を生み出します。 · ディスプレイテキストとナビゲーションリンクには大文字を多用し、構造的でブラータリストな雰囲気を維持します。 · 本文テキストは、複雑な背景に対する可読性のために、標準的な16pxを維持すべきです。

04

余白

すべての間隔に4pxの基本スケールを使用し、12pxと20pxが内部コンポーネントのパディング用の主要なガターとして機能します。

05

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

目に見える境界線はなく、分離は空間的な配置とタイポグラフィによって達成されます。

06

レイアウト

複雑な背景を特徴とするフルブリードの没入型レイアウトで、固定されたトップナビゲーションバーとフレキシブルグリッドに分散されたコンテンツを備えています。

07

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

インタラクティブ要素と背景コンポーネントには、軽微な遅延を伴うtransformとbackground-sizeのトランジションが適用されます。 · 背景テクスチャの変化性により、繊細で連続的なモーションが示唆されます。

インタラクティブ要素は「cursor: pointer」を使用してクリック可能性を示し、transformトランジションによる繊細なフィードバックを提供します。 · CSSトランジションによる即座のビジュアル状態変化を伴う標準的なポインタイベント。

08

コンポーネント

• button ポインターカーソルと大文字スタイルを備えたテキストベースのリンクで、従来のボタンの境界線や背景を欠いています。
• card 従来のカードはなく、情報は背景の上に直接浮遊するテキストブロックとして提示されます。
• chip チップやタグは表示されません。
• input ランディングページにはフォーム入力は表示されません。
• hero 複雑でテクスチャされた背景に重なる巨大で複数行のタイポグラフィステートメントが支配する、フルビューポートの没入型セクション。

09

文体と禁止事項

• トーン プロフェッショナルで直接的、かつ自信に満ちており、クラフトと技術スキルに焦点を当てています。
• 見出し 主要な焦点となる大きな、大文字で重いウェイトのタイポグラフィステートメント。
• CTA 装飾のないシンプルなテキストリンクで、現在のページからのナビゲーションを示すために外部リンクアイコンを often 使用します。

• アクセント用に3色目を導入しないこと — スクリーンショットは白-on-黒の厳格なモノクロームパレットを示しています。
• 大きなテキストに広い文字間隔を使用しないこと — スクリーンショットは密集したブラータリストな外観のためのタイトでネガティブな文字間隔を示しています。
• ディスプレイテキストにセリフ体またはスクリプト体を使用しないこと — スクリーンショットはすべての主要見出しにジオメトリック・サンセリフを使用しています。
• インタラクティブ要素に境界線、影、または背景色を適用しないこと — スクリーンショットはプレーンなテキストリンクを示しています。
• 従来のボタンコンポーネントを使用しないこと — スクリーンショットは代わりにポインターカーソルを備えた大文字テキストリンクを示しています。
• メインのヒーローステートメントにマルチカラムグリッドを使用しないこと — スクリーンショットは巨大な単一カラムのタイポグラフィブロックを示しています。
• 避ける: カラーアクセントやグラデーションの使用を避けてください。
• 避ける: 装飾的またはスクリプト体のタイポグラフィの使用を避けてください。
• 避ける: 境界線や影のある従来のカードベースのUIコンポーネントの使用を避けてください。
• 避ける: 没入感を損なう大量のパディングやホワイトスペースの使用を避けてください。
• 避ける: 背景塗りのある標準的なボタンコンポーネントの使用を避けてください。
• 避ける: 主要ステートメントに小さく控えめなタイポグラフィの使用を避けてください。

10

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

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

11

System Prompt

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