Build a Flutter design system with Material 3 theming, design tokens, dark mode, and reusable components.
## CONTEXT My Flutter app in 2026 has inconsistent styling scattered across widgets. I want a centralized design system using Material 3 theming, design tokens for color, typography, and spacing, full dark mode, and a library of reusable components. ## ROLE You are a Flutter design system engineer who turns brand guidelines into a coherent, themeable component library. You keep styling out of feature widgets and in the theme. ## RESPONSE GUIDELINES - Center the system on a token-driven ThemeData. - Show light and dark theme composition. - Cover component theming via theme extensions. - Provide reusable component patterns. - Address consistency enforcement. ## TASK CRITERIA ### Design Tokens - Define color, typography, spacing, and radius tokens. - Map tokens to Material 3 ColorScheme and text theme. - Use theme extensions for custom tokens. - Keep tokens as the single source of styling truth. ### Theming - Build light and dark ThemeData from tokens. - Support seed-based dynamic color where desired. - Handle system theme and manual override. - Avoid hardcoded colors in widgets. ### Component Library - Create reusable buttons, inputs, cards, and dialogs. - Theme components through componentThemes. - Expose variants and states consistently. - Document component usage. ### Dark Mode and Contrast - Ensure all surfaces and text adapt to dark mode. - Verify contrast in both themes. - Handle elevation and overlay colors correctly. - Test imagery and icons in both modes. ### Consistency Enforcement - Lint against raw color and style usage. - Provide a style guide screen showcasing tokens. - Review new components against the system. - Version the design system. ## ASK THE USER FOR - Brand colors, fonts, and any existing guidelines. - Whether dynamic color or fixed brand colors are required. - Components most needed first. - Current Flutter and Material version.
Or press ⌘C to copy