@volvo-cars/css

The CSS library for the Volvo Cars Web Design System. Works with any tech stack — no framework required. At its most basic, it functions like a Design System-compliant browser default stylesheet backed by a novel approach to CSS type safety.

What's included

• Design tokens — CSS custom properties for colours, typography, spacing, and more (tokens.css)
• Utility classes — A curated, type-safe set of utility classes for layout, spacing, typography, and colours (styles.css)
• Responsive variants — Breakpoint-prefixed utility classes (md:, lg:, xl:) for responsive design
• Font face — Official Volvo Cars typeface declarations (font-face.css)
• Breakpoints — Shared breakpoint definitions (breakpoints.css)
• JavaScript utilities:
  • cssJoin / cssMerge — Type-safe helpers for composing CSS class names
  • tokens — Design tokens as typed JavaScript/TypeScript values
  • media-queries — Breakpoint media query strings for use in JS
  • links — Framework-agnostic <link> tag helpers for stylesheet injection (with server-side support)

Installation

yarn add @volvo-cars/css

Usage

import '@volvo-cars/css/styles.css';
import '@volvo-cars/css/tokens.css';
import '@volvo-cars/css/font-face.css';

For JavaScript utilities:

import { cssJoin } from '@volvo-cars/css/utils';
import tokens from '@volvo-cars/css/tokens';
import mediaQueries from '@volvo-cars/css/media-queries';

Documentation

Read the docs