Skip to main content
Design tokens are the foundation of Neo’s theming system. They provide named references to design decisions like colors, spacing, typography, and animations, ensuring consistency across your application while maintaining flexibility for customization.

​
Token Categories

Neo organizes design tokens into six main categories:

​
Color Tokens

​
NeoColorTokens
Class
Contains all color definitions organized by purpose and context.
Foreground Colors:
  • fgBrand
  • fgOnBrand
  • fgPrimary
  • fgSecondary
  • fgOnContrast
Background Colors:
  • bgBrand
  • bgBrandHover
  • bgPrimary
  • bgSecondary
  • bgSecondaryHover
  • bgContrast
Border Colors:
  • borderPrimary
  • borderSecondary
  • borderTertiary
Semantic Colors:
  • success / onSuccess
  • warning / onWarning
  • danger / dangerHover / dangerPressed / onDanger
Button-Specific Colors:
  • buttonBg / buttonBgHover / buttonBgPressed
  • buttonFg

​
Spacing Tokens

​
NeoSpacingTokens
Class
Consistent spacing values for layouts and component padding.
  • extraSmall
  • small
  • medium
  • large
  • extraLarge

​
Border Radius Tokens

​
NeoRadiusTokens
Class
Corner radius values that maintain visual consistency.
  • none
  • small
  • medium
  • large
  • full

​
Shadow Tokens

​
NeoShadowTokens
Class
Elevation and depth definitions for components and overlays.
  • small
  • medium

​
Typography Tokens

​
NeoTextStyleTokens
Class
Complete type scale for clear information hierarchy.
  • header1
  • header2
  • header3
  • header4
  • body1
  • body2
  • label
  • button
  • code

​
Duration Tokens

​
NeoDurationTokens
Class
Animation durations for consistent timing and smooth interactions.
  • pressed
  • hover
  • sidebar
  • toggleSwitch
  • dropdown

​
Using Design Tokens

Access design tokens through the neoCurrentThemeProvider: 
class MyWidget extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final theme = ref.watch(neoCurrentThemeProvider);
    
    return Container(
      padding: EdgeInsets.all(theme.spacings.medium),
      decoration: BoxDecoration(
        color: theme.colors.bgSecondary,
        borderRadius: BorderRadius.circular(theme.radii.medium),
        border: Border.all(color: theme.colors.borderSecondary),
        boxShadow: [theme.shadows.small],
      ),
      child: Text(
        "Design Token Example",
        style: theme.textStyles.body1.copyWith(
          color: theme.colors.fgPrimary,
        ),
      ),
    );
  }
}

​
Benefits

  • Consistency: Ensures visual harmony across your application
  • Maintainability: Update designs by changing token values, not individual components
  • Scalability: Easy to maintain consistent design at any application size
  • Flexibility: Switch between light/dark themes or completely different brand themes
  • Developer Experience: Clear, semantic names make code more readable
⌘I