厳選・オープン・無料

Stinkstudios

大胆なタイポグラフィ、映画的な写真、以及 stark なモノクローム・パレットが特徴の、プレミアム・クリエイティブ・スタジオのポートフォリオ。

01

デザイン DNA

ハイコントラストのタイポグラフィで大規模なクリエイティブ作品を展示するシネマティックなギャラリー。

02

カラー

映画的なプロジェクト写真を主たる視覚的焦点とするための、ハイコントラストなモノクローム基盤。

03

タイポグラフィ

grotesque-sans · monospace

• display60px · 300
• heading52px · 300
• body16px · 300
• caption14px · 300

プライマリ・タイプフェイスとして Helvetica, sans-serif を使用します。 · 大規模なディスプレイ・テキストでは、極めて tighten（文字間隔を詰めた）ネガティブ・レタースペーシングを維持します。 · 全てのUIテキストは、ライトウェイト（300）とします。

04

余白

大規模な視覚要素の回りには余裕のあるパディングを、ナビゲーションやリスト内にはより tight で一貫した間隔を設けます。

05

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

主に区切り線やアンダーラインとして使用される、 thin な1px solid white or black lines。

06

レイアウト

フルブリードのヒーロー画像に続き、大規模および小規模のプロジェクトカードが混在するグリッド。

07

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

インタラクティブ要素の滑らかな opacity フェード。 · ナビゲーションやカードのトランスフォームベースのホバー状態。 · ロード状態におけるロゴ要素の回転またはスピン・アニメーション。

インタラクティブ性を示すための、微細な opacity 削減または軽微な色の変化。 · 即時的な状態変化、またはプロジェクト詳細へのナビゲーション。

08

コンポーネント

• button アンダーラインやホバー時のopacity変化による、シンプルなテキストベースのリンク。
• card 端から端まで写真のサムネイルを配置し、下部または横に最小限のテキストオーバーレイ。
• chip 「ADVERTISING」のようなカテゴリ用の、 small で大文字、 letterSpacing を広げた monospaced テキスト。
• input 下部にボーダーを持つシンプルなテキストフィールドとして最小限に登場する可能性が高い。
• hero 大規模で tightened（文字間隔を詰めた）ディスプレイ・タイポグラフィを重ねた、フルビューポートの没入感あるビデオまたは画像背景。

09

文体と禁止事項

• トーン 自信に満ち、ミニマルで、プロフェッショナル。
• 見出し 短く、力強く、視覚的に支配的。複雑な表現ではなく、スケール（サイズ）に依存。
• CTA 全体的なミニマルな美学に溶け込む、控えめなテキストリンク。

• 装飾的なセリフ字体を使用しないこと — スクリーンショットでは、全てのUIおよびディスプレイ・テキストにクリーンで幾何学的なグロテスク・サンセリフが使用されています。
• UI要素にドロップシャドウを追加しないこと — スクリーンショットでは、段差効果のない完全にフラットな表面が示されています。
• 鮮やかで高彩度のアクセントカラーを使用しないこと — スクリーンショットでは、厳格なモノクローム・パレット（黒、白、無彩色のグレー）が示されています。
• ナビゲーションに中央揃えテキストを使用しないこと — スクリーンショットでは、ヒーローの下部に右揃えのナビゲーション・リンクが示されています。
• 本文テキストに太いフォントウェイトを使用しないこと — スクリーンショットでは、洗練された印象のために主にライトウェイト（300）のテキストが示されています。
• プライマリ・カードに角丸を使用しないこと — スクリーンショットでは、プロジェクト画像にはシャープなエッジが、 minor な要素のみ10pxの radius が示されています。
• 避ける: 装飾的なセリフ字体は避けてください。
• 避ける: 鮮やかなネオン或多色グラデーションは避けてください。
• 避ける: 過度なボーダーやドロップシャドウを含む雑然としたUIは避けてください。
• 避ける: 遊び心のある丸みのあるバブルのようなUI要素は避けてください。
• 避ける: ヒーローセクションに密集した本文テキストのブロックは避けてください。
• 避ける: 写真から注意をそらす複雑なアニメーションは避けてください。

10

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

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

11

System Prompt

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