# About Instagram · Design system migration spec

> Source: https://about.instagram.com/brand/type  ·  Curated by OpenDesign  ·  en

> Excellent example of typography-as-hero design where the typeface specimen itself becomes the primary visual content

## 1. Identity DNA

This design system functions as a master typography specimen, presenting a custom typeface not as a component library but as a finished artifact. Every decision, from color blocking to spatial rhythm, serves to articulate the character of the type itself, much like a museum exhibition is built around a single sculptural form.

**One-liner:** A bold typographic showcase for Instagram's custom sans-serif typeface
**Keywords:** Typography · Custom Font · Brand Identity · Design System · Instagram
**Analogy:** A master typography specimen showcasing a custom-designed font family

## 2. Color

The palette operates on a principle of high contrast, placing a vibrant magenta accent against a foundation of clean white and deep charcoal. This ensures the typographic specimens remain the primary visual focus, with color providing emphasis rather than decoration.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--ink` | `#1C1E21` | body text |
| `--ink-soft` | `#8E8E93` | secondary text |
| `--muted` | `#D4D4D4` | placeholder |
| `--accent` | `#D300C5` | single accent |
| `--line` | `rgba(28,30,33,0.12)` | divider |

**Color principle:** High contrast with vibrant accent colors against clean neutral backgrounds

The guiding principle is visual clarity through contrast, using bold chromatic choices to frame content rather than to fill it.

## 3. Typography

The typographic voice is defined by a humanist sans-serif category, set consistently at a regular weight of 400. Its character is revealed through oversized display settings, where tight negative letter-spacing and detailed glyph construction become the central content.

- **Display:** humanist-sans
- **Body:** humanist-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 224px | 1.0 | 400 | -4px | Hero display text showing large typographic specimens |
| headline | 40px | 1.34 | 400 | -1.38px | Section headings like 'Made to feel human' |
| body | 12px | 1.34 | 400 | normal | Body copy and descriptive text |

**Type rules:**
- Display type uses tight negative letter-spacing for impact
- Body text maintains generous line-height for readability
- Font weight stays at regular (400) throughout
- Large specimens show detailed glyph construction

## 4. Spacing

Vertical rhythm is established through a consistent base-4 spacing scale, creating a predictable and calm grid for the content blocks.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 / 128 px
- **Rhythm:** Vertical rhythm maintained through consistent base-4 spacing with generous padding for large typographic specimens

## 5. Surfaces

Depth is suggested not through shadow, but through the deliberate placement of color fields and the generous use of negative space. Visual separation is achieved by chromatic contrast between surfaces, maintaining a clean, borderless aesthetic.

- **Radius:** sm 3px · md 16px · lg 20px · pill 36px
- **Borders:** Minimal, using color contrast rather than borders for visual separation

## 6. Layout

The foundational layout is a split-panel hero, placing a bold color block against a clean field to showcase oversized typographic specimens. This structured skeleton prioritizes the specimen, with subsequent content blocks arranged in clean columns with ample whitespace.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Split-panel hero with large specimen on one side, clean content blocks with generous whitespace

## 7. Motion & Interaction

Motion is treated as a subtle layer of feedback, not a narrative element. Transitions are smooth and brief, using custom cubic-bezier easing to give interactive states a deliberate, crafted feel without drawing attention to the animation itself.

- **Durations:** micro 100ms · small 400ms · medium 750ms
- **Easing:** `cubic-bezier(0.33, 0, 0.67, 1)`
- **Patterns:**
  - Smooth background-color transitions for interactive states
  - Opacity fade-in effects with custom cubic-bezier timing
  - Transform animations for reveal effects

- **Hover:** Background color transitions with 100ms duration
- **Click:** Transform and opacity state changes
- **Transition:** All properties with smooth cubic-bezier easing
- **Keyboard:** Default cursor behavior with pointer states for interactive elements

## 8. Voice & Don'ts

The editorial voice is confident and craft-focused, favoring short, punchy statements that highlight the human qualities of the design. It avoids technical jargon, letting the typographic specimens speak for themselves with minimal interface clutter.

- **Tone:** Confident, craft-focused, and design-forward
- **Headline style:** Short, punchy statements emphasizing human qualities in design
- **CTA style:** Minimal, using arrow indicators rather than traditional button text
- **Avoid:** Technical jargon, over-explanation, or cluttered layouts

### Don'ts
- ❌ Don't use decorative fonts — the screenshot shows clean humanist sans-serif throughout
- ❌ Don't add drop shadows to text — the screenshot shows flat typography on solid backgrounds
- ❌ Don't use small display sizes — the screenshot shows oversized specimens at 224px+
- ❌ Don't add heavy borders — the screenshot uses color blocking instead of line separators
- ❌ Don't use multiple font weights — the screenshot shows consistent 400 weight only
- ❌ Don't clutter with UI elements — the screenshot prioritizes typography specimens over interface controls

The system deliberately excludes decorative typography, dark mode treatments, and excessive UI ornamentation to maintain an unwavering focus on the specimen.

## System Prompt (paste into AI tool)

```
This is a typography-focused brand showcase for Instagram's custom typeface, positioned as a premium design resource. Key colors include #1C1E21 for ink, #D300C5 for the vibrant magenta accent, #9B8FFF for secondary purple tones, and #FFFFFF for clean backgrounds. The typeface is a humanist sans-serif category with distinctive sheared terminals and quirks. Critical design rules: maintain generous whitespace around specimens, use tight negative letter-spacing for large display text, and keep font weight consistent at regular. Don't add decorative elements that compete with the typography. Don't use dark mode backgrounds for this showcase. Don't reduce specimen sizes below display scale.
```