---
name: Person Details Screen
description: Design recommendations for detail screens about individual people
---

# Person Details Screen Design Guidance

When designing a detail screen for an individual person (e.g., an employee, contact, or customer):

## Layout Structure

1. **Photo at the Top**: If a photo is available, it must be the largest and most prominent component at the top of the screen, appearing before the person's name. The photo should be the primary visual element that establishes identity and creates an immediate connection. It should dominate the visual hierarchy and be significantly larger than any other element on the screen.

2. **Name as Title**: The person's name should be displayed as the primary title below the photo, typically using a `ScreenTitle` component with the simple variant. The name should be visually secondary to the photo in terms of size and prominence.

3. **Subtitle**: The second most important text field (such as job title, company, or role) should be displayed as a subtitle below the name.

## Primary Contact Information

4. **Primary Contact Actions**: Include primary contact details with easy, tappable calls to action:
   - Call button/action
   - SMS/text button/action
   - Send email button/action

   These should be immediately visible and accessible, typically placed right below or adjacent to the photo. Use clear, recognizable icons and make these actions large enough to tap easily.

5. **Interactive Contact Information with Icons**: Key pieces of contact information displayed below the image and name should include interactive icons that clearly indicate they are tappable or clickable. Each piece of contact data should have multiple action icons:
   - **Phone numbers**: Display the phone number with both a phone icon (for calling) and a text/SMS icon (for messaging), both of which should be interactive and allow users to take action directly on that data
   - **Email addresses**: Display the email address with an email icon that allows users to compose and send an email
   - **Other contact methods**: Any other contact information should similarly include relevant interactive icons that enable direct action

   These icons serve a dual purpose: they visually communicate that the information is interactive, and they provide direct access to take action on that specific piece of data. The icons should be clearly associated with their corresponding contact information and should be large enough to tap easily.

6. **Directory Application Phone Number Requirement**: If this is a directory application (e.g., employee directory, contact directory, member directory), phone numbers must include a phone icon that is tappable/clickable to initiate a phone call. This is a mandatory requirement for directory applications to ensure users can quickly contact the person directly from the detail screen.

## Secondary Information

7. **Secondary Information Below**: All other information (address, company details, notes, tags, additional metadata) should be displayed below the primary contact section, clearly separated into distinct sections.