厳選・オープン・無料

Haleys

ゴシックタイポグラフィと静かな苔色を融合させた、学術的なポートフォリオ。

01

デザイン DNA

ダークオークのデスクの上に置かれた手製りの論文

02

カラー

深い森の緑の上的高コントラストの羊皮紙色

03

タイポグラフィ

blackletter · transitional-serif

• display72px · 400
• h132px · 400
• body20px · 300
• caption16px · 200

04

余白

セクションとグリッドアイテム間のゆったりとした垂直間隔

05

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

色褪せた羊皮紙色または半透明のグリーンの繊細な1pxの線

0px 2.4px 0px 0px #12332b

06

レイアウト

中央揃えと広い余白を持つ対称グリッド

07

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

hover時の滑らかなbackground-colorおよびborder-colorトランジション · 装飾的なSVG要素のフィルおよびストロークトランジション

ナビゲーションとプロジェクトリンクのための控えめな色の変化と下線 · カーソルポインターステートを通じた即座のビジュアルレスポンス

08

コンポーネント

• button サボーダーダーと小文字/イタリック体のスタイルを用いた、テキストベースのナビゲーション
• card 固体の背景のないテキストベースのプロジェクトリスト
• chip ナビゲーションバーにある小さなアウトライン付きバッジ（例：'w'、'T'、'A'）
• hero 中央に配置された大きなブラックレターの名前と、両側に配置されたセリフのタグライン

09

文体と禁止事項

• トーン 職人的、学術的、少し気まぐれ
• 見出し 精巧なブラックレターとトランジショナルセリフ、中央揃えであることが多い
• CTA 控えめで統合されており、アグレッシブなボタンを避ける

• クリーンでモダンなサンセリフを使用しない — スクリーンショットはブラックレターとトランジショナルセリフの混合を示しています。
• 明るく彩度の高い背景色を使用しない — スクリーンショットは深い静かな森の緑（#12332b）を示しています。
• ハイコントラストのCTAボタンを使用しない — スクリーンショットは控えめなテキストベースのナビゲーションリンクを示しています。
• 複雑で複数列のグリッドと太いボーダーを使用しない — スクリーンショットは繊細な線とゆったりとした対称的なレイアウトを示しています。
• 遊び心のあるまたは気まぐれなカラーパレットを使用しない — スクリーンショットはクリーム（#f8f2de）と苔色（#5a7c6b）の抑制されたパレットを使用しています。
• アグレッシブなドロップシャドウまたは重い視覚的ウェイトを使用しない — スクリーンショットは非常に控えめで最小限のシャドウ効果を示しています。
• 避ける: ネオンカラー
• 避ける: アグレッシブなサンセリフタイポグラフィ
• 避ける: 息継ぎのない密集したテキストブロック
• 避ける: 非常に彩度の高いまたは暖色系の背景
• 避ける: 目立つCTA

10

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

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

11

System Prompt

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