厳選・オープン・無料

Patrickmiller Se

大規模で鋭いタイポグラフィに支えられた、ミニマルで写真に焦点を当てたポートフォリオ。

PortfolioStudioCleanBold TypographyPhotographic
Patrickmiller Se のスクリーンショット
↓ デザインシステムをダウンロード (25 MB)OpenDesign で開く

オリジナル: https://patrickmiller.se

📦 パックの中身を見る →

01

デザイン DNA

写真スタジオミニマルクリエイティブポートフォリオ

大胆なタイポグラフィアイデンティティを前面に押し出し、画像に語らせる、スタイリッシュで自信に満ちた写真家ポートフォリオ。

02

カラー

#6F2C30Accent
#000000Ink
#FD9B65BG
rgba(0,0,0,1.0)Line

鮮やかで暖かいヒーローバックグラウンドが鋭い黒のテキストと対比し、写真セクションでは深い臙脂色、ブルー、そして純粋なブラックが使用されています。

03

タイポグラフィ

humanist-sans · system-sans

ヒーロータイポグラフィは、tightなline-heightとネガティブなtrackingを用いた極端なスケールで設定されます。

04

余白

4px
8px
16px
24px
32px
48px
64px
96px

コンテナ要素には、一貫して豊かなパディング（72px）が使用されます。

05

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

sm · 0px
md · 0px
lg · 0px
pill · 0px

視覚的なボーダーはなし。セパレーションにはカラーコントラストとタイポグラフィに依存。

06

レイアウト

1440container
1columns
72pxgutter
768breakpoints

ヒーローセクションを大規模なタイポグラフィがアンカーとする、フルブリードのシングルカラムレイアウト。

07

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

220msmicro
300mssmall
400msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing

要素にtransformとopacityの遷移が広く適用されており、スムーズなスクロールまたはリビール効果を示唆します。

cursor:pointerの付いた要素は、微細なscaleまたはopacityのtransformを備えている可能性があります。 · 遷移プロパティによる即座のレスポンス。

08

コンポーネント

09

文体と禁止事項

10

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

Patrickmiller Se — 桌面首屏（hero）
桌面首屏（hero）
Patrickmiller Se — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Patrickmiller Se — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Patrickmiller Se — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Patrickmiller Se — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Patrickmiller Se — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Patrickmiller Se — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Patrickmiller Se — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Patrickmiller Se — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Patrickmiller Se — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Patrickmiller Se — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Patrickmiller Se — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Patrickmiller Se — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Patrickmiller Se — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Patrickmiller Se — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Patrickmiller Se — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Patrickmiller Se — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Patrickmiller Se — 移动首屏
移动首屏

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

11

System Prompt

写真スタジオのミニマルなポートフォリオ。大規模で鋭いタイポグラフィと大胆なソリッドバックグラウンドカラーで定義。プライマリパレットは鮮やかなオレンジ（#FD9B65）と深い臙脂色（#6F2C30）を使用し、テキストとボーダーには純粋なブラック（#000000）でアンカー付け。タイポグラフィは、tightなline-heightとネガティブなtrackingを用いた極端なサイズにスケールされたhumanist-sansのディスプレイフォントを特徴とする。重要な制約：厳密なシングルカラム、フルブリードのレイアウトを維持；角丸やドロップシャドウは一切使用しない；サイトの自信に満ちたエディトリアルアイデンティティを維持するため、ヒーローテキストは極端なスケールを保つ。

このセンスを AI エージェントへ

この設計の機械可読な仕様——カラー・タイポ・モーションまで——をそのまま AI エージェントに渡せます。

OpenDesign スキル ↗ · このパック（エージェント用） ↗

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