Getting started

Watson Design System is dedicated to aiding the design and development of Docplanner's SaaS products including the resources to create consistent user interfaces based on Watson principles, design language and best practices.

If you are a designer, start from Design section and if you are a developer, start from Development. If you want to know more about our tokens tiers structure and nomenclature, please go to Design tokens.

Design

Before start, evaluate with the design team before using it in your projects and check out these guides to understand the foundations of Watson Design System:

• Spacing guidelines
• Typography guidelines
• Color guidelines

Figma setup

Watson Design Kit is a resource for designing and exploring ideas inside Figma quickly. It contains and reflects, as close as possible, all coded components and styles. It uses 2 libraries:

• Watson Web: contains colors, typography, effects, and all components.
• Watson Icons: contains all icons.

Setting up libraries

Libraries are turned on by default for every file. If your file doesn’t include libraries follow the steps below.

1. Open a file in which you want to include libraries
2. Press cmd+/ on your keyboard, type Libraries and press enter
3. In the modal switch on toggles for libraries: Watson Web and Watson Icons

Setting up a nudge

Nudge value should follow our spacing scale. The base unit size of our spacing scale is 8px. We recommend setting up a nudge to match this value for consistency.

1. Press cmd+/ on your keyboard. Type Nudge amount and press enter
2. Set Big Nudge: 8px

Figma usage

We provide styles and components in figma that reflect our foundational building blocks: Typography, Colors, and Spacing

Typography

Typography styles in Figma reflect variants of a Text component. You can apply styles from the right sidebar in Figma.

Read our Typography guidelines to better understand which fonts you should use in each context

Colors

Color in Figma reflects the values and naming from the Color palette. You can apply color variables from the right sidebar.

Spacing

Grid styles and Layout will help you define general structure of the page. We also provide Stack component, along with spacing tokens for more granular content distribution

Layout

To use the Layout component, drag & drop it from the Assets panel, and detach it after selecting its props combination.

Grid

To reflect grid component in Figma we use layout grid styles. Grid provides visual support for distributing elements inside the frame. You can add a grid to any frame independently i.e. add it to Main inside Layout component and elements nested inside Main.

Spacing tokens

By using spacing tokens as variables in Figma, you can revolutionize your design process. Auto-layout frames are now able to use our tokens, and you can change the size and direction of them in the blink of an eye.

Slots

Slots allow us to swap out components very easily from a single component while still following the guidelines of our design system. They're placeholder components that are part of larger templates. They are intentionally empty so that they can be replaced with a local or Watson component.

Templates

We provide templates for common views to jump-start design projects. You can find them as components inside the Assets panel.

Figma plugins

We provide helpful Figma plugins to speed up designers' workflow. These plugins are installed by default.

Stark

Use Stark to check whether color contrast of the elements comply with WCAG accessibility guidelines

Development

Watson provides three libraries:

• Tokens - a collection of styles that contain the necessary to use Watson Design System in your project. This package contains a /dist folder with:
  • index.css: contains CSS custom properties including our three tiers of design tokens: components, semantic and core.
  • /components, /semantic, /core: contains CSS custom properties and JS variables separately.
• Components - a set of Vue components ready to use to help developers with their work building high-quality components based on Watson foundations. This package contains a /dist folder with:
  • watson.css: contains compiled CSS styles including foundations and components classes.
  • watson.es.js: contains compiled JS.
• Web Components - a set of web components that can be used in non-Vue projects. These are converted from Vue components and verified to work as close as possible to the Vue components.

Do we have utility classes?

Watson does not include CSS utility classes as we don't want to break component encapsulation or facilitate their misuse. We aim to create a UI language for you to use and not another vast CSS framework, so instead, we provide components like Grid, Stack, and Spacer to help with distributing items on the screen. Additionally, you can always use the semantic Tokens mentioned above in case you need to build your own solutions.

Note

If you want to know more about tokens tiers structure, please read Design Tokens section

Installation

All modules are available in DocPlanner private package registry as separate npm packages. In order to use them in your project you need to add .npmrc file to it and configure it as follows:

always-auth=true
registry=https://npm-proxy.docplanner.io
//npm-proxy.docplanner.io/:_authToken="YOUR_TOKEN_GOES_HERE"

Please note that both @dp-watson-web/components and @dp-watson-web/web-components are a standalone packages including CSS and compiled JS. You don't need to include @dp-watson-web/tokens as dependency in your Vue project as it is already integrated as part of the package.

Tokens should be used in case you plan to add custom components that are not available in the @dp-watson-web/components package or if you are working into a non Vue ecosystem and you want to include the foundations of Watson Design System.

Components

Import CSS file

import "@dp-watson-web/components/dist/watson.css";

Import JS file

You can import @dp-watson-web/components Watson Components in two ways:

1. As a plugin

This option makes all Vue componentes available into your project and you don't need to import them all the time you need them, just use them directly in your Vue templates. Don't pick this option if you want to be ** tree-shakeable**.

import WatsonComponents from "@dp-watson-web/components";
import { createApp } from "vue";

const app = createApp(App);
app.use(WatsonComponents);

2. Importing components manually in your views.

import { WGrid, WGridItem, WCard, WText } from "@dp-watson-web/components";

Web Components

Import CSS file

import '@dp-watson-web/web-components/dist/watson.css'

Import components

import '@dp-watson-web/web-components/dist/components/WAvatar/WAvatar.js';

Importing components in this way will define the custom element in the global scope, so you can use it in your HTML.

If you want to manually define the component, you can do it like this:

import WAvatar from '@dp-watson-web/web-components/dist/components/WAvatar/WAvatar.component.js';

WAvatar.define();

It may be useful in some scenarios when you do not have all required properties available at the time of the component is defined.

Design Tokens

Design tokens are a set of CSS properties used to build Watson Design System. They store foundational styles on spacing, color, typography, shadows, and border radius.

Do not use the core tokens - Core tokens is a strict set of variables carefully picked by the design team. By themselves they do not have any context, and they should not be used in any other way than by referencing them in other tokens. Use semantic tokens instead.

They are divided into three tiers:

Core tokens

Content-agnostic values. Used only internally as a reference for semantic, and component tokens.

Example: --w-color-red-200

Semantic tokens

Their name describes the intended use of the token — this tier references core tokens.

Example: --w-font-size-page-heading

Component tokens

Tokens are tied to a specific component value — this tier references semantic tokens.

Example: --w-button-background-secondary

Tokens are delivered as CSS and JS variables in @dp-watson-web/tokens package, each tier available as a separate file inside /dist folder. Additionally, there is a JSON object with all tokens in it. This format may come in handy in cases when the developer needs access to the style dictionary that was used to build design tokens. Except for the name and value JSON file contains additional fields used to generate this documentation like description, tokenRefercence or comment.

Examples

Live Preview