iOS Design Spec — Instagram
Monochrome chrome with the signature gradient as the only chromatic accent. SF Pro ramp, color tokens, motion + haptics for SwiftUI / Expo agents.
Design System Inspiration of Instagram (iOS)
1. Visual Theme & Atmosphere
2. Color Palette & Roles
Primary (Monochrome)
Interactive
Brand Gradient (Reserved)
Dark Mode Surfaces
Light Mode Surfaces
# Design System Inspiration of Instagram (iOS) ## 1. Visual Theme & Atmosphere Instagram's iOS app is a study in chromatic restraint punctuated by one unforgettable gradient. The entire chrome — nav bar, tab bar, icons, typography — is rendered in pure monochrome (black on white, or white on true black), creating a neutral frame that lets photos and videos become the only colorful thing on screen. The content is the product; the interface is the picture frame, and the frame is deliberately invisible. This is the anti-skeuomorphic endgame — a UI so quiet that a user's 1:1 photograph, a friend's selfie, or a Reel's saturated grade commands 100% of the visual attention. The single chromatic exception is the Instagram logomark gradient — that famous purple-to-pink-to-orange-to-yellow sweep (`#833AB4` → `#FD1D1D` → `#FCAF45`) — which appears in exactly three places: the app icon, the Stories ring for unread stories, and the Reels/Create action. Nowhere else. No buttons, no accents, no…
By @meliwat - License: MIT
Raw markdown