Design tokens are the foundation of Sistent's design system. They are named values that store visual design attributes like colors, spacing, and typography scales. Instead of hardcoding values like #00B39F or 16px, you reference semantic tokens that automatically adapt to different themes and contexts.

All design tokens are available through the theme object using the useTheme hook:

Sistent uses Layer5's brand colors as the foundation, with additional semantic colors for UI states.

Typography tokens provide consistent text styling across all components.

Sistent uses an 8px-based spacing system. All spacing values are multiples of 8px for consistent layouts.

Here's how to use multiple token categories together in real components:

Implementation Guidelines

• Always use tokens instead of hardcoded values for maintainable code
• Tokens automatically adapt to light/dark themes without additional configuration
• Use useTheme() hook to access all available design tokens
• Prefer semantic color names (primary, error) over specific hex values
• Follow the 8px spacing grid system for consistent visual rhythm
• Test components in both light and dark themes to ensure proper contrast