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.

Features

• 🎨 Design Tokens - Centralized color palette, typography, spacing, radius, and elevation values
• 🧩 20+ UI Components - Pre-built, customizable components following the design system
• 🌓 Theme Support - Light theme with easy customization
• ♿ Accessibility - WCAG AA compliant color contrasts and accessible components
• 📱 Responsive - Components adapt to different screen sizes
• 📊 Data Visualization - Color palettes optimized for charts and graphs

Installation

Add Sub Zero to your pubspec.yaml:

dependencies:
  sub_zero_design_system: ^1.0.0

Then run:

flutter pub get

Quick Start

Using the Theme

Apply the Sub Zero theme to your app:

import 'package:sub_zero_design_system/sub_zero_design_system.dart';

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

Using Design Tokens

Access design tokens for consistent styling:

import 'package:sub_zero_design_system/sub_zero_design_system.dart';

// Colors
final primaryColor = SubZeroColors.primary;
final backgroundColor = SubZeroColors.background;

// Or use the tokens API for more options
final brandColor = tokens.color.primary[500];
final textColor = tokens.color.text.primary;

// Spacing
final padding = SubZeroSpacing.md; // 16.0
final largeGap = spacing.lg; // 24.0

// Typography
final headingStyle = tokens.typography.h1.style;

// Border Radius
final cardRadius = SubZeroRadius.medium;

// Elevation
final cardShadow = SubZeroElevation.level2;

Using Components

import 'package:sub_zero_design_system/sub_zero_design_system.dart';

// Button
SubZeroButton(
  label: 'Submit',
  variant: SubZeroButtonVariant.primary,
  size: SubZeroButtonSize.medium,
  onPressed: () => print('Pressed!'),
)

// Card
SubZeroCard(
  child: Text('Card content'),
)

// Badge
SubZeroBadge(
  label: 'New',
  variant: SubZeroBadgeVariant.success,
)

// Avatar
SubZeroAvatar(
  imageUrl: 'https://example.com/avatar.jpg',
  name: 'John Doe',
  size: SubZeroAvatarSize.medium,
)

Components

Sub Zero includes the following components:

Component	Description
SubZeroAccordion	Expandable/collapsible content sections
SubZeroAddItem	Add item button with icon
SubZeroAvatar	User avatar with image or initials
SubZeroBadge	Status badges and labels
SubZeroBottomSheet	Modal bottom sheet
SubZeroButton	Primary, secondary, tertiary, and icon buttons
SubZeroCard	Content container with elevation
SubZeroCarousel	Image/content carousel slider
SubZeroCheckbox	Checkbox input
SubZeroDialog	Modal dialog
SubZeroDivider	Content divider line
SubZeroHeader	Page/section headers
SubZeroOnboarding	Onboarding flow screens
SubZeroProgressTracker	Step progress indicator
SubZeroRadio	Radio button input
SubZeroSearch	Search input field
SubZeroSlider	Range slider input
SubZeroSwitch	Toggle switch input
SubZeroTabs	Tab navigation
SubZeroTag	Categorization tags
SubZeroToast	Toast notifications
SubZeroToggle	Button group toggle

Design Tokens

Colors

// Brand Colors
SubZeroColors.primary      // #97144D - Deep Burgundy
SubZeroColors.secondary    // #2E2E2E - Dark Charcoal
SubZeroColors.accent       // #E31837 - Brighter Red

// Semantic Colors
SubZeroColors.success      // #28A745
SubZeroColors.warning      // #FFC107
SubZeroColors.error        // #DC3545
SubZeroColors.info         // #17A2B8

// Neutral Colors
SubZeroColors.background
SubZeroColors.surface
SubZeroColors.textPrimary
SubZeroColors.textSecondary
SubZeroColors.border

Typography

The design system uses Inter font family with the following scale:

• Display: Large, Medium, Small
• Headline: Large, Medium, Small
• Title: Large, Medium, Small
• Body: Large, Medium, Small
• Label: Large, Medium, Small

Spacing

SubZeroSpacing.xs    // 4.0
SubZeroSpacing.sm    // 8.0
SubZeroSpacing.md    // 16.0
SubZeroSpacing.lg    // 24.0
SubZeroSpacing.xl    // 32.0
SubZeroSpacing.xxl   // 48.0
SubZeroSpacing.xxxl  // 64.0

Border Radius

SubZeroRadius.xs     // 4.0
SubZeroRadius.sm     // 8.0
SubZeroRadius.md     // 12.0
SubZeroRadius.lg     // 16.0
SubZeroRadius.xl     // 24.0
SubZeroRadius.pill   // 100.0

Elevation

SubZeroElevation.none
SubZeroElevation.level1  // Subtle shadow
SubZeroElevation.level2  // Default card shadow
SubZeroElevation.level3  // Elevated shadow
SubZeroElevation.level4  // Modal/overlay shadow

Example

Check out the example directory for a complete showcase app demonstrating all components and design tokens.

cd example
flutter run

Contributing

Contributions are welcome! Please read our contributing guidelines before submitting a pull request.

License

This project is licensed under the MIT License - see the LICENSE file for details.