厳選・オープン・無料

About Instagram

Instagramのカスタムサンセリフ書体のための、大胆なタイポグラフィショーケース

TypographyDesign ToolsEditorialPremiumExpressive
About Instagram のスクリーンショット
↓ デザインシステムをダウンロード (4 MB)OpenDesign で開く

オリジナル: https://about.instagram.com/brand/type

📦 パックの中身を見る →

01

デザイン DNA

タイポグラフィカスタムフォントブランドアイデンティティデザインシステムInstagram

カスタムデザインされたフォントファミリーを披露するマスタータイポグラフィ見本

02

カラー

#D300C5Accent
#1C1E21Ink
#8E8E93Ink soft
#FFFFFFBG
#D4D4D4Muted
rgba(28,30,33,0.12)Line

クリーンなニュートラル背景に対する、鮮やかなアクセントカラーの高コントラスト

03

タイポグラフィ

humanist-sans

表示テキストはインパクトのためにきつい负の文字間隔を使用 · 本文テキストは可読性のために豊かな行間を維持 · フォントウェイトは通してレギュラー（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

コンポーネント

09

文体と禁止事項

10

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

About Instagram — 桌面首屏（hero）
桌面首屏（hero）
About Instagram — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
About Instagram — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
About Instagram — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
About Instagram — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
About Instagram — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
About Instagram — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
About Instagram — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
About Instagram — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
About Instagram — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
About Instagram — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
About Instagram — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
About Instagram — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
About Instagram — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
About Instagram — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
About Instagram — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
About Instagram — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
About Instagram — 移动首屏
移动首屏

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

11

System Prompt

これはInstagramのカスタム書体に焦点を当てた、ブランドショーケースです。プレミアムデザインリソースとして位置づけられています。主なカラーにはインク用の#1C1E21、鮮やかなマゼンタアクセント用の#D300C5、セカンダリパープル用の#9B8FFF、クリーンな背景用の#FFFFFFが含まれます。書体はヒューマニストサンセリフのカテゴリで、特徴的な剪断端と癖があります。重要なデザインルール：見本の周囲に豊かな余白を維持し、大型表示テキストにはきつい负の文字間隔を使用し、フォントウェイトはレギュラーで一貫させます。タイポグラフィと競合する装飾的な要素を追加しないでください。このショーケースにダークモードの背景を使用しないでください。見本のサイズを表示スケール以下に縮小しないでください。

このセンスを AI エージェントへ

この設計の機械可読な仕様——カラー・タイポ・モーションまで——をそのまま AI エージェントに渡せます。

OpenDesign スキル ↗ · このパック（エージェント用） ↗

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