Style Dictionary

https://styledictionary.com/docs/

Admin

Style Dictionary is a tool that exports design tokens to any platform including iOS, Android, CSS,...

Tokens:686

Snippets:2

Trust Score:8

Update:2 months ago

Show doc for...

Tokens:

Raw

### Export DTCG Tokens to CSS

Source: https://styledictionary.com

This example demonstrates how a set of Design Tokens Community Group (DTCG) tokens would be exported to CSS format. It shows the mapping of token names to CSS variables.

```css
/* DTCG Tokens */

/* colors */
:root {
  --colors-black: #000000;
  --colors-white: #ffffff;
  --colors-orange-100: #fffaf0;
  --colors-orange-200: #feebc8;
  --colors-orange-300: #fbd38d;
  --colors-orange-400: #f6ad55;
  --colors-orange-500: #ed8936;
  --colors-orange-600: #dd6b20;
  --colors-orange-700: #c05621;
  --colors-orange-800: #9c4221;
  --colors-orange-900: #7b341f;
}

/* spacing */
:root {
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 2rem;
  --spacing-xl: 4rem;
}

/* typography */
:root {
  --typography-font-family-body: "Inter", sans-serif;
  --typography-font-family-heading: "Poppins", sans-serif;
  --typography-font-size-sm: 0.875rem;
  --typography-font-size-md: 1rem;
  --typography-font-size-lg: 1.25rem;
  --typography-font-weight-normal: 400;
  --typography-font-weight-bold: 700;
  --typography-line-height-tight: 1.25;
  --typography-line-height-normal: 1.5;
}

/* shadows */
:root {
  --shadows-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadows-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --shadows-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

/* borders */
:root {
  --borders-radius-sm: 0.125rem;
  --borders-radius-md: 0.25rem;
  --borders-radius-lg: 0.5rem;
  --borders-radius-xl: 1rem;
  --borders-radius-2xl: 2rem;
  --borders-radius-3xl: 4rem;
  --borders-radius-full: 9999px;
}

/* opacity */
:root {
  --opacity-disabled: 0.5;
}

```

Tokens:

Raw