iOS contact cards without an iPhone
That clean, minimal Apple contact screen, the big circular avatar, the name in bold, the row of action buttons for message, call, video, and mail. It’s one of the most recognizable interfaces in mobile design. And now you can recreate it with any details you want.
The iMessage Contact Mockup Generator renders a pixel-accurate replica of the iOS contact card view. Fill in a name, phone number, email, notes, and location. Upload a profile photo or use the built-in placeholder silhouette. The tool draws everything on canvas in Apple’s design language, SF Pro-style fonts, iOS-standard spacing, grouped list cards with rounded corners.
Download the result as a PNG. Use it anywhere.
Every iOS detail accounted for
Look closely at a real iOS contact screen and you’ll notice how precise Apple’s design system is. The status bar at the top with the time, signal bars, WiFi indicator, and battery icon. The “Messages” back link in blue. The “Done” button on the right. The large avatar centered with a gradient placeholder when there’s no photo.
This tool reproduces all of those elements. The action button row below the name uses Apple’s exact icon style and blue accent color. The contact info sections use grouped card layouts with rounded corners and subtle separators, matching iOS 17’s visual language.
What goes into the card
Contact name: renders large and bold, centered below the avatar. Just like tapping on someone’s name in Messages.
Phone number: appears in the info card below the action buttons. Shows up as a tappable blue link, matching iOS behavior.
Email address: sits in its own grouped card section, also styled as a blue link.
FaceTime number: separate from the phone number, listed in the same card group. Matches how iOS actually separates these fields.
Location: renders with a small pin icon in its own card section. Great for adding context to the contact.
Notes: the text field at the bottom of the card. iOS contacts support notes, and this tool renders them accurately.
Practical uses that justify the tool
Prank posts. Let’s be honest, half the internet wants to make fake celebrity contact screens for laughs. This tool does it without Photoshop skills.
UX portfolios. Showing iOS design competency in your portfolio? Include contact card mockups that demonstrate your understanding of Apple’s design patterns.
Tutorials and documentation. Writing a guide about iOS contacts for a tech blog? Generate clean example screenshots without using real contact data.
Video content. “POV: You get Zendaya’s number” thumbnail material. The contact card format is instantly recognizable and drives clicks.
App prototypes. Designing an app that integrates with iOS contacts? Use these mockups in your wireframes to show how the integration point looks.
Dark mode looks exactly right
Toggle dark mode and the entire card transforms. Black background (#000000), dark gray card backgrounds (#1C1C1E), white text, and that same blue accent color. It matches iOS dark mode precisely, not some approximation, but the actual system color values Apple uses.
The status bar elements, separators, and chevron icons all adjust their colors appropriately. Both modes produce professional-looking output.
Common questions
Can I upload any photo for the avatar?
Any image works. It gets clipped into a circle and scaled to fill the avatar area. Portrait and square photos look best. Without an upload, the tool renders Apple’s default gray gradient silhouette.
What resolution is the output?
390 by 844 pixels, standard iPhone 14 Pro screen dimensions. The image looks sharp on retina displays and works perfectly in presentations at any reasonable zoom level.
Does it include the FaceTime and call buttons?
Yes. The action button row includes message, call, video, and mail, all four standard iOS contact actions, each with the proper icon and blue accent color.
Can I hide certain fields?
Leave any field blank and it won’t render. Only fields with content appear in the final image. This keeps the mockup clean if you only need a name and phone number.
Is the font exactly Apple’s San Francisco?
The canvas uses the system font stack starting with -apple-system, which maps to San Francisco on Apple devices. On other platforms, it falls back to comparable system fonts. The visual difference is negligible.
Where is the data processed?
Entirely in your browser. The canvas renders locally, the PNG downloads directly. No server involvement, no data collection, no tracking.