[Design Quality]: Update segmented tab styling

[amandaye0h]

Problem statement

Visually, our tabs look unbalanced and compete for attention with other components. The updated styling strengthens the contrast between primary and secondary elements to help users focus stay focused on key tasks.

Acceptance criteria

• Inactive tab text color is updated from text-default to text-muted
• Border styling for inactive tab =: 2px solid color: var(--color-text-muted)
• 4px padding between tabs has been removed
• font-weight = 500 (medium) for active and inactive tabs

Testing

A similar styling is applied in other flows:

• Send Flow (Your accounts/Contacts)
• Asset picker modal (Tokens/NFTs)
• Permissions page (Sites/Snaps)
• dApp connections (Connected accounts/Connected snaps)
• Import tokens (Search/Custom)

Final review

• Review final implementation with @amandaye0h
• Notify @georgewrmarshall from Design Systems of changes

Key screen

Figma link

Related screens

Figma link

Steps to reproduce

Portfolio View

1. Open MetaMask

Import tokens

1. Open MetaMask
2. Scroll down
3. Click on import tokens

Send Flow

1. Open MetaMask
2. Click on Send button
3. Click on the Asset selector (ETH) to access the modal

Permissions
(Associated with Amon/Hen)

1. Open MetaMask
2. Click on three dot menu in the top-right of the header
3. Click on Permissions

dApp connection page

1. Open MetaMask
2. Click on dApp icon in the header

Error messages or log output

No response

Detection stage

On the development branch

Version

11.16.15

Build type

None

Browser

Brave

Operating system

MacOS

Hardware wallet

No response

Additional context

No response

Severity

No response

[matteoscurati]

@amandaye0h I’m creating a PR to fix the tab styles as indicated here. I have two questions:

1. how should we handle cases where a tab list has only one tab? For now, I’ve created a style that applies text-default and border none (see image). Is this correct?
2. I believe some examples linked in Figma are outdated. For instance, the Snap section now has its own dedicated page and no longer lives under Permissions, correct?

[amandaye0h]

Thanks for working on this!

1. In the case above, the tab should not exist. This is the intended UI:

2. Yes that is correct. My bad for including the outdated designs!

[matteoscurati]

hey @amandaye0h thanks for your response :) I think I have resolved this issue in this PR #26190 but I’m still convinced that an edge case remains where a Tab group has only one tab. Do you think the style I’ve proposed could work in this case? Or do you think the single tab should still be highlighted as a tab (with blue font and a blue bottom border)?

[matteoscurati]

This is the PR with a proposed solution to standardize the tab style #29652

[amandaye0h]

Yeah, I think it's an acceptable solution for now — best case scenario is that users don't see the tab at all.

I'm ok with the white text if it's too complex to remove the tab altogether. The blue text + blue border is visually way too loud.