厳選・オープン・無料

MVRDV

フルブリードのプロジェクト写真に大胆なタイポグラフィを重ねた、画像主導の建築スタジオサイト。

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

オリジナル: https://www.mvrdv.nl

📦 パックの中身を見る →

01

デザイン DNA

建築都市主義研究革新的社会的

大規模な構造物プロジェクトと大胆なデザインコンセクルトを紹介する建築スタジオのポートフォリオ。

02

カラー

#000000Ink
#ffffffBG
rgba(0,0,0,0.2)Line

黒と白のモノクローム・パレット。視覚的な面白さは写真コンテンツに完全に依存。

03

タイポグラフィ

grotesque-sans

ディスプレイ・タイプは厳密に大文字で、カーニングを詰めます。 · 本文は標準的な文章の区切りで、通常のウェイトとします。 · 太字ウェイトは特定の強調にのみ使用。

04

余白

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

セクションの区切りを明確にするための、大きなパディングブロック（上下約56px）を用いた、豊かな縦のリズム。

05

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

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

ボタンや仕切り線に使用する、薄い1pxの黒いボーダー。

rgba(0,0,0,0.4) 0px 0px 2px 0px · rgba(0,0,0,0.2) 0px 0px 5px 0px

06

レイアウト

1280container
12columns
24pxgutter
768 / 1024breakpoints

フルブリードのヒーロー画像と、真っ白なコンテンツセクションが交互に配置される。

07

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

100msmicro
200mssmall
400msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

カラーとトランスフォームプロパティのためのスムーズなトランジション。 · インタラクションのための速いオパシティのフェード。

短い100-200msのタイムスケールで、カラーまたはトランスフォームの変化が即座に反応。 · 微細なトランスフォームのシフト。

08

コンポーネント

09

文体と禁止事項

10

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

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

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

11

System Prompt

これは、巨大で大胆なタイポグラフィとフルブリードの建築写真が特徴の、プレミアム建築スタジオのポートフォリオです。パレットは厳密にモノクロームで、高コントラストを生み出すために黒（#000000）と白（#ffffff）のみを活用しています。タイポグラフィのカテゴリは grotesque-sans で、ディスプレイ・テキストは大きな、カーニングを詰めた大文字で設定されます。重要な制約には、いかなるカラーアクセントの回避、角丸のUI形状の回避、そして主要なレイアウトコンポーネントに影を追加しないことが含まれます。レイアウトは、写真ヒーローセクションとクリーンな白いコンテンツブロックの厳密な交互配置に依存し、スケール感とビジョンを伝えています。

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

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

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

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