Palettes

Palettes are collections of color definitions that form the foundation of your theming system. Neo provides a built-in NeoPalette, and you can create custom palettes for your specific brand needs.

NeoPalette

Class

Neo’s compact color palette with semantic and mode-specific pigments.

Brand & Semantic:

brand
red
green
yellow

Mode Pigments:

lightBlack — light-mode ink
lightWhite — light-mode surface
darkBlack — dark-mode surface
darkWhite — dark-mode ink

Absolute Colors:

pureBlack
pureWhite
transparent
nullSafety

Custom Brand Colors

Most applications use Neo’s default palette but customize brand colors. Create your own brand palette:

Creating Your Brand Palette

import 'package:flutter/widgets.dart';

class MyAppPalette {
  static const Color brand = Color(0xFF6366F1);
  static const Color brandStrong = Color(0xFF4F46E5);
  static const Color brandDeep = Color(0xFF4338CA);
}

Using Brand Colors in Themes

Once you’ve created your brand palette, you can use it in your custom themes. See the Custom Themes page for complete examples of creating and using custom themes with your brand colors.

Best Practices

Most apps only need to replace brand.
Keep Neo’s semantic colors and mode pigments unless the brand needs its own.
Name shared tokens brand and red, not brand500.
Add extra shades only when a state needs a different color from the base.

Getting Started

AI

Widgets

Layouts

Theming

Utilities

NeoPalette

Custom Brand Colors

Creating Your Brand Palette

Using Brand Colors in Themes

Best Practices

​NeoPalette

​Custom Brand Colors

​Creating Your Brand Palette

​Using Brand Colors in Themes

​Best Practices

NeoPalette

Custom Brand Colors

Creating Your Brand Palette

Using Brand Colors in Themes

Best Practices