厳選・オープン・無料

Spacelab

建築設計スタジオのための、写真主導のミニマルなポートフォリオ。

01

デザイン DNA

光、空間、構造の誠実さが環境を定義するオープンプランスタジオ。

02

カラー

写真がすべての色を提供する厳格なモノクロームパレット。

03

タイポグラフィ

grotesque-sans

• display62px · 400
• heading30px · 400
• body21px · 400

すべてのサイズで統一されたフォントウェイト400を使用 · クリーンな縦リズムを保つため、tightなline-height 1.05から1.2を維持 · 明瞭さのためにわずかな正の文字间距を使用

04

余白

4pxベースラインに基づき、21px（1.5rem）および42px（3rem）の刻みを多用。

05

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

可視ボーダーなし。間隔とハイコントラストな写真に依存。

06

レイアウト

左側に固定ナビゲーション列、右側に流動的なコンテンツ領域を持つ非対称分割レイアウト。

07

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

UIインタラクションのための標準的な0.4秒のフェードおよび色遷移

ナビゲーションリンクの控えめな色の変化（0.4秒遷移）。 · 標準的なリンクナビゲーション。

08

コンポーネント

• button ボーダーや背景のない、最小限のテキストリンク。
• card 従来のカードなし。コンテンツはフルブリードの建築写真として提示。
• chip なし。
• input なし。
• hero 巨大なタイポグラフィのマニフェストステートメントの後に、フル幅のヒーロー画像を配置。

09

文体と禁止事項

• トーン 直接的、自信に満ち、ミニマル。
• 見出し 太く、宣言的で、タイポグラフィ主導。
• CTA 静かで機能的なテキストリンク。

• 太字のフォントウェイトを使用しない — スクリーンショットではすべてのテキストがレギュラー400ウェイト
• 装飾的なUIボーダーを追加しない — スクリーンショットでは完全にボーダーレスのレイアウト
• 鮮やかなアクセントカラーを使用しない — スクリーンショットでは完全にニュートラルなテキストと写真に依存
• セリフフォントを使用しない — スクリーンショットではクリーンで統一されたグロテスクサンセリフを使用
• 剛性のあるグリッドレイアウトを作成しない — スクリーンショットでは明確な左列を持つ分割レイアウト
• 要素にドロップシャドウを使用しない — スクリーンショットでは完全にフラットな2Dサーフェス処理
• 避ける: マーガティング用語
• 避ける: 過度に複雑な文
• 避ける: 視覚的な clutter や装飾的なボーダー

10

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

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

11

System Prompt

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