厳選・オープン・無料
Haleys
ゴシックタイポグラフィと静かな苔色を融合させた、学術的なポートフォリオ。
PortfolioCurationTypographyEditorialCalm
01
デザイン DNA
職人的学術的ゴシックキュレーション無時間的
ダークオークのデスクの上に置かれた手製りの論文
02
カラー
#f8f2deInk
#bead89Ink soft
#12332bBG
#5a7c6bMuted
rgba(248, 242, 222, 0.2)Line
深い森の緑の上的高コントラストの羊皮紙色
03
タイポグラフィ
blackletter · transitional-serif
- display
72px · 400 - h1
32px · 400 - body
20px · 300 - caption
16px · 200
04
余白
4px
8px
16px
24px
32px
48px
64px
96px
セクションとグリッドアイテム間のゆったりとした垂直間隔
05
サーフェス (角丸 / 影 / 罫線)
sm · 4px
md · 8px
lg · 12px
pill · 999px
色褪せた羊皮紙色または半透明のグリーンの繊細な1pxの線
0px 2.4px 0px 0px #12332b
06
レイアウト
1280container
12columns
24pxgutter
768 / 1024breakpoints
中央揃えと広い余白を持つ対称グリッド
07
モーションとインタラクション
240msmicro
300mssmall
800msmedium
ease-outeasing
hover時の滑らかなbackground-colorおよびborder-colorトランジション · 装飾的なSVG要素のフィルおよびストロークトランジション
ナビゲーションとプロジェクトリンクのための控えめな色の変化と下線 · カーソルポインターステートを通じた即座のビジュアルレスポンス
08
コンポーネント
- button サボーダーダーと小文字/イタリック体のスタイルを用いた、テキストベースのナビゲーション
- card 固体の背景のないテキストベースのプロジェクトリスト
- chip ナビゲーションバーにある小さなアウトライン付きバッジ(例:'w'、'T'、'A')
- hero 中央に配置された大きなブラックレターの名前と、両側に配置されたセリフのタグライン
09
文体と禁止事項
- トーン 職人的、学術的、少し気まぐれ
- 見出し 精巧なブラックレターとトランジショナルセリフ、中央揃えであることが多い
- CTA 控えめで統合されており、アグレッシブなボタンを避ける
- クリーンでモダンなサンセリフを使用しない — スクリーンショットはブラックレターとトランジショナルセリフの混合を示しています。
- 明るく彩度の高い背景色を使用しない — スクリーンショットは深い静かな森の緑(#12332b)を示しています。
- ハイコントラストのCTAボタンを使用しない — スクリーンショットは控えめなテキストベースのナビゲーションリンクを示しています。
- 複雑で複数列のグリッドと太いボーダーを使用しない — スクリーンショットは繊細な線とゆったりとした対称的なレイアウトを示しています。
- 遊び心のあるまたは気まぐれなカラーパレットを使用しない — スクリーンショットはクリーム(#f8f2de)と苔色(#5a7c6b)の抑制されたパレットを使用しています。
- アグレッシブなドロップシャドウまたは重い視覚的ウェイトを使用しない — スクリーンショットは非常に控えめで最小限のシャドウ効果を示しています。
- 避ける: ネオンカラー
- 避ける: アグレッシブなサンセリフタイポグラフィ
- 避ける: 息継ぎのない密集したテキストブロック
- 避ける: 非常に彩度の高いまたは暖色系の背景
- 避ける: 目立つCTA
10
パック内の実スクリーンショット
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏実ページから取得 · 実 computed styles
11
System Prompt
このサイトは、ヘイリー・パークという名前のソフトウェアデザイナーの個人ポートフォリオです。「ソフトウェアデザイン&その他小洒落」のための学術的で職人らしい空間として位置づけられています。プライマリ背景色は深い森の緑(#12332b)で、テキストはクリーム色の羊皮紙(#f8f2de)でレンダリングされ、メタデータと装飾要素には二次的な苔色(#5a7c6b)が使用されています。タイポグラフィは非常に特徴的で、メイン名前には精巧なブラックレター、プロジェクトタイトルとナビゲーションにはエレガントなトランジショナルセリフが混在しています。重要なデザインルールには、モダンなサンセリフフォント、明るく彩度の高い色、アグレッシブなCTAボタン、密集したテキストブロック、重いドロップシャドウの回避が含まれます。レイアウトはゆったりとして対称的で、重いコンテナよりも息継ぎと繊細な線画を優先しています。
en · zh-CN · zh-TW · ja · ko