pp-nm-app-constants v1.0.0

PP-NM-APP-CONSTANTS

Repository created for handling Design Tokens.

Design Tokens

"These central and tiny pieces of UI information will be used across several platform during the conception of a digital product. They’re called: design tokens." https://uxdesign.cc/design-tokens-for-dummies-8acebf010d71

Naming convention

To define new tokens should be used CTI convention. CTI - Category Type Item. Also it can be a bit modified to CT or CTIS (add Item and State). Basically should be used CT (Category Type).

Category

Category can be:

• color
• font
• size

Type

Type can be:

• (for color) brand, background, text, border
• (for font) size, letter-spacing, line-height, weight, family
• (for size) spacing, border-radius

Item (optional)

Item can be any component name to which token should be applied. Button, avatar, progressbar, etc.

State (optional)

State of the component. Base, active, disabled, etc.

Design Tokens Examples

• color.background.green
• color.brand.green
• size.spacing.large
• size.radius.large
• color.brand.red
• color.background.dark-grey
• color.background.button.disabled