厳選・オープン・無料

Studio Otto

厳格なモノクロームとサンセリフグリッドを通じて、クリエイティブプロジェクトを披露する、ドライでテキストの密集したポートフォリオ。

01

デザイン DNA

ハイエンドでミニマルなギャラリーカタログ、またはドライで無機質な建築ポートフォリオ。

02

カラー

ネガティブスペースとタイポグラフィのみによる、コントラストと可読性を最大化する厳格なモノクロームパレット。

03

タイポグラフィ

grotesque-sans

• body11px · 400
• display11px · 400

見出しとカテゴリは大文字に変換 · 全テキスト要素で、tightでコンパクトなline-heightを適用 · ウェイト、大文字/小文字、トラッキングのみで定義される、厳格なモノクロームのタイポグラフィ階層

04

余白

密集したグリッド用に、5pxと15pxのpaddingincrementsを重用する、tightで微細なスペーシングシステム。

05

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

構造的な区切りとして、時折使用される、鋭く1pxの実線黒ボーダー。

06

レイアウト

垂直方向のアライメントが強く、テキストが要素をtightに巻き込む、非対称なマルチカラーグリッド。

07

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

ホバー状態における滑らかな0.6秒の背景トランジション

インタラクティブなテキスト要素上の、微妙な背景トランジションまたは状態変化。 · ポインターカーソルによる直接ナビゲーション。

08

コンポーネント

• button ポインターカーソルを使用する、テキストベースのインタラクティブ要素。しばしば大文字のサンセリフリンクとなる。
• card コンテナではなく、タイポグラフィとホワイトスペースによって定義される非対称なグリッドセル。
• chip なし
• input なし
• hero 主要なテキストと画像のグリッドを、下方または中心からずれた位置へ押し込む、巨大なネガティブスペース。

09

文体と禁止事項

• トーン 傍観的で、プロフェッショナル、かつ厳密に情報的。
• 見出し 短く、大文字、トラッキングを広げたサンセリフのカテゴリラベル。
• CTA 従来のボタンコンポーネントを持たない、暗黙的なテキストベースのナビゲーション。

• ドロップシャドウを使用しない — スクリーンショットは、完全にフラットでボーダレスな要素を示している。
• ボーダーラジウスを使用しない — スクリーンショットは、すべての可见面上で厳格な矩形性を示している。
• 広範なタイポグラフィスケールを使用しない — スクリーンショットは、高度に均一で小さなテキストサイズを示している。
• 高クロマのアクセントを使用しない — スクリーンショットは、厳格なモノクロームの白黒パレットを示している。
• 大きくセンタリングされたヒーローヘッダーを使用しない — スクリーンショットは、密集した下方に重心を置いたグリッドに詰め込まれたテキストブロックを示している。
• 余裕のあるパディングを使用しない — スクリーンショットは、密集したビジュアルリズムを生み出す5pxと15pxのtightなincrementsを示している。
• 避ける: 感情的な言葉遣い
• 避ける: 装飾的な要素
• 避ける: 従来のUIコンポーネント

10

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

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

11

System Prompt

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