厳選・オープン・無料
About Instagram
Instagramのカスタムサンセリフ書体のための、大胆なタイポグラフィショーケース
TypographyDesign ToolsEditorialPremiumExpressive
01
デザイン DNA
タイポグラフィカスタムフォントブランドアイデンティティデザインシステムInstagram
カスタムデザインされたフォントファミリーを披露するマスタータイポグラフィ見本
02
カラー
#D300C5Accent
#1C1E21Ink
#8E8E93Ink soft
#FFFFFFBG
#D4D4D4Muted
rgba(28,30,33,0.12)Line
クリーンなニュートラル背景に対する、鮮やかなアクセントカラーの高コントラスト
03
タイポグラフィ
humanist-sans
- display
224px · 400 - headline
40px · 400 - body
12px · 400
表示テキストはインパクトのためにきつい负の文字間隔を使用 · 本文テキストは可読性のために豊かな行間を維持 · フォントウェイトは通してレギュラー(400)に維持 · 大型の見本では詳細なグリフ構造を表示
04
余白
4px
8px
12px
16px
24px
32px
48px
64px
96px
128px
一貫したベース4のspacingと、大型タイポグラフィ見本のための豊かなpaddingで垂直リズムを維持
05
サーフェス (角丸 / 影 / 罫線)
sm · 3px
md · 16px
lg · 20px
pill · 36px
視覚的な区切りのためにボーダーではなく、色のコントラストを最小限に使用
06
レイアウト
1280container
12columns
24pxgutter
768 / 1024breakpoints
片側に大型見本、もう片側に豊かな余白をもったクリーンなコンテンツブロックを持つ分割パネルヒーロー
07
モーションとインタラクション
100msmicro
400mssmall
750msmedium
cubic-bezier(0.33, 0, 0.67, 1)easing
インタラクティブ状態のための滑らかなbackground-colorトランジション · カスタムcubic-bezierタイミングによるOpacityフェードイン効果 · reveal効果のためのTransformアニメーション
100msのdurationのbackground-colorトランジション · TransformおよびOpacityの状態変化
08
コンポーネント
- button background-colorトランジションとcubic-bezierイージングを用いた最小限のスタイル
- card 角丸と繊細なトランジションを持つクリーンなコンテンツブロック
- chip 主要には使用されていません
- input 主要には使用されていません
- hero 大胆なカラーブロッキングと過剰なタイポグラフィ見本を持つ、フルスクリーン分割レイアウト
09
文体と禁止事項
- トーン 自信に満ち、クラフトを重視し、デザインフロント
- 見出し デザインにおける人間らしさを強調する短く、力強いステートメント
- CTA 従来のボタンテキストではなく、矢印インジケーターを使用するミニマルなもの
- 装飾的なフォントを使用しない — スクリーンショットではクリーンなヒューマニストサンセリフが全体に使用されています
- テキストにドロップシャドウを追加しない — スクリーンショットではソリッド背景上のフラットなタイポグラフィが使用されています
- 小さな表示サイズを使用しない — スクリーンショットでは224px以上のオーバーサイズの見本が使用されています
- 重いボーダーを追加しない — スクリーンショットでは線区切りではなくカラーブロッキングが使用されています
- 複数のフォントウェイトを使用しない — スクリーンショットでは一貫して400ウェイトのみが使用されています
- UI要素で雑然としない — スクリーンショットではインタラクティブコントロールよりもタイポグラフィ見本を優先しています
- 避ける: 技術用語、過度な説明、または雑然としたレイアウト
10
パック内の実スクリーンショット
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏実ページから取得 · 実 computed styles
11
System Prompt
これはInstagramのカスタム書体に焦点を当てた、ブランドショーケースです。プレミアムデザインリソースとして位置づけられています。主なカラーにはインク用の#1C1E21、鮮やかなマゼンタアクセント用の#D300C5、セカンダリパープル用の#9B8FFF、クリーンな背景用の#FFFFFFが含まれます。書体はヒューマニストサンセリフのカテゴリで、特徴的な剪断端と癖があります。重要なデザインルール:見本の周囲に豊かな余白を維持し、大型表示テキストにはきつい负の文字間隔を使用し、フォントウェイトはレギュラーで一貫させます。タイポグラフィと競合する装飾的な要素を追加しないでください。このショーケースにダークモードの背景を使用しないでください。見本のサイズを表示スケール以下に縮小しないでください。
en · zh-CN · zh-TW · ja · ko