厳選・オープン・無料

Josephmark Studio

巨大なタイポグラフィとミニマルで高コントラストな美学が特徴の、大胆なダークテーマのデジタルスタジオポートフォリオ。

01

デザイン DNA

ハイエンドな建築事務所：クリーンなライン、自信に満ちた声明、構造的な明瞭さへの焦点。

02

カラー

セカンダリ要素にニュートラルなオフホワイトとグレーを使用した高コントラストダークモード。

03

タイポグラフィ

grotesque-sans

• display60px · 300
• h136px · 300
• body16px · 300
• small12px · 300

すべてのテキストにScto Grotesk Aを使用。デフォルトウェイトは300（ライト）。 · ディスプレイおよび見出しサイズには、一貫してネガティブレタースペーシングを適用。 · ラベルやタグには大文字を控えめに使用。

04

余白

主要セクション間にはスケールを強調するため、たっぷりとした縦方向のパディング（96px-112px）。

05

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

最小限の1pxボーダー。主にタグやUIコンポーネントに白やグレーを使用。

06

レイアウト

大きなタイポグラフィブロックと画像コンテナを備えた、フルブリードの縦積みレイアウト。

07

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

ホバー時の不透明度とトランスフォームの滑らかな遷移。 · 色や背景の変更に標準的な0.3秒の遷移。

インタラクティブ要素の微妙な不透明度や色の変化。 · 標準的なポインタインタラクション。

08

コンポーネント

• button 細いボーダーを持つピル形タグ（例：「Brand」「Digital Product」）とシンプルなテキストリンク。
• card 左揃えのタイポグラフィと、その下に配置されたピル形カテゴリタグを備えた、大きな画像ベースのプロジェクトショーケース。
• chip 細いボーダーを持つ小さなピル形カテゴリタグ。
• hero 巨大なライトフォントの左揃えテキストを特徴とする、フルビューポートのダークセクション。

09

文体と禁止事項

• トーン 自信に満ち、率直で、野心的。
• 見出し ライトフォントウェイトの大規模な宣言的ステートメント。
• CTA 最小限で目立たない。シンプルなテキストリンクや微妙なタグが中心。

• 太いフォントウェイトを使用しない。スクリーンショットではライト（300）ウェイトが一貫して使用されている。
• 明るく、鮮やかなアクセントカラーを使用しない。スクリーンショットではニュートラルなオフホワイトを用いた厳格なモノクロームパレットが使用されている。
• 中央揃えのテキスト配置を使用しない。スクリーンショットでは主要なテキストブロックがすべて左揃えになっている。
• 複雑なドロップシャドウを使用しない。スクリーンショットでは完全にフラットなサーフェスで、目に見えるシャドウは一切ない。
• 狭い縦方向のスペーシングを使用しない。スクリーンショットではセクション間にたっぷりとしたパディング（96px以上）が使用されている。
• 標準的な長方形のボタンを使用しない。スクリーンショットではピル形タグや細いボーダーのタグが使用されている。
• 避ける: 過度に装飾的な要素
• 避ける: 明るく、衝突するアクセントカラー
• 避ける: 情報が詰まったレイアウト

10

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

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

11

System Prompt

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