Design Tokens

All design tokens defined in the accelerator style files. Click any token to copy its CSS variable reference.

Setup

Add the package stylesheet entry to your application’s app.project.css: 

/* your application’s app.css */
@import '@levarnebv/accelerator-nuxtv3-module/styles';

If you need to import a specific stylesheet on its own, import it directly from the package: 

/* your application’s app.css */
@import '@levarnebv/accelerator-nuxtv3-module/styles/reset.css';
@import '@levarnebv/accelerator-nuxtv3-module/styles/variables.css';
@import '@levarnebv/accelerator-nuxtv3-module/styles/app.css';

Color Palette

Blue

Neutrals

Red

Green

Orange

Yellow

Purple

Mapped Colors

Primary

Secondary

Success

Warning

Danger

Info

Feature

Feature Secondary

Theme

Backgrounds

Content

Borders

Brand

States

Typography

Spacing

Border Radius

Shadows

CSS previews

The token sections above document variables.css. The previews below cover the visual styles from app.css and the browser normalization provided by reset.css.

Typography

The package styles do not bundle a font. app.css only sets the typography scale (sizes, line-heights, weights, letter-spacing) on top of whatever font the consuming application provides. Declare your own @font-face and set body { font-family } in your application’s stylesheet, e.g.: 

/* your application’s app.project.css */
@font-face {
  font-family: 'Roboto';
  src: url('/fonts/roboto/roboto-variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
}

body {
  font-family: 'Roboto', sans-serif;
}
.h0The quick brown fox jumps over the lazy dog
h1, .h1

The quick brown fox jumps over the lazy dog

h2, .h2

The quick brown fox jumps over the lazy dog

h3, .h3

The quick brown fox jumps over the lazy dog

h4, .h4

The quick brown fox jumps over the lazy dog

h5, .h5
The quick brown fox jumps over the lazy dog
h6, .h6
The quick brown fox jumps over the lazy dog
.b1The quick brown fox jumps over the lazy dog
.b2The quick brown fox jumps over the lazy dog
.b3The quick brown fox jumps over the lazy dog
.b4The quick brown fox jumps over the lazy dog
.weight-regularThe quick brown fox jumps over the lazy dog
.weight-mediumThe quick brown fox jumps over the lazy dog
.weight-boldThe quick brown fox jumps over the lazy dog
.weight-bolderThe quick brown fox jumps over the lazy dog
.line-height-relaxedThe quick brown fox jumps over the lazy dog
.text-underlineThe quick brown fox jumps over the lazy dog

reset.css

The package reset is included by the stylesheet bundle and provides the baseline browser normalization needed by the other styles.

On This Page