Design Tokens

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

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

Class

Per-variant fills, foregrounds, and interaction colors for NeoButton. Access via theme.buttonColors.

primaryBg / primaryFg / primaryBgInteraction
secondaryTertiaryBgInteraction

Checkbox Color Tokens

Class

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

Spacing Tokens

Class

Consistent spacing values for layouts and component padding.

extraSmall
small
medium
large
extraLarge

Border Radius Tokens

Class

Corner radius values that maintain visual consistency. Access via theme.radii.

extraSmall
small
medium
large
full

Shadow Tokens

Class

Elevation and depth definitions for components and overlays. Access via theme.shadows.

extraSmall
small
medium

Typography Tokens

Class

Complete type scale for clear information hierarchy.

header1
header2
header3
header4
body1
body2
label
button
code

Duration Tokens

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

Getting Started

AI

Neo CLI

Widgets

Layouts

Theming

Utilities

Design Tokens

Token Categories

Color Tokens

Button Color Tokens

Checkbox Color Tokens

Spacing Tokens

Border Radius Tokens

Shadow Tokens

Typography Tokens

Duration Tokens

Using Design Tokens

Benefits

​Token Categories

​Color Tokens

​Button Color Tokens

​Checkbox Color Tokens

​Spacing Tokens

​Border Radius Tokens

​Shadow Tokens

​Typography Tokens

​Duration Tokens

​Using Design Tokens

​Benefits

Token Categories

Color Tokens

Button Color Tokens

Checkbox Color Tokens

Spacing Tokens

Border Radius Tokens

Shadow Tokens

Typography Tokens

Duration Tokens

Using Design Tokens

Benefits