厳選・オープン・無料

Norgram

本質的なフォームと高コントラストモノクロームプレゼンテーションに焦点を当てた、洗練されたデザインスタジオのポートフォリオ。

01

デザイン DNA

ハイエンドのスカンジナビアンデザインスタジオギャラリー

02

カラー

深い黒の背景と鮮やかな白のタイポグラフィによる、高コントラストモノクロームパレット

03

タイポグラフィ

geometric-sans

• display87px · 400
• body12px · 400

大規模な表示見出しにはタイトな文字間隔 · 見出しと本文の両方でHelvetica Now Displayに強く依存 · スケールコントラストによって主に駆動する最小限のタイポグラフィ階層

04

余白

厳格な垂直間隔ではなく、プロジェクトのイメージによって駆動する不規則なグリッドベースのリズム

05

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

フローティングUI要素に 0 4px 12px rgba(0,0,0,0.15)

06

レイアウト

大規模なヒーローイメージとフローティングテキストオーバーレイを備えた非対称メーソリーグリッド

07

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

スライディングUIパネルの滑らかなentrance transitions · オーバーレイ要素のopacity fades · インタラクティブ要素のsubtle hover state transitions

インタラクティブ要素のsubtle opacityまたはtransform shifts · 滑らかなpanel transitions

08

コンポーネント

• button ナビゲーションタブ用のsmall rounded pillボタン
• card メタデータオーバーレイを備えたimage-dominantプロジェクトカード
• chip small borderedメタデータタグ
• input thin bordersのminimalテキスト入力
• hero オーバーレイされたメタデータを備えた、フルワイドまたはハーフワイドのシネマティックプロジェクトイメージ

09

文体と禁止事項

• トーン ミニマル、自信、権威的
• 見出し large, tight-tracked幾何学的サンセリフのステートメント
• CTA 控えめで機能的なナビゲーション

• 明るいアクセントカラーを使用しない — スクリーンショットは厳格なモノクロームパレットを示しています
• セリフフォントを使用しない — スクリーンショットは全体的にHelvetica Now Displayを使用しています
• 広い文字間隔を使用しない — スクリーンショットは大規模なスケールでもtight letter-spacingを示しています
• すべてにsmall border-radiiを使用しない — スクリーンショットはsquare corners alongside pill-shaped buttonsを示しています
• heavy drop shadowsを使用しない — スクリーンショットはminimal、subtle shadowsを示しています
• complex grid linesを使用しない — スクリーンショットは特定のUI要素を除き、clean、borderless layoutを示しています
• 避ける: 装飾的要素
• 避ける: 雑然としたレイアウト
• 避ける: 明るいアクセントカラー

10

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

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

11

System Prompt

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