Instagram

Overview

Instagram is a visual-first social platform designed to celebrate everyday moments and foster connection through authentic, expressive sharing. The design system embodies 'Accessible Minimalism'—a philosophy that prioritizes clarity and usability while maintaining vibrant, emotionally resonant accent colors that drive engagement and action. The interface serves billions of users globally, requiring a system that is both intuitive and scalable across devices, languages, and cultural contexts. The brand personality is warm, inclusive, and contemporary: Instagram speaks in the language of its community, using conversational tone, celebratory language, and visual metaphors that feel natural and human. The emotional response is one of connection and possibility—users should feel empowered to share, discover, and engage without friction. Example: 'See everyday moments from your close friends' communicates both the feature and the emotional benefit in a single, human-centered phrase.

Colors

Instagram's color palette is anchored by a vibrant, trust-driven primary blue (#0095F6) used for all primary CTAs, focus states, and brand-critical interactions. This blue is derived from the Meta design language and appears on the 'Log in' button, input focus rings, and link text. The primary blue is supported by a light tint (#E7F3FF) for container backgrounds and a darker variant (#0064E0) for pressed states. Secondary colors include a health-positive green (#31A24C) for success states and affirmations, and a warm red (#F3425F) for notifications and emotional content (likes, hearts). The surface stack uses pure white (#FFFFFF) as the dominant background, with carefully calibrated grays for hierarchy: surface-container (#F0F2F5) for secondary surfaces, outline (#CED0D4) for borders, and

Typography

The type system uses a single, system-native font stack (-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif) to ensure consistency across platforms and reduce load time. Display (56px, 700 weight) is reserved for hero headlines and major page titles; Headline-lg (36px, 600 weight) anchors section headers; Headline-md (28px, 600 weight) is used for subsections and card titles. Body-lg (16px, 400 weight) and Body-md (15px, 400 weight) form the primary reading layer, with line-height set to 24px and 22px respectively to ensure comfortable reading at small sizes. Label-md (14px, 500 weight) and Label-sm (12px, 500 weight) are used for buttons, form labels, and metadata. All headlines use -0.01em to -0.02em letter-spacing to create visual tightness and sophistic

Layout

Instagram uses a fluid, mobile-first grid system with a maximum container width of 1280px on desktop. The page rhythm is built on a 12-column grid with 16px gutters (gutter spacing), allowing flexible 2-column, 3-column, and 4-column layouts depending on viewport. The login page shown uses a 2-column split (50/50 on desktop, stacked on mobile) with the hero imagery on the left and the form on the right. Section separation uses lg spacing (24px) between major content blocks; internal card padding uses md spacing (16px). The spacing scale is semantic: xs (4px) for micro-interactions, sm (8px) for compact components, md (16px) for standard padding and margins, lg (24px) for section breaks, and xl (32px) for major layout shifts. Whitespace is generous and intentional—the form inputs have 12px

Elevation & Depth

Depth in Instagram's design is conveyed through subtle shadows and layering rather than dramatic elevation changes. The shadow system uses three levels: sm (0px 1px 2px rgba(0, 0, 0, 0.1)) for subtle borders and dividers; md (0 2px 4px rgba(0, 0, 0, 0.1)) for standard cards and modals; lg (0 12px 28px rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.1)) for elevated surfaces like popovers and dropdowns. Input fields and form elements use a 1px solid border at {colors.outline} (#CED0D4) rather than shadows, maintaining a flat, modern aesthetic. On focus, inputs receive a 2px solid border in primar

Shapes

Instagram employs 'Soft Modernism' in its shape language—a balance between geometric precision and human warmth. Buttons use full-radius (border-radius: 9999px) to create pill-shaped, friendly CTAs that feel approachable and clickable. Input fields use md radius (8px) for a slightly softer corner that suggests form-like structure without feeling rigid. Cards and containers use lg radius (12px) to create visual distinction from inputs while maintaining cohesion. Smaller UI elements like badges and chips use full-radius (9999px) to emphasize their compact, self-contained nature. The rationale is

Components

Action Elements Buttons are the primary driver of user intent on Instagram. The primary button (button-primary) uses the brand blue (#0095F6) background with white text, full-radius (9999px), and 12px vertical / 24px horizontal padding to create a 44px tall, pill-shaped CTA. On hover, the background shifts to #0082FB (a slightly darker blue); on active/pressed, it becomes #0064E0. The button uses label-md typography (14px, 500 weight, 20px line-height) for consistent sizing. Transition: all 200ms ease-out. Secondary buttons (button-secondary) use a transparent background with a 1.5px primary blue border and primary blue text, maintaining the same dimensions and radius. On hover, the background fills with primary-container (#E7F3FF). Tertiary buttons (button-tertiary) use no border or b

Do's and Don'ts

**Do**

• Do use the primary blue (#0095F6) exclusively for CTAs, focus states, and brand-critical interactions—it is the most recognizable element of the Instagram brand.
• Do maintain generous whitespace (md spacing: 16px minimum) between form fields and sections to reduce cognitive load and improve scannability.
• Do apply full-radius (9999px) to all primary buttons and badges to create a warm, approachable, social-first aesthetic.
• Do use the system font stack (-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto) to ensure fast load times and platform-native consistency.
• Do apply focus rings (2px solid primary, 2px offset) to all interactive elements to ensure keyboard accessibility and clear focus indication.

**Don't**

• Don't use the primary blue for body text, backgrounds, or non-interactive elements—reserve it for actions and focus states to maintain visual hierarchy.
• Don't apply shadows larger than lg (0 12px 28px) to avoid creating a heavy, dated appearance that conflicts with Instagram's modern, lightweight aesthetic.
• Don't use sharp corners (0px radius) on buttons or primary containers—the brand relies on soft, rounded shapes to feel human and approachable.
• Don't mix font families or use custom fonts in the system—the native stack ensures performance and consistency across all devices and regions.
• Don't apply letter-spacing greater than -0.02em on headlines or less than 0em on body text—maintain the natural rhythm of the system font stack.