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. Access via theme.colors.
Brand:
  • brand
  • fgOnBrand
Foreground Colors:
  • fgPrimary
  • fgSecondary
Background Colors:
  • bgPrimary
  • bgSecondary
Border Colors: borderPrimary, borderSecondary, and borderTertiary are alpha-on-ink values (100% / 20% / 10% on black in light mode and white in dark mode). They blend with whatever surface sits behind them — verify appearance when drawing borders on non-default backgrounds.
  • borderPrimary
  • borderSecondary
  • borderTertiary
Semantic Colors:
  • success / onSuccess
  • warning / onWarning
  • danger / onDanger

​
Button Color Tokens

​
NeoButtonColorTokens
Class
Per-variant fills, foregrounds, and interaction colors for NeoButton. Access via theme.buttonColors.
  • primaryBg / primaryFg / primaryBgInteraction
  • secondaryTertiaryBgInteraction

​
Checkbox Color Tokens

​
NeoCheckboxColorTokens
Class
Fill, border, and foreground tokens for NeoCheckbox. Access via theme.checkboxColors.

​
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. Access via theme.radii.
  • extraSmall
  • small
  • medium
  • large
  • full

​
Shadow Tokens

​
NeoShadowTokens
Class
Elevation and depth definitions for components and overlays. Access via theme.shadows.
  • extraSmall
  • 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. Uses semantic values for flexible use across different components.
  • short
  • medium
  • long

​
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: .all(theme.spacings.medium),
      decoration: BoxDecoration(
        color: theme.colors.bgSecondary,
        borderRadius: .circular(theme.radii.medium),
        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
Last modified on May 10, 2026