厳選・オープン・無料

Phippscharlie

大胆なタイポグラフィと没入感のある写真を用い、洗練されたビジュアルアイデンティティを紹介するグラフィックデザインポートフォリオ。

PortfolioPhotographicBold TypographyCleanRefined
Phippscharlie のスクリーンショット
↓ デザインシステムをダウンロード (24 MB)OpenDesign で開く

オリジナル: https://phippscharlie.com

📦 パックの中身を見る →

01

デザイン DNA

ミニマルエディトリアル洗練グラフィックデザインポートフォリオ

ウェブに持ち込まれたハイエンド印刷マガジンのレイアウト

02

カラー

#101011Ink
#ffffffBG
#edededBG quiet
#7f7f7fMuted
rgba(0, 0, 0, 0.1)Line

フルブリード写真と劇的な焦点をつける黒セクションを用いた、ハイコントラストモノクロームパレット

03

タイポグラフィ

grotesque-sans · monospace

ディスプレイタイプには極めて tightened ネガティブ文字間隔を使用 · すべてのタイポグラフィで一貫したレギュラーウェイトを維持 · 本文テキストは快適な読み取りサイズを保ちつつ、ディスプレイタイプを支配的に配置

04

余白

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

エディトリアルな雰囲気を出すための非対称配置による豊富な余白

05

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

sm · 4px
md · 8px
lg · 12px
pill · 999px

最小限。微細な区切りにのみ使用。

06

レイアウト

1440container
12columns
24pxgutter
768 / 1024breakpoints

テキストをオーバーレイしたフルブリードヒーロー画像、白と黒のセクションを交互に配置

07

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

220msmicro
500mssmall
1000msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing

透明度フェードイン · スクロールreveal用の穏やかなトランスフォーム

リンクとインタラクティブ要素の透明度を下げる · 標準ポインターカーソルと即座のビジュアルフィードバック

08

コンポーネント

09

文体と禁止事項

10

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

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

11

System Prompt

This is a sophisticated graphic design portfolio for a London-based designer. The design uses a strict monochrome palette with white (#ffffff) and near-black (#101011) as primary colors, with photographic imagery providing tonal variation. Typography is set in grotesque-sans categories with massive display sizes up to 162px featuring tight letter-spacing. Key critical donts: never use bright accent colors, avoid adding shadows or elevation effects, and never shrink the display typography below its bold, dominant scale. The layout alternates between full-bleed photographic hero sections and clean white or dark sections, creating an editorial magazine-like flow with generous whitespace and asymmetric text placement.

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

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

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

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