Warp Design System

Appearance

Warp Figma Component Library updates

Happy New Year! 🎉 ​

We're starting off 2026 with several updates to our Warp Components Figma library:

Library navigation improvements ​

We've added new "Patterns" and "Vend Assets" dividers added to the Figma page list to improve wayfinding and make it easier to locate these components categories. More details below in this update.

Screenshot showing the Figma page list in the Warp Components library file.

New Empty states pattern released ​

❖ Patterns / Empty states

Empty states are used to fill spaces when no content can be shown to the user, or is temporarily empty due to the nature of the feature.

Our new pattern is now available in Figma and supports our primary marketplaces use cases, including: Fail to load, Page not found, Not logged in, Verify identity, No network connection, No search results, No messages, No favourites, No payment cards, Loading, and a custom state.

This pattern was a fantastic cross-team effort! 👏 Huge thanks to:

  • Fredrik Øverlie and the developers from the Native Brand Experience team for their contribution.
  • Astri Eiterstraum, Brian Stefan Jensen, Christer Johnsrud, Damon Chan, Kevin Jeppesen, Mikkel Winsvold Staff, Mimmi Hallberg, Pekka Murto and Vishaka Mantri Roininen for volunteering to test the component and documentation before release.

👉 Learn more about Empty states and our guidelines here

Example of the Empty state 'Fail to load’ variant shown in the context of FINN's iOS app, and screenshot of the pattern's usage guidelines on Warp Portal.

Improvements to DBA dark mode tokens ​

We've updated primitive values for several tokens to improve contrast in DBA's dark mode theme:

From Pthaloblue-400 to Pthaloblue-300:

  • Semantic/Color/Icon/Secondary
  • Semantic/Color/Background/Secondary
  • Semantic/Color/Border/Secondary

From Pthaloblue-300 to Pthaloblue-200:

  • Semantic/Color/Background/Secondary-Hover
  • Semantic/Color/Border/Secondary-Hover

From Pthaloblue-200 to Pthaloblue-100:

  • Semantic/Color/Background/Secondary-Active
  • Semantic/Color/Border/Secondary-Active

Side-by-side comparison showing DBA dark mode tokens behaviour before and after the scoped changes.

New Vend tagline component ​

❖ Vend assets / Vend tagline

The tagline component endorses Vend and helps build brand awareness at key user journey's touch points.

Available variants:

  • Language: English, Danish, Finnish, and Norwegian-Swedish
  • Orientation: Horizontal, and Vertical

👉 Read the Vend Endorsement Guidelines for more information

Side-by-side comparison of the Vend tagline component showing language and orientation variants in both light and dark mode.

New Vend data controller banner component ​

❖ Vend assets / Data controller banner

This banner informs users that Vend is the data controller responsible for processing the data collected on our websites. Note: This is a web-only asset.

👉 Read the Visual Playbook for Vend Launch for more information. If you need help accessing this document, reach out to the #ask-privacy-team channel on Slack.

Comparison showing the Vend Data controller banner component displayed for desktop and mobile web, in light and dark mode.



Looking forward to a 2026 full of collaboration and contributions from across Vend. 🤎

– Your Warp Design System friends