SDC Design System Globals

Globals are SDC Design System's core variables, properties, and assets that apply "globally" to multiple components and implementations of our digital designs. This can include:

• Color
• Typographic(text) styles
• Spacing(whitespace)
• Fonts
• Logos
• Icons
• etc.

Keeping these variables/properties stored as JSON (implementation agnostic) data, we are able to create these styles once, and distribute them to any and every tech stack/tool from this single source of truth.

Consuming tokens and assets in your project

Web

NPM

npm install @smiledirectclub/sds-globals

The dist/ directory contains the compiled versions of the design tokens we offer, as well as any global assets you could find useful in developing your digital product.

• node_modules/@smiledirectclub/sds-globals/
  • dist/
    • assets/ - logos, font files, etc.
    • tokens/
      • css/ - CSS custom properties (variables)
      • ios/ - Swift
      • scss/ - SASS variables

CDN

You can link to the tokens file on our CDN.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@smiledirectclub/sds-globals/dist/tokens/css/sds-tokens.css">

NOTE: Notice the version numbers in the URL path. When we release new versions, we will be releasing them into new directories based on their version number. To update/consume a different version, simply alter this version number to another available version.

iOS - Cocoapod

[TODO: Add detailed documentation for pulling pod into your project from scratch.]

This requires setting up 2-factor auth with GitHub and using your passphrase on your local machine to publish.

This is published as a Cocoapod called SmileDesignSystemGlobals to our internal podspec repo at https://github.com/CamelotVG/ios-podspecs. This pod contains Swift code.

Git

You can take a look at the GitHub repo here:

https://github.com/CamelotVG/sdc-design-system

Contributing

To learn how to contribute to this project visit our Contributing Guidelines on Confluence