厳選・オープン・無料

19 86 Fr

極端なタイポグラフィ尺度と厳密な表形式構造を用いたミニマルな建築スタジオ・ポートフォリオ。

01

デザイン DNA

建築的な明瞭さで構造化されたプロジェクトを表示する精密機器。

02

カラー

純白背景に黒テキストと枠線を用いた絶対的なモノクローム。

03

タイポグラフィ

humanist-sans

• display490px · 400
• body24px · 400

04

余白

一貫した24pxの水平パディングと行間1pxの垂直リズム。

05

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

リスト項目を分離する1px solid #000000の水平線

06

レイアウト

巨大なタイポグラフィ・ウォーターマークをオーバーレイした、フル幅の表形式リスト

07

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

不透明度フェード · max-height拡張

行にポインターカーソルを表示し、クリック可能であることを示す · 行の拡張またはプロジェクト詳細へのナビゲーション

08

コンポーネント

• button ステータスインジケーターとして箇条書き付きのプレーンテキスト
• card 1pxの枠線で区切られた表形式の行
• input カテゴリフィルタリング用のドロップダウンメニュー
• hero リスト構造に重なり合う巨大なタイポグラフィ数字

09

文体と禁止事項

• トーン 権威があり、建築的で、非常に構造化されている
• 見出し グラフィック要素として使用される巨大で重なり合うタイポグラフィ数字
• CTA 視覚的ノイズが最小限の微細なインタラクティブ行

• ドロップシャドウを使用しない — スクリーンショットは完全にフラットな2D表面を示している
• アクセントカラーを使用しない — スクリーンショットは厳格なモノクロームの黒白パレットを示している
• 太いフォントウェイトを使用しない — スクリーンショットはすべてのテキストで統一された通常ウェイトを示している
• 装飾要素を使用しない — スクリーンショットはタイポグラフィと細い1px線のみに依存している
• 角丸コンテナを使用しない — スクリーンショットは鋭いエッジと直線の水平線を使用している
• インターフェースを clutter しない — スクリーンショットは十分なホワイトスペースと厳格なグリッドを維持している
• 避ける: 遊び心のある要素
• 避ける: 明るいアクセントカラー
• 避ける: ドロップシャドウ
• 避ける: 装飾的なアイコン

10

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

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

11

System Prompt

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