---
url: /docs/get-started/designers/custom-components.md
---
# Building custom components with WARP

If you are building a component that doesn't exist in WARP you can still use semantic tokens and get support for dark mode and all other Vend brands for free.

## Semantic tokens

Semantic tokens are not connected to any specific component and can be used to create custom designs that are still multi-brand friendly.

::: image-block
![A sample design where "Background/Primary-Subtle" and "Border-Primary-Subtle" are highligted](/get-started/custom-components-and-design.png)
:::

### Access the semantic tokens

You find the semantic tokens in the right sidebar and they practically work like a normal Figma style.

You can find an overview of our semantic tokens here: [foundations > tokens > overview](../../../foundations/tokens/overview/)

![Figma interface showing multiple backgorund options and "Primary-Subtle" is highligted](/get-started/access-the-semantic-tokens.png)

### Switch modes

Connecting the design tokens to Figma variables makes it possible to easily switch between brands and light/dark modes. You can do this by selecting an element using WARP tokens and using the right sidebar to switch modes within "Appearance"

![Figma interface showing a selected button and the available modes for NMP brands and light/dark mode options](/foundations/figma-button-modes.png)