Summary

Design tokens are transformed into CSS variables and utility classes, providing a scalable and consistent way to apply styles across the system.

Summary

  • Nova Tycho provides intentional color classes grouped into meaningful clusters.
  • Intentional tokens are exposed as CSS variables and Tailwind utility classes.
  • Supports multiple front-end frameworks (Blazor, Web Components, Angular, React, Vue).
  • Ensures design consistency while allowing customization and theme adaptability.
  • It includes inverted tokens for content and level clusters, which are useful for footers and special content sections.
  • Provides structured interaction tokens to create custom interactive components with distinct container and link styles.
  • Branded containers use the theme’s interactive color (orange in Spark, petrol in Ocean), while neutral containers provide a gray-based interactive button.
  • Feedback tokens are categorized by communication purpose (information, warning, error, neutral, success) and are available in high-contrast and low-contrast options.

Use these classes and tokens to create accessible, scalable, unified UI experiences with Nova Tycho.