厳選・オープン・無料

Oker

モノクロームパレット、洗練されたタイポグラフィ、豊富な余白が特徴のミニマルなデザインスタジオポートフォリオ。

01

デザイン DNA

タイポグラフィと大きな画像に焦点を当てた、静かで洗練されたクリエイティブワークのギャラリー。

02

カラー

焦点を当てるための、鮮明なハイコントラストモード（黒/白）を備えた厳格なモノクローム基盤。

03

タイポグラフィ

transitional-serif

• display80px · 400
• title32px · 400
• body16px · 400
• caption16px · 300

04

余白

paddingや配置のために、8pxおよび16pxの increments を一貫して使用。

05

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

繊細な水平区切り線として、1px solid rgb(160, 160, 160)。

06

レイアウト

豊富な黒または白のpaddingで区切られた、大きなフルブリード画像。

07

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

hover時の滑らかなフェードインおよびカラートランジション · 画像表示のためのtransformおよびopacityトランジション

テキストリンクのカラートランジションおよび繊細なカーソル変化。 · 標準的なポインタインタラクション。

08

コンポーネント

• button カラートランジションを備えたシンプルなテキストリンク。目立つボタン形状はなし。
• card 従来のカードはなし。コンテンツはタイポグラフィを伴う大きなスタンドアロン画像として提示。
• chip チップは観察されず。
• input フォーム入力は観察されず。
• hero フルビューポートの大规模なイラストレーションまたは写真。端から端まで配置されることが多い。

09

文体と禁止事項

• トーン ミニマルで、プロフェッショナル、かつ静寂。
• 見出し 大規模で軽量なトランジショナルセリフ。中央揃えまたは左揃えであることが多い。
• CTA ボタンスタイルのないシンプルなテキストリンク。

• サンセリフのディスプレイフォントを使用しない — スクリーンショットではすべての見出しにトランジショナルセリフが使用されています。
• 角丸のボタンを使用しない — スクリーンショットではボタンコンテナのないテキストのみのリンクが表示されています。
• カラフルなアクセントパレットを使用しない — スクリーンショットでは厳格なモノクローム基盤が表示されています。
• 重いドロップシャドウを使用しない — スクリーンショットでは完全にフラットな画像とタイポグラフィが表示されています。
• テキストに複雑なマルチカラムグリッドを使用しない — スクリーンショットでは豊富な単一カラムの余白が表示されています。
• 忙しい装飾パターンを使用しない — スクリーンショットでは large, clean photographic or illustrative areas が表示されています。
• 避ける: 明るいネオンカラー
• 避ける: 重いドロップシャドウ
• 避ける: 忙しい装飾背景
• 避ける: 角丸のUI要素
• 避ける: サンセリフのディスプレイフォント
• 避ける: 複雑なグラデーション

10

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

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

11

System Prompt

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