厳選・オープン・無料
Thegreenspace
大胆なタイポグラフィーとフォトグラフィックヒーローセクションを持つミニマリストデザインエージェンシーポートフォリオ
StudioAgencyCleanTypographyPhotographic
01
デザイン DNA
デザインエージェンシー建築ブラータリズムミニマリズム
大きなタイポグラフィーと十分なネガティブスペースを備えたギャラリースペース
02
カラー
#000000Ink
#FFFFFFBG
#BEBEBEMuted
rgba(0,0,0,0)Line
ヒエラルキーのためのグレーアクセントを備えた高コントラストモノクロームパレット
03
タイポグラフィ
grotesque-sans
- display
72px · 400 - body
24px · 400
04
余白
4px
8px
16px
24px
32px
48px
64px
96px
ディスプレイテキスト用にtightなline-heightを持つ、たっぷりとした垂直方向の余白
05
サーフェス (角丸 / 影 / 罫線)
sm · 0px
md · 0px
lg · 0px
pill · 0px
目立つものなし
06
レイアウト
1280container
12columns
24pxgutter
768 / 1024breakpoints
最小限の装飾を持つ大きなタイポグラフィーブロック
07
モーションとインタラクション
400msmicro
400mssmall
1200msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
不透明度の遷移 · 間隔を置いた表示
インタラクティブ要素での不透明度の変化 · 37の要素にポインターカーソル
08
コンポーネント
- button カーソルポインターステートを持つ、テキストベースのミニマルなボタン
- card 目立つものなし。プロジェクトリストが使用されている
- chip 目立つものなし
- input 目立つものなし
- hero オーバーレイされた大きなタイポグラフィーを持つ、フルワイドのフォトグラフィック背景
09
文体と禁止事項
- トーン 自信に満ち、控えめ
- 見出し 大きく、太字で、小文字始まりまたは文頭大文字
- CTA 最小限の、テキストのみ
- 複数のフォントを使用しない — スクリーンショットでは一貫して grotesque-sans が使用されている
- ドロップシャドウを追加しない — スクリーンショットでは完全にフラットなデザインが使用されている
- 角丸を使用しない — スクリーンショットではすべての要素に鋭い0pxの角が使用されている
- 装飾的なボーダーを追加しない — スクリーンショットでは目立つボーダーが使用されていない
- 明るいアクセントカラーを使用しない — スクリーンショットでは黒、白、グレーのみが使用されている
- レイアウトを雑然とさせない — スクリーンショットでは十分な余白と最小限の要素が使用されている
- 避ける: 装飾的な要素
- 避ける: 雑然としたレイアウト
- 避ける: カラフルなアクセント
10
パック内の実スクリーンショット
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏実ページから取得 · 実 computed styles
11
System Prompt
これは、The Greenspaceのためのミニマルデザインエージェンシーポートフォリオサイトです。デザインは、白背景（#FFFFFF）、黒いインク（#000000）、グレーの控えめなテキスト（#BEBEBE）を備えた、高いコントラストのモノクロームパレットが特徴です。タイポグラフィーには grotesque-sans フォント（haas_grotesk）が使用され、大きな表示サイズ（72px）とtightなline-heightで劇的な効果を実現しています。レイアウトは、十分な余白と最小限の装飾を持つ、広々とした空間です。重要な禁止事項：複数のフォントファミリーを使用しない、シャドウや角丸を追加しない、カラフルなアクセントを導入しない、装飾要素で雑然とさせない、ボーダーを使用しない、ミニマリストの美学を損なわないこと。サイトは、控えめなモーションエフェクトのために不透明度の遷移と間隔を置いた表示を使用しています。
en · zh-CN · zh-TW · ja · ko