厳選・オープン・無料

Dougalves Work

ビジュアルデザイナーのための、ハイコントラストでタイポグラフィ主導のポートフォリオ。

01

デザイン DNA

オーバーサイズのディスプレイタイポを採用した、厳選されたギャラリーモノグラフ。

02

カラー

暖色の調子を持つ厳格なハイコントラストモノクローム。

03

タイポグラフィ

geometric-sans · neo-grotesque-sans

• display197px · 400
• heading16px · 400
• body16px · 400

04

余白

tight vertical rhythm with generous horizontal spacing。

05

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

表示なし。

06

レイアウト

デスクトップでは厳格な4カラムグリッド、モバイルでは2カラムに折りたたまれる。

07

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

スクロール時の滑らかな表示。 · transformプロパティへのcubic-bezierトランジション。

微細なopacityまたはtransformの変化。 · 即時トランジション。

08

コンポーネント

• button ビジュアルコンテナなしのテキストのみリンク。
• card 表示なし。
• chip 表示なし。
• input 表示なし。
• hero 大きなジオメトリックテキストを用いた、フルビューポートのタイポグラフィステートメント。

09

文体と禁止事項

• トーン 直接的でプロフェッショナル、ミニマル。
• 見出し 巨大な、トラッキングを抑えた大文字のジオメトリックサンセリフ。
• CTA ビジュアル強調のないプレーンテキスト。

• ドロップシャドウを使用しない — スクリーンショットでは深度の手がかりのないフラットな面が示されている
• 角丸ボタンを使用しない — スクリーンショットではボーダーやradiusのないテキストのみリンクが示されている
• 複数のフォントファミリーを使用しない — スクリーンショットでは厳格な2フォントシステム（ジオメトリックディスプレイ、ネオグロテスク本文）が示されている
• 鮮やかなアクセントカラーを使用しない — スクリーンショットではダークブラウンとオフホワイトの厳格なモノクロームパレットが示されている
• 本文テキストに大きなline-heightを使用しない — スクリーンショットではtightでコンパクトな行間が示されている
• 装飾的なボーダーを使用しない — スクリーンショットでは厳格な分離のみに使われるミニマルな水平線が示されている
• 避ける: 装飾要素
• 避ける: 過剰なpadding
• 避ける: 鮮やかなアクセントカラー
• 避ける: ドロップシャドウ
• 避ける: 複雑なグリッド
• 避ける: イタリック体テキスト

10

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

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

11

System Prompt

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