Instagram

Overview

Instagram is a visual-first social platform designed to celebrate authentic moments and foster connection through shared experiences. The design system embodies 'Social Minimalism'—a philosophy that strips away unnecessary complexity while maintaining vibrant, expressive brand moments. The aesthetic prioritizes content over chrome: clean white surfaces (rgb(255, 255, 255)), precise typography hierarchies, and strategic use of Instagram's signature blue accent (#0095F6) to guide user attention toward actions and key interactions. The emotional response is one of clarity and approachability—users feel empowered to share without friction, supported by a system that gets out of the way. Instagram's voice is conversational, inclusive, and celebratory. The brand speaks in present tense, uses direct address ('your close friends'), and celebrates human connection over technology. Vocabulary patterns favor warmth ('moments', 'share', 'everyday') over corporate formality. Example sentence in brand voice: 'See everyday moments from your close friends.'

Colors

Instagram's color palette is anchored in a light, neutral foundation with strategic accent deployment. The primary surface is pure white (#FFFFFF), creating maximum contrast and legibility for photo-centric content. The surface stack progresses through carefully calibrated grays: surface-container (#F0F2F5) for secondary surfaces, surface-container-high (#EBEDF0) for hover states, and surface-container-highest (#DADDE1) for disabled or de-emphasized elements. Text hierarchy uses on-surface (#262626) for primary content and on-surface-variant (#65676B) for secondary labels and metadata. Primary accent is Instagram's signature blue (#0095F6), deployed on all CTAs, active states, and focus indicators—this is the brand's most recognizable color and appears on the 'Log in' button, input focus r

Typography

Instagram's type system balances readability with personality through a unified sans-serif stack: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif. This system-font approach ensures native rendering on all platforms while maintaining consistent metrics. Display (56px, 700 weight, -0.02em letter-spacing) anchors hero messaging and brand moments. Headline-lg (36px, 600 weight) introduces major sections. Headline-md (28px, 600 weight) and title-lg (20px, 600 weight) create clear information hierarchy. Body-lg (18px, 400 weight, 28px line-height) and body-md (15px, 400 weight, 24px line-height) handle primary content and form labels. Label-md (14px, 600 weight, 20px line-height) and label-sm (12px, 500 weight, 16px line-height) are reserved for buttons, badge

Layout

Instagram uses a fluid, mobile-first grid system with a maximum container width of 1024px, ensuring the design scales gracefully from 320px (mobile) to desktop. The grid is 12 columns with 16px gutters (--gutter: 16px). Page rhythm is established through consistent spacing: lg spacing (24px) separates major sections, md spacing (16px) divides cards and form groups, and sm spacing (8px) provides breathing room within components. The login page exemplifies this: the form container sits in a centered column with 24px margins on mobile, expanding to a two-column layout (hero + form) on tablet and desktop. White-space is treated as a first-class design element—the 40px vertical rhythm between sections prevents cognitive overload and guides the eye naturally down the page. Input fields use 40px

Elevation & Depth

Elevation in Instagram's design system is achieved through subtle shadows and layering, never through color darkening or artificial depth. The shadow palette uses three tiers: sm (0px 1px 2px 0px rgba(0, 0, 0, 0.1)) for cards and subtle lifts, md (0 2px 4px 0 rgba(0, 0, 0, 0.1)) for standard interactive elements, and lg (0 12px 28px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.1)) for modals and popovers. Shadows use black with 10–20% opacity, never pure black, to maintain the light, airy aesthetic. Hover states on cards transition from md to lg shadow over 200ms (cubic-bezier(0.08, 0.52,

Shapes

Instagram's shape philosophy is 'Accessible Modernism'—rounded corners are used strategically to soften the interface while maintaining clarity and hierarchy. Buttons use full border-radius (9999px / border-radius: 50%) to create pill-shaped CTAs that feel friendly and inviting; this is most visible on the 'Log in' button (40px height, full radius). Form inputs use rounded.DEFAULT (6px) for a subtle, modern appearance that's neither harsh nor overly rounded. Cards and containers use rounded.lg (12px) to create clear visual separation while maintaining a contemporary feel. Smaller interactive e

Components

Action Elements Buttons are the primary interaction pattern. Primary buttons (button-primary) use Instagram blue (#0095F6) background with white text, 40px height, full border-radius (9999px), and 10px vertical / 24px horizontal padding. On hover, the background shifts to #0081D5 over 150ms (cubic-bezier(0.08, 0.52, 0.52, 1)). On active/pressed, the background darkens to #0064B1. Secondary buttons (button-secondary) are transparent with a 1.5px blue border and blue text; on hover, they fill with primary-container (#E7F3FF). Tertiary buttons (button-tertiary) are minimal—transparent background, gray text, 36px height, 8px vertical / 16px horizontal padding, rounded.md (8px)—used for secondary actions like 'Forgot password?'. All buttons use label-md typography (14px, 600 weight, 20px li

Do's and Don'ts

**Do**

• Do use primary blue (#0095F6) exclusively for CTAs, focus states, and active indicators—it's Instagram's most recognizable color and should never be diluted or overused.
• Do maintain 40px minimum height on all touch targets (buttons, inputs, list items) to ensure accessibility on mobile devices.
• Do apply full border-radius (9999px) only to primary buttons; use 6–12px for containers and inputs to maintain visual hierarchy.
• Do transition interactive states over 150ms using cubic-bezier(0.08, 0.52, 0.52, 1) for a consistent, snappy feel.
• Do use the surface-container stack (#F0F2F5, #EBEDF0, #DADDE1) for secondary surfaces and hover states—never introduce new grays.
• Do pair body-md (15px) with 24px line-height for all form labels and body copy to ensure readability at any size.

**Don't**

• Don't use shadows darker than rgba(0, 0, 0, 0.2) or spread radius greater than 0px—Instagram's shadows are subtle and never dramatic.
• Don't apply border-radius greater than 12px to cards or containers; it dilutes the modern, intentional aesthetic.
• Don't mix font families or use system-ui, sans-serif, or inherit—always use the full -apple-system stack for consistency.
• Don't introduce new accent colors beyond primary (#0095F6), secondary (#1877F2), and tertiary (#F3425F)—the palette is intentionally constrained.
• Don't animate border-radius, opacity, or transform simultaneously on the same element—it creates visual jank and feels unpolished.
• Don't use color alone to communicate state; always pair with text labels, icons, or spatial changes for accessibility.