厳選・オープン・無料

Smilingwolf

大きな写真とクリーンなタイポグラフィを備えた、プレミアムブランドおよびデジタルエージェンシーのポートフォリオ。

AgencyPhotographicCleanPremiumCase Study
Smilingwolf のスクリーンショット
↓ デザインシステムをダウンロード (23 MB)OpenDesign で開く

オリジナル: https://www.smilingwolf.co.uk

📦 パックの中身を見る →

01

デザイン DNA

エージェンシーポートフォリオ写真ミニマル洗練

ハイエンドの写真ギャラリーとスイスデザインスタジオの融合

02

カラー

#131713Ink
rgba(19,23,19,0.5)Ink soft
#F7F3F0BG
rgba(19,23,19,0.15)Line

温かみのあるオフホワイト背景にほぼ黒のインク色を用い、カラーバリエーションは写真に完全に依存します。

03

タイポグラフィ

transitional-serif · geometric-sans · monospaced

ナビゲーションとタグにはモノスペースの大文字を使用 · ディスプレイタイトルには tightened tracking（文字間隔を詰めた）セリフ体を使用 · 本文テキストの主力フォントとして幾何学的サンセリフ体を使用

04

余白

4px
8px
10px
12px
16px
20px
24px
48px
60px

主要コンテンツブロック間に豊かな息吹を与えるため、タイトな10-20pxのガターと大きな60pxのスペーサーを組み合わせて使用します。

05

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

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

薄い1pxの rgba(19,23,19,0.15) ラインが、区切り線や微妙なタグアウトラインとして控えめに使用されます。

06

レイアウト

1280container
12columns
20pxgutter
768 / 1024breakpoints

メインのポートフォリオリスト用の、フルワイド画像と豊かな垂直方向の余白を持つ、清潔なシングルカラムレイアウト。

07

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

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

インタラクティブ要素の微妙なhover状態 · ページナビゲーションとhover効果のための滑らかなtransition

リンクやタグの微妙な色の変化やアンダーラインの表示。 · 標準的なポインターカーソルインタラクション。

08

コンポーネント

09

文体と禁止事項

10

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

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

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

11

System Prompt

プレミアムブランドおよびデジタルエージェンシーのポートフォリオサイト。デザインDNAは、温かみのあるオフホワイト背景（#F7F3F0）とほぼ黒のテキスト（#131713）で定義され、ビジュアルインテレストには大型で高品質な写真に完全に依存します。タイポグラフィシステムは、ディスプレイタイトル用のトランジショナルセリフ体、本文テキスト用の幾何学的サンセリフ体、ナビゲーションとタグ用のモノスペース大文字スタイルを組み合わせて使用します。主要カラーは温かみのあるオフホワイト（#F7F3F0）とほぼ黒（#131713）です。重要なデザイン制約には、人工的なアクセントカラーを避け写真にカラーバリエーションを依存すること；フラットで建築的な雰囲気を維持するためにコンテナの角丸やドロップシャドウを避けること；そして密集したレイアウトを避け、代わりに豊かな余白と厳密なシングルカラムグリッドを使用して作品が呼吸できるようにすること。全体的な美学は控えめで洗練され、高度にリファインドであり、ポートフォリオプロジェクト自体の視覚的インパクトを優先します。

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

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

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

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