Skip to content

Styles

Jump to bottom
Arvindh Sukumar edited this page Jan 22, 2024 · 6 revisions

Colors, Text Styles and Spacing form the base of Tarka UI Kit's design system.

Colors

Every component has been built with specific named colors that are optimised to work well together, in both light and dark modes. These are available as an extension on Color, or can be accessed through the theme.

The default UI Kit theme has the following colors. Customise them by creating your own theme.

Figma

Color:

  • Color.primaryTUI
  • Color.secondaryTUI
  • Color.tertiary
  • Color.error
  • Color.success
  • Color.warning
  • Color.primaryAlt
  • Color.secondaryAlt
  • Color.tertiaryAlt
  • Color.success10
  • Color.success20
  • Color.error10
  • Color.warning10
  • Color.onPrimary
  • Color.onSecondary
  • Color.onTertiary
  • Color.onSuccess
  • Color.onError
  • Color.onSurface
  • Color.onBackground
  • Color.onPrimaryAlt
  • Color.onSecondaryAlt
  • Color.onTertiaryAlt
  • Color.inputBackground
  • Color.inputText
  • Color.inputTextDim
  • Color.disabledBackground
  • Color.disabledContent
  • Color.link
  • Color.outline
  • Color.background
  • Color.surface
  • Color.surface50
  • Color.surfaceVariant
  • Color.surfaceVariantHover
  • Color.surfaceHover
  • Color.constantDark
  • Color.constantLight
Clone this wiki locally