Design Tokens

Learn how to customize the look and feel of your design system with Inkline's design tokens to create a beautiful and consistent user interface.

Design tokens are the visual design atoms of the Inkline Design System. They define the look and feel of the components, including colors, typography, and spacing. By using design tokens, we can create a cohesive and consistent user interface.

Inkline's Design Tokens are generated automatically after updating your inkline.config.ts file if you've followed the official Installation guide. You could also customize them manually by overwriting their value in the :root of your stylesheet.

Colors

Inkline uses a set of color variables to define the color palette of the Design System. These variables are used to define the color of the components, as well as the color of the text and background. It's important to keep in mind accessibility and contrast when defining color design tokens.

By updating the base CSS variable for a color, all corresponding variants based on that color will automatically be updated as well, ensuring consistency throughout the UI.

Read about color configuration

Brand Colors

Description
Token

Primary Color

Primary brand color for Inkline. This color provides accessible contrast when used for text on light background.

Primary Tint 150 Color

Primary Tint 100 Color

Primary Tint 50 Color

Primary Shade 50 Color

Primary Shade 100 Color

Primary Shade 150 Color

Primary 50 Color

Primary 100 Color

Primary 200 Color

Primary 300 Color

Primary 400 Color

Primary 500 Color

Primary 600 Color

Primary 700 Color

Primary 800 Color

Primary 900 Color

Secondary Color

The secondary brand color for Inkline is intended to complement the primary color and can be used for accents or to add visual interest.

Secondary Tint 150 Color

Secondary Tint 100 Color

Secondary Tint 50 Color

Secondary Shade 50 Color

Secondary Shade 100 Color

Secondary Shade 150 Color

Secondary 50 Color

Secondary 100 Color

Secondary 200 Color

Secondary 300 Color

Secondary 400 Color

Secondary 500 Color

Secondary 600 Color

Secondary 700 Color

Secondary 800 Color

Secondary 900 Color

Info Color

The info brand color for Inkline is used to convey information or highlight important elements, such as alerts, notifications, or messages.

Info Tint 150 Color

Info Tint 100 Color

Info Tint 50 Color

Info Shade 50 Color

Info Shade 100 Color

Info Shade 150 Color

Info 50 Color

Info 100 Color

Info 200 Color

Info 300 Color

Info 400 Color

Info 500 Color

Info 600 Color

Info 700 Color

Info 800 Color

Info 900 Color

Success Color

The success brand color for Inkline is used to indicate a positive action or outcome, such as a successful form submission or completion of a task.

Success Tint 150 Color

Success Tint 100 Color

Success Tint 50 Color

Success Shade 50 Color

Success Shade 100 Color

Success Shade 150 Color

Success 50 Color

Success 100 Color

Success 200 Color

Success 300 Color

Success 400 Color

Success 500 Color

Success 600 Color

Success 700 Color

Success 800 Color

Success 900 Color

Warning Color

The warning brand color for Inkline is used to alert users to potential issues or problems, such as problems in form fields or incomplete information.

Warning Tint 150 Color

Warning Tint 100 Color

Warning Tint 50 Color

Warning Shade 50 Color

Warning Shade 100 Color

Warning Shade 150 Color

Warning 50 Color

Warning 100 Color

Warning 200 Color

Warning 300 Color

Warning 400 Color

Warning 500 Color

Warning 600 Color

Warning 700 Color

Warning 800 Color

Warning 900 Color

Danger Color

The danger brand color for Inkline is used to signify a critical or urgent warning, such as a system error or potential loss of data.

Danger Tint 150 Color

Danger Tint 100 Color

Danger Tint 50 Color

Danger Shade 50 Color

Danger Shade 100 Color

Danger Shade 150 Color

Danger 50 Color

Danger 100 Color

Danger 200 Color

Danger 300 Color

Danger 400 Color

Danger 500 Color

Danger 600 Color

Danger 700 Color

Danger 800 Color

Danger 900 Color

Neutral Colors

Description
Token

Light Color

The light neutral color has a higher luminance value and is often associated with purity, clarity, and simplicity. It can be used to create a sense of openness, spaciousness, and airiness in UI Design.

Light Tint 150 Color

Light Tint 100 Color

Light Tint 50 Color

Light Shade 50 Color

Light Shade 100 Color

Light Shade 150 Color

Dark Color

The dark neutral color has a lower luminance value and can convey a sense of sophistication, elegance, and power. It can be used to create a sense of depth and contrast in UI Design, as well as to emphasize important elements.

Dark Tint 150 Color

Dark Tint 100 Color

Dark Tint 50 Color

Dark Shade 50 Color

Dark Shade 100 Color

Dark Shade 150 Color

White Color

White is a neutral color that is often associated with purity, clarity, and simplicity. It can be used in UI Design to create a clean and minimalistic look, as well as to emphasize other colors and elements.

Black Color

Black is a versatile color that can represent elegance, sophistication, and power, as well as darkness, mystery, and edginess. It can be used in UI Design to create a sense of contrast and emphasis, as well as to convey a high-end or premium look and feel.

Basic Colors

Description
Token

Red Color

Red is a bold and attention-grabbing color that is often associated with passion, energy, and urgency. It can be used to signify warning, danger, or importance in UI Design, but can also be used to convey warmth and excitement.

Orange Color

Orange is a vibrant and energetic color that is often associated with enthusiasm, creativity, and warmth. It can be used in UI Design to convey a sense of playfulness, excitement, and friendliness. In more subdued tones, orange can also be used to create a sense of warmth and comfort.

Yellow Color

Yellow is a bright and cheerful color that is often associated with happiness, optimism, and positivity. It can be used in UI Design to convey a sense of energy, fun, and playfulness, and can also be used to create a sense of warmth and comfort.

Green Color

Green is a versatile color that can represent growth, nature, and health, as well as money, wealth, and success. It is often used in UI Design to convey a sense of freshness, balance, and harmony.

Teal Color

Teal is a refreshing and modern color that is often associated with tranquility, stability, and innovation. It can be used in UI Design to convey a sense of confidence, creativity, and freshness.

Blue Color

Blue is a calm and soothing color that is associated with trust, stability, and loyalty. It can be used to convey a sense of professionalism and reliability in UI Design, as well as a feeling of depth and sophistication.

Purple Color

Purple is a regal and mysterious color that is often associated with luxury, creativity, and spirituality. It can be used in UI Design to convey a sense of elegance, sophistication, and imagination.

Pink Color

Pink is a soft color that can represent sweetness, romance, and playfulness. It is often used in UI Design to convey a sense of warmth, gentleness, and compassion.

Text Colors

Description
Token
Aa

Contrast Text for Light Color

The contrast text for light backgrounds is a dark-colored text that provides a high contrast ratio against a light-colored background. This type of text is often used to ensure legibility and accessibility for users with visual impairments.

Aa

Contrast Text for Dark Color

The contrast text on dark backgrounds is a light-colored text that provides a high contrast ratio against a dark-colored background. This type of text is also used to ensure legibility and accessibility for users with visual impairments.

Aa

Light Text Color

The light text color can be used to create a softer and more approachable look and feel in UI Design, and can also be used to create a sense of contrast and emphasis.

Aa

Dark Text Color

The dark text color can be used to create a more sophisticated and elegant look and feel in UI Design, and can also be used to convey a sense of depth and richness.

Aa

Weak Text Color

A weak text color, typically used for subtext or captions that are less prominent than the main content.

Aa

Weaker Text Color

An even weaker text color, typically used for secondary text elements that are meant to be less visible.

Aa

Weakest Text Color

The weakest text color, typically used for text elements that should not stand out.

Animation

CSS transitions allow for smooth and gradual changes to occur over a specified duration. Transitions can be triggered by various events, such as hover, click, or page load, and can be applied to different properties such as background-color, opacity, width, height, and more.

Read about animation configuration

Description
Token

Transition Duration

This value defines the length of time it takes for an element to transition from one state to another. The duration is specified in seconds or milliseconds, and can be set to any positive number.

Transition Timing Function

This is used to define the easing function to be used in CSS transitions. An easing function defines the rate at which the transition progresses over time, affecting the speed and smoothness of the transition.

Border

The border CSS Variables are used to define the properties of an element's border, such as its width, color, and style. By using variables to define these properties, you can ensure consistency across your design and make it easy to update borders across your components.

Read about border configuration

Description
Token

Border Top Width

Design token used to set the top border width of an element.

Border Right Width

Design token used to set the right border width of an element.

Border Bottom Width

Design token used to set the bottom border width of an element.

Border Left Width

Design token used to set the left border width of an element.

Border Width

Design token used to set the border width for all four sides of an element at once. This value is composed automatically based on the four individual side values documented above.

Border Top Style

Design token used to set the top border style of an element.

Border Right Style

Design token used to set the right border style of an element.

Border Bottom Style

Design token used to set the bottom border style of an element.

Border Left Style

Design token used to set the left border style of an element.

Border Style

Design token used to set the border style for all four sides of an element at once. This value is composed automatically based on the four individual side values documented above.

Border Top Color

Design token used to set the top border color of an element.

Border Right Color

Design token used to set the right border color of an element.

Border Bottom Color

Design token used to set the bottom border color of an element.

Border Left Color

Design token used to set the left border color of an element.

Border Color

Design token used to set the border color for all four sides of an element at once. This value is composed automatically based on the four individual side values documented above.

Border Radius

Border radiuses define the curvature of the corners of an element's border. Inkline includes several predefined border radius values that can be used to create a variety of different styles.

Read about border radius configuration

Description
Token

Border Top Left Radius

Design token used to set the border radius value for the top-left corner of an element's border.

Extra-small Border Top Left Radius

Small Border Top Left Radius

Medium Border Top Left Radius

Large Border Top Left Radius

Extra-large Border Top Left Radius

Border Top Right Radius

Design token used to set the border radius value for the top-right corner of an element's border.

Extra-small Border Top Right Radius

Small Border Top Right Radius

Medium Border Top Right Radius

Large Border Top Right Radius

Extra-large Border Top Right Radius

Border Bottom Left Radius

Design token used to set the border radius value for the bottom-left corner of an element's border.

Extra-small Border Bottom Left Radius

Small Border Bottom Left Radius

Medium Border Bottom Left Radius

Large Border Bottom Left Radius

Extra-large Border Bottom Left Radius

Border Bottom Right Radius

Design token used to set the border radius value for the bottom-right corner of an element's border.

Extra-small Border Bottom Right Radius

Small Border Bottom Right Radius

Medium Border Bottom Right Radius

Large Border Bottom Right Radius

Extra-large Border Bottom Right Radius

Border Radius

Inkline includes a composed border-radius design token used to set all four corners of an element's border at once. This value is composed automatically based on the four individual corner values documented above.

Extra-small Border Radius

Small Border Radius

Medium Border Radius

Large Border Radius

Extra-large Border Radius

Box Shadow

Box shadow can be used to create a variety of effects, such as adding depth to buttons, highlighting elements on hover, or creating a sense of elevation.

The box shadow property takes several values, including the horizontal and vertical offset of the shadow, its blur radius, its spread radius, and its color. By adjusting these values, you can create custom shadow effects that complement your design system.

Read about box shadow configuration

Description
Token

Box Shadow Offset X

This value is used to set the horizontal offset of the box shadow. A positive value moves the shadow to the right of the box, while a negative value moves it to the left.

Box Shadow Offset Y

This value is used to set the vertical offset of the box shadow. A positive value moves the shadow down from the box, while a negative value moves it up.

Box Shadow Blur Radius

The blur radius value in the box shadow property sets the amount of blurring applied to the shadow. A larger value will create a more diffuse, spread-out shadow, while a smaller value will create a sharper, more defined shadow.

Box Shadow Spread Radius

The spread radius value in the box shadow property sets the amount that the shadow should be spread outward from the element's box. A positive value will cause the shadow to expand, while a negative value will cause the shadow to contract.

Box Shadow Color

The color value in the box-shadow property sets the color of the shadow, typically a slightly transparent color. You can use a darker color to create a more dramatic, prominent shadow, or a lighter color to create a more subtle, subdued effect.

Box Shadow

Inkline includes a composed box shadow design token, composed automatically based on the four individual box shadow values documented above.

Breakpoints

Breakpoints refer to specific screen sizes where the layout of a website or application changes to accommodate the different screen sizes and resolutions.

In Inkline, breakpoints are defined using CSS media queries that are based on the device's width. There are six pre-defined breakpoints that can be used to create responsive designs:

  • xs: Extra-small screens (less than 576px)
  • sm: Small screens (576px or more)
  • md: Medium screens (768px or more)
  • lg: Large screens (992px or more)
  • xl: Extra-large screens (1200px or more)
  • 2xl: Extra-extra-large screens (1400px or more)

Read about breakpoints configuration

Description
Token

Extra-small Breakpoint

This value represents the starting point for the extra-small devices screen size range. It is typically used for mobile devices with smaller screens, such as smartphones.

Small Breakpoint

This value represents the starting point for the small devices screen size range. It is designed for small screens such as smartphones in portrait orientation or small tablets.

Medium Breakpoint

This value represents the starting point for the medium devices screen size range. It is used to define the styles for medium-sized screens such as tablets or smaller laptops.

Large Breakpoint

This value represents the starting point for the large devices screen size range. It is typically used to target larger screens such as large tablets, laptops and desktops.

Extra-large Breakpoint

This value represents the starting point for the extra-large devices screen size range. It is typically used to target larger screens such as large tablets, laptops and desktops.

Extra-extra-large Breakpoint

This value represents the starting point for the extra-extra-large devices screen size range. It is typically used to target extra large desktop screens.

Elements

Inkline's configuration also provides variables for common elements such as the body background and color.

Read about elements configuration

Description
Token

Body Background