Skip to main content

Colors

Last updated on

We use colors as a tool to communicate information and functions.

Contrast

We aim to meet WCAG AA standards for color contrast ratio.

ElementContrast ratio
Large text (above 18px or 24px with Light style)3:1
Standard text4.5:1

Tools to check contrast ratio:

Color system

We use design tokens for our color system. Read more about design tokens here

Theme

Theme is a collection of colors that's used to create a color scheme which defines the overall look and feel of a product or a platform.

Tini design system has a Light theme and a Dark theme.

ThemeLink
LightFigma community
DarkWIP

Global colors

Theme is a collection of colors that's used to create a color scheme which defines the overall look and feel of a product or a platform.

Tini design system has a Light theme and a Dark theme.

Example: Neutral color palette of Light theme

Alias colors

Alias colors are dynamic colors with contexts (purposes, when and where to use).

Dynamic colors mean you can change the values of the alias colors depending on your context(s). For example, you can switch color-alias-brand from color-global-blue60 to color-global-red60

Alias colors' contexts

TokenContext
color-alias-brandYour product brand color
color-alias-on-brandAny content (text, icon, border, etc.) that sits on top of color-alias-brand
color-alias-positiveProvide positive meaning (successful, affirmative)
color-alias-on-positiveAny content (text, icon, border, etc.) that sits on top of color-alias-positive
color-alias-negativeProvide negative meaning (error)
color-alias-on-negativeAny content (text, icon, border, etc.) that sits on top of color-alias-negative
color-alias-themeThe base color of the theme, usually used for backgrounds, borders
color-alias-theme-variantA variant of the base color of the theme, usually a little bit darker than color-alias-theme
color-alias-primary-on-themePrimary content that sits on top of color-alias-theme
color-alias-secondary-on-themeSecondary content that sits on top of color-alias-theme
color-alias-reverse-themeThe reverse of the base color of the theme, we don't use dark or light because it may confuse with dark theme and light theme
color-alias-primary-on-reverse-themePrimary content that sits on top of color-alias-reverse-theme
color-alias-secondary-on-reverse-themeSecondary content that sits on top of color-alias-reverse-theme
color-alias-disabledHence the name, used for a disabled state (usually texts, icons)
color-alias-disabled-variantLighter variant of color-alias-disabled (usually used for backgrounds, borders)
color-alias-skeletonSkeleton loading
color-alias-outlineUsed for borders, lines, dividers
color-alias-outline-variantLighter variant of color-alias-outline
color-alias-outline-overlayTransparent variant of color-alias-outline

Component specific colors

Component specific colors are the colors of elements that comprise a component. Component specific colors are inherited from Alias colors whenever possible, but not a must, if there's no suitable Alias color, they can inherit Global colors.

Example: