New text styles and the Volvo Cars CSS library

Published 20/11/2022

We're happy to present our updated type stack and the first release of @volvo-cars/css, the Volvo Cars CSS library for the Web Design System library.

The release includes several major changes:

Abstract text style names have been replaced with descriptive ones
Text styles are delivered with a CSS library rather than through a React component in VCC UI

To find out more about why we're creating a CSS utility library, read the blog post.

Otherwise, let's talk text styles.

More intuitive text style names

The previous names were difficult to learn as there was no connection between the name and the rendered output. Some variants were responsive and some were not, some allowed emphasis and some did not. We wanted new names that were both easier to learn but also made it easy to make the right choice when picking a text style.

As our designers and developers analyzed the usage of the existing styles on the web and other platforms, we identified text styles fell into natural groupings.

cook was most commonly used as the main heading on a page. It has been renamed heading-1.

ootah was expanded from a single style with emphasis and standard modifiers to become heading-2 and heading-3 styles.

This means that the most commonly used text styles both follow the simple and familiar naming convention of and map cleanly to the markup elements h1, h2, and h3.

The text styles peary and yang were more rarely used and were grouped into the Statement category, which will be further expanded with two larger text styles in an upcoming release.

The Heading and Statement categories are both fluid, meaning they will seamlessly increase in size from a smaller device up to larger screens instead of increasing at specific breakpoint intervals.

The hillary, columbus and bates text styles were also given more descriptive names.

body-16 is the default font-size when using @volvo-cars/css and should rarely need to be set explicitly.

Deprecations

The kelly and amundsen text styles have been removed and most use cases should be replaced with body-16.

The CSS library

The goal of the @volvo-cars/css library is to provide low-level Design System styles with as little friction as possible. It has no JavaScript runtime or build step, and includes:

Global styles and resets
Design tokens as CSS custom properties (variables)
Utility classes to apply design tokens and core styles like typography and colors
Dark mode
Compatibility with right-to-left languages

Transitioning from VCC UI `<Text>`

For typography specifically, we don't see a need for a generic Text or Heading component. When adding text to a page the HTML semantics are important for accessibility and SEO. The tag name should not be an afterthought added with an optional as property – it should be an explicit choice.

Design system styles will apply automatically to the matching semantic elements for heading-1, heading-2 and heading-3 styles. The following gives 3 headings with the same visual style.

<Text variant="ootah">Are you ready to switch?</Text>
<h2>Are you ready to switch?</h2>
<h3 className="heading-2">Are you ready to switch?</h3>

You can combine utility classes to replace the foreground and subStyle properties of the Text component.

If you currently add other styles using <Text extend, you can replace it with <Block extend

<Block as="h3" className="title-20" extend={titleCSS}>
  Are you ready to switch?
</Block>

For special cases you can create your own styles using design system custom properties.

<Block
  as="h3"
  extend={{
    font: 'var(--v-font-title-20)',
    fromM: {
      font: 'var(--font-title-24)',
    },
  }}
>
  Are you ready to switch?
</Block>

You can of course also create application specific compositions like an <ArticleHeader> or <SectionHeading> component in a way that suits your particular needs.

In the near future, we will publish a strategy for teams to be able to migrate from extend entirely and style their components wholly without a runtime. Watch this space.

What about VCC UI?

VCC UI is the React implementation of the current truth of the Volvo Cars Design System and is still maintained. As we transition parts of the design system to @volvo-cars/css and other packages, VCC UI will gradually do less and other packages do more.

If you're running into any issues or have feedback

We are available in GitHub Discussions or in #design-system-web on Slack - feedback is always welcome!