厳選・オープン・無料

Jhey Tompkins

UI実験とインタラクションデザインに焦点を当てたデベロッパーポートフォリオ。

01

デザイン DNA

デザインエンジニアのための、クリーンでタイポグラフィ重視の個人ポートフォリオ。

02

カラー

高コントラストの白黒を基盤とし、インタラクティブな強調にウォームなアクセントカラーを配置。

03

タイポグラフィ

didone-serif · humanist-sans · monospaced

• display58px · 400
• subtitle14px · 600
• body16px · 300

メタテキストはtight trackingで大文字 · プライマリ表示にはセリフ、本文にはサンセリフ

04

余白

主要セクション間の竖方向に豊かなパディング。

05

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

構造的なボーダーは表示されません。

06

レイアウト

豊かな余白を持つ中央揃えの単一カラムレイアウト。

07

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

すべての要素にtransitionプロパティが定義されています。

インタラクティブ要素にはポインタカーソルを表示。 · インタラクティブ要素にはポインタカーソルを表示。

08

コンポーネント

• button 表示されるボタンはありません。
• card 表示されるカードはありません。
• chip 表示されるチップはありません。
• input 表示される入力欄はありません。
• hero 大きなセリフのヘッドラインの後に、モノスペースのサブタイトルとサンセリフの段落が続きます。

09

文体と禁止事項

• トーン プロフェッショナルで親しみやすく、やや遊び心がある。
• 見出し 大きく、エレガントなセリフ。
• CTA 矢印付きのシンプルなテキストリンク。

• ダーク背景を使用しない — スクリーンショットではクリーンな白い背景が使用されている。
• ヒーローヘッドラインにサンセリフを使用しない — スクリーンショットではセリフのヘッドラインが使用されている。
• プライマリリンクに青色を使用しない — スクリーンショットではウォームレッド/オレンジのアクセントが使用されている。
• 単一カラムのフル幅レイアウトを使用しない — スクリーンショットでは制限された段落幅が使用されている。
• 本文テキストに太字のウェイトを使用しない — スクリーンショットでは細めのウェイトが使用されている。
• メタラベルに小文字を使用しない — スクリーンショットではtight trackingの大文字が使用されている。
• 避ける: 過度に企業的なジャーゴン
• 避ける: 攻撃的な営業言語
• 避ける: 雑然としたレイアウト

10

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

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

11

System Prompt

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