厳選・オープン・無料

Nevflynn

温かみのあるパステルパレットと大胆な角丸タイポグラフィを備えた、遊び心のあるカードベースのパーソナルポートフォリオ。

01

デザイン DNA

遊び心がありながらもプロフェッショナルな開発者ポートフォリオ。

02

カラー

柔らかなパステルアクセントと高コントラストのダークテキストを持つ、温かみのあるニュートラルな背景。

03

タイポグラフィ

geometric-sans

• display40px · 700
• h124px · 500
• body16px · 400

見出し要素にはMoranga Boldを使用する。 · 本文およびUIテキストにはSilkaを使用する。

04

余白

4px単位のグリッドに基づく。

05

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

アクティブ状態や特定のカードに表示されることが多く、2px solidのスタイル。

rgba(0, 0, 0, 0) 0px 0px 0px 2px inset · rgb(240, 242, 248) 0px 0px 0px 2px

06

レイアウト

異なるカードサイズの、メーソンリースタイルのカードグリッド。

07

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

ホバーステートの滑らかな遷移（0.3秒） · インタラクション時の微細な透明度フェード。

微細なボックスシャドウまたは背景色の変化。 · 最小限の視覚フィードバック、ポインタカーソルに依存。

08

コンポーネント

• button 微細なボーダーまたは塗りつぶし背景を持つ、ピル-shaped。
• card 大きな角丸（18pxまたは32px）、白い背景、柔らかなパディング。
• chip 小さなピル-shapedタグまたはナビゲーション項目。
• input 最小限のボーダーボトムまたはボトムボーダースタイル。
• hero アバターと自己紹介テキストを含む、カードベースのレイアウト。

09

文体と禁止事項

• トーン フレンドリーで、カジュアルで、親しみやすい。
• 見出し 短く、大胆で、率直。
• CTA 会話調の質問またはシンプルな記述。

• ダークモードを使用しない — スクリーンショットでは代わりに明るく温かみのある背景が示されている。
• シャープな角を使用しない — スクリーンショットでは代わりに18pxおよび38pxの大きな角丸が示されている。
• 細くエレガントなセリフを使用しない — スクリーンショットでは代わりに大胆な幾何学的サンセリフフォントが示されている。
• 厳格で堅いグリッドを使用しない — スクリーンショットでは代わりに遊び心のあるスタッガードカードレイアウトが示されている。
• アグレッシブで高彩度のネオンカラーを使用しない — スクリーンショットでは代わりに柔らかく落ち着いたパステルカラーが示されている。
• 複雑で重いドロップシャドウを使用しない — スクリーンショットでは代わりに非常に微細で軽いシャドウまたはフラットデザインが示されている。
• 避ける: 硬いビジネス用語
• 避ける: 過度に複雑な文章構造
• 避ける: アグレッシブなセールス言語

10

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

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

11

System Prompt

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