厳選・オープン・無料

Nathansmith

極端なタイポグラフィ・スケールと広大なネガティブスペースを用いた、ミニマルでモノクロームのポートフォリオサイト。プレミアムでギャラリーのようなプレゼンテーションを実現します。

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

オリジナル: https://www.nathansmith.design

📦 パックの中身を見る →

01

デザイン DNA

ミニマルプレミアムアートディレクテッド大胆エディトリアル

ハイエンドのモノクローム・アートギャラリー。

02

カラー

#F5F4EEInk
#FFFFFFInk soft
#000000BG
#333333Muted
rgba(245, 244, 238, 1)Line

タイポグラフィとネガティブスペースに依存した、極端なモノクローム・ミニマリズム。

03

タイポグラフィ

transitional-serif · geometric-sans

見出しにはトランジショナル・セリフ体を使用 · 本文にはジオメトリック・サンセリフ体を使用 · 見出し要素はすべて大文字にする

04

余白

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

余裕のある垂直および水平のスペーシングと大きな間隔

05

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

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

視覚的なボーダーは使用せず、ネガティブスペースに依存

None: None

06

レイアウト

1280container
12columns
24pxgutter
768 / 1024breakpoints

非対称でエッジに固定された、広大な中央ネガティブスペースを備えた構成

07

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

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

フェードイン · カラーシフト · 不透明度変更

すべてのインタラクティブ要素にカーソルポインタ · 即座のビジュアルフィードバック

08

コンポーネント

09

文体と禁止事項

10

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

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

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

11

System Prompt

アートディレクターのためのミニマルなポートフォリオサイト。デザインは厳格にモノクロームで、黒の背景（#000000）とオフホワイトのテキスト（#F5F4EE）を使用し、見出しにはトランジショナル・セリフ体、本文にはジオメトリック・サンセリフ体を使用。見出しには巨大なタイポグラフィ・スケールを採用し、広大で空いたネガティブスペースを用いて、プレミアムでギャラリーのような雰囲気を演出。浮遊するUI要素には深い暗いシャドウとピル形状を使用。重要な制約：厳格なモノクローム・パレットを維持し、広大なネガティブスペースを使用し、すべてのタイポグラフィをビューポートのエッジに固定すること。

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

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

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

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