Instagram

# Instagram Design System

## Visual Theme & Atmosphere
Visual-first, clean, lifestyle-focused. The interface is deliberately minimal to let photos and videos take center stage. The rainbow gradient (yellow → orange → pink → purple) brand mark adds vibrancy. Everything feels curated and aesthetic.

## Color Palette & Roles
| Token | Hex | Role |
|-------|-----|------|
| Primary | #E1306C | Brand accent, likes, hearts |
| Secondary | #833AB4 | Gradient component |
| Accent | #FCAF45 | Gradient component |
| Gradient | 45deg #FCAF45, #F77737, #E1306C, #C13584, #833AB4 | Brand gradient |
| Background | #FFFFFF | Main canvas |
| Surface | #FAFAFA | Cards, secondary |
| Text | #262626 | Primary text |
| Muted | #8E8E8E | Secondary text |

## Typography Rules
- **Font**: Instagram Sans, -apple-system
- **Base Size**: 16px
- **Body**: 1rem / weight 400 / line-height 1.5
- Compact typography to maximize content space

## Component Stylings
- **Buttons**: Minimal ghost or pill-shaped, blue or gradient
- **Cards**: White, no visible border, square aspect ratio
- **Grid**: 3-column photo grid, 2px gap
- **Avatar**: Circle, gradient border for stories

## Layout Principles
- Square aspect ratio for all visual content
- 3-column responsive grid
- Minimal UI chrome around content
- Story bar at top