sub_zero_design_system library

Sub Zero 2.0 Design System

A comprehensive Flutter design system package providing responsive components, themes, tokens, and styles for building beautiful, consistent, and accessible user interfaces.

Getting Started

Add Sub Zero to your project's pubspec.yaml:

dependencies:
  sub_zero_design_system: ^1.0.0

Then import and use it in your Flutter app:

import 'package:sub_zero_design_system/sub_zero_design_system.dart';

void main() {
  runApp(MaterialApp(
    theme: SubZeroTheme.lightTheme,
    home: MyHomePage(),
  ));
}

Design Tokens

Access design tokens for colors, typography, spacing, and more:

// Using the tokens API
final primaryColor = tokens.color.primary[500];
final headingStyle = tokens.typography.h1.style;
final padding = tokens.spacing.md;

// Or use convenience exports
final color = colors.primary[500];
final space = spacing.lg;

Components

Use pre-built components following the design system:

SubZeroButton(
  label: 'Submit',
  variant: SubZeroButtonVariant.primary,
  onPressed: () => print('Pressed!'),
)

Classes

SubZeroAccordion: SubZero 2.0 Accordion component.
SubZeroAccordionSection: A single section inside SubZeroAccordion.
SubzeroActionColors: Action colors — applied to clickable elements.
SubZeroAddItem: A reusable Add Item component following the SubZero 2.0 Design System.
SubZeroAddItemConfig: Configuration for the SubZeroAddItem component.
SubZeroAvatar: A display-only avatar component following the SubZero 2.0 Design System.
SubzeroBackgroundAliasColors: Alias tokens for background colors — matches official Subzero surface spec.
SubZeroBadge: A versatile badge component following the SubZero 2.0 Design System.
SubZeroBadgeAlignment: Configuration for SubZeroBadge positioning and offset
SubZeroBinaryToggle: A binary toggle switch following SubZero 2.0 Design System.
SubZeroBottomSheetConfig: Configuration for the SubZero Bottom Sheet component.
SubZeroBottomSheetContent: Pre-built content structure matching the SubZero design system. Use this for consistent bottom sheet layouts.
SubZeroButton: A flexible, accessible button widget following the SubZero 2.0 Design System.
SubZeroButtonGroup: A container widget that arranges a set of related buttons in a horizontal row.
SubZeroCard: A versatile, self-contained card surface following the SubZero 2.0 Design System.
SubZeroCardGroup: A card group that displays multiple cards with consistent spacing.
SubZeroCardHeader: Header configuration for SubZeroCard.
SubZeroCardMedia: Media configuration for SubZeroCard.
SubZeroCarousel: A carousel/slider component that displays a series of content items with navigation controls and indicators following SubZero 2.0 Design System.
SubZeroCarouselBanner: A banner-style carousel item with full-bleed content.
SubZeroCarouselCard: A pre-built carousel item card with image, title, and description.
SubZeroCarouselConfig: Configuration for the SubZeroCarousel component.
SubZeroCarouselController: Controller for external control of the SubZeroCarousel.
SubZeroCheckbox: A customizable checkbox widget following SubZero 2.0 Design System.
SubZeroCheckboxGroup<T>: A horizontal checkbox group for displaying checkboxes in a row
SubZeroCoachMark: A tooltip-style coachmark that highlights a specific UI element.
SubZeroCoachMarkStep: Configuration for a coachmark step.
SubzeroColorRamp: A typed color ramp with numeric steps.
SubZeroColors: Subzero 2.0 (Axis Bank) Design System Colors
SubzeroColorTokens: Color tokens.
SubZeroCompactProgressTracker: A compact progress tracker that shows only indicators and connectors.
SubZeroConnectedButtonGroup: A connected button group where buttons are visually joined together.
SubzeroDataVizTokens: Data visualization tokens.
SubZeroDialog: A modal dialog widget following the SubZero 2.0 Design System.
SubZeroDialogActions: Configuration for dialog actions
SubZeroDialogContentArea: A pre-built content widget for dialogs with placeholder content area.
SubZeroDivider: A simple, standardized divider component for the SubZero Design System.
SubZeroElevation
SubzeroElevationTokens: Elevation / shadow tokens.
SubZeroFeatureTourController: A controller for managing complex feature tours with multiple steps.
SubzeroFontFamilyTokens: Font family stack.
SubzeroFontWeightTokens: Font weights.
SubZeroHeader: A responsive header component following SubZero 2.0 Design System.
SubZeroHeaderDrawer: A navigation drawer for mobile view
SubZeroHeaderNavItem: Navigation item data for header
SubZeroHeaderScaffold: A scrollable scaffold wrapper that manages header scroll state
SubZeroHorizontalCard: A horizontal card variant that displays content side-by-side.
SubZeroHorizontalDivider: A convenience widget for creating horizontal line dividers.
SubzeroIconColors: Icon color tokens.
SubZeroInlineSearch: An inline search field designed for use within headers/app bars.
SubZeroLabeledBinaryToggle: A labeled binary toggle with optional description.
SubZeroLabeledSlider: A labeled slider with value display
SubZeroLabeledSwitch: A labeled switch with optional description text.
SubZeroLabeledToggle: A labeled traditional toggle switch.
SubZeroLinearProgressTracker: A linear progress bar alternative for progress tracking.
SubZeroMultiselectConfig: Configuration for SubZeroMultiselectList
SubZeroMultiselectList<T>: A stateful multiselect list component that manages multiple checkbox selections.
SubZeroMultiselectOption<T>: Data model for a multiselect option
SubzeroNeutralAccentColors: Tinted neutral accent backgrounds from the official spec.
SubzeroNeutralColors: Gray-scale neutral palette.
SubZeroOnboardingCard: A card-style onboarding component with media area, title, description, and action buttons.
SubZeroOnboardingService: A service that manages onboarding and coachmark display logic with persistence.
SubZeroOnboardingStep: Configuration for an onboarding step.
SubzeroOverlayStateColors: Overlay and interaction state color tokens.
SubZeroProgressStep: Data model for a single step in the progress tracker.
SubZeroProgressTracker: A progress tracker component that displays a series of steps.
SubZeroProgressTrackerHeader: A circular progress header that displays the current step progress.
SubZeroRadio<T>: A customizable radio button widget following SubZero 2.0 Design System.
SubZeroRadioGroup<T>: A group of radio buttons that manages selection state.
SubZeroRadioGroupWithItems<T>: A more feature-rich radio group that accepts SubZeroRadioItem definitions.
SubZeroRadioItem<T>: A radio group item definition with value and label
SubZeroRadius
SubzeroRadiusTokens: Radius tokens.
SubZeroRangeSlider: A range slider that allows selecting a range between two values
SubZeroRemovableTagInput: An input field with removable tags, commonly used for multi-value inputs like email recipients.
SubZeroSearchField: A robust, accessible search input field following the SubZero 2.0 Design System.
SubZeroSearchSuggestion: A search suggestion item data model
SubZeroSearchSuggestionItem: A search suggestion list item following SubZero 2.0 Design System.
SubZeroSearchWithSuggestions: A search field with integrated suggestions dropdown.
SubzeroSemanticColors: Support/semantic color tokens matching the official Subzero spec.
SubzeroSemanticRamp: Semantic color group with 100/500/700 variants.
SubZeroSlider: SubZero Slider Component
SubZeroSpacing
SubzeroSpacingTokens: Spacing tokens (8px base grid).
SubZeroStatusTag: A specialized display tag for showing status with predefined styling.
SubzeroStrokeColors: Stroke/border color tokens.
SubzeroSurfaceColors: Surface colors — non-clickable backgrounds.
SubZeroSwitch: A segmented toggle switch following SubZero 2.0 Design System.
SubZeroTabBar: A simple tabs widget using Flutter's built-in TabBar with SubZero styling
SubZeroTabBarView: Convenience widget that combines SubZeroTabBar with TabBarView
SubZeroTabItem: Configuration for a single tab
SubZeroTabs: A comprehensive tab component following SubZero 2.0 Design System.
SubZeroTag: A pill-shaped tag/chip component following SubZero 2.0 Design System.
SubZeroTagGroup<T>: A container for managing a group of filter tags with single or multi-select behavior.
SubzeroTextAliasColors: Alias tokens for text colors — matches official Subzero typography spec.
SubzeroTextToken: A text token with additional behavioral hints.
SubZeroTheme
SubZeroToast: Toast utility class for showing overlay-based toast messages
SubZeroToastConfig: Configuration for toast display
SubZeroToastPreview: Standalone toast widget for use in widget trees (non-overlay) Useful for showcasing or embedding in custom layouts
SubZeroToggle: A traditional iOS-style toggle switch following SubZero 2.0 Design System.
SubZeroToggleGroup: A group of toggles for managing multiple boolean settings.
SubZeroToggleItem: Data model for toggle group items
SubZeroToggleShowcase: A showcase widget demonstrating all toggle variants and states.
SubzeroTokens: Root token tree.
SubzeroTypeScaleTokens: Type scale.
SubZeroTypography
SubzeroTypographyColors: Typography color tokens (standard, action, edge cases).
SubzeroTypographyTokens: Typography tokens.
SubZeroVerticalDivider: A convenience widget for creating vertical line dividers.

Enums

SubZeroAvatarSize: Size variants for SubZeroAvatar.
SubZeroBadgePosition: Badge position when attached to a child widget
SubZeroBadgeSize: Badge size presets
SubZeroBadgeStyle: Badge style/color variants matching the SubZero Design System
SubZeroBadgeVariant: Badge variant types
SubZeroButtonSize: Button size presets
SubZeroButtonVariant: Button variant types following SubZero 2.0 Design System
SubZeroCardElevation: Card elevation presets using SubZero elevation tokens.
SubZeroCardMediaRatio: Media aspect ratio presets following Figma specifications. All ratios are width:height (x:y).
SubZeroCheckboxSize: Size options for checkbox
SubZeroCheckboxState: Checkbox state for tristate support
SubZeroCoachMarkPosition: Position of the coachmark tooltip relative to the target element.
SubZeroDialogActionLayout: Action button layout for SubZeroDialog
SubZeroDividerOrientation: Orientation for the divider
SubZeroDividerVariant: Visual variant of the divider
SubZeroHeaderVariant: Header variants matching SubZero 2.0 Design System
SubZeroProgressTrackerOrientation: Orientation of the progress tracker.
SubZeroRadioSize: Size options for radio button
SubZeroSearchSize: Search field size presets
SubZeroStepState: State of a progress tracker step.
SubZeroSwitchLabelPosition: Position of label relative to switch
SubZeroSwitchSize: Size variants for the SubZeroSwitch component
SubZeroTabSize: Tab size options
SubZeroTabVariant: Tab variant styles matching SubZero 2.0 Design System
SubZeroTagSize: Size variants for the tag component.
SubZeroTagStatus: Status-based color options for semantic tagging.
SubZeroTagType: Tag type determines the behavior and visual style of the tag.
SubZeroTagVariant: Tag variant determines the visual appearance based on state.
SubZeroToastActionMode: Toast action mode - icon (X button) or text (ACTION button)
SubZeroToastPosition: Toast position on screen
SubZeroToastType: Toast status types
SubZeroToggleLabelPosition: Position of label relative to toggle
SubZeroToggleSize: Size variants for the SubZeroBinaryToggle component
SubZeroToggleState: State variants for visual representation

Extensions

AvatarInitialsExtension on String: Extension for generating initials from a full name.
SubZeroBadgeExtension on Widget: Extension to easily wrap any widget with a badge
SubZeroBottomSheetExtension on BuildContext: Extension to easily show SubZero bottom sheet from any widget.

Constants

colors → const SubzeroColorTokens: Subzero 2.0 (Axis Bank) Design Tokens
dataviz → const SubzeroDataVizTokens: Convenience export: data visualization tokens.
elevation → const SubzeroElevationTokens: Convenience export: elevation/shadow tokens.
radius → const SubzeroRadiusTokens: Convenience export: radius tokens.
spacing → const SubzeroSpacingTokens: Convenience export: spacing tokens.
tokens → const SubzeroTokens: Root token tree.
typography → const SubzeroTypographyTokens: Convenience export: typography tokens.

Functions

showSubZeroAlertDialog({required BuildContext context, required String title, String? body, String dismissLabel = 'OK', bool useFlushedButton = false, IconData? trailingIcon}) → Future<void>: An alert dialog helper for informational messages.
showSubZeroBottomSheet<T>({required BuildContext context, required WidgetBuilder builder, SubZeroBottomSheetConfig config = const SubZeroBottomSheetConfig()}) → Future<T?>: Shows a SubZero styled modal bottom sheet (mobile) or dialog (desktop).
showSubZeroConfirmDialog({required BuildContext context, required String title, String? body, String confirmLabel = 'Confirm', String cancelLabel = 'Cancel', bool barrierDismissible = true}) → Future<bool?>: A confirmation dialog helper that returns true/false.
showSubZeroDialog<T>({required BuildContext context, required String title, String? subtitle, String? body, Widget? content, SubZeroDialogActions? actions, SubZeroDialogActionLayout actionLayout = SubZeroDialogActionLayout.sideBySide, Widget? customActions, bool barrierDismissible = true, double? maxWidth, EdgeInsets? contentPadding}) → Future<T?>: Shows a SubZero-styled modal dialog.
showSubZeroFullScreenSearch({required BuildContext context, String hintText = 'Search here', List<String> recentSearches = const [], Future<List<SubZeroSearchSuggestion>> onSearch(String query)?, bool showMicrophone = true, VoidCallback? onMicrophoneTap}) → Future<String?>: Shows a full-screen search modal following SubZero 2.0 Design System.
showSubZeroOnboardingDialog({required BuildContext context, required List<SubZeroOnboardingStep> steps, String? badgeLabel, VoidCallback? onComplete, VoidCallback? onSkip, bool barrierDismissible = false}) → Future<bool>: Shows a multi-step onboarding dialog.

sub_zero_design_system library

Getting Started

Design Tokens

Components

Classes

Enums

Extensions

Constants

Functions

sub_zero_design_system package

sub_zero_design_system library