厳選・オープン・無料

Stephaniespecht

プロジェクトに焦点を当て、多様なデザインワークが自ら語る生のポートフォリオ。

01

デザイン DNA

グラフィックデザインスタジオのデジタル展示スペース

02

カラー

モノクロの基盤を厳守し、カラフルなプロジェクト映像が支配するようにする。

03

タイポグラフィ

humanist-sans · geometric-sans

• display32px · 700
• title25px · 400
• body16px · 400
• caption12px · 400

デフォルトフォントスタックは 'Helvetica Neue', Arial, sans-serif · フォントウェイト400と700に厳密に準拠 · プロジェクト映像と競合しないミニマルなタイポグラフィ

04

余白

プロジェクトコンテナとナビゲーションに24pxの統一されたpaddingを使用。

05

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

区切りとしての、微細な1pxボーダーまたは下ボーダー

rgba(0, 0, 0, 0.05) 0px 1px 3px 0px

06

レイアウト

単一カラムからマルチカラムに適応する、密なメーソンスタイルグリッド。

07

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

ナビゲーション要素のhover時にスムーズなopacityトランジション · インタラクティブ状態における微細なボーダートランジション

ナビゲーションリンクとプロジェクト画像のopacity変化 · プロジェクト詳細ページへの直接ナビゲーション

08

コンポーネント

• button テキストベースのナビゲーションリンク（hover状態付き）
• card 個々のプロジェクトを表す、フルブリードの画像コンテナ
• chip プロジェクト映像内のカラフルなタグまたは小さなラベル
• input ミニマルまたは隠し
• hero ビューポート幅全体を占める、大きく没入感のあるプロジェクト映像

09

文体と禁止事項

• トーン 静かで自信に満ち、プロセス指向
• 見出し プロジェクト映像内に埋め込まれた短く記述的なタイトル
• CTA 微細で統合的、多くの場合シンプルなテキストリンク

• 複雑なカラーパレットを使用しない — スクリーンショットはモノクロの基盤（黒、白、グレー）を厳格に示している。
• 装飾的なタイポグラフィを使用しない — スクリーンショットはすべてのインターフェーステキストに機能的でヒューマニストサンセリフを使用している。
• 重いシャドウやグローを追加しない — スクリーンショットは一部の要素にのみ、非常に微細な1ピクセルのドロップシャドウを示している。
• プロジェクト画像に角丸を使用しない — スクリーンショットはメインコンテンツグリッドのシャープなエッジを示している。
• アイコンやバッジでインターフェースを clutter させない — スクリーンショットはテキストリンクのみのミニマルなヘッダーを示している。
• 多層的なナビゲーションシステムを作成しない — スクリーンショットはフラットで水平なトップレベルメニューを示している。
• 避ける: マーケティング調の言葉遣いまたは過度に熱狂的な表現
• 避ける: 大きくカラフルなアクションボタン
• 避ける: ワークから注意をそらす複雑なインタラクティブ装飾

10

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

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

11

System Prompt

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