厳選・オープン・無料
OMA
UIが後退し、建築物自身が語るモノリシックな建築ポートフォリオ
architecturestudio
01
デザイン DNA
建築スタジオグローバルエディトリアルミニマル
時折赤で刻む、モノクロのスイス時計
02
カラー
#FF0000Accent
#000000Ink
#FFFFFFBG
#666666Muted
rgba(0,0,0,1.0)Line
厳格に黒と白を基盤とし、重要なメタデータにのみ鋭い赤色のアクセントを配置
03
タイポグラフィ
grotesque-sans
- display
58px · 700 - heading
50px · 700 - body
16px · 500
ディスプレイ階層には大文字必須 · 大きなテキストには tightened negative letter-spacing が必要 · フォントウェイトは500と700の間で厳密に交互に使用
04
余白
4px
8px
12px
16px
24px
32px
48px
64px
96px
厳密な4px基本単位をpaddingと内部要素間隔に一貫して使用
05
サーフェス (角丸 / 影 / 罫線)
sm · 0px
md · 0px
lg · 0px
pill · 0px
時間的コンテンツブロックの強調にのみ、堅い4px solid境界線を使用
06
レイアウト
1280container
12columns
24pxgutter
768 / 1024breakpoints
エッジ・ツー・エッジの写真に、硬いエッジのタイポグラフィコンテナを重ねたレイアウト
07
モーションとインタラクション
220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1.0)easing
標準リンクトランジション(all properties)
すべてのテキストリンクと要素に標準ポインターカーソル · 標準ポインターインタラクション
08
コンポーネント
- button 視覚的にはなし。タイポグラフィが主要なインタラクティブレイヤーとなる
- card フルブリード画像上にテキストブロックを整列させる非表示の構造コンテナ
- chip なし
- input なし
- hero 大規模な建築写真に、大きく重ねられたサンセリフテキスト
09
文体と禁止事項
- トーン 権威あり、制度的、厳格に宣言的
- 見出し 短く、鋭い建築タイトルを太字の大文字で
- CTA 標準インラインテキストリンク
- border-radiusを使用しない — スクリーンショットでは鋭い90度の角のみが示されている
- ドロップシャドウを追加しない — スクリーンショットでは完全にフラットで影のない表面が示されている
- 小文字タイトルを使用しない — スクリーンショットではすべてのナビゲーションと見出しに厳格な大文字が示されている
- 重いpaddingを使用しない — スクリーンショットでは tighten した12pxから15pxの内部間隔が示されている
- 複雑なカラーパレットを使用しない — スクリーンショットでは黒、白、単一の赤色アクセントのみが示されている
- セリフまたは装飾的フォントを使用しない — スクリーンショットでは厳格で機能的な grotesque sans-serif が示されている
- 避ける: 温かみ
- 避ける: 遊び心
- 避ける: 装飾的要素
- 避ける: 過度なpadding
- 避ける: 曲がった角
10
パック内の実スクリーンショット
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏実ページから取得 · 実 computed styles
11
System Prompt
ミニマルで高コントラストのデザインシステムを使用するグローバル建築ポートフォリオサイト(OMA)。カラーパレットは厳格に黒(#000000)と白(#FFFFFF)で、唯一の鋭い赤色アクセント(#FF0000)は日付メタデータにのみ使用。タイポグラフィは統一された grotesque sans-serif(Arial W01)で、 tightening した negative letter-spacing で大文字のみに使用。すべてのコンポーネントはフラットで hard 0px corners とゼロのドロップシャドウを持ち、視覚的な興味を提供するのは大規模なフルブリード建築写真に依存。重要な禁止事項:決して border-radius を使用せず、決してドロップシャドウを追加せず、決して見出しに小文字を使用しない。
en · zh-CN · zh-TW · ja · ko