JPM brand characteristics

Accent highlights key elements by applying a theme's dominant color, helping important components—like active tabs or headings—stand out and draw attention.

Actionable defines the colors and styles for components that enable onward actions, such as triggering events or processes, making interactive elements clearly identifiable and intuitive for users.

Category offers a set of distinct colors for grouping and differentiating content, with meaning assigned locally.

Container sets the background and structure of interface elements, using variants and optional borders to group content and create visual hierarchy.

Content defines the standard foreground colors for text and icons, supporting clarity, consistency, and accessibility.

Editable defines the styles for input components that allow users to enter or modify data, such as text fields and input controls.

Focused defines the styles for components that can receive focus via mouse or keyboard interaction.

Navigable defines the styles for components that enable users to move between sections, pages, or data sets, such as tabs and navigation menus.

Overlayable provides translucent styles for shadows, scrims, and neutral overlays, allowing highlights without obscuring underlying colors or states.

Selectable defines the styles for components that allow users to make selections, such as radio buttons, checkboxes, switches, and selectable list items.

Sentiment offers visual cues that evoke feelings such as positivity, negativity, caution, or neutrality, helping to reinforce meaning and highlight important elements.

Separable defines visual dividers that organize and structure layouts, with primary, secondary, and tertiary variants providing different levels of emphasis to support clear hierarchy and readability.

Status provides visual cues that communicate the condition of a system or process, using values like error, info, warning, and success to highlight issues and indicate when action may be needed.

Components which indicate a target area where a draggable item can be dropped (and related to Draggable).

All text examples are shown using the default fontWeight token.