厳選・オープン・無料

Matteroffact Fr

巨大なタイポグラフィのスケールと鮮やかな黒白のコントラストに完全依存する、ミニマルなフランスのクリエイティブ・スタジオのポートフォリオ。

01

デザイン DNA

スリム化されたギャラリー。大規模なタイポグラフィが主要な展示物であり、インタラクションは必須のボックス型トリガーに還元されている。

02

カラー

純白の背景に黒のテキストとボーダーを用いる厳格なモノクローム。視覚的階層構築にグレースケールを使用。

03

タイポグラフィ

grotesque-sans

• display160px · 400
• h136px · 400
• body22px · 400

すべてのUIおよびタイポグラフィ要素にFreeSansファミリーを使用 · すべてのテキストのfont-weightを400に維持 · 本文および小見出しのline-heightを1.2に緊密に設定

04

余白

4pxグリッドに基づく緩いリズム。ボックス型要素に18pxおよび45pxのpaddingを重点的に使用。

05

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

ボタンやナビゲーション・リンクなどのボックス型UI要素にのみ、3pxのsolid黒ボーダーを使用。

06

レイアウト

非対称、エッジ揃えのレイアウト。巨大なタイポグラフィ・ブロックが境界に押しかけ、コーナー配置のボックス型ナビゲーションを構成。

07

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

全プロパティのtransitions · opacity fading · color changes

クリック可能なボックス型要素でトリガー。テキストcolorまたはボーダー colorが変化する。 · インタラクティブ要素に標準のポインターカーソル。

08

コンポーネント

• button 基本的なHTMLフォーム要素を模倣した、3pxのsolid黒ボーダーと内部paddingを持つ、bareで長方形のボックス。
• hero オーバーサイズの流れるようなタイポグラフィでビューポートを支配し、同時にナビゲーション要素として機能。

09

文体と禁止事項

• トーン 直接的、フィルタリングなし、やや対抗的。
• 見出し 韻を踏む、または繰り返しの単語（Fact, Fake, Tab, Hack）を用いた遊び心のある巨大なタイポグラフィ。
• CTA bareで、機能的、視覚的装飾が皆無。

• rounded cornersを使用しない — スクリーンショットでは、すべてのボタンと要素に鋭い0pxの長方形コーナーが確認できる
• drop shadowsを適用しない — スクリーンショットでは、levation（立体感）のない完全にフラットでボーダーレスのUIが確認できる
• 色付きの背景を使用しない — スクリーンショットでは、厳格な純白#ffffffの背景が確認できる
• 特徴的な装飾的sans-serifを使用しない — スクリーンショットでは、均一で中立的なgrotesque-sansが確認できる
• すべてのテキストをセンタリングしない — スクリーンショットでは、積極的に左揃えおよび右揃えのタイポグラフィが確認できる
• boldなfont-weightを使用しない — スクリーンショットでは、すべてのテキストがfont-weight 400のregularに厳密に設定されている
• 避ける: Gradients
• 避ける: Soft shadows
• 避ける: Rounded corners
• 避ける: 明るいアクセントカラー
• 避ける: 装飾的なアイコン

10

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

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

11

System Prompt

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