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.