Skip to content
Volvo

Getting started

Edit on GitHub

The Volvo Car Web Design System is the foundation for building Volvo-branded web experiences. With an emphasis on HTML and CSS, it works in any tech stack while also providing React hooks and components for teams that need them.

At its most basic, you can think of it as a browser stylesheet that gives standard HTML elements the right look out of the box, backed by developer tooling. From there, you can layer on utility classes, hooks, and components when the job calls for them.

It can be adopted incrementally on existing websites and combined with other component libraries when necessary. If you are new to the system, start with Installation.

Write HTML

Section titled “Write HTML”

We set design system compliant styles on most HTML elements. This means you can write plain HTML and get useful defaults straight away.

<h2>Are you ready to electrify your ride?</h2>
<p>
  Here's what you need to know to confidently go electric and find the right
  Volvo electric car for you.
</p>
<a href="">Read more</a>
<hr />

Add utility classes

Section titled “Add utility classes”

When you need more control, a wide range of utility classes lets you build layouts and components without leaving your HTML.

<div class="grid grid-cols-2 bg-secondary p-24 rounded">
  <div>
    <h2>Are you ready to electrify your ride?</h2>
    <p>
      Here's what you need to know to confidently go electric and find the right
      Volvo electric car for you.
    </p>
    <a href="">Read more</a>
  </div>
  <img src="" alt="" />
</div>

Extend native HTML

Section titled “Extend native HTML”

For many patterns, HTML and CSS are enough. An accordion, for example, can be built with <details> and <summary> and still follow the design system:

<details>
  <summary>
    <span>Title</span>
    <div class="h-1lh flex-row items-center">
      <img
        class="icon-sprite details-open:rotate-180 transition-transform"
        src="...navigation-chevrondown-16.svg"
        role="presentation"
      />
    </div>
  </summary>
  <p>Content</p>
</details>

When native HTML is not enough, move up a layer. Use a headless React hook when you want to control the markup yourself. Use a React component when you want the design system to handle more of the pattern for you.

Shared defaults

Section titled “Shared defaults”

Once the CSS foundation is in place, you get shared support for:

  • Light and dark mode
  • Internationalization (RTL)
  • Accessibility
  • Fluid, responsive text sizing

These defaults come without a line of runtime JavaScript, and the shared CSS is cached across applications on the same domain.

Design and code in sync

Section titled “Design and code in sync”

Design and code components are created in tandem. Everything available to designers in the Figma library is also available to developers. On top of that, design tokens define and synchronise attributes such as colors, font sizes, and spacing across both tools.

Next steps

Section titled “Next steps”

Ready to start building? Here’s where to go next: