> ## Documentation Index
> Fetch the complete documentation index at: https://neo.tvk.company/llms.txt
> Use this file to discover all available pages before exploring further.

# Design Tokens

> Neo's design tokens provide a systematic approach to consistent visual design across your application.

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

<ParamField path="NeoColorTokens" type="Class">
  Contains all color definitions organized by purpose and context. Access via `theme.colors`.
</ParamField>

**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

<ParamField path="NeoButtonColorTokens" type="Class">
  Per-variant fills, foregrounds, and interaction colors for `NeoButton`. Access via `theme.buttonColors`.
</ParamField>

* `primaryBg` / `primaryFg` / `primaryBgInteraction`
* `secondaryTertiaryBgInteraction`

### Checkbox Color Tokens

<ParamField path="NeoCheckboxColorTokens" type="Class">
  Fill, border, and foreground tokens for `NeoCheckbox`. Access via `theme.checkboxColors`.
</ParamField>

### Spacing Tokens

<ParamField path="NeoSpacingTokens" type="Class">
  Consistent spacing values for layouts and component padding.
</ParamField>

* `extraSmall`
* `small`
* `medium`
* `large`
* `extraLarge`

### Border Radius Tokens

<ParamField path="NeoRadiusTokens" type="Class">
  Corner radius values that maintain visual consistency. Access via `theme.radii`.
</ParamField>

* `extraSmall`
* `small`
* `medium`
* `large`
* `full`

### Shadow Tokens

<ParamField path="NeoShadowTokens" type="Class">
  Elevation and depth definitions for components and overlays. Access via `theme.shadows`.
</ParamField>

* `extraSmall`
* `small`
* `medium`

### Typography Tokens

<ParamField path="NeoTextStyleTokens" type="Class">
  Complete type scale for clear information hierarchy.
</ParamField>

* `header1`
* `header2`
* `header3`
* `header4`
* `body1`
* `body2`
* `label`
* `button`
* `code`

### Duration Tokens

<ParamField path="NeoDurationTokens" type="Class">
  Animation durations for consistent timing and smooth interactions. Uses semantic values for flexible use across different components.
</ParamField>

* `short`
* `medium`
* `long`

## Using Design Tokens

Access design tokens through the `neoCurrentThemeProvider`:

<CodeGroup>
  ```dart Accessing Tokens lines theme={null}
  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,
          ),
        ),
      );
    }
  }
  ```
</CodeGroup>

## 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