---
name: About Instagram
description: "Excellent example of typography-as-hero design where the typeface specimen itself becomes the primary visual content"
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#1C1E21"
  secondary: "#8E8E93"
  tertiary: "#D300C5"
  neutral: "#D4D4D4"
  line: "rgba(28,30,33,0.12)"

typography:
  display:
    fontFamily: humanist-sans
    fontSize: 224px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "-4px"
  headline:
    fontFamily: humanist-sans
    fontSize: 40px
    lineHeight: 1.34
    fontWeight: 400
    letterSpacing: "-1.38px"
  body:
    fontFamily: humanist-sans
    fontSize: 12px
    lineHeight: 1.34
    fontWeight: 400
    letterSpacing: "normal"

rounded:
  sm: 3px
  md: 16px
  lg: 20px
  pill: 36px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  3xl: 48px

---

## Overview

A bold typographic showcase for Instagram's custom sans-serif typeface

*A master typography specimen showcasing a custom-designed font family*

## Colors

High contrast with vibrant accent colors against clean neutral backgrounds

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#1C1E21`)** — uses `ink` token
- **Secondary text (`#8E8E93`)** — uses `ink-soft` token
- **Accent (`#D300C5`)** — uses `accent` token
- **Muted (`#D4D4D4`)** — uses `muted` token
- **Borders (`rgba(28,30,33,0.12)`)** — uses `line` token

## Typography

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

- 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

## Layout

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

*Rhythm:* Vertical rhythm maintained through consistent base-4 spacing with generous padding for large typographic specimens

## Elevation & Depth

- Borders: Minimal, using color contrast rather than borders for visual separation

## Shapes

- `sm`: 3px
- `md`: 16px
- `lg`: 20px
- `pill`: 36px

## Components

- **button:** Minimal styling with background-color transitions and cubic-bezier easing
- **card:** Clean content blocks with rounded corners and subtle transitions
- **chip:** Not prominently featured
- **input:** Not prominently featured
- **hero:** Full-screen split layout with bold color blocking and oversized typography specimen

## Do's and Don'ts

**Don't:**
- 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

---

## System Prompt (paste into AI agent)

```
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.
```