厳選・オープン・無料

Delba de Oliveira

開発者教育の専門家向けに、タイポグラフィに焦点を当てたクリーンなポートフォリオ。

01

デザイン DNA

整った印刷の学術論文

02

カラー

温みのあるニュートラル背景上のハイコントラスト

03

タイポグラフィ

transitional-serif · monospace

• display40px · 500
• headline24px · 600
• body18px · 400
• small16px · 400

エディトリアルな美学を保つため、見出しと本文の両方に1つのセリフフォントファミリーを使用する。 · 見出しに強い視覚的ウェイトの階層を確保する。 · テキストブロック内の可読性を保つため、インラインリンクにはアンダーラインを使用する。

04

余白

セクション間には十分な縦間隔を設け、リスト内はリズミカルに詰める。

05

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

モバイルレイアウトの上部ボーダーを除き、ボーダーなし。

06

レイアウト

デスクトップでは2カラム非対称グリッド、モバイルでは1カラム。

07

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

目立つ動きは最小限、または一切なし。

リンクは色やアンダーラインのスタイルが変化する可能性がある。 · 標準的なリンクナビゲーション。

08

コンポーネント

• button ソリッドブラックの背景、白文字、角はわずかに丸める。
• card なし。コンテンツはフラットなテキストベースのリスト形式で提示される。
• chip なし。
• input なし。
• hero 大きなセリフ体のタイトルと簡潔な導入文のみのミニマルなテキストオンリー・ヒーロー。

09

文体と禁止事項

• トーン プロフェッショナルで、率直かつストレート。
• 見出し 明瞭で記述的なセクションタイトル。
• CTA 会話調で、アクションを促す表現。

• 装飾的なグラデーションを使用しない — スクリーンショットはフラットな単色背景を示している。
• 角丸のコンテナボーダーを使用しない — スクリーンショットはシャープで四角いエッジを示している。
• 明るく彩度の高いアクセントカラーを使用しない — スクリーンショットは厳格なモノクロ・パレットを示している。
• 本文にサンセリフを使用しない — スクリーンショットは見出しと本文の両方にセリフを示している。
• 複雑なカードやパネルを使用しない — スクリーンショットはシンプルでボックス化されていないコンテンツブロックを示している。
• UI要素にドロップシャドウを使用しない — スクリーンショットは完全にフラットなデザインを示している。
• 避ける: 専門用語が多すぎたり、複雑すぎる表現は避ける。
• 避ける: コンテンツから注意をそらす装飾的な要素は避ける。
• 避ける: くだけたスラングや、熱狂的すぎるトーンは避ける。

10

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

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

11

System Prompt

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