Design standards overview
Visual identity
Foundations
Interaction and controls
Navigation and wayfinding
Search controls
Cards
Banners
Accordions
Heroes
Forms
Media
Page types
Standard scope
This standard applies to:
- pennmedicine.org
- All Penn Medicine websites
- Penn Medicine mobile applications
- All Penn Medicine digital products
Overview
Interactions and controls are typically used to:
- Guide users: Clearly communicate available next steps.
- Trigger user action: Lead users to take action.
- Gather information: Prompt users for data in accurate formats.
- Provide options: Make it easy for users to understand, refine and make choices.
Use cases
Each interaction or control serves a specific purpose and should be used consistently across the digital ecosystem.
Component
Design System name
Design System name
Component type
When to use
Buttons
Button
Icon Button
Button
Icon Button
Interaction
Buttons are used perform an action on the current page such as submitting a form.
Links
Link
Hyperlink
Link
Hyperlink
Interaction
Used to navigate the user to another page, section, or website.
Tags
Small Tag
Service Tag
Small Tag
Service Tag
Interaction
Used to highlight attributes of a piece of content. Tags help users quickly scan and understand key features. In the case of interactive rating tags, they also help users navigate to relevant content.
Filters
Chips items
Chips tags (Filter tags)
Chips as dropdown (Filter dropdown)
A to Z Filter item
Filter A to Z
Chips items
Chips tags (Filter tags)
Chips as dropdown (Filter dropdown)
A to Z Filter item
Filter A to Z
Interaction
Used for interactive filtering and refinement. Chips support single and multi-select filters and can include dropdowns for longer lists. A to Z filters help users quickly navigate to options. They allow users to sort, search, filter, and select.
Form fields
Inputs
Dropdown items
Dropdown
Dropdown with Sections
Search input
Calendar slots
Radio Stack
Checkbox Stack
Slider
Toggletip
Inputs
Dropdown items
Dropdown
Dropdown with Sections
Search input
Calendar slots
Radio Stack
Checkbox Stack
Slider
Toggletip
Interaction
Used when collecting information or search terms from users.
Controls
Pagination
Radio Button
Checkbox
Switch
Pagination
Radio Button
Checkbox
Switch
Controls
Pagination controls are used to guide users through a multi-page list of search results.
Radio buttons are best used when asking users to make a single selection.
Checkboxes are used to allow users to select multiple items or acknowledge information
Use the switch when the intended effect is to immediately change something on the screen from a default state, such as form options or language
Radio buttons are best used when asking users to make a single selection.
Checkboxes are used to allow users to select multiple items or acknowledge information
Use the switch when the intended effect is to immediately change something on the screen from a default state, such as form options or language
Button and Icon Button
There is always a primary button component and there may also be a secondary button.
The button component includes the following elements:
- Left icon
- Right icon
- Text
The icon button is a simple design with one element:
- Icon
Links and Hyperlinks
Links may include the following elements:
- Left icon
- Right icon
- Text
Hyperlinks include the following elements:
- Text
- Underline
Tags
Tags may be in the form of text or may include icons to denote a service or category.
The text tag, referred to as the Small Tag in the design system, includes the following elements:
- Text
- Rating number
- Stars rating
- Counting number
Service tags include the following elements:
- Icon
- Text
- Pride Pattern
- Tool Tip
Form fields
Form fields include the following elements:
- Inputs (Text General, Text Area, Email, Phone Number, Date & Password)
- Label
- Asterisk (indicating required field)
- Tooltip
- Text Field
- Input Icon
- Show/Hide icon
- Dropdown
- Dropdowns
- Label
- Asterisk (indicating required field)
- Tooltip
- Sections
- Text
- Search inputs
- Text
- Information icon
- Calendar slots
- Radio buttons
- Check Boxes
- Slider
- Toggletip
For form layout and use options, refer to Forms.
Filters
Filters may utilize chips or A to Z filtering options. This design system includes standard chips, chips with dropdown, and chips as filter tags.
Chips include the following elements:
- Chip Button text
- Chip Tag
- Chip Tag Label
- Chip Tag Button text
- Chips dropdown include the following elements:
- Dropdown Button text and chevron
- Dropdown search bar
- Text - available option for each dropdown
Filter A to Z includes the following elements:
- Label - topical or category (for desktop)
- A to Z filter buttons (for desktop)
- Topical search A to Z (for mobile)
A to Z desktop
A to Z mobile
A to Z mobile open
A to Z mobile letter selected
Controls
Controls include the following elements:
- Radio buttons
- Arrow controls
- Pagination elements
- Checkboxes
- Switches
Radio buttons are best used when asking users to make a single selection.
Arrow controls include a link with icon and they serve two functions. First, they help users operate sliders. Arrow controls also help users navigate back and forth on pages that require pagination.
Pagination elements are individual components that make up a pagination control, allowing users to navigate through sets of content that are divided into discrete pages.
Checkboxes are best used for situations where you are providing users the ability to select multiple options.
Use switches when the intended effect is to immediately change something on the screen from a default state, such as form options or language.
Behavior
Interactive
- Clickable elements (like buttons, chips, tags, and links) should provide clear visual feedback when hovered, focused, or pressed.
- Keyboard navigation must be supported for all controls, including tabbing through inputs, triggering buttons with Enter or Space, and using arrow keys where applicable.
- Form inputs should validate on submission and show real-time errors or guidance where possible.
- Chips and filters should update content immediately or show that an update is in progress.
- Pagination and carousels should provide clear next/previous behavior and not reset user context unexpectedly.
Non Interactive
- Non-interactive elements (like static text or containers) should be visually distinct from interactive ones and never trigger unexpected behaviors.
States
- Disabled states should be clearly styled and used only when necessary (e.g. preventing submission until required fields are complete).
- Loading states (e.g. spinners or skeletons) should be used to indicate background activity, especially for actions like filtering, submitting, or searching.
Customizable elements
The interaction and control elements offer a flexible structure, allowing for customization of content. The layout supports a variety of elements that can be toggled on or off to create a tailored experience. Below are the key components of the design.
Buttons
Element
Required/Optional
Guidelines
Specs
Left icon
Optional for call-to-action button
Use when the icon reinforces the action, such as a calendar for “Schedule” or a phone for “Call.”
20px x 20px
Right icon
Optional for call-to-action button
Use when the action links externally or navigates forward, e.g., an arrow icon for “View all.”
20px x 20px
Text
Required for call-to-action button
Keep button labels short (ideally 2–3 words); max 2 lines. When using 2 buttons, the primary CTA should use the primary button color which is more prominent than the secondary button color.
16px, Bold, Sentence case
Icon
Required for icon-only button
Use when space is limited or when the icon alone clearly conveys the action.
20px x 20px SVG icon, aligned center
Links
Element
Required/Optional
Guidelines
Specs
Left icon
Optional
Use when the icon provides additional meaning (e.g., a plus/minus to expand or collapse content).
16px x 16px
Right icon
Optional
Use to indicate direction or external navigation (e.g., arrow for “View all”). Avoid using in primary/secondary buttons.
16px x 16px
Text
Required
Keep link text concise and descriptive—ideally one line, never more than two. Avoid vague phrases like “click here.”
16px, Medium, Sentence case
Underline
Required if no icon is present. Optional when icons are present.
Use when there are no icons to convey that the text is clickable.
1px underline, color: #005EB8
Tags
Element
Required/Optional
Guidelines
Specs
Icon
Optional
Used only for service tags to reinforce the meaning (e.g., checkmark, video, inclusive icon). Not used in text or rating tags.
16px x 16px
Shield with logo
Optional
Used to convey brand affiliation.
16px x 16px for Shield
14 px, Bold for logo
14 px, Bold for logo
Rating number, stars rating, counting number
Optional
Used to provide rating information
15px, Bold for rating number.
16px height for stars rating
15px, Regular for counting number, surrounded by parenthesis
16px height for stars rating
15px, Regular for counting number, surrounded by parenthesis
Text
Required, unless ratings tag
Keep tag text short—max 22 characters, 1 line. Avoid wrapping.
14px, Medium, Sentence case
Tooltip
Optional
Use when tag content is abbreviated or when extra explanation improves clarity/accessibility.
Appears on hover or focus
Form fields
Text field
Element
Required/Optional
Guidelines
Specs
Label
Required
Describes the field and should always be visible and programmatically linked.
14px, Medium, Sentence case
Asterisk
Optional
Indicates a required field. Include screen reader support.
12px, Red
Tooltip
Optional
Use for clarifying or explaining specific fields.
Appears on hover or focus
Text field
Required
Use text inputs for single-line fields like names, email addresses, and phone numbers.
Use Text areas for longer responses like comments.
Use Text areas for longer responses like comments.
1px border, min 44px tall
Input icon
Optional
Use for meaningful cues (e.g., calendar, search). Avoid decorative use.
16px x 16px
Show/Hide icon
Optional
Used in password fields to toggle visibility.
Positioned at right edge
Dropdown
Optional
Used on phone number fields to select the country code
Dropdown inputs
Element
Required/Optional
Guidelines
Specs
Label
Required
Same as text inputs: always visible and accessible.
14px, Medium, Sentence case
Asterisk
Optional
Use to show required fields.
2px, Red
Tooltip
Optional
Use when clarification is needed.
Appears on hover or focus
Dropdown icon
Required
Indicates the dropdown can be expanded.
Down arrow, 16px
Dropdown items
Required
List of selectable options.
Text-only or icon + text
Search bar
Optional
Used for searchable dropdowns or directories.
Input with icon
Scroll bar
Required (if list is long)
Appears when the dropdown exceeds the visible area.
Native scroll behavior
Country code selector
Required (for phone inputs)
Lets users choose international prefixes. Defaults to +1 for U.S. users.
Dropdown format
Filters
Standard Chips
Element
Required/Optional
Guidelines
Specs
Chip text
Required
Short label describing the filter or category. Keep under 22 characters.
14px, Medium, Sentence case
Number
Optional
Use to show item counts or selected filters (e.g., “Specialties (3)”).
12px, Regular
Radio button
Optional
Use when chips behave like single-select filters.
Standard radio styling
Dropdown Chips
Element
Required/Optional
Guidelines
Specs
Chip text
Required
Label for the dropdown trigger. Reflects default state (e.g., “Filter by…”).
14px, Medium, Sentence case
Selected label
Required (after selection)
Updates to show selected item(s) if only one filter is applied.
14px, Medium
Multiple selection icon
Optional
Appears when more than one item is selected.
Icon (3 dots or count)
Dropdown icon
Required
Indicates expandable menu.
Down arrow, 16px
Dropdown section
Required
Reveals list of filters. Can include checkboxes, search bar, or scroll.
Max height w/scroll if needed
A to Z filtering
Element
Required/Optional
Guidelines
Specs
Label
Required
Label to describe what content is being filtered or to guide user
18px, Medium Bold, Sentence case
Filter A to Z
Required
Display when browsing long lists alphabetically (e.g., Conditions, Specialties).
Sticky on mobile
Controls
Element
Required/Optional
Guidelines
Specs
Radio buttons
Optional
Radio buttons are best used when asking users to make a single selection.
32px x 32px
Arrow controls
Optional
Used to operate sliders and navigate back and forth on pages that require pagination.
64px x 64px
Checkboxes
Optional
Used in situations where you are providing users the ability to select multiple options.
32px x 32px
Switch
Optional
Used to immediately change something on the screen from a default state, such as form options or language.
52px x 32px
Guidelines (do’s and don’ts)
Do
- Do limit characters in button text to 2 lines maximum.
- Do use the arrow icon on buttons that take users to an external website.
- Limit the use of buttons to no more than 2 buttons on each component, i.e., a primary and secondary call-to-action (CTA) button.
- When using 2 buttons for contacting and scheduling, make scheduling the primary button.
- Do limit any text, logo and service tags to 22 characters and 1 line of text per tag.
- Do keep text and no container tags on one line.
- Do follow these color guidelines for service tags, in order to meet typical user expectations.
- Use the neutral color for an icon serving informative purposes.
- Use the green color for indicating availability.
- Use the red color to indicate non-availability or error items.
- Do use plus/minus icons next to link to expand or compress the number of items shown in the organism
- Do use the arrow icon when the link takes users to other pages on the website
- Do use an underline when a link does not use any icons
- Use text inputs when you are seeking an open-ended response.
- When using the chip as a filter button, do show the label with a single selected result. When more than one filter is selected, show a multiple results icon next to the button text.
- When using chips as filter tags, do consider using the radio button to communicate to the user that the tag will be for filter selection.
- Do use checkboxes when you want a user to select multiple options.
Don't
- Don’t use the arrow on the primary and secondary buttons.
- Avoid using the call-to-action button on components other than page heroes, location cards or provider cards.
- Don’t overextend characters on tags
- Do keep text and no container tags on one line
- Don’t use the arrow icon when the link takes users to a section of the same page that they are currently on.
- Don’t write link text that is longer than 2 lines.
- Don’t use text inputs when the response you require is limited to a pre-defined set of options. Instead, use a dropdown input.
- When using the chip as a filter button, don’t hide the selection or selections.
- Don’t use radio buttons when you want a user to select multiple options.
- Don’t use checkboxes when you want a user to select only one option.
Related resources
For designers: Visit the Designers section for access to component specs and Figma files.
For developers: Visit the Developers section for implementation details and to access the front-end code library in Storybook.
Contact
For more information about this standard, email: web-standards@pennmedicine.upenn.edu
Last updated
Date
Version
Description
05/01/2025
1.0.0
Initial Release