厳選・オープン・無料

Emil Kowalski

クリーンでタイポグラフィを重視したアプローチを持つ、落ち着いた開発者向けポートフォリオ。

01

デザイン DNA

整理されたノート

02

カラー

温かみのあるオフホワイトをベースにした高コントラストタイポグラフィのモノクローム。

03

タイポグラフィ

humanist-sans

• h216px · 500

本文テキストはより柔らかい読書体験のために、ライトグレー（#63635e）を使用します。 · セクション見出しは黒（#21201c）で、やや太字にします。 · 本文テキストは一貫した24pxの行間を維持します。

04

余白

垂直のリズムは、一貫した24pxの行間と、主要セクション間の広めの96pxの垂直スペーシングによって確立されます。

05

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

1px solid ボーダーカラー（rgb(233,233,231)）

0 0 0 1px rgba(0,0,0,0.08) · 0 2px 2px 0 rgba(0,0,0,0.04)

06

レイアウト

狭く中央配置されたコンテナを持つ単一カラムレイアウト。

07

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

インタラクティブ要素の控えめなカラートランジション。

ホバー時の控えめな色の変化（transition: 0.15s）。 · 標準的なクリック動作。

08

コンポーネント

• button ダークでピル型のプライマリアクションボタン。白文字です。
• card 該当なし。カードを使わないミニマルなリストベースの構造です。
• chip 該当なし
• input 控えめなボーダーを持つ角丸入力欄。
• hero 名前、役職、経歴を記載したテキストベースの最小限のヒーローセクション。

09

文体と禁止事項

• トーン 自信に満ち、プロフェッショナルで率直です。
• 見出し 簡潔で直接的。しばしば単一の単語や短いフレーズです。
• CTA シンプルでアクション指向のテキストを高コントラストボタンに配置します。

• 明るく鮮やなアクセントカラーを使用しない。スクリーンショットはモノクロームパレットを示しています。
• 複雑な複数カラムレイアウトを使用しない。スクリーンショットは単一の狭いカラムを示しています。
• 重いドロップシャドウを使用しない。スクリーンショットは最小限で控えめなボーダーを示しています。
• 大きく劇的なタイポグラフィを使用しない。スクリーンショットは控えめで読みやすいサイズ体系を示しています。
• 純粋にジオメトリックまたはヒューマニストな特徴を持つサンセリフフォントを使用しない。スクリーンショットはクリーンで中立的なサンセリフを示しています。
• 過度なパディングやマージンを使用しない。スクリーンショットはタイトで一貫したスペーシングを示しています。
• 避ける: マーケティング的な誇張表現
• 避ける: 複雑な専門用語
• 避ける: 過度な感嘆符の使用

10

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

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

11

System Prompt

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