iOS Human Interface Guidelines· Design Systemdeveloper.apple.com

Apple · Human Interface Guidelines

Design apps for everyone.

San Francisco is Apple's system typeface — SF Pro Display for headlines, SF Pro Text for body, automatically optical-size-matched to content. Every Apple product uses it.

Color Palette33 tokens

background#ffffff

surface#f5f5f7

surface-secondary#f2f2f7

ink#1d1d1f

on-primary#ffffff

primary#0071e3

primary-tint#cce2f9

focus-ring-tint#cce2f9

danger#ff3b30

success#34c759

warning#ff9500

attention#ffcc00

pink#ff2d55

purple#af52de

teal#5ac8fa

indigo#5856d6

gray-6#f2f2f7

gray-5#e5e5ea

gray-4#d1d1d6

gray-3#c7c7cc

gray-2#aeaeb2

gray-1#8e8e93

gray-alt#515154

label-secondary#515154

label-tertiary#424245

label-quaternary#c7c7cc

separator#d2d2d7

border#d2d2d7

shadow-subtle#f5f5f5

shadow-card#ebebeb

shadow-popover#dedede

shadow-modal#cccccc

gray-button-tint#ededee

Buttons

TypographyGoogle Font

Albert Sansbrand uses SF Pro Display

large-title

Beautifully designed.

34px · 700 · 0.374px

title-1

The SF typeface

28px · 700 · 0.364px

title-2

San Francisco is Apple's system typeface — SF Pro Display for headlines, SF Pro Text for body, automatically optical-size-matched to content. Every Apple product uses it.

22px · 700 · 0.352px

title-3

.system(.title1, design: .default, weight: .bold)

20px · 600 · 0.38px

headline

San Francisco is Apple's system typeface — SF Pro Display for headlines, SF Pro Text for body, automatically optical-size-matched to content. Every Apple product uses it.

17px · 600 · -0.374px

IconsSolar

Set: Solar · brand-matched

Formfocus ring

you@company.com

Password

••••••••

Card · Shapes

The SF typeface

San Francisco is Apple's system typeface — SF Pro Display for headlines, SF Pro Text for body, automatically optical-siz…

Design System

none

Elevation

RING

CARD

ELEVATED

Controls

Off

✓Checked

Unchecked

Selected

Option

Alerts

Heads up — a new version of the design system is available.

Saved. Your changes are live across all surfaces.

Some tokens are missing a contrast-safe pairing.

Couldn’t reach the server. Retry in a moment.

Badges

SolidSoftOutlineNewv2.0

FAQ

The SF typeface

San Francisco is Apple's system typeface — SF Pro Display for headlines, SF Pro Text for body, automatically optical-size-matched to content. Every Apple product uses it.

How does it integrate with my stack?

Is there a free tier?

Tabs

OverviewActivitySettings

DayWeekMonth

Stats

48.2k

Active users

+12.4%

$12.8k

MRR

+3.1%

99.9%

Uptime

−0.02%

Table

Member	Plan	Status
AQAvery Quinn	Pro	Active
JLJordan Lee	Team	Pending
SRSam Rivera	Free	Active

Avatars

AQJLSR+5

Avery Quinn

Online · Owner

Slider · Progress

Volume62%

Storage used78%

Tooltip · Popover

Brand-styled tooltipHover target

Navigation bar

Banner

Pricing

Pro

$24 /mo

Unlimited projects
Priority support
Custom domains

Stepper

CartDetails3Payment4Review

Breadcrumb

HomeDesign SystemiOS Human Interface Guidelines

Toast

Changes savedUndo

You have 3 new updates

Activity

Avery created a new project

2h ago

Jordan left a comment

5h ago

Sam shipped v2.0

1d ago

Notifications

AQAvery Quinn invited you to iOS Human Interface Guidelines.

2 minutes ago

JLJordan Lee approved your design tokens.

1 hour ago

SRSam Rivera mentioned you in a thread.

Yesterday

Code

theme.ts

// iOS Human Interface Guidelines tokens
export const theme = {
  primary: "#0071e3",
  radius: "12px",
}

Calendar

March 2026

SMTWTFS28291234567891011121314151617181920212223242526272829303112

No resultsTry adjusting your filters or search for something else.

Pagination

‹123…12›

Brand moment

Good design is as little design as possible. The HIG is Apple's answer to what 'as little' means on iOS.

iOS Human Interface Guidelines · Design System