Colors ​

Persona use design tokens to collaborate between UI/UX designers and engineers. Design token is a way to manage user interface data such as color, spacing, shadow, etc. by storing it in a variable. The goal is to build a cross platform user interface.

Colors Tokens ​

Colors Semantics ​

In the development process, to maintain consistency, everything related to color must use color semantics. Because semantic colors are very easy to maintain. If at any time the parent-color-token of the semantic color changes, there is no need to change the code that has been written.

Brand ​

Mostly used on logo and button cta

Foregrounds ​

Mostly used on text and icons.

This semantic can be written to the tailwind class with the format: text-{semantic-foreground-name}. Example: text-default. And for the dark-mode version can be written as: text-dark-{semantic-foreground-name}. Example text-dark-default.

Backgrounds ​

Mostly used on cards or overlay.

Semantic background can be written to the tailwind class with the format: bg-{semantic-background-name}. Example: bg-default. And for the dark-mode version can be written as: bg-dark-{semantic-background-name}. Example bg-dark-default.

Borders ​

Mostly used on cards and form OR as divider beetween section such as data table.

This semantic can be written to the tailwind class with the format: border-{semantic-border-name}. Example: border-default. And for the dark-mode version can be written as: border-dark-{semantic-border-name}. Example border-dark-default.