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.

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

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.

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.

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.

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.

Weak Text Color

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

Weaker Text Color

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

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.

Border Top Right Radius

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

Border Bottom Left Radius

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

Border Bottom Right Radius

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

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

This value sets the background color of the body element.

Body Color

This value sets the text color of the body element.

Grid

Inkline's grid system is based on a 12-column layout, which provides flexibility and versatility in designing responsive layouts. The grid system also includes options for gutters and responsive sizes, which can be adjusted to create different spacing and layout options.

The grid system is designed to be modular and customizable, so you can easily adapt it to your project's specific needs and requirements.

Read about elements configuration

Description

Token

Grid Columns

This value sets the number of columns in the grid system, which is set to 12 columns by default in Inkline. This variable is used to calculate the width of each column in the grid system, based on the total width of the container element.

Grid Gutter

This value sets the size of the gutter (the space between columns) in the grid system.

Scale Ratio

In design, a scale ratio is a mathematical relationship between different elements or components that ensures visual harmony and balance. In typography, scale ratios are commonly used to determine font sizes and line heights that are in proportion to one another. This creates a harmonious and balanced visual hierarchy within the text.

Read about scale ratio configuration

Description

Token

Scale Ratio

This value sets the design system's scale ratio. Inkline uses a modular scale system based on the minor third scale ratio by default. This means that each step in the scale is 1.2 times larger or smaller than the previous step.

Minor Second Scale Ratio

The minor second scale ratio, also known as the "diminished second", is a musical interval that represents a ratio of 16/15.

Major Second Scale Ratio

The major second scale ratio is a musical interval that represents a ratio of 9/8.

Minor Third Scale Ratio

The minor third scale ratio is a musical interval representing a ratio of 6/5. In design, this ratio is often used as a modular scale factor to create consistent and harmonious typography and layout.

Major Third Scale Ratio

The major third scale ratio is a musical interval representing a ratio of 5/4.

Perfect Fourth Scale Ratio

The perfect fourth scale ratio is a musical interval representing a ratio of 4/3.

Augmented Fourth Scale Ratio

The augmented fourth scale ratio is a musical interval representing a ratio of 45/32.

Perfect Fifth Scale Ratio

The perfect fifth scale ratio is a musical interval representing a ratio of 3/2.

Sizes

Inkline provides a set of predefined sizes and percentage values that can be used to create consistent layout. The size multiplier variable is used to compute any size-based variants of components, such as font sizes, padding, margin, and border radius.

Read about sizes configuration

Description

Token

Size Multiplier

The value that is used to compute size-based variants of components, such as font sizes, padding, margin, and border radius.

0% Size Percentage

The predefined value used for 0% size percentages.

25% Size Percentage

The predefined value used for 25% size percentages.

50% Size Percentage

The predefined value used for 50% size percentages.

75% Size Percentage

The predefined value used for 75% size percentages.

100% Size Percentage

The predefined value used for 100% size percentages.

Spacing

Inkline uses a modular scale to establish a harmonious relationship between font sizes, spacing, and other typographic elements. This ensures that text is easy to read and visually appealing across a range of screen sizes and resolutions.

You can use a wide range of font weights, styles, and sizes to provide flexibility and variety in your design. The default values provide guidance on typography best practices, including font choices, line lengths, and spacing. Using these can help you create visually appealing and effective typography for your project.

Read about spacing configuration

Description

Token

Margin Top

Design token used to set the margin value for the top side of an element. All margin-top variants are computed using this base value.

Margin Right

Design token used to set the margin value for the right side of an element. All margin-right variants are computed using this base value.

Margin Bottom

Design token used to set the margin value for the bottom side of an element. All margin-bottom variants are computed using this base value.

Margin Left

Design token used to set the margin value for the left side of an element. All margin-left variants are computed using this base value.

Margin

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

Padding Top

Design token used to set the padding value for the top side of an element. All padding-top variants are computed using this base value.

Padding Right

Design token used to set the padding value for the right side of an element. All padding-right variants are computed using this base value.

Padding Bottom

Design token used to set the padding value for the bottom side of an element. All padding-bottom variants are computed using this base value.

Padding Left

Design token used to set the padding value for the left side of an element. All padding-left variants are computed using this base value.

Padding

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

Typography

Read about typography configuration

Description

Token

Primary Font Family Base

This value is used to define the primary font family for the body text. This variable can be set to any valid font family value, such as a specific font name, a generic font family like sans-serif, or a custom font stack.

Primary Font Family Monospace

This value is used to define the primary monospace font family. Monospace fonts are useful for displaying code, as each character takes up the same amount of space, making it easier to align code and read it.

Primary Font Family Print

This value represents the primary font family, when used for print media. This font family is typically different from the font family used for screen media and is optimized for legibility and clarity when printed on paper.

Secondary Font Family Base

This value is used to define the secondary font family used for headings and display texts. This variable can be set to any valid font family value, such as a specific font name, a generic font family like sans-serif, or a custom font stack.

Secondary Font Family Monospace

This value is used to define the secondary monospace font family. Monospace fonts are useful for displaying code, as each character takes up the same amount of space, making it easier to align code and read it.

Secondary Font Family Print

This value represents the secondary font family used for headings and display texts, when used for print media. This font family is typically different from the font family used for screen media and is optimized for legibility and clarity when printed on paper.

Extra-light Font Weight

The extra-light font weight has a relatively low stroke contrast and is often used in display typography, particularly for headings and titles, to create a delicate and elegant appearance.

Light Font Weight

The light font weight is often used for headings and subheadings, as it provides a subtle emphasis without overwhelming the text. It can also be used for body text in certain cases, particularly for large blocks of text where a lighter weight is easier on the eyes.

Normal Font Weight

The normal font weight is the default weight for most fonts and is typically equivalent to a font-weight of 400. It is considered neither too heavy nor too light and is suitable for most body text.

Semi-bold Font Weight

The semi-bold font weight is slightly thicker than the normal font weight, but not as bold as a bold weight. It is typically used to add emphasis and hierarchy to headings, subheadings, and other important elements on a web page.

Bold Font Weight

The bold weight is a commonly used font weight in typography. It is often used for headings, subheadings, and other important text elements to make them stand out and grab the reader's attention.

Black Font Weight

The black font weight is one of the boldest font weights available and is typically used for headings or other important text that needs to be emphasized. It is thicker than the bold font weight and can create a dramatic effect when used in the right context.

Lighter Font Weight

The lighter font weight is a relative font weight value that makes the text appear lighter than the parent element's font weight.

Bolder Font Weight

The bolder font weight is a relative font weight value that makes the text appear bolder than the parent element's font weight.

Line Height

Line height refers to the amount of vertical space between lines of text. It can affect the readability, legibility, and overall aesthetic of your text.

Letter Spacing

Letter spacing (also known as tracking) refers to the amount of horizontal space between letters in a word or block of text. It can affect the legibility, readability, and overall aesthetic of your text.