厳選・オープン・無料

Bareis Nicolaus

ビジュアルコミュニケーションエージェンシーのための、高コントラストでタグ駆動のデザインポートフォリオ。

01

デザイン DNA

ビジュアルワークのための、洗練されたモノクロームのファイルリングシステム。

02

カラー

厳密にモノクロームで、プロジェクトイメージがすべてのカラーを提供します。

03

タイポグラフィ

geometric-sans · humanist-sans

• display72px · 400
• body24px · 400

フォントファミリー：Lausanne, sans-serif · フォントウェイト：856の要素全体で一貫して400を使用。 · フォントサイズ：24pxが主要なテキストサイズです。

04

余白

インタラクティブなタグ要素のパディングで定義される、一貫した垂直および水平のリズム。

05

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

タグとボタンには2px solidの白い境界線。

06

レイアウト

左侧にナビゲーション/フィルタタグ、右侧にプロジェクトイメージを配置した分割画面レイアウト。

07

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

インタラクティブなタグのホバー時のスムーズなトランジション。 · セクションの展開と折りたたみのためのflexとopacityトランジション。

タグの背景塗りまたはopacity変化。 · タグがプロジェクトグリッドをフィルタリング。

08

コンポーネント

• button 2px solid白い境界線を持つタグ、ピル型（border-radius 120px）、黒背景、白テキスト。
• card オーバーレイされたピル型テキストラベル付きの、フルブリード写真イメージ。
• chip カテゴリーのフィルタリングに広く使用され、タグと同じスタイルで作成。
• input タグベースのインタラクションから示唆される、最小限の検索またはフィルタ入力。
• hero ナビゲーション用の巨大なタイポグラフィと高品質プロジェクト写真を組み合わせた、大型分割画面。

09

文体と禁止事項

• トーン 専門的、率直、かつ集中したトーン。
• 見出し メインナビゲーションのための、大型で大胆なsans-serifタイポグラフィ（72px）。
• CTA 探求とフィルタリングを促す、インタラクティブなピル型タグ。

• 白い背景を使用しない — スクリーンショットは純黒の背景を示しています。
• プライマリUIに装飾的またはセリフフォントを使用しない — スクリーンショットはクリーンなsans-serifを示しています。
• カラーボタンやアクセントを使用しない — スクリーンショットは厳密にモノクロームのUI要素を示しています。
• 重いドロップシャドウを使用しない — スクリーンショットはフラットで境界線ベースの要素を示しています。
• 複雑なマルチカラムテキストレイアウトを使用しない — スクリーンショットはクリーンなタグベースのグリッドを示しています。
• ピル型より小さい角丸を使用しない — スクリーンショットは高度に丸みを帯びた境界線（120px）を示しています。
• 避ける: 筆記体フォント
• 避ける: ソフトシャドウ
• 避ける: 装飾的なグラデーション

10

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

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

11

System Prompt

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