Branding drop-in components
Branding with design tokens is the quickest way to customize your storefront. The goal of branding is to replace the storefront design token values with the values of your brand’s colors, typography, spacing, and shapes. Let’s dive in.
Big picture
The following diagram shows a small branding change. When we override the default value of a single shape token, we override the default border-radius of the Button
library component, which changes the look and feel of dropin-in components that use it.
Vocabulary
design tokens
CSS variables with default values. Our design tokens provide a standard set of CSS properties and default values for colors, typography, spacing, shapes, and layout grids. We use them in all of our component CSS classes to avoid hard-coded values that cannot be easily changed. With this strategy, you can restyle our dropin-in components to match your brand simply by changing the default token values.
All default design tokens
library components
Basic components (like Button
, Checkbox
, and Carousel
) used to build dropin-in components. Design tokens are embedded in the CSS classes of these components to ensure fast, flexible styling to match your brand.
Adobe Commerce design system
The collection of design tokens, library components, and conventions we use to style our dropin-in components.
brand
To override the built-in design token default values to match your brand’s colors, typography, spacing, shapes, and grids.
style
To change existing drop-in component CSS classes or add new CSS classes to the drop-in component elements. Styling provides a deeper level of customization than branding.
Examples
This example shows six design tokens with new values for three color and three shape tokens from the boilerplate’s styles/styles.css
file.
Step-by-step
The following steps show how to override the default design token values to match your brand colors, typography, spacing, shapes, and layouts (grids).
For example, start with typography, then move on to spacing, shapes, grids, and finally colors (because they are typically the hardest to map to design tokens). Using this process ensures each brand category is completed and reviewed before moving on to the next. :::
[1]: Work on one category at a time
Open the styles/styles.css
file.
From the root of your project, open the styles/styles.css
file.
Directoryscripts/
- …
Directorystyles/ CSS files for drop-in component design tokens, fonts, deferred styles
- fonts.css — Default font styles
- lazy-styles.css — Global styles loaded after LCP
- styles.css — Global design tokens and CSS classes for site
Directorytools/
- …
Override typography tokens.
We suggest starting with typography overrides. Mapping a brand’s typography to the available design tokens is typically straightforward. For example, NASA’s Brand Guidelines for typography specifies three font families:
- Inter for large display and heading text
- Public Sans for interfaces and body text
- DM Mono for numbers and small labels
After installing the fonts, you can map them to the storefront design tokens. The following example shows how you might override the default typography design tokens to match NASA’s brand guidelines.
Continue with spacing, shapes, layouts, and colors.
Use the same process for overriding the spacing, shapes, grids, and color token values. With a company’s brand guidelines, you can start discovering how to map brand categories to the design-token values you need to override. But it’s not always straightforward. Mapping brand colors to the color token options can be challenging. This is when you will need to work closely with the design team to make decisions about which design tokens to override and how to map your brand colors to the available options.
Summary
The process of branding dropin-in components is typically fast and easy. Focus on one brand category at a time and work with your designers to solve the less obvious brand-to-token overrides.