Design Tokens Component

These are the colour, typography, spacing, and other stylistic decisions as design tokens for consumption

Building

To update these run gulp vf-tokens from ./components/vf-design-tokens.

File system location: components/vf-design-tokens

Variants

Variant: Welcome live utility

Nunjucks demo

{% render '@vf-design-tokens--default', {
  "component-type": "utility",
  "breakpoints": null,
  "colors": null,
  "uiColors": null,
  "spacing": null,
  "typography": null
} %}

Sample output

The Design Tokens used within `vf-core` are generated from several `.yml` files. These are then compiled into various Sass files as needed.

In the future we hope to offer Sketch and Photoshop colour palettes.

If you required a different format (LESS, iOS, Android). Please get in touch.

Design tokens are the visual design atoms of the design system — specifically, they are named entities that store visual design attributes. We use them in place of hard-coded values (such as hex values for color or pixel values for spacing) in order to maintain a scalable and consistent visual system for UI development.

— Salesforce, Lightning Design System.

Sample output as HTML

<div class="vf-content embl-grid embl-grid--has-centered-content">
  <div></div>
  <section>
    <p>The Design Tokens used within `vf-core` are generated from several `.yml` files. These are then compiled into various Sass files as needed.</p>
    <p>In the future we hope to offer Sketch and Photoshop colour palettes.</p>
    <p>If you required a different format (LESS, iOS, Android). Please get in touch.</p>
    <blockquote class="vf-u-margin-bottom--xl">
      Design tokens are the visual design atoms of the design system — specifically, they are named entities that store visual design attributes. We use them in place of hard-coded values (such as hex values for color or pixel values for spacing) in order to maintain a scalable and consistent visual system for UI development.
      <br>
      <br>
      — <a href="https://www.lightningdesignsystem.com/design-tokens/">Salesforce, Lightning Design System.</a>
    </blockquote>
  </section>
</div>

Assets

Variant: Breakpoints live utility

Nunjucks demo

{% render '@vf-design-tokens--breakpoints', {
  "component-type": "utility",
  "breakpoints": null,
  "colors": null,
  "uiColors": null,
  "spacing": null,
  "typography": null
} %}

Sample output

Something went wrong.

Sample output as HTML

<style>
  /* vf-swatches might one day be a component, but for now it's CSS we'll just use for the design token demonstration */
  .vf-swatches {
    grid-row-gap: 32px;
    margin: 48px 0;
  }

  .vf-swatch {
    border: 1px solid #d0d0ce;
    display: grid;
    grid-template-rows: 160px 1fr;
  }

  .vf-swatch__details {
    padding: 16px;
    border-top: 1px solid #d0d0ce;
  }

  .vf-swatch:nth-of-type(6),
  .vf-swatch:nth-of-type(11) {
    grid-column-start: 1;
  }

  .vf-swatch__colour {
    /* margin: 16px;
  height: calc(100% - 32px);
  width: calc(100% - 32px); */
    height: 100%;
    width: 100%;
  }

  .vf-swatch__colour-name {
    margin: 0 0 12px 0;
  }

  .vf-swatch__colour-hex,
  .vf-swatch__sass-variable,
  .vf-swatch__comment,
  .vf-swatch__css-property {
    margin: 0 0 12px 0;
  }

  .vf-swatch__colour-hex {
    text-transform: uppercase;
  }

  .vf-swatch__colour-hex,
  .vf-swatch__sass-variable,
  .vf-swatch__css-property {
    font-family: monospace;
    font-size: 1em;
    align-items: start;
  }

  .vf-swatch__colour-hex,
  .vf-swatch__sass-variable,
  .vf-swatch__css-property {
    font-family: 'IBM Plex Mono', Monaco, Consolas, 'Lucida Console', monospace;
    font-size: 14px;
  }

  .vf-swatch__notes {
    margin: 12px 0 0px 0;
  }

  .vf-swatch__notes,
  .vf-swatch__colour-name,
  .vf-swatch__meta {
    font-family: 'IBM Plex Sans', Helvetica, Arial, sans-serif;
  }

  .vf-swatch__colour-name {
    padding: 16px;
  }

  .vf-swatch__meta {
    font-size: 16px;
  }

  .vf-swatch__details p {
    margin-bottom: 16px;
  }

  .vf-swatch__details p:last-of-type {
    margin-bottom: 0;
  }

  .breakpoint-example {
    align-items: center;
    display: flex;
    justify-content: center;
  }
</style>


<main class="vf-swatches | vf-grid vf-grid__col-3">

  <p>Something went wrong.</p>

</main>

Assets

Variant: Colours live utility

Nunjucks demo

{% render '@vf-design-tokens--colours', {
  "component-type": "utility",
  "breakpoints": null,
  "colors": null,
  "uiColors": null,
  "spacing": null,
  "typography": null
} %}

Sample output

Something went wrong.

Sample output as HTML

<style>
  /* vf-swatches might one day be a component, but for now it's CSS we'll just use for the design token demonstration */
  .vf-swatches {
    grid-row-gap: 32px;
    margin: 48px 0;
  }

  .vf-swatch {
    border: 1px solid #d0d0ce;
    display: grid;
    grid-template-rows: 160px 1fr;
  }

  .vf-swatch__details {
    padding: 16px;
    border-top: 1px solid #d0d0ce;
  }

  .vf-swatch:nth-of-type(6),
  .vf-swatch:nth-of-type(11) {
    grid-column-start: 1;
  }

  .vf-swatch__colour {
    /* margin: 16px;
  height: calc(100% - 32px);
  width: calc(100% - 32px); */
    height: 100%;
    width: 100%;
  }

  .vf-swatch__colour-name {
    margin: 0 0 12px 0;
  }

  .vf-swatch__colour-hex,
  .vf-swatch__sass-variable,
  .vf-swatch__comment,
  .vf-swatch__css-property {
    margin: 0 0 12px 0;
  }

  .vf-swatch__colour-hex {
    text-transform: uppercase;
  }

  .vf-swatch__colour-hex,
  .vf-swatch__sass-variable,
  .vf-swatch__css-property {
    font-family: monospace;
    font-size: 1em;
    align-items: start;
  }

  .vf-swatch__colour-hex,
  .vf-swatch__sass-variable,
  .vf-swatch__css-property {
    font-family: 'IBM Plex Mono', Monaco, Consolas, 'Lucida Console', monospace;
    font-size: 14px;
  }

  .vf-swatch__notes {
    margin: 12px 0 0px 0;
  }

  .vf-swatch__notes,
  .vf-swatch__colour-name,
  .vf-swatch__meta {
    font-family: 'IBM Plex Sans', Helvetica, Arial, sans-serif;
  }

  .vf-swatch__colour-name {
    padding: 16px;
  }

  .vf-swatch__meta {
    font-size: 16px;
  }

  .vf-swatch__details p {
    margin-bottom: 16px;
  }

  .vf-swatch__details p:last-of-type {
    margin-bottom: 0;
  }
</style>


<main class="vf-swatches | vf-grid vf-grid__col-3">

  <p>Something went wrong.</p>

</main>

Assets

Variant: Spacing live utility

Nunjucks demo

{% render '@vf-design-tokens--spacing', {
  "component-type": "utility",
  "breakpoints": null,
  "colors": null,
  "uiColors": null,
  "spacing": null,
  "typography": null
} %}

Sample output

Something went wrong.

Sample output as HTML

<style>
  .swatches {
    grid-row-gap: 32px;
  }

  .swatch {
    border: 2px solid #333;
  }

  .swatch__details {
    padding: 16px;
  }

  .spacing__example {
    border-bottom: 2px solid #333;
    background-color: #f3f3f3;
    display: flex;
    width: 100%;
    height: 200px;
    justify-content: center;
    align-items: center;
  }
</style>
<main class="swatches | vf-grid vf-grid__col-4">

  <p>Something went wrong.</p>

</main>

Assets

Variant: Typography live utility

Nunjucks demo

{% render '@vf-design-tokens--typography', {
  "component-type": "utility",
  "breakpoints": null,
  "colors": null,
  "uiColors": null,
  "spacing": null,
  "typography": null
} %}

Sample output

Something went wrong.

Sample output as HTML

<main class="vf-swatches | vf-grid vf-grid__col-2">


  <p>Something went wrong.</p>

</main>

Assets

Variant: Ui Colours live utility

Nunjucks demo

{% render '@vf-design-tokens--ui-colours', {
  "component-type": "utility",
  "breakpoints": null,
  "colors": null,
  "uiColors": null,
  "spacing": null,
  "typography": null
} %}

Sample output

Something went wrong.

Sample output as HTML

<style>
  /* vf-swatches might one day be a component, but for now it's CSS we'll just use for the design token demonstration */
  .vf-swatches {
    grid-row-gap: 32px;
    margin: 48px 0;
  }

  .vf-swatch {
    border: 1px solid #d0d0ce;
    display: grid;
    grid-template-rows: 160px 1fr;
  }

  .vf-swatch__details {
    padding: 16px;
    border-top: 1px solid #d0d0ce;
  }

  .vf-swatch__colour {
    /* margin: 16px;
  height: calc(100% - 32px);
  width: calc(100% - 32px); */
    height: 100%;
    width: 100%;
  }

  .vf-swatch__colour-name {
    margin: 0 0 12px 0;
  }

  .vf-swatch__colour-hex,
  .vf-swatch__sass-variable,
  .vf-swatch__comment,
  .vf-swatch__css-property {
    margin: 0 0 12px 0;
  }

  .vf-swatch__colour-hex {
    text-transform: uppercase;
  }

  .vf-swatch__colour-hex,
  .vf-swatch__sass-variable,
  .vf-swatch__css-property {
    font-family: monospace;
    font-size: 1em;
    align-items: start;
  }

  .vf-swatch__colour-hex,
  .vf-swatch__sass-variable,
  .vf-swatch__css-property {
    font-family: 'IBM Plex Mono', Monaco, Consolas, 'Lucida Console', monospace;
    font-size: 14px;
  }

  .vf-swatch__notes {
    margin: 12px 0 0px 0;
  }

  .vf-swatch__notes,
  .vf-swatch__colour-name,
  .vf-swatch__meta {
    font-family: 'IBM Plex Sans', Helvetica, Arial, sans-serif;
  }

  .vf-swatch__colour-name {
    padding: 16px;
  }

  .vf-swatch__meta {
    font-size: 16px;
  }

  .vf-swatch__details p {
    margin-bottom: 16px;
  }

  .vf-swatch__details p:last-of-type {
    margin-bottom: 0;
  }
</style>


<main class="vf-swatches | vf-grid vf-grid__col-3">

  <p>Something went wrong.</p>

</main>

Assets

All components in this design system

This page is part of the components section.