厳選・オープン・無料

Instrument

Instrumentは、大胆なタイポグラフィ、3Dビジュアル、洗練されたエディトリアルレイアウトを融合したプレミアムデジタルエージェンシーです。

01

デザイン DNA

クリエイティビティとテクノロジーが出会うデジタルファーストのデザインエージェンシー。

02

カラー

ハイコントラストのモノクロームベースに、ヒーローエリアで遊び心ある3Dグラデーションアクセントを配します。

03

タイポグラフィ

grotesque-sans · sans-serif · monospace

• display352px · 400
• headline36px · 400
• body16px · 400

プライマリUIと本文テキストにはInstrument-Sansを使用します。 · エレガントなエディトリアルハイライトにはInstrument-Serifを使用します。 · テクニカルメタデータやタグにはInstrument-Monoを使用します。 · ディスプレイ見出しはタイトなトラッキングとハイコントラストで設定します。

04

余白

エディトリアルな余裕を持たせる広めの余白を備えた4pxグリッド。

05

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

1px solid rgba(7,7,8,0.5)

0 0 0 1px rgba(7,7,8,0.5)

06

レイアウト

大規模なフルブリードヒーローと積み重なるコンテンツセクションを備えた、グリッドベースの構成。

07

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

インタラクティブ状態向けのスムーズなカラートランジション。 · ホバー時の深みを演出する繊細なトランスフォームシフト。

カラーや背景の繊細なシフトで色を反転。 · スケールバウンスのない即座のビジュアルフィードバック。

08

コンポーネント

• button ハイコントラストのインク/背景を持つピル-shapedプライマリボタン。
• card 3Dまたは写真コンテンツを含む大きなエディトリアルカード。
• chip 細いボーダーを持つナビゲーション用の小さなピル-shapedタグ。
• input 下ボーダーを持つミニマルフォーム入力。
• hero 中央にプレイボタンを備えたフルブリード3Dアニメーションシーン。

09

文体と禁止事項

• トーン 自信に満ち、ミニマルでプロフェッショナル。
• 見出し 太字、大文字、タイトなトラッキング。
• CTA 直接的でアクション导向。

• マルチカラーグラデーションは使用しない — パレットは主にモノクロームで、特定のアクセントシーンのみ。
• すべてに角丸を使用しない — ヒーローはシャープなエッジと円を使用。
• 重いドロップシャドウを使用しない — 分離には繊細な1pxボーダーを使用。
• センターアラインの本文テキストを使用しない — レイアウトは厳格に左揃え。
• カジュアルまたはフレンドリーなフォントを使用しない — シャープでグロテスクなInstrumentファミリーに準拠。
• インタフェースを雑然とさせない — 広めの余白と明確な階層を使用。
• 避ける: 雑然としたレイアウト
• 避ける: 一般的なストックイメージ
• 避ける: 派手なマルチカラーグラデーション
• 避ける: 不必要なボーダーまたはシャドウ

10

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

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

11

System Prompt

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