厳選・オープン・無料

Dezeen

建築とデザインのための、特徴的な Blue アクセントを持つクリーンな画像主導のエディトリアル・プラットフォーム。

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

オリジナル: https://www.dezeen.com

📦 パックの中身を見る →

01

デザイン DNA

建築デザインマガジンキュレーションフォトグラフィック

ウェブに移植されたプレミアム・デザインマガジン。大きなエディトリアル写真とクリーンなタイポグラフィを優先しています。

02

カラー

#556e9bAccent
#000000Ink
#ffffffBG
#f0f0f0BG soft
#757575Muted
rgba(85, 110, 155, 1)Line

ハイコントラストの Black と White をベースに、特徴的な Slate-Blue のアクセントを用います。

03

タイポグラフィ

humanist-sans · transitional-serif

見出しとナビゲーションには Sans-serif を使用。 · 記事本文には Serif を使用。 · 強調やナビゲーションに Weight 700 を多用。 · 大きな表示テキストには、 tightened letter-spacing を維持。

04

余白

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

エディトリアルブロック間を、十分な余白で区切ります。

05

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

sm · 0px
md · 0px
lg · 0px
pill · 999px

セクション区切りには、鋭い 3px のボーダーを使用。

06

レイアウト

1280container
12columns
24pxgutter
768 / 1024breakpoints

記事用の主要な左カラムと、二次コンテンツ用の右カラムを持つ厳格なグリッド。

07

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

200msmicro
400mssmall
800msmedium
ease-in-outeasing

背景やカラー変化のための滑らかなトランジション。

インタラクティブ要素の背景色が変化。 · 即座に応答。

08

コンポーネント

09

文体と禁止事項

10

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

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

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

11

System Prompt

Dezeen は、プレミアム建築・デザイン・エディトリアル・プラットフォームです。そのデザイン DNA は、ハイコントラストの Black と White をベースに、特徴的な無彩色 Blue (#556e9b) アクセントを用いたパレットに構築されています。タイポグラフィでは、見出しに Humanist Sans-serif、本文に Transitional Serif を使用し、洗練され権威ある声を維持しています。重要なルール：シャープな 0px ボーダーを使用し、角丸を避け、厳格なエディトリアルグリッドを維持すること。遊び心や装飾的な要素は一切使用せず、エストレティックはクリーンでキュレーションされたフォトグラフィックなものである必要があります。

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

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

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

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