Light interfaceMeasured www.instagram.com

Instagram

A friendly, approachable login screen that feels light, simple, and welcoming.

This page is styled with Instagram’s own measured values. It is a private reference for AltLeads; their logo, brand and company-only fonts belong to them.

Colours

Each role is a value read from their live website, checked against their screenshots.

Background#FFFFFF
Page behind everything

Surface#F3F4F5
Cards, panels, menus

Text#111112
Headings and body

Muted text#737373
Secondary info

Line#D1D3D5
Dividers and outlines

Accent#0064E0
Main button, links, selection

On accent#FFFFFF
Text on the accent

Contrast

Text on background 18.9:1Muted on background 4.7:1Text on accent 5.4:1

Every colour found on their site

#737373#111112#686A6E#F3F4F5#28292B#FFFFFF#0064E0#E0E2E4#D1D3D5#CCD0D5

Typography

Headings use -apple-system (free). Body text uses -apple-system (free).

label

Optimistic · 15px · 400

Mobile number, username or email

Corners & shadows

Corner sizes used

22px

16px

40px

Shadows

Shadow 1

Components, rebuilt from their values

Live and clickable. Built by us from the numbers above, not copied from their code. Sample CRM data.

Buttons

Navigation

WorkspaceCompanies Contacts Meetings

Disposition

InterestedCallbackBengaluru

Hide do-not-call

Next call

Licious · Admin head

Wants a proposal before the cafeteria contract renews in March.

Tabs

Table

Company	Owner	Status	Last touch
Zomato Food tech · Gurugram	PR	Callback	18 days ago
Licious Food tech · Bengaluru	RM	Interested	Today
Delhivery Logistics · Gurugram	AS	No answer	35 days ago

Toast

Call logged · callback on Friday

Real components from their site

Cropped from Instagram’s live website. Click to enlarge.

No components could be cropped from their page.

Icons

2 icons copied exactly from their site’s code.

Product screens

10 real screens from web image search, each linked to where it was found.

Instagram product screen: 1200 × 606 — 1200 × 606

Instagram product screen: 1688 × 2832 — 1688 × 2832

Instagram product screen: 1600 × 982 — 1600 × 982

Instagram product screen: 1024 × 840 — 1024 × 840

Instagram product screen: 1920 × 1008 — 1920 × 1008

Instagram product screen: 800 × 313 — 800 × 313

Instagram product screen: 1600 × 1200 — 1600 × 1200

Instagram product screen: 1200 × 675 — 1200 × 675

Instagram product screen: 1000 × 644 — 1000 × 644

Instagram product screen: 940 × 788 — 940 × 788

Do & don’t

What makes it Instagram

Plain white background with soft grey input fields and borders
A single friendly blue used for the primary action and links
Fully rounded pill-shaped buttons and inputs

Keep the background plain white with light grey form fields
Use one blue accent for the main button and links only
Round all buttons and inputs generously

Don’t

Don't use dark or moody backgrounds for a sign-in style flow
Don't add multiple accent colours
Don't use sharp-cornered inputs or buttons

For AltLeads: Borrow the simple, friendly login-style layout for a lightweight rep sign-in or quick-access screen that feels approachable, not corporate.

Copy the tokens

Paste into any project to try this look.

/* Instagram · values measured from https://www.instagram.com/ · reference only, their brand belongs to them */
:root {
  --bg: #FFFFFF;
  --surface: #F3F4F5;
  --text: #111112;
  --muted: #737373;
  --line: #D1D3D5;
  --accent: #0064E0;
  --on-accent: #FFFFFF;
  --radius-button: 22px;
  --radius-card: 16px;
  --radius-small: 6px;
  --button-height: 40px;
  --font-heading: "-apple-system", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "-apple-system", system-ui, -apple-system, "Segoe UI", sans-serif;
  --shadow: rgb(255, 255, 255) 0px 0px 0px 2px, rgb(24, 119, 242) 0px 0px 0px 4px;
}